// Settings.jsx — names, "other" category label, default split, density, theme color
const { useState } = React;

const THEME_PRESETS = [
{ id: "green", name: "深綠", color: "#2D6A4F" },
{ id: "ink", name: "墨黑", color: "#1A1A1A" },
{ id: "navy", name: "藏青", color: "#1F4E5F" },
{ id: "umber", name: "暖棕", color: "#7A4F2D" },
{ id: "plum", name: "紫梅", color: "#5C3A5E" },
{ id: "rust", name: "磚紅", color: "#A04545" }];


function SettingsScreen({ names, setNames, otherName, setOtherName, accent, setAccent, density, setDensity, splitDefault, setSplitDefault, onExport, onLogout, onBack, onOpenBooks, onOpenTemplates }) {
  const [a, setA] = useState(names.A);
  const [b, setB] = useState(names.B);
  const [other, setOther] = useState(otherName || "");
  const [saved, setSaved] = useState(false);
  function save() {
    setNames({ A: a.trim() || "我", B: b.trim() || "對方" });
    setOtherName(other.trim());
    setSaved(true);
    setTimeout(() => setSaved(false), 1200);
  }
  return (
    <div className="screen settings">
      <div className="sub-header">
        <button className="back" onClick={onBack}>‹</button>
        <div className="sub-title">設定</div>
        <span style={{ width: 44 }} />
      </div>

      <div className="settings-section">
        <div className="settings-section-t">名稱</div>
        <label className="form-row">
          <span className="form-k">A</span>
          <input className="form-in" value={a} onChange={(e) => setA(e.target.value)} maxLength={6} />
        </label>
        <label className="form-row">
          <span className="form-k">B</span>
          <input className="form-in" value={b} onChange={(e) => setB(e.target.value)} maxLength={6} />
        </label>
        <button className="settings-save" style={{ background: accent }} onClick={save}>
          {saved ? "已儲存" : "儲存"}
        </button>
      </div>

      <div className="settings-section">
        <div className="settings-section-t">分類「其他」名稱</div>
        <label className="form-row">
          <span className="form-k">名稱</span>
          <input className="form-in" value={other} placeholder="其他（如：醫療）"
                 onChange={(e) => setOther(e.target.value)} maxLength={4} />
        </label>
      </div>

      <div className="settings-section">
        <div className="settings-section-t">預設分攤</div>
        <div className="density-row" style={{ gridTemplateColumns: "1fr 1fr 1fr" }}>
          <button className={"density-chip" + (splitDefault === "even" ? " is-on" : "")}
            style={splitDefault === "even" ? { borderColor: accent, color: accent } : {}}
            onClick={() => setSplitDefault("even")}>均分</button>
          <button className={"density-chip" + (splitDefault === "ratio" ? " is-on" : "")}
            style={splitDefault === "ratio" ? { borderColor: accent, color: accent } : {}}
            onClick={() => setSplitDefault("ratio")}>比例</button>
          <button className={"density-chip" + (splitDefault === "custom" ? " is-on" : "")}
            style={splitDefault === "custom" ? { borderColor: accent, color: accent } : {}}
            onClick={() => setSplitDefault("custom")}>金額</button>
        </div>
      </div>

      <div className="settings-section">
        <div className="settings-section-t">歷史列表密度</div>
        <div className="density-row">
          <button className={"density-chip" + (density === "compact" ? " is-on" : "")}
            style={density === "compact" ? { borderColor: accent, color: accent } : {}}
            onClick={() => setDensity("compact")}>緊湊</button>
          <button className={"density-chip" + (density === "regular" ? " is-on" : "")}
            style={density === "regular" ? { borderColor: accent, color: accent } : {}}
            onClick={() => setDensity("regular")}>舒適</button>
        </div>
      </div>

      <div className="settings-section">
        <div className="settings-section-t">主題色</div>
        <div className="theme-grid">
          {THEME_PRESETS.map((p) =>
          <button key={p.id}
          className={"theme-chip" + (accent.toLowerCase() === p.color.toLowerCase() ? " is-on" : "")}
          onClick={() => setAccent(p.color)}>
              <span className="theme-swatch" style={{ background: p.color }} />
              <span className="theme-name">{p.name}</span>
            </button>
          )}
        </div>
      </div>

      <div className="settings-section">
        <div className="settings-section-t">資料</div>
        <button className="settings-row" onClick={onExport}>
          <span>匯出資料</span><span className="caret">›</span>
        </button>
      </div>

      <div className="settings-section">
        <div className="settings-section-t">其他</div>
        <button className="settings-row" onClick={onOpenBooks}>
          <span>帳本管理</span><span className="caret">›</span>
        </button>
        <button className="settings-row" onClick={onOpenTemplates}>
          <span>常用組套</span><span className="caret">›</span>
        </button>
        <button className="settings-row" onClick={onLogout}>
          <span>登出</span><span className="caret">›</span>
        </button>
      </div>
    </div>);
}

window.SettingsScreen = SettingsScreen;