// MerchChecklist — 文宣輸出品製作及攜帶清單（勾選全員可用，增修 leader+）
(() => {
const { Panel, Checkbox, Badge, ProgressBar, Button, Input } = window.WCATalentGameDesignSystem_377d00;
const { Modal, FormRow, ModalActions, EditPencil } = window.WCA_UI;

function MerchModal({ item, nextSort, onClose, refresh }) {
  const [f, setF] = React.useState(item || { item: "", qty: "", owner: "", note: "" });
  const set = (k) => (e) => setF({ ...f, [k]: e.target.value });
  const save = async () => {
    if (!f.item.trim()) return alert("請填品項名稱");
    const body = { item: f.item.trim(), qty: f.qty, owner: f.owner, note: f.note, sort: item ? item.sort : nextSort };
    if (item) await api("PUT", "/api/merch/" + item.id, body);
    else await api("POST", "/api/merch", body);
    await refresh(); onClose();
  };
  const del = item ? async () => { await api("DELETE", "/api/merch/" + item.id); await refresh(); onClose(); } : null;
  return (
    <Modal title={item ? "編輯品項" : "新增品項"} onClose={onClose}>
      <FormRow cols="1.4fr 0.8fr">
        <Input label="品項" value={f.item} onChange={set("item")} />
        <Input label="數量" value={f.qty} onChange={set("qty")} placeholder="80 件" />
      </FormRow>
      <FormRow cols="0.8fr 1.4fr">
        <Input label="負責人" value={f.owner} onChange={set("owner")} />
        <Input label="備註" value={f.note} onChange={set("note")} />
      </FormRow>
      <ModalActions onSave={save} onCancel={onClose} onDelete={del} />
    </Modal>
  );
}

function MerchChecklist({ data, refresh, canEdit }) {
  const [modal, setModal] = React.useState(null);
  const items = data.merch;
  const done = items.filter((m) => m.done).length;
  const toggle = async (m) => { await api("PATCH", "/api/merch/" + m.id + "/toggle"); await refresh(); };
  const cols = canEdit ? "28px 1.4fr 0.7fr 0.8fr 1.4fr 0.7fr 36px" : "28px 1.4fr 0.7fr 0.8fr 1.4fr 0.7fr";
  return (
    <Panel header="文宣輸出品 · 製作 & 攜帶清單" inset="0">
      <div style={{ padding: "16px 18px", borderBottom: "1px solid var(--divider)" }}>
        <ProgressBar value={done} max={items.length || 1} label="到位進度" tone="cbo" />
      </div>
      <div style={{ padding: 8 }}>
        <div style={{ display: "grid", gridTemplateColumns: cols, padding: "8px 12px", fontFamily: "var(--font-pixel)", fontSize: 8, color: "var(--text-muted)", letterSpacing: ".05em" }}>
          <span></span><span>品項</span><span>數量</span><span>負責人</span><span>備註</span><span>狀態</span>{canEdit && <span></span>}
        </div>
        {items.map((m, i) => (
          <div key={m.id} style={{ display: "grid", gridTemplateColumns: cols, alignItems: "center", padding: "11px 12px", borderRadius: "var(--radius-sm)", background: i % 2 ? "transparent" : "var(--navy-850)" }}>
            <Checkbox checked={!!m.done} onChange={() => toggle(m)} size={20} />
            <span style={{ fontFamily: "var(--font-serif)", fontSize: 15, color: m.done ? "var(--text-muted)" : "var(--text-primary)", textDecoration: m.done ? "line-through" : "none" }}>{m.item}</span>
            <span style={{ fontSize: 13, color: "var(--text-secondary)" }}>{m.qty}</span>
            <span style={{ fontSize: 13, color: "var(--text-gold)" }}>{m.owner}</span>
            <span style={{ fontSize: 12.5, color: "var(--text-muted)" }}>{m.note}</span>
            <Badge tone={m.done ? "success" : "ember"} size="sm" dot>{m.done ? "已到位" : "製作中"}</Badge>
            {canEdit && <EditPencil onClick={() => setModal({ item: m })} />}
          </div>
        ))}
      </div>
      {canEdit && (
        <div style={{ padding: "12px 18px", display: "flex", gap: 10 }}>
          <Button size="sm" onClick={() => setModal({ new: true })}>＋ 新增品項</Button>
        </div>
      )}
      {modal && <MerchModal item={modal.item} nextSort={items.length} onClose={() => setModal(null)} refresh={refresh} />}
    </Panel>
  );
}
window.MerchChecklist = MerchChecklist;
})();