/* eslint-disable */
// App shell — top bar + editor + preview

const DEFAULT_STATE = {
  name: "春季限定 88 折 · 全會員推播",
  status: "draft",
  brand: {
    name: "Aurora Coffee 極光咖啡",
    avatar: "https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?w=200&q=60",
  },
  type: "rich",
  text: "嗨 {{name}},您專屬的春季 88 折優惠碼是 {{code}}!\n\n4/30 前一次補滿春日新品,點下方按鈕直接到結帳頁。",
  card: {
    title: "🌸 春季限定 88 折",
    desc: "嗨 {{name}},全店任選兩件再享 88 折。優惠碼自動套用、領取後 30 天內皆可使用,結帳前不必再輸入。",
    mediaPreset: "coffee",
    mediaHeight: "",
    actions: [
      { type: "url", label: "立即購物", target: "https://shop.aurora.coffee/spring" },
      { type: "reply", label: "查看完整菜單", target: "menu" },
      { type: "map", label: "找最近門市", target: "nearest" },
    ],
  },
  cards: [
    {
      title: "經典拿鐵 · NT$120",
      desc: "雙倍義式濃縮搭配絲滑奶泡,溫順回甘的入門選擇。",
      mediaPreset: "coffee",
      actions: [{ type: "url", label: "加入購物車", target: "https://shop.aurora.coffee/latte" }],
    },
    {
      title: "燕麥拿鐵 · NT$140",
      desc: "100% 燕麥奶,純素友善,溫和不負擔。",
      mediaPreset: "ramen",
      actions: [{ type: "url", label: "加入購物車", target: "https://shop.aurora.coffee/oat" }],
    },
    {
      title: "冰滴黑咖啡 · NT$160",
      desc: "12 小時冰滴萃取,單一產區莊園豆,風味乾淨明亮。",
      mediaPreset: "watch",
      actions: [{ type: "url", label: "加入購物車", target: "https://shop.aurora.coffee/colddrip" }],
    },
  ],
  media: {
    kind: "image",
    preset: "headphones",
    url: "",
    caption: "新品上市 — 點圖看詳細介紹",
  },
  replies: [
    { type: "reply", label: "我有興趣", target: "interested" },
    { type: "reply", label: "稍後再說", target: "later" },
    { type: "url", label: "瀏覽全部", target: "https://shop.aurora.coffee" },
  ],
  schedule: {
    mode: "now",
    sendAt: "2026-05-21T10:00",
    timezone: "Asia/Taipei",
    quietHours: true,
  },
  recipient: {
    segment: "VIP 會員 + 過去 30 天活躍",
    count: 4823,
    previewName: "陳小美",
    tags: ["VIP 會員", "30 天活躍", "已驗證手機"],
  },
  ab: {
    enabled: true,
    split: 50,
    variantB: {
      text: "{{name}},不要錯過春季 88 折!立即領取限時優惠碼 {{code}},現省 12%。",
    },
  },
};

function ToolbarLeft({ state, set }) {
  return (
    <>
      <div className="tb-crumbs">
        <span>行銷活動</span><span className="sep">/</span><span className="current">建立新活動</span>
      </div>
      <div style={{ width: 1, height: 18, background: "var(--rh-border)" }} />
      <div className="tb-title-row">
        <input
          className="tb-title-input"
          value={state.name}
          onChange={(e) => set({ name: e.target.value })}
          style={{ width: Math.min(360, Math.max(240, (state.name?.length || 8) * 11)) }}
        />
        <span className={"status-chip " + state.status}>
          <span className="dot" />
          {state.status === "draft" ? "草稿" : state.status === "live" ? "進行中" : "已排程"}
        </span>
        <span style={{ fontSize: 11, color: "var(--rh-fg-muted)", fontWeight: 600 }}>
          <I.ClockIcon size={11} style={{ verticalAlign: "-1px", marginRight: 3 }} />
          已自動儲存 · 2 秒前
        </span>
      </div>
    </>
  );
}

function ToolbarActions({ state, onSend }) {
  return (
    <div className="tb-actions">
      <button className="btn btn-ghost btn-sm"><I.Eye size={13} /> 預覽全部</button>
      <button className="btn btn-outline btn-sm">儲存草稿</button>
      <button className="btn btn-yellow btn-sm">
        <I.Calendar size={13} /> 排程發送
      </button>
      <button className="btn btn-primary btn-sm" onClick={onSend}>
        <I.Send size={13} /> 立即發送
      </button>
    </div>
  );
}

