/* global React, window */
// Create-ad entry-point modal (round 4). Fired from the «+ 创建广告创意»
// button on Radar and Overview. Lets the user pick between:
//   - Talk to Raya in the Playground (recommended), or
//   - Manual configuration via Image Ads.
// The Raya path can be entered with a pre-filled prompt scaffold.

const { useState } = React;

function CreateAdModal({ open, onClose, onPickRaya, onPickManual }) {
  const t = window.useT();
  const { Icon } = window;

  if (!open) return null;

  return (
    <div
      style={{
        position: "fixed", inset: 0,
        background: "rgba(26, 20, 16, 0.45)",
        zIndex: 220,
        display: "grid", placeItems: "center",
        padding: 24,
        animation: "raya-modal-fade 0.2s ease-out",
      }}
      onClick={onClose}
    >
      <style>{`
        @keyframes raya-modal-fade {
          from { opacity: 0; }
          to   { opacity: 1; }
        }
        @keyframes raya-modal-slide {
          from { opacity: 0; transform: translateY(8px) scale(0.98); }
          to   { opacity: 1; transform: translateY(0) scale(1); }
        }
      `}</style>
      <div
        onClick={e => e.stopPropagation()}
        style={{
          width: 580, maxWidth: "100%",
          background: "var(--card)",
          border: "1px solid var(--rule-strong)",
          borderRadius: 10,
          boxShadow: "0 30px 80px rgba(26, 20, 16, 0.28)",
          padding: "26px 28px 22px",
          animation: "raya-modal-slide 0.28s ease-out",
        }}
      >
        <div className="label" style={{ color: "var(--accent)", marginBottom: 8 }}>
          {t("New ad creative", "新建广告创意")}
        </div>
        <div className="t-h1" style={{ fontSize: 24, marginBottom: 6, lineHeight: 1.25 }}>
          {t("How do you want to create?", "怎么创建?")}
        </div>
        <p style={{ fontSize: 13.5, color: "var(--ink-2)", lineHeight: 1.6, marginTop: 0, marginBottom: 18 }}>
          {t(
            "Two paths. Raya can handle the whole chain — research, generate, push to Meta — from one sentence. Or configure each step manually if you already know exactly what you want.",
            "两条路。Raya 一句话搞定整条链 —— 调数据、出变体、推到 Meta。或者你已经明确知道要什么的话,自己一步步配也行。"
          )}
        </p>

        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          {/* Option A — Raya (primary, larger, with chip) */}
          <button
            onClick={() => onPickRaya("")}
            style={{
              textAlign: "left",
              padding: "16px 18px",
              background: "linear-gradient(135deg, var(--accent-tint) 0%, var(--card) 100%)",
              border: "1.5px solid var(--accent)",
              borderRadius: 8,
              cursor: "pointer",
              display: "flex",
              gap: 14,
              alignItems: "flex-start",
              transition: "transform .15s, box-shadow .15s",
              fontFamily: "inherit",
            }}
            onMouseEnter={e => { e.currentTarget.style.transform = "translateY(-1px)"; e.currentTarget.style.boxShadow = "0 6px 20px rgba(209, 74, 31, 0.18)"; }}
            onMouseLeave={e => { e.currentTarget.style.transform = "translateY(0)"; e.currentTarget.style.boxShadow = "none"; }}
          >
            <div
              style={{
                width: 40, height: 40, borderRadius: "50%",
                background: "var(--accent)", color: "var(--accent-ink)",
                display: "grid", placeItems: "center",
                fontFamily: "Source Serif 4, Georgia, serif",
                fontWeight: 700, fontSize: 19, fontStyle: "italic",
                flexShrink: 0,
              }}
            >R</div>
            <div style={{ minWidth: 0, flex: 1 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 4 }}>
                <span className="t-h3" style={{ fontSize: 16, color: "var(--ink)" }}>
                  {t("Talk to Raya", "跟 Raya 对话")}
                </span>
                <span className="mono" style={{ fontSize: 9, padding: "1px 6px", background: "var(--accent)", color: "var(--accent-ink)", borderRadius: 2, letterSpacing: ".08em", fontWeight: 600 }}>
                  {t("RECOMMENDED · HOT", "推荐 · HOT")}
                </span>
              </div>
              <div style={{ fontSize: 12.5, color: "var(--ink-2)", lineHeight: 1.55 }}>
                {t(
                  "One sentence: «3 variants of my top coffee ad for Gen-Z, urgency tone, ship by Friday.» Raya pulls your data, generates the variants, and pushes the winner to Meta — you say yes or no.",
                  "一句话:「把我最强的咖啡广告出 3 个 Gen-Z 改版,紧迫感语气,周五前上线」。Raya 调数据、出变体、推到 Meta —— 你只管说 yes / no。"
                )}
              </div>
            </div>
            <Icon name="arrow" size={16} />
          </button>

          {/* Option B — Manual (secondary) */}
          <button
            onClick={onPickManual}
            style={{
              textAlign: "left",
              padding: "14px 18px",
              background: "var(--card)",
              border: "1px solid var(--rule-strong)",
              borderRadius: 8,
              cursor: "pointer",
              display: "flex",
              gap: 14,
              alignItems: "flex-start",
              transition: "background .15s, border-color .15s",
              fontFamily: "inherit",
            }}
            onMouseEnter={e => { e.currentTarget.style.background = "var(--bg-deep)"; e.currentTarget.style.borderColor = "var(--ink-3)"; }}
            onMouseLeave={e => { e.currentTarget.style.background = "var(--card)"; e.currentTarget.style.borderColor = "var(--rule-strong)"; }}
          >
            <div
              style={{
                width: 36, height: 36, borderRadius: 4,
                background: "var(--bg-deep)", color: "var(--ink-2)",
                display: "grid", placeItems: "center",
                flexShrink: 0,
                border: "1px solid var(--rule)",
              }}
            >
              <Icon name="columns" size={16} />
            </div>
            <div style={{ minWidth: 0, flex: 1 }}>
              <div style={{ fontSize: 15, fontWeight: 600, color: "var(--ink)", marginBottom: 3 }}>
                {t("Configure manually", "手动配置")}
              </div>
              <div style={{ fontSize: 12, color: "var(--ink-3)", lineHeight: 1.5 }}>
                {t(
                  "Jumps to Image Ads. You upload the asset, write the copy, set targeting yourself. Slower, but full control.",
                  "跳到「图片广告」。素材自己传、文案自己写、定向自己配。慢一点,但全权由你。"
                )}
              </div>
            </div>
            <Icon name="arrow" size={14} />
          </button>
        </div>

        <div style={{
          marginTop: 18, paddingTop: 14,
          borderTop: "1px solid var(--rule)",
          display: "flex", justifyContent: "space-between", alignItems: "center",
          gap: 10,
        }}>
          <span className="mono" style={{ fontSize: 10, color: "var(--ink-3)", letterSpacing: ".04em" }}>
            {t("Esc to cancel", "按 Esc 取消")}
          </span>
          <button className="btn ghost sm" onClick={onClose}>
            {t("Cancel", "取消")}
          </button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { CreateAdModal });