// FlowSchedule — 活動流程（簡易／詳細切換 + 編輯）
(() => {
const { Panel, Tabs, Badge, Divider, Button, Input, Select } = window.WCATalentGameDesignSystem_377d00;
const { statusTone, statusLabel, statusOptions } = window.WCA_UTIL;
const { Modal, FormRow, ModalActions, EditPencil } = window.WCA_UI;

const TAG = { day: { c: "var(--amber-glow)", t: "☀ 白天" }, dusk: { c: "var(--arcane-blue)", t: "☾ 傍晚" }, night: { c: "var(--role-cpo)", t: "★ 晚上" } };
const TAG_OPTIONS = [{ value: "day", label: "☀ 白天" }, { value: "dusk", label: "☾ 傍晚" }, { value: "night", label: "★ 晚上" }];

function SimpleModal({ step, nextSort, defaultDay, onClose, refresh }) {
  const [f, setF] = React.useState(step || { day: defaultDay || "8/14", time: "", title: "", tag: "day", note: "", meal: "", owner: "", lecturer: "" });
  const set = (k) => (e) => setF({ ...f, [k]: e.target.value });
  const save = async () => {
    if (!f.title.trim()) return alert("請填項目名稱");
    const body = { day: f.day.trim(), time: f.time, title: f.title.trim(), tag: f.tag, note: f.note || "", meal: f.meal || "", owner: f.owner || "", lecturer: f.lecturer || "", sort: step ? step.sort : nextSort };
    if (step) await api("PUT", "/api/flow-simple/" + step.id, body);
    else await api("POST", "/api/flow-simple", body);
    await refresh(); onClose();
  };
  const del = step ? async () => { await api("DELETE", "/api/flow-simple/" + step.id); await refresh(); onClose(); } : null;
  return (
    <Modal title={step ? "編輯流程項目" : "新增流程項目"} onClose={onClose} width={600}>
      <FormRow cols="90px 1fr 1.4fr 1fr">
        <Input label="日期" value={f.day} onChange={set("day")} placeholder="8/14" />
        <Input label="時段" value={f.time} onChange={set("time")} placeholder="09:00 - 10:30" />
        <Input label="流程模組" value={f.title} onChange={set("title")} />
        <Select label="時間帶" value={f.tag} onChange={set("tag")} options={TAG_OPTIONS} />
      </FormRow>
      <FormRow cols="1fr"><Input label="詳細內容與亮點" as="textarea" value={f.note} onChange={set("note")} /></FormRow>
      <FormRow cols="1fr 1fr 1fr">
        <Input label="負責人" value={f.owner} onChange={set("owner")} />
        <Input label="講師／實作" value={f.lecturer} onChange={set("lecturer")} />
        <Input label="備註／餐飲" value={f.meal} onChange={set("meal")} placeholder="桌菜午餐" />
      </FormRow>
      <ModalActions onSave={save} onCancel={onClose} onDelete={del} />
    </Modal>
  );
}

function DetailModal({ step, nextSort, defaultDay, onClose, refresh }) {
  const [f, setF] = React.useState(step
    ? { ...step, gear: step.gear.join("、"), props: step.props.join("、") }
    : { day: defaultDay || "8/14", time: "", title: "", owner: "", lecturer: "", status: "locked", gear: "", props: "" });
  const set = (k) => (e) => setF({ ...f, [k]: e.target.value });
  const toList = (s) => s.split(/[、,，]/).map((x) => x.trim()).filter(Boolean);
  const save = async () => {
    if (!f.title.trim()) return alert("請填項目名稱");
    const body = step && step.simple_id
      ? { status: f.status, gear: toList(f.gear), props: toList(f.props) } // 連動卡：共用欄位以簡易流程為準
      : { day: (f.day || "").trim(), time: f.time, title: f.title.trim(), owner: f.owner, lecturer: f.lecturer || "", status: f.status, gear: toList(f.gear), props: toList(f.props), sort: step ? step.sort : nextSort };
    if (step) await api("PUT", "/api/flow-detail/" + step.id, body);
    else await api("POST", "/api/flow-detail", body);
    await refresh(); onClose();
  };
  const linked = !!(step && step.simple_id);
  const del = step && !linked ? async () => { await api("DELETE", "/api/flow-detail/" + step.id); await refresh(); onClose(); } : null;
  return (
    <Modal title={step ? "編輯詳細流程" : "新增詳細流程"} onClose={onClose} width={560}>
      {linked && (
        <div style={{ fontSize: 12, color: "var(--tooth-cyan)", marginBottom: 12, lineHeight: 1.6 }}>
          ◆ 此卡與簡易流程連動：日期／時間／項目／負責人請到「簡易流程」修改，會自動同步過來（刪除也是）。這裡填狀態、器材與道具。
        </div>
      )}
      <FormRow cols="90px 1fr 1.6fr">
        <Input label="日期" value={f.day} onChange={set("day")} placeholder="8/14" disabled={linked} />
        <Input label="時間" value={f.time} onChange={set("time")} placeholder="09:00–10:00" disabled={linked} />
        <Input label="項目" value={f.title} onChange={set("title")} disabled={linked} />
      </FormRow>
      <FormRow cols="1fr 1fr 1fr">
        <Input label="負責人" value={f.owner} onChange={set("owner")} disabled={linked} />
        <Input label="講師／實作" value={f.lecturer || ""} onChange={set("lecturer")} disabled={linked} />
        <Select label="狀態" value={f.status} onChange={set("status")} options={statusOptions} />
      </FormRow>
      <FormRow cols="1fr"><Input label="器材（用「、」分隔）" value={f.gear} onChange={set("gear")} placeholder="投影機、音響、無線麥 ×2" /></FormRow>
      <FormRow cols="1fr"><Input label="道具（用「、」分隔）" value={f.props} onChange={set("props")} placeholder="桌巾 ×6、隊旗 ×6" /></FormRow>
      <ModalActions onSave={save} onCancel={onClose} onDelete={del} />
    </Modal>
  );
}

const COLS = (canEdit) => "90px 2.2fr 0.7fr 0.9fr 0.8fr" + (canEdit ? " 34px" : "");

function DayBlock({ dayLabel, day, rows, canEdit, onEdit, onAdd }) {
  return (
    <div style={{ marginBottom: 26 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 10 }}>
        <span style={{ fontFamily: "var(--font-display)", fontWeight: 900, fontSize: 15, letterSpacing: ".12em", color: "var(--navy-950)", background: "var(--grad-gold)", padding: "4px 14px", borderRadius: "var(--radius-sm)", boxShadow: "var(--glow-gold-sm)" }}>{dayLabel}</span>
        <span style={{ fontFamily: "var(--font-serif)", fontWeight: 700, fontSize: 17, color: "var(--text-gold)", letterSpacing: ".08em" }}>{day}</span>
        <span style={{ flex: 1, height: 1, background: "linear-gradient(90deg, var(--border-strong), transparent)" }} />
        {canEdit && <span style={{ cursor: "pointer", fontSize: 12.5, color: "var(--gold-300)" }} onClick={() => onAdd(day)}>＋ 新增</span>}
      </div>
      <div style={{ overflowX: "auto" }}>
        <div style={{ minWidth: 720 }}>
          <div style={{ display: "grid", gridTemplateColumns: COLS(canEdit), gap: 10, padding: "6px 12px", fontFamily: "var(--font-pixel)", fontSize: 8, color: "var(--text-muted)", letterSpacing: ".05em" }}>
            <span>時段</span><span>流程模組</span><span>負責人</span><span>講師/實作</span><span>備註/餐飲</span>{canEdit && <span></span>}
          </div>
          {rows.map((s, i) => {
            const tg = TAG[s.tag] || TAG.day;
            return (
              <div key={s.id} style={{ display: "grid", gridTemplateColumns: COLS(canEdit), gap: 10, alignItems: "start", padding: "10px 12px", borderRadius: "var(--radius-sm)", background: i % 2 ? "transparent" : "var(--navy-850)" }}>
                <span style={{ fontFamily: "var(--font-pixel)", fontSize: 8.5, color: tg.c, lineHeight: 1.6, paddingTop: 3 }}>{s.time}</span>
                <div>
                  <div style={{ fontFamily: "var(--font-serif)", fontSize: 15, fontWeight: 700, color: "var(--text-primary)" }}>{s.title}</div>
                  {s.note && <div style={{ fontSize: 12, color: "var(--text-secondary)", lineHeight: 1.65, marginTop: 2 }}>{s.note}</div>}
                </div>
                <span style={{ fontSize: 12.5, color: "var(--text-gold)", paddingTop: 2 }}>{s.owner || "—"}</span>
                <span style={{ fontSize: 12.5, color: "var(--text-secondary)", paddingTop: 2 }}>{s.lecturer || "—"}</span>
                <span style={{ paddingTop: 2 }}>
                  {s.meal ? (
                    <span style={{ fontSize: 11, padding: "2px 9px", borderRadius: "var(--radius-pill)", background: "rgba(224,138,60,.14)", border: "1px solid rgba(224,138,60,.4)", color: "var(--ember-500)", whiteSpace: "nowrap" }}>{s.meal}</span>
                  ) : <span style={{ color: "var(--text-muted)", fontSize: 12 }}>—</span>}
                </span>
                {canEdit && <EditPencil onClick={() => onEdit(s)} />}
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

function SimpleFlow({ data, canEdit, onEdit, onAdd }) {
  const days = [...new Set(data.flowSimple.map((s) => s.day).filter(Boolean))];
  const orphan = data.flowSimple.filter((s) => !s.day);
  return (
    <div>
      {days.map((d, i) => (
        <DayBlock key={d} dayLabel={"DAY " + (i + 1)} day={d}
          rows={data.flowSimple.filter((s) => s.day === d)}
          canEdit={canEdit} onEdit={onEdit} onAdd={onAdd} />
      ))}
      {orphan.length > 0 && (
        <DayBlock dayLabel="未分日" day="" rows={orphan} canEdit={canEdit} onEdit={onEdit} onAdd={onAdd} />
      )}
      {!days.length && !orphan.length && <div style={{ color: "var(--text-muted)", fontSize: 13.5 }}>還沒有流程項目。</div>}
    </div>
  );
}

function GearList({ label, en, items, color }) {
  return (
    <div style={{ flex: 1, minWidth: 200 }}>
      <div style={{ display: "flex", alignItems: "baseline", gap: 8, marginBottom: 6 }}>
        <span style={{ fontSize: 12, color: "var(--text-muted)" }}>{label}</span>
        <span style={{ fontFamily: "var(--font-pixel)", fontSize: 9, color, letterSpacing: ".06em" }}>{en}</span>
      </div>
      <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
        {items.map((g, i) => (
          <span key={i} style={{ fontSize: 12, padding: "3px 9px", borderRadius: "var(--radius-sm)", background: "var(--navy-900)", border: "1px solid var(--border-default)", color: "var(--text-secondary)" }}>{g}</span>
        ))}
        {!items.length && <span style={{ fontSize: 12, color: "var(--text-muted)" }}>—</span>}
      </div>
    </div>
  );
}

function DetailCards({ rows, canEdit, onEdit }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
      {rows.map((s) => (
        <div key={s.id} style={{ background: "var(--navy-850)", border: "1px solid var(--border-default)", borderRadius: "var(--radius-md)", padding: 16 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 12 }}>
            <span style={{ fontFamily: "var(--font-pixel)", fontSize: 9, color: "var(--gold-300)" }}>{s.time}</span>
            <span style={{ fontFamily: "var(--font-serif)", fontSize: 16, fontWeight: 700, color: "var(--text-primary)" }}>{s.title}</span>
            <Badge tone={statusTone[s.status]} size="sm" dot style={{ marginLeft: "auto" }}>{statusLabel[s.status]}</Badge>
            {canEdit && <EditPencil onClick={() => onEdit(s)} />}
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 12, flexWrap: "wrap" }}>
            <span style={{ fontSize: 12, color: "var(--text-muted)" }}>負責人</span>
            <span style={{ fontSize: 13, color: "var(--text-gold)", fontFamily: "var(--font-serif)" }}>{s.owner || "—"}</span>
            <span style={{ fontSize: 12, color: "var(--text-muted)", marginLeft: 14 }}>講師／實作</span>
            <span style={{ fontSize: 13, color: "var(--tooth-cyan)", fontFamily: "var(--font-serif)" }}>{s.lecturer || "—"}</span>
          </div>
          <Divider style={{ marginBottom: 12 }} />
          <div style={{ display: "flex", gap: 24, rowGap: 14, flexWrap: "wrap" }}>
            <GearList label="器材" en="GEAR" items={s.gear} color="var(--tooth-cyan)" />
            <GearList label="道具" en="PROPS" items={s.props} color="var(--ember-500)" />
          </div>
        </div>
      ))}
    </div>
  );
}

function DetailFlow({ data, canEdit, onEdit, onAdd }) {
  const days = [...new Set(data.flowDetail.map((s) => s.day).filter(Boolean))];
  const orphan = data.flowDetail.filter((s) => !s.day);
  return (
    <div>
      {days.map((d, i) => (
        <div key={d} style={{ marginBottom: 26 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 12 }}>
            <span style={{ fontFamily: "var(--font-display)", fontWeight: 900, fontSize: 15, letterSpacing: ".12em", color: "var(--navy-950)", background: "var(--grad-gold)", padding: "4px 14px", borderRadius: "var(--radius-sm)", boxShadow: "var(--glow-gold-sm)" }}>{"DAY " + (i + 1)}</span>
            <span style={{ fontFamily: "var(--font-serif)", fontWeight: 700, fontSize: 17, color: "var(--text-gold)", letterSpacing: ".08em" }}>{d}</span>
            <span style={{ flex: 1, height: 1, background: "linear-gradient(90deg, var(--border-strong), transparent)" }} />
            {canEdit && <span style={{ cursor: "pointer", fontSize: 12.5, color: "var(--gold-300)" }} onClick={() => onAdd(d)}>＋ 新增</span>}
          </div>
          <DetailCards rows={data.flowDetail.filter((s) => s.day === d)} canEdit={canEdit} onEdit={onEdit} />
        </div>
      ))}
      {orphan.length > 0 && <DetailCards rows={orphan} canEdit={canEdit} onEdit={onEdit} />}
      {!days.length && !orphan.length && <div style={{ color: "var(--text-muted)", fontSize: 13.5 }}>還沒有詳細流程。</div>}
    </div>
  );
}

function FlowSchedule({ data, refresh, canEdit }) {
  const [tab, setTab] = React.useState("simple");
  const [modal, setModal] = React.useState(null); // { kind: 'simple'|'detail', step? }
  return (
    <Panel header="活動流程 · Flow" inset="0">
      <div style={{ padding: "14px 18px 0", display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap" }}>
        <Tabs value={tab} onChange={setTab} variant="pill" items={[{ id: "simple", label: "簡易流程" }, { id: "detail", label: "詳細流程" }]} />
      </div>
      <div style={{ padding: 18 }}>
        {tab === "simple"
          ? <SimpleFlow data={data} canEdit={canEdit} onEdit={(s) => setModal({ kind: "simple", step: s })} onAdd={(day) => setModal({ kind: "simple", day })} />
          : <DetailFlow data={data} canEdit={canEdit} onEdit={(s) => setModal({ kind: "detail", step: s })} onAdd={(day) => setModal({ kind: "detail", day })} />}
      </div>
      {modal && modal.kind === "simple" && (
        <SimpleModal step={modal.step} defaultDay={modal.day} nextSort={data.flowSimple.length} onClose={() => setModal(null)} refresh={refresh} />
      )}
      {modal && modal.kind === "detail" && (
        <DetailModal step={modal.step} defaultDay={modal.day} nextSort={data.flowDetail.length} onClose={() => setModal(null)} refresh={refresh} />
      )}
    </Panel>
  );
}
window.FlowSchedule = FlowSchedule;
})();