function EditorPanel({ state, set }) {
  const setBrand = (v) => set({ brand: { ...state.brand, ...v } });
  const setCard = (v) => set({ card: v });
  const setCards = (v) => set({ cards: v });
  const setMedia = (v) => set({ media: v });
  const setReplies = (v) => set({ replies: v });
  const setSchedule = (v) => set({ schedule: { ...state.schedule, ...v } });
  const setRecipient = (v) => set({ recipient: { ...state.recipient, ...v } });
  const setAb = (v) => set({ ab: { ...state.ab, ...v } });

  return (
    <div className="editor">
      {/* Brand */}
      <div className="section">
        <SectionHead icon={I.Shield} title="寄件者品牌 / Sender" sub="顯示在收件人對話框最上方"
          meta={<span className="tag-pill green"><I.Check size={10} /> 已驗證</span>} />
        <div className="section-body" style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 14, alignItems: "center" }}>
          <div className="chat-head" style={{ padding: 0, border: 0, background: "transparent" }}>
            <div className="avatar">
              <img src={state.brand.avatar} alt="" />
              <span className="verified"><I.Check size={9} /></span>
            </div>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
            <Field label="品牌名稱 / Brand name">
              <input className="input" value={state.brand.name} onChange={(e) => setBrand({ name: e.target.value })} />
            </Field>
            <Field label="代理人 ID / Agent ID" hint="自動帶入">
              <input className="input" value="aurora_coffee_tw_001" readOnly style={{ background: "var(--rh-bg)", color: "var(--rh-fg-muted)" }} />
            </Field>
          </div>
        </div>
      </div>

      {/* Type */}
      <div className="section">
        <SectionHead icon={I.MessageSquare} title="訊息類型 / Message type" sub="選擇要傳送的 RCS 訊息格式" />
        <div className="section-body">
          <div className="type-tabs">
            {MESSAGE_TYPES.map((m) => (
              <button key={m.id}
                className={"type-tab" + (state.type === m.id ? " active" : "")}
                onClick={() => set({ type: m.id })}>
                <div className="tt-icon"><m.icon size={14} /></div>
                <div>
                  <div className="tt-label">{m.label}</div>
                  <div className="tt-sub">{m.en}</div>
                </div>
              </button>
            ))}
          </div>
        </div>
      </div>

      {/* Content */}
      <div className="section">
        <SectionHead icon={I.Type} title="內容編輯 / Content"
          sub={MESSAGE_TYPES.find((m) => m.id === state.type)?.en}
          meta={<span style={{ fontSize: 11, fontWeight: 700, color: "var(--rh-fg-muted)" }}>
            <I.Sparkles size={11} style={{ verticalAlign: -1, marginRight: 3 }} />
            支援個人化變數
          </span>} />
        <div className="section-body">
          {state.type === "text" && <TextEditor state={state} set={set} />}
          {state.type === "rich" && <RichCardEditor card={state.card} onChange={setCard} />}
          {state.type === "carousel" && <CarouselEditor cards={state.cards} onChange={setCards} />}
          {state.type === "media" && <MediaEditor media={state.media} onChange={setMedia} />}
        </div>
      </div>

      {/* Quick replies — always available */}
      {(state.type === "text" || state.type === "media") && (
        <div className="section">
          <SectionHead icon={I.Reply} title="互動按鈕 / Suggested actions"
            sub="顯示在訊息下方,使用者點擊即可回覆或開啟連結" />
          <div className="section-body">
            <ActionsEditor
              items={state.replies}
              onChange={setReplies}
              max={11}
              title=""
              desc="最多 11 個 — 建議 3-5 個避免過於擁擠"
            />
          </div>
        </div>
      )}

      {/* Recipients */}
      <div className="section">
        <SectionHead icon={I.Users} title="收件人 / Recipients"
          sub="從名單匯入、或依條件動態分群"
          meta={<button className="btn btn-sm btn-outline">變更名單</button>} />
        <div className="section-body">
          <div style={{ display: "flex", flexWrap: "wrap", gap: 6, marginBottom: 12 }}>
            {state.recipient.tags.map((t, i) => (
              <span key={i} className="tag-pill">
                {t} <button onClick={() => setRecipient({ tags: state.recipient.tags.filter((_, idx) => idx !== i) })}>
                  <I.X size={10} />
                </button>
              </span>
            ))}
            <button className="tag-pill gray" style={{ border: "1px dashed var(--rh-border-strong)", background: "transparent" }}>
              <I.Plus size={10} /> 加入條件
            </button>
          </div>
          <div className="recipient-stats">
            <div className="r-stat">
              <div className="v">{state.recipient.count.toLocaleString()}</div>
              <div className="l">符合條件</div>
            </div>
            <div className="r-stat">
              <div className="v" style={{ color: "var(--rh-success)" }}>4,612</div>
              <div className="l">RCS 可用</div>
            </div>
            <div className="r-stat">
              <div className="v" style={{ color: "var(--rh-fg-muted)" }}>211</div>
              <div className="l">SMS 備援</div>
            </div>
          </div>
        </div>
      </div>

      {/* A/B testing */}
      <div className="section">
        <SectionHead icon={I.Split} title="A/B 測試 / A/B test"
          sub="同時派送兩個版本,系統自動報告勝出版本" />
        <div className="section-body">
          <ToggleRow
            title="開啟 A/B 測試"
            desc="收件人隨機切分,確保樣本統計顯著"
            on={state.ab.enabled}
            onChange={(v) => setAb({ enabled: v })}
          />
          {state.ab.enabled && (
            <>
              <div className="ab-variants">
                <div className="ab-card">
                  <div className="v-label">
                    <span>版本 A · 主訊息</span>
                    <span>{state.ab.split}%</span>
                  </div>
                  <div className="v-text">
                    {state.type === "text" ? (state.text || "(空白)").slice(0, 80) + "…" :
                     state.type === "rich" ? state.card.title :
                     state.type === "carousel" ? `${state.cards.length} 張卡片輪播` : "媒體訊息"}
                  </div>
                </div>
                <div className="ab-card b">
                  <div className="v-label">
                    <span>版本 B · 變體</span>
                    <span>{100 - state.ab.split}%</span>
                  </div>
                  <div className="v-text">
                    {state.ab.variantB.text.slice(0, 80)}…
                  </div>
                </div>
              </div>
              <div className="split-bar">
                <div className="a" style={{ width: state.ab.split + "%" }} />
                <div className="b" style={{ width: 100 - state.ab.split + "%" }} />
              </div>
              <div style={{ marginTop: 14 }}>
                <Field label={`版本 B 文案 · Variant B copy`}>
                  <textarea
                    className="textarea"
                    value={state.ab.variantB.text}
                    onChange={(e) => setAb({ variantB: { text: e.target.value } })}
                  />
                </Field>
                <Field label={`流量分配 · Traffic split  (${state.ab.split} / ${100 - state.ab.split})`}>
                  <input type="range" min="10" max="90" step="10"
                    value={state.ab.split}
                    onChange={(e) => setAb({ split: parseInt(e.target.value) })}
                    style={{ width: "100%" }} />
                </Field>
              </div>
            </>
          )}
        </div>
      </div>

      {/* Schedule */}
      <div className="section">
        <SectionHead icon={I.Calendar} title="發送時機 / Schedule"
          sub="立即發送或選擇日期時間" />
        <div className="section-body">
          <div className="schedule-tabs">
            <button className={"schedule-tab" + (state.schedule.mode === "now" ? " active" : "")}
              onClick={() => setSchedule({ mode: "now" })}>
              <I.Bolt size={11} style={{ verticalAlign: -1, marginRight: 4 }} />
              立即發送
            </button>
            <button className={"schedule-tab" + (state.schedule.mode === "later" ? " active" : "")}
              onClick={() => setSchedule({ mode: "later" })}>
              <I.Calendar size={11} style={{ verticalAlign: -1, marginRight: 4 }} />
              排程發送
            </button>
          </div>
          {state.schedule.mode === "later" && (
            <div className="row-2">
              <Field label="發送時間 / Send at">
                <input type="datetime-local" className="input"
                  value={state.schedule.sendAt}
                  onChange={(e) => setSchedule({ sendAt: e.target.value })} />
              </Field>
              <Field label="時區 / Timezone">
                <select className="select" value={state.schedule.timezone}
                        onChange={(e) => setSchedule({ timezone: e.target.value })}>
                  <option value="Asia/Taipei">Asia/Taipei (GMT+8)</option>
                  <option value="Asia/Tokyo">Asia/Tokyo (GMT+9)</option>
                  <option value="America/Los_Angeles">America/Los_Angeles (GMT-7)</option>
                </select>
              </Field>
            </div>
          )}
          <ToggleRow
            title="尊重收件人安靜時段"
            desc="若排程落在 21:00–08:00,自動延後到隔日早上 09:00"
            on={state.schedule.quietHours}
            onChange={(v) => setSchedule({ quietHours: v })}
          />
        </div>
      </div>

      {/* Compliance footnote */}
      <div style={{ display: "flex", gap: 10, alignItems: "flex-start", padding: 14, background: "var(--rh-bg-lightblue)",
                    borderRadius: 10, border: "1px solid var(--rh-border)", fontSize: 11, color: "var(--rh-fg-body)",
                    lineHeight: 1.6 }}>
        <I.Shield size={14} style={{ color: "var(--rh-primary)", flexShrink: 0, marginTop: 2 }} />
        <div>
          <strong style={{ color: "var(--rh-fg)" }}>合規檢查通過</strong> · 訊息已通過 GSMA RCS Business Messaging 規範審核。
          含有 1 個追蹤連結、3 個動作按鈕,變數已綁定欄位,無敏感字元。預估費用 NT$5,786(NT$1.2 / 則)。
        </div>
      </div>
    </div>
  );
}

