// Templates.jsx — manage saved expense templates ("組套")
const { useState } = React;

function TemplatesScreen({ templates, cats, names, accent, onSave, onDelete, onBack }) {
  const [editing, setEditing] = useState(null);
  const empty = { id: "", name: "", amount: 0, category: "food", note: "", split: null };

  function startNew() { setEditing({ ...empty }); }
  function startEdit(tpl) { setEditing({ ...tpl, split: tpl.split || null }); }
  function commit() {
    if (!editing.name.trim()) return;
    onSave(editing); // editing.id="" for new → addDoc; set for existing → setDoc merge
    setEditing(null);
  }

  if (editing) {
    const splitMode = editing.split?.mode || "";
    return (
      <div className="screen settings">
        <div className="sub-header">
          <button className="back" onClick={() => setEditing(null)}>‹</button>
          <div className="sub-title">{editing.id ? "編輯組套" : "新增組套"}</div>
          <button className="back" onClick={commit} style={{ color: accent, fontSize: 15, fontWeight: 500 }}>儲存</button>
        </div>
        <div className="settings-section">
          <label className="form-row">
            <span className="form-k">名稱</span>
            <input className="form-in" autoFocus value={editing.name} maxLength={8}
              onChange={(e) => setEditing({ ...editing, name: e.target.value })} />
          </label>
          <label className="form-row">
            <span className="form-k">金額</span>
            <input className="form-in num" type="number" inputMode="numeric"
              value={editing.amount || ""}
              placeholder="可留空"
              onChange={(e) => setEditing({ ...editing, amount: Number(e.target.value) || 0 })} />
          </label>
          <label className="form-row">
            <span className="form-k">備註</span>
            <input className="form-in" value={editing.note} maxLength={20}
              placeholder="可留空"
              onChange={(e) => setEditing({ ...editing, note: e.target.value })} />
          </label>
        </div>
        <div className="settings-section">
          <div className="settings-section-t">分類</div>
          <div className="cat-row">
            {cats.map((c) =>
              <button key={c.id}
                className={"cat-chip" + (editing.category === c.id ? " is-on" : "")}
                style={editing.category === c.id ? { borderColor: accent, color: accent } : {}}
                onClick={() => setEditing({ ...editing, category: c.id })}>
                {c.label}
              </button>
            )}
          </div>
        </div>
        <div className="settings-section">
          <div className="settings-section-t">分攤模式（可留空）</div>
          <div className="density-row">
            <button className={"density-chip" + (splitMode === "" ? " is-on" : "")}
              style={splitMode === "" ? { borderColor: accent, color: accent } : {}}
              onClick={() => setEditing({ ...editing, split: null })}>不指定</button>
            <button className={"density-chip" + (splitMode === "even" ? " is-on" : "")}
              style={splitMode === "even" ? { borderColor: accent, color: accent } : {}}
              onClick={() => setEditing({ ...editing, split: { mode: "even" } })}>均分</button>
            <button className={"density-chip" + (splitMode === "ratio" ? " is-on" : "")}
              style={splitMode === "ratio" ? { borderColor: accent, color: accent } : {}}
              onClick={() => setEditing({ ...editing, split: { mode: "ratio", ratio: [5, 5] } })}>比例</button>
            <button className={"density-chip" + (splitMode === "custom" ? " is-on" : "")}
              style={splitMode === "custom" ? { borderColor: accent, color: accent } : {}}
              onClick={() => setEditing({ ...editing, split: { mode: "custom", amounts: { A: 0, B: 0 } } })}>金額</button>
          </div>
          {(splitMode === "ratio" || splitMode === "custom") && (
            <div style={{ marginTop: 12 }}>
              <SplitPicker
                amount={editing.amount || 100}
                names={names}
                value={editing.split}
                accent={accent}
                hideTabs
                onChange={(v) => setEditing((prev) => ({ ...prev, split: v }))}
                onTotalDriven={(t) => setEditing((prev) => ({ ...prev, amount: t }))}
              />
            </div>
          )}
        </div>
        {editing.id &&
          <div className="settings-section">
            <button className="tpl-delete-btn"
              onClick={() => { if (confirm("刪除這個組套？")) { onDelete(editing.id); setEditing(null); } }}>
              刪除組套
            </button>
          </div>
        }
      </div>
    );
  }

  return (
    <div className="screen settings">
      <div className="sub-header">
        <button className="back" onClick={onBack}>‹</button>
        <div className="sub-title">常用組套</div>
        <button className="back" onClick={startNew} style={{ fontSize: 26, lineHeight: 1 }}>+</button>
      </div>
      {templates.length === 0 ? (
        <div className="empty">
          <div className="empty-title">沒有組套</div>
          <div className="empty-sub">點右上「+」新增</div>
        </div>
      ) : (
        <div className="tpl-mgmt-list">
          {templates.map((tpl) => {
            const cat = cats.find((c) => c.id === tpl.category);
            const splitTag = tpl.split?.mode === "even" ? "均分"
              : tpl.split?.mode === "ratio" ? "比例"
              : tpl.split?.mode === "custom" ? "金額"
              : null;
            return (
              <button key={tpl.id} className="tpl-mgmt-row" onClick={() => startEdit(tpl)}>
                <span className="hist-cat" style={{ width: 36, height: 36, fontSize: 14, color: cat?.color, borderColor: cat?.color, flexShrink: 0 }}>{cat?.label}</span>
                <span className="tpl-mgmt-body">
                  <span className="tpl-mgmt-name">{tpl.name}</span>
                  <span className="tpl-mgmt-sub">
                    {tpl.amount ? fmtMoney(tpl.amount) : "套用時填金額"}
                    {splitTag ? " · " + splitTag : ""}
                    {tpl.note ? " · " + tpl.note : ""}
                  </span>
                </span>
                <span className="caret">›</span>
              </button>
            );
          })}
        </div>
      )}
    </div>
  );
}

window.TemplatesScreen = TemplatesScreen;