// Dashboard — 戰情總覽（Talent Game / Hackathon / Lecture 區塊分頁，可新增）
(() => {
const { Panel, SectionTitle, Badge, ProgressBar, Avatar, Button, Input, Select, Tabs } = window.WCATalentGameDesignSystem_377d00;
const { statusTone, statusLabel, statusOptions } = window.WCA_UTIL;
const { Modal, FormRow, ModalActions, EditPencil } = window.WCA_UI;

function StatTile({ label, value, sub, tone }) {
  return (
    <Panel inset="16px" ornate={false} style={{ flex: 1 }}>
      <div style={{ fontFamily: "var(--font-pixel)", fontSize: 8, color: "var(--text-muted)", letterSpacing: ".08em" }}>{label}</div>
      <div style={{ fontFamily: "var(--font-display)", fontWeight: 900, fontSize: 34, color: tone || "var(--text-gold)", lineHeight: 1.1, marginTop: 6 }}>{value}</div>
      <div style={{ fontSize: 12, color: "var(--text-secondary)", marginTop: 2 }}>{sub}</div>
    </Panel>
  );
}

function HeroCard({ h }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 12, padding: "10px 12px", background: "var(--navy-850)", border: "1px solid var(--border-default)", borderRadius: "var(--radius-md)" }}>
      <Avatar src={h.src} name={h.name} pixel ring={h.role} size={52} />
      <div style={{ minWidth: 0 }}>
        <div style={{ fontFamily: "var(--font-serif)", fontWeight: 700, color: "var(--text-gold)", fontSize: 16 }}>{h.name}</div>
        <div style={{ fontSize: 11.5, color: "var(--text-muted)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{h.title}</div>
      </div>
    </div>
  );
}

function QuestModal({ quest, trackId, nextNo, onClose, refresh }) {
  const [f, setF] = React.useState(quest || { no: nextNo, name: "", owner: "", status: "locked", progress: 0 });
  const set = (k) => (e) => setF({ ...f, [k]: e.target.value });
  const save = async () => {
    const body = { ...f, track_id: trackId, no: Number(f.no) || 1, progress: Math.max(0, Math.min(100, Number(f.progress) || 0)) };
    if (!body.name.trim()) return alert("請填任務名稱");
    if (quest) await api("PUT", "/api/quests/" + quest.id, body);
    else await api("POST", "/api/quests", body);
    await refresh(); onClose();
  };
  const del = quest ? async () => { await api("DELETE", "/api/quests/" + quest.id); await refresh(); onClose(); } : null;
  return (
    <Modal title={quest ? "編輯任務關卡" : "新增任務關卡"} onClose={onClose}>
      <FormRow cols="80px 1fr 1fr">
        <Input label="編號" type="number" value={f.no} onChange={set("no")} />
        <Input label="任務名稱" value={f.name} onChange={set("name")} placeholder="例：觀星前哨" />
        <Input label="負責人" value={f.owner} onChange={set("owner")} />
      </FormRow>
      <FormRow cols="1fr 1fr">
        <Select label="狀態" value={f.status} onChange={set("status")} options={statusOptions} />
        <Input label="進度 %（0–100）" type="number" value={f.progress} onChange={set("progress")} />
      </FormRow>
      <ModalActions onSave={save} onCancel={onClose} onDelete={del} />
    </Modal>
  );
}

function TrackModal({ track, nextSort, onClose, refresh }) {
  const [name, setName] = React.useState(track ? track.name : "");
  const save = async () => {
    if (!name.trim()) return alert("請填區塊名稱");
    if (track) await api("PUT", "/api/tracks/" + track.id, { name: name.trim() });
    else await api("POST", "/api/tracks", { name: name.trim(), sort: nextSort });
    await refresh(); onClose();
  };
  const del = track ? async () => { await api("DELETE", "/api/tracks/" + track.id); await refresh(); onClose(); } : null;
  return (
    <Modal title={track ? "編輯區塊" : "新增區塊"} onClose={onClose} width={400}>
      <FormRow cols="1fr"><Input label="區塊名稱" value={name} onChange={(e) => setName(e.target.value)} placeholder="例：Workshop" /></FormRow>
      {track && <div style={{ fontSize: 12, color: "var(--text-muted)", marginBottom: 10 }}>刪除區塊會一併刪除其中所有任務。</div>}
      <ModalActions onSave={save} onCancel={onClose} onDelete={del} />
    </Modal>
  );
}

function ReminderPanel({ data, refresh, canEdit }) {
  const [text, setText] = React.useState("");
  const add = async () => {
    if (!text.trim()) return;
    await api("POST", "/api/reminders", { text: text.trim(), sort: data.reminders.length });
    setText(""); await refresh();
  };
  return (
    <Panel variant="battlefield">
      <SectionTitle align="left" size="h5">今日提醒</SectionTitle>
      <ul style={{ margin: "12px 0 0", paddingLeft: 18, color: "var(--paper)", fontSize: 13.5, lineHeight: 1.9 }}>
        {data.reminders.map((r) => (
          <li key={r.id}>
            {r.text}
            {canEdit && (
              <button onClick={async () => { await api("DELETE", "/api/reminders/" + r.id); await refresh(); }}
                title="移除" style={{ background: "none", border: "none", color: "var(--paper)", opacity: .55, cursor: "pointer", marginLeft: 6, fontSize: 12 }}>✕</button>
            )}
          </li>
        ))}
        {!data.reminders.length && <li style={{ opacity: .6 }}>目前沒有提醒事項</li>}
      </ul>
      {canEdit && (
        <div style={{ display: "flex", gap: 8, marginTop: 14 }}>
          <Input size="sm" placeholder="新增提醒…" value={text} onChange={(e) => setText(e.target.value)}
            onKeyDown={(e) => e.key === "Enter" && add()} />
          <Button variant="secondary" size="sm" onClick={add}>＋</Button>
        </div>
      )}
    </Panel>
  );
}

function Dashboard({ data, refresh, canEdit }) {
  const tracks = data.tracks;
  const [trackId, setTrackId] = React.useState(tracks[0] ? tracks[0].id : null);
  const current = tracks.find((t) => t.id === trackId) || tracks[0];
  const [questModal, setQuestModal] = React.useState(null); // {quest} | {new:true}
  const [trackModal, setTrackModal] = React.useState(null); // {track} | {new:true}

  React.useEffect(() => {
    if (!tracks.find((t) => t.id === trackId) && tracks[0]) setTrackId(tracks[0].id);
  }, [tracks, trackId]);

  const quests = current ? data.quests.filter((q) => q.track_id === current.id) : [];
  const cleared = quests.filter((q) => q.status === "cleared").length;
  const merchDone = data.merch.filter((m) => m.done).length;
  const start = data.meta.event_start ? Math.ceil((new Date(data.meta.event_start + "T00:00:00+08:00") - Date.now()) / 86400000) : null;

  const tabItems = tracks.map((t) => ({ id: t.id, label: t.name, badge: data.quests.filter((q) => q.track_id === t.id).length }));

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 22 }}>
      <div style={{ display: "flex", gap: 16 }}>
        <StatTile label="QUESTS CLEARED" value={cleared + "/" + (quests.length || 0)} sub={(current ? current.name : "") + " 任務關卡"} />
        <StatTile label="PARTY SIZE" value={data.roster.length} sub="工作人員 · 導師 · 學員" tone="var(--role-cpo)" />
        <StatTile label="MERCH READY" value={merchDone + "/" + data.merch.length} sub="文宣輸出品到位" tone="var(--role-cbo)" />
        <StatTile label="D-DAY" value={start === null ? "—" : start > 0 ? "T-" + start : "GO"} sub={data.meta.event_date} tone="var(--ember-500)" />
      </div>

      <div style={{ display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap" }}>
        <Tabs value={current ? current.id : null} onChange={setTrackId} items={tabItems} />
        {canEdit && <Button size="sm" variant="ghost" onClick={() => setTrackModal({ new: true })}>＋ 新增區塊</Button>}
        {canEdit && current && <EditPencil onClick={() => setTrackModal({ track: current })} />}
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr", gap: 22, alignItems: "start" }}>
        <Panel header={(current ? current.name : "") + " · 關卡進度"} glow>
          <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
            {quests.map((d) => (
              <div key={d.id} style={{ display: "flex", alignItems: "center", gap: 14 }}>
                <span style={{ fontFamily: "var(--font-display)", fontWeight: 900, color: "var(--gold-400)", width: 22, textAlign: "center" }}>{d.no}</span>
                <div style={{ flex: 1 }}>
                  <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 4 }}>
                    <span style={{ fontFamily: "var(--font-serif)", fontSize: 14, color: "var(--text-primary)" }}>{d.name}</span>
                    <Badge tone={statusTone[d.status]} size="sm" dot>{statusLabel[d.status]}</Badge>
                  </div>
                  <ProgressBar value={d.progress} showValue={false} height={7} tone={d.status === "cleared" ? "cbo" : "gold"} />
                </div>
                <span style={{ fontSize: 11.5, color: "var(--text-muted)", width: 56, textAlign: "right" }}>{d.owner}</span>
                {canEdit && <EditPencil onClick={() => setQuestModal({ quest: d })} />}
              </div>
            ))}
            {!quests.length && <div style={{ color: "var(--text-muted)", fontSize: 13.5, padding: "8px 0" }}>此區塊還沒有任務——{canEdit ? "點下方新增第一個關卡。" : "待幹部建立。"}</div>}
          </div>
          {canEdit && current && (
            <Button size="sm" style={{ marginTop: 16 }} onClick={() => setQuestModal({ new: true })}>＋ 新增任務</Button>
          )}
        </Panel>

        <div style={{ display: "flex", flexDirection: "column", gap: 22 }}>
          <Panel header="主要角色 · 四英雄">
            <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
              {Object.values(window.WCA_HEROES).map((h) => <HeroCard key={h.name} h={h} />)}
            </div>
          </Panel>
          <ReminderPanel data={data} refresh={refresh} canEdit={canEdit} />
        </div>
      </div>

      {questModal && current && (
        <QuestModal quest={questModal.quest} trackId={current.id}
          nextNo={quests.length ? Math.max(...quests.map((q) => q.no)) + 1 : 1}
          onClose={() => setQuestModal(null)} refresh={refresh} />
      )}
      {trackModal && (
        <TrackModal track={trackModal.track} nextSort={tracks.length}
          onClose={() => setTrackModal(null)} refresh={refresh} />
      )}
    </div>
  );
}
window.Dashboard = Dashboard;
})();