function PreviewPanel({ state }) {
  const [deviceMode, setDeviceMode] = React.useState("android");
  return (
    <div className="preview">
      <div className="preview-head">
        <h6><I.Phone size={11} style={{ verticalAlign: -1, marginRight: 4 }} /> 即時預覽 · Live preview</h6>
        <div className="device-tabs">
          <button className={deviceMode === "android" ? "active" : ""} onClick={() => setDeviceMode("android")}>
            Android
          </button>
          <button className={deviceMode === "ios" ? "active" : ""} onClick={() => setDeviceMode("ios")}>
            iOS
          </button>
        </div>
      </div>

      <PhonePreview state={state} deviceMode={deviceMode} />

      <div className="preview-meta">
        <h6>訊息規格</h6>
        <div className="row"><span className="l">類型</span><span className="v">
          {MESSAGE_TYPES.find((m) => m.id === state.type)?.label}
        </span></div>
        <div className="row"><span className="l">動作按鈕</span><span className="v">
          {state.type === "rich" ? (state.card.actions || []).length :
           state.type === "carousel" ? state.cards.reduce((s, c) => s + (c.actions || []).length, 0) :
           (state.replies || []).length}
        </span></div>
        <div className="row"><span className="l">字元數</span><span className="v">
          {state.type === "text" ? state.text.length :
           state.type === "rich" ? state.card.title.length + state.card.desc.length :
           state.type === "carousel" ? state.cards.reduce((s, c) => s + c.title.length + c.desc.length, 0) :
           (state.media.caption || "").length}
        </span></div>
        <div className="row"><span className="l">RCS 相容</span><span className="v green">
          <I.CheckCircle size={11} style={{ verticalAlign: -1 }} /> 通過
        </span></div>
      </div>
    </div>
  );
}

function App() {
  const [state, setState] = React.useState(DEFAULT_STATE);
  const [toast, setToast] = React.useState(null);
  const set = (patch) => setState((s) => ({ ...s, ...patch }));

  const onSend = () => {
    setToast({ msg: `已成功將訊息發送給 ${state.recipient.count.toLocaleString()} 位收件人` });
    setTimeout(() => setToast(null), 3500);
  };

  return (
    <div className="app">
      <Sidebar active="campaigns" />
      <div className="main">
        <div className="topbar">
          <ToolbarLeft state={state} set={set} />
          <ToolbarActions state={state} onSend={onSend} />
        </div>
        <div className="workspace">
          <EditorPanel state={state} set={set} />
          <PreviewPanel state={state} />
        </div>
      </div>
      {toast && (
        <div className="send-toast">
          <I.CheckCircle size={18} /> {toast.msg}
        </div>
      )}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);