const { useState, useMemo } = React;

function buildText(m, applied) {
  return m.body.map(p => {
    if (p.f == null) return p.t;
    const fl = m.flags[p.f];
    if (!fl || !applied.includes(p.f)) return p.t;
    return p.t.replace(fl.quote, fl.fix);
  }).join("\n\n");
}

function Queue({ items, onOpen, decisions }) {
  const [risk, setRisk] = useState("tous");
  const [cat, setCat] = useState("tous");
  const [sort, setSort] = useState("risque");
  const [tab, setTab] = useState("attente");

  const rows = useMemo(() => {
    let r = items.map(m => ({ ...m, status: decisions[m.id] || m.status }));
    r = r.filter(m => m.status === tab);
    if (risk !== "tous") r = r.filter(m => m.risk === risk);
    if (cat !== "tous") r = r.filter(m => m.flags.some(f => f.cat === cat));
    r.sort((a, b) => sort === "risque" ? b.score - a.score : items.indexOf(a) - items.indexOf(b));
    return r;
  }, [items, risk, cat, sort, tab, decisions]);

  const n = s => items.filter(m => (decisions[m.id] || m.status) === s).length;

  return (
    <div className="page">
      <div className="page-h">
        <div>
          <h1>File d'attente</h1>
          <p>Les e-mails jugés risqués sont retenus ici. Tout le reste part immédiatement.</p>
        </div>
        <div className="live"><i />Interception active · 142 boîtes</div>
      </div>

      <Seg value={tab} onChange={setTab} options={[{ v: "attente", l: "En attente", n: n("attente") }, { v: "valide", l: "Validés", n: n("valide") }, { v: "refuse", l: "Refusés", n: n("refuse") }]} />

      <div className="filters">
        <div className="fl-g">
          <span className="fl-l">Niveau</span>
          {["tous", "critique", "moyen", "faible"].map(v => <button key={v} className={`chip${risk === v ? " on" : ""}`} onClick={() => setRisk(v)}>{v === "tous" ? "Tous" : RISK[v].label}</button>)}
        </div>
        <div className="fl-g">
          <span className="fl-l">Catégorie</span>
          {["tous", ...Object.keys(CATS)].map(v => <button key={v} className={`chip${cat === v ? " on" : ""}`} onClick={() => setCat(v)}>{v === "tous" ? "Toutes" : CATS[v].short}</button>)}
        </div>
        <div className="fl-g fl-r">
          <span className="fl-l">Tri</span>
          <select className="sel-s" value={sort} onChange={e => setSort(e.target.value)}><option value="risque">Risque décroissant</option><option value="date">Plus récents</option></select>
        </div>
      </div>

      {rows.length === 0 ? <Empty title="Aucun e-mail dans cette vue" sub="Ajustez les filtres ou revenez plus tard : les nouveaux e-mails retenus apparaissent ici en temps réel." /> : (
        <div className="qlist">
          {rows.map(m => (
            <button key={m.id} className="qrow" onClick={() => onOpen(m.id)}>
              <span className="q-risk"><RiskTag level={m.risk} /></span>
              <span className="q-main">
                <span className="q-subj">{m.subject}</span>
                <span className="q-meta">{m.from.name} <em>→</em> {m.to}</span>
                <span className="q-cats">{[...new Set(m.flags.map(f => f.cat))].map(c => <CatTag key={c} cat={c} />)}<span className="q-cnt">{m.flags.length} signalement{m.flags.length > 1 ? "s" : ""}</span></span>
              </span>
              <span className="q-side">
                <span className="q-score">{m.score}<em>/100</em></span>
                <span className="q-time">{m.waited}</span>
                {m.decidedBy ? <span className="q-by">{m.status === "valide" ? "Validé" : "Refusé"} par {m.decidedBy}</span> : null}
              </span>
              <span className="q-go"><Ic d="arrow" s={17} /></span>
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

function Review({ m, onBack, onDecide, status }) {
  const [applied, setApplied] = useState(m.flags.map((_, i) => i));
  const [text, setText] = useState(() => buildText(m, m.flags.map((_, i) => i)));
  const [edited, setEdited] = useState(false);
  const [focus, setFocus] = useState(null);

  const toggle = i => {
    const next = applied.includes(i) ? applied.filter(x => x !== i) : [...applied, i].sort();
    setApplied(next);
    if (!edited) setText(buildText(m, next));
  };

  const done = status === "valide" || status === "refuse";

  return (
    <div className="page page-rev">
      <div className="rev-top">
        <button className="lnk" onClick={onBack}><Ic d="back" s={15} />File d'attente</button>
        <span className="rev-id">{m.id}</span>
      </div>

      <div className="rev-head">
        <div>
          <h1>{m.subject}</h1>
          <div className="rev-people">
            <span><b>{m.from.name}</b> · {m.from.role} · {m.from.email}</span>
            <span>Destinataire <b>{m.to}</b>{m.cc ? ` · Copie ${m.cc}` : ""}</span>
          </div>
        </div>
        <div className="rev-risk">
          <RiskTag level={m.risk} />
          <div className="rev-score"><b>{m.score}</b><span>score de risque</span></div>
        </div>
      </div>

      {done ? <div className={`banner ${status === "valide" ? "ok" : "no"}`}><Ic d={status === "valide" ? "check" : "x"} s={16} />{status === "valide" ? "E-mail validé et transmis au destinataire." : "Envoi refusé définitivement. L'expéditeur a été notifié."}</div> : null}

      <Card title={`Risques détectés (${m.flags.length})`} sub="Analysé par Claude Sonnet 4.5 en 1,2 s, avant transmission." pad={false}>
        <div className="flags">
          {m.flags.map((f, i) => (
            <div className={`flag${focus === i ? " foc" : ""}`} key={i} onMouseEnter={() => setFocus(i)} onMouseLeave={() => setFocus(null)}>
              <div className="flag-h"><RiskTag level={f.sev} small /><CatTag cat={f.cat} /></div>
              <blockquote>« {f.quote} »</blockquote>
              <p className="flag-w">{f.why}</p>
              <div className="flag-f">
                <div><span className="flag-fl">Reformulation proposée</span><p>{f.fix}</p></div>
                {!done ? <button className={`sw${applied.includes(i) ? " on" : ""}`} onClick={() => toggle(i)}><Ic d={applied.includes(i) ? "check" : "dot"} s={13} />{applied.includes(i) ? "Appliquée" : "Appliquer"}</button> : null}
              </div>
            </div>
          ))}
        </div>
      </Card>

      <Card title="Message d'origine" sub="Tel qu'écrit par l'expéditeur. Non transmis.">
        <div className="mail-body">
          {m.body.map((p, i) => p.f != null
            ? <p key={i} className={`hl${focus === p.f ? " foc" : ""}`} onMouseEnter={() => setFocus(p.f)} onMouseLeave={() => setFocus(null)}>{p.t.split(m.flags[p.f].quote).map((s, j, arr) => <React.Fragment key={j}>{s}{j < arr.length - 1 ? <mark style={{ background: RISK[m.flags[p.f].sev].bg, color: RISK[m.flags[p.f].sev].color }}>{m.flags[p.f].quote}</mark> : null}</React.Fragment>)}</p>
            : <p key={i}>{p.t}</p>)}
        </div>
      </Card>

      <Card title="Version à envoyer" sub={edited ? "Modifiée manuellement — les suggestions ne s'appliquent plus automatiquement." : `${applied.length} reformulation${applied.length > 1 ? "s" : ""} appliquée${applied.length > 1 ? "s" : ""} sur ${m.flags.length}.`}
        right={!done && edited ? <Btn size="s" icon="wand" onClick={() => { setEdited(false); setText(buildText(m, applied)); }}>Repartir des suggestions</Btn> : null}>
        {done ? <div className="mail-body">{text.split("\n\n").map((p, i) => <p key={i}>{p}</p>)}</div>
          : <textarea className="composer" value={text} onChange={e => { setText(e.target.value); setEdited(true); }} spellCheck="false" />}
      </Card>

      {!done ? (
        <div className="rev-actions">
          <div className="ra-l"><Btn kind="primary" icon="check" onClick={() => onDecide(m.id, "valide")}>Valider et envoyer</Btn><Btn kind="danger" icon="x" onClick={() => onDecide(m.id, "refuse")}>Refuser l'envoi</Btn></div>
          <p>La validation transmet cette version au destinataire et consigne la décision dans le journal.</p>
        </div>
      ) : <div className="rev-actions"><Btn icon="back" onClick={onBack}>Retour à la file</Btn></div>}
    </div>
  );
}

function Corrections() {
  const [open, setOpen] = useState(FIXES[0].id);
  const total = FIXES.reduce((s, f) => s + f.items.length, 0);
  return (
    <div className="page">
      <div className="page-h">
        <div><h1>Corrections automatiques</h1><p>Ces e-mails ne présentaient aucun risque : ils ont été corrigés puis envoyés sans intervention.</p></div>
        <div className="live"><i />{total} corrections aujourd'hui</div>
      </div>
      <div className="fixlist">
        {FIXES.map(f => (
          <div className={`fix${open === f.id ? " on" : ""}`} key={f.id}>
            <button className="fix-h" onClick={() => setOpen(open === f.id ? null : f.id)}>
              <span className="fix-t">{f.at}</span>
              <span className="fix-m"><b>{f.subject}</b><em>{f.from} → {f.to}</em></span>
              <span className="fix-k">{f.items.map((it, i) => <span key={i} className="kk">{FIXKIND[it.k]}</span>)}</span>
              <span className="fix-l">{f.ms} ms</span>
              <span className="fix-c"><Ic d="check" s={14} />Envoyé</span>
            </button>
            {open === f.id ? <div className="fix-b">{f.items.map((it, i) => (
              <div className="diff" key={i}>
                <span className="kk">{FIXKIND[it.k]}</span>
                <div className="diff-r"><s>{it.b}</s><Ic d="arrow" s={14} /><ins>{it.a}</ins></div>
              </div>
            ))}</div> : null}
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { Queue, Review, Corrections });