/* TRAINING RULES — plain-English behavior rules. window.SCREENS.Training */
(function () {
  const { useState } = React;
  const I = window.ICONS;
  const { Pill, Btn } = window.UI;
  const { rules } = window.DATA;

  const CAT_KIND = { Compliance: "reject", Tone: "gold", Format: "plain", Voice: "sent" };

  function Training() {
    const [list, setList] = useState(() => rules.map(r => ({ ...r })));
    const [draft, setDraft] = useState("");
    const [cat, setCat] = useState("Tone");

    const toggle = id => setList(prev => prev.map(r => r.id === id ? { ...r, active: !r.active } : r));
    const del = id => setList(prev => prev.filter(r => r.id !== id));
    const add = () => {
      if (!draft.trim()) return;
      setList(prev => [{ id: "r" + Date.now(), text: draft.trim(), active: true, cat }, ...prev]);
      setDraft("");
    };
    const activeN = list.filter(r => r.active).length;

    return (
      <div className="page narrow">
        <div className="sec-head">
          <div>
            <div className="eyebrow" style={{ marginBottom: 8 }}>How the assistant writes</div>
            <h1 className="display" style={{ fontSize: 34 }}>Training rules</h1>
          </div>
          <div className="sec-meta">
            <Pill kind="sent">{activeN} active</Pill>
          </div>
        </div>

        <p style={{ color: "var(--ink-soft)", maxWidth: 560, marginTop: -4, marginBottom: 20, fontSize: 14.5 }}>
          Plain-English instructions that shape every draft. Toggle a rule off to pause it without deleting. The assistant applies active rules to all new drafts immediately.
        </p>

        {/* add rule */}
        <div className="panel panel-pad" style={{ marginBottom: 18 }}>
          <div className="eyebrow" style={{ marginBottom: 10 }}>Add a rule</div>
          <div style={{ display: "flex", gap: 10 }}>
            <input className="field" placeholder='e.g. "Never use exclamation points."' value={draft}
              onChange={e => setDraft(e.target.value)} onKeyDown={e => e.key === "Enter" && add()} style={{ flex: 1 }} />
            <select className="field mono" value={cat} onChange={e => setCat(e.target.value)} style={{ width: 140, flexShrink: 0 }}>
              {["Tone", "Voice", "Format", "Compliance"].map(c => <option key={c}>{c}</option>)}
            </select>
            <Btn kind="primary" icon={I.plus} onClick={add}>Add</Btn>
          </div>
        </div>

        {/* rules list */}
        <div className="panel">
          {list.map((r, i) => (
            <div key={r.id} style={{ display: "flex", alignItems: "center", gap: 14, padding: "14px 16px",
              borderBottom: i < list.length - 1 ? "1px solid var(--line)" : "none", opacity: r.active ? 1 : 0.5 }}>
              <div className={`switch ${r.active ? "on" : ""}`} onClick={() => toggle(r.id)}></div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 14.5, textDecoration: r.active ? "none" : "line-through", textDecorationColor: "var(--ink-faint)" }}>{r.text}</div>
              </div>
              <Pill kind={CAT_KIND[r.cat] || "plain"}>{r.cat}</Pill>
              <button className="icon-btn" style={{ width: 30, height: 30, borderColor: "transparent" }} onClick={() => del(r.id)} title="Delete">
                <I.trash width={15} height={15} />
              </button>
            </div>
          ))}
        </div>
      </div>
    );
  }

  window.SCREENS = window.SCREENS || {};
  window.SCREENS.Training = Training;
})();