const { useState: usePipeState, useMemo } = React;
function DossierCard({ d, onOpen }) {
  return (<div className="t-card" onClick={() => onOpen(d)}>
    <div className="t-card-top"><span className="t-card-name">{d.prenom} {d.nom}</span><PoleBadge pole={d.pole}></PoleBadge></div>
    <div className="t-card-amount">{fmtEUR(d.impaye)}<span> / {fmtEUR(d.total)}</span></div>
    <div className="t-card-meta">
      <span>#{d.id}</span><span>·</span><span>{d.jours} j de retard</span>
      {d.huissier && <span className="t-flag t-flag--red">Huissier</span>}
      {d.med && <span className="t-flag t-flag--amber">MED</span>}
    </div>
    {d.relances.length > 0 && <div className="t-card-last"><ChanIcon t={d.relances[d.relances.length-1].t}></ChanIcon>{d.relances[d.relances.length-1].d} — {d.relances[d.relances.length-1].s}</div>}
  </div>);
}
function PipeBoard({ dossiers, onOpen, onMove }) {
  return (<div className="t-board">
    {TALOS_STAGES.map(st => {
      const items = dossiers.filter(d => d.stage === st.id);
      const sum = items.reduce((a, d) => a + d.impaye, 0);
      return (<div className="t-col" key={st.id}>
        <div className="t-col-head" style={{ borderTopColor: st.color }}>
          <div><span className="t-col-title">{st.label}</span><span className="t-col-hint">{st.hint}</span></div>
          <div className="t-col-nums"><b>{items.length}</b><span>{fmtEUR(sum)}</span></div>
        </div>
        <div className="t-col-body">
          {items.map(d => <DossierCard key={d.id} d={d} onOpen={onOpen}></DossierCard>)}
          {items.length === 0 && <div className="t-col-empty">Aucun dossier</div>}
        </div>
      </div>);
    })}
  </div>);
}
function NoteEditor({ d, onNote }) {
  const [txt, setTxt] = usePipeState(d.note || '');
  const [saved, setSaved] = usePipeState(false);
  React.useEffect(() => { setTxt(d.note || ''); setSaved(false); }, [d.id]);
  return (<div className="t-note"><b>Note interne</b>
    <textarea className="t-note-edit" value={txt} onChange={e => { setTxt(e.target.value); setSaved(false); }} rows={3} placeholder="Ajouter une note interne (contexte, accord, à rappeler…)"></textarea>
    <button className="t-btn t-btn--primary" style={{ marginTop: 8, alignSelf: 'flex-start' }} onClick={() => { onNote(d, txt); setSaved(true); }}>{saved ? 'Note enregistrée ✓' : 'Enregistrer la note'}</button>
  </div>);
}
function ClientDrawer({ d, onClose, onMove, onRelance, onBoucle, onNote }) {
  const [tab, setTab] = usePipeState('histo');
  if (!d) return null;
  const stIdx = TALOS_STAGES.findIndex(s => s.id === d.stage);
  const next = TALOS_STAGES[stIdx + 1];
  return (<div className="t-overlay" onClick={onClose}>
    <div className="t-drawer" onClick={e => e.stopPropagation()}>
      <div className="t-drawer-head">
        <div>
          <div className="t-drawer-name">{d.prenom} {d.nom} <PoleBadge pole={d.pole}></PoleBadge>{d.affilie && <span className="t-flag">Affilié</span>}</div>
          <div className="t-drawer-sub">#{d.id} · {d.tel ? <a href={'tel:' + String(d.tel).replace(/[^0-9+]/g, '')} style={{ color: 'var(--v-blue)', fontWeight: 700, textDecoration: 'none' }}>📞 {d.tel}</a> : '— tél —'} · {d.email || '—'} · CP {d.cp || '—'}</div>
        </div>
        <button className="t-x" onClick={onClose}>✕</button>
      </div>
      <div className="t-drawer-kpis">
        <Kpi label="Total facture" value={fmtEUR(d.total)}></Kpi>
        <Kpi label="Reste dû" value={fmtEUR(d.impaye)} tone="red"></Kpi>
        <Kpi label="Récupéré" value={fmtEUR(d.recupere)} tone="green"></Kpi>
        <Kpi label="Retard" value={d.jours + ' j'} tone={d.jours > 52 ? 'red' : undefined}></Kpi>
      </div>
      <div className="t-drawer-stage"><StageDot stage={d.stage}></StageDot>
        {d.stage !== 'ok' && <button className={'t-boucle-toggle' + (d.boucle ? ' on' : '')} onClick={() => onBoucle(d)}><LoopIcon></LoopIcon>{d.boucle ? 'Dans la boucle auto n8n — cliquer pour sortir' : 'Hors boucle — cliquer pour inclure'}</button>}
        {next && d.stage !== 'ok' && <button className="t-btn t-btn--ghost" onClick={() => onMove(d, next.id)}>Passer à « {next.label} » →</button>}
        {d.stage !== 'ok' && <button className="t-btn t-btn--green" onClick={() => onMove(d, 'ok')}>Marquer recouvré</button>}
      </div>
      <NoteEditor key={d.id} d={d} onNote={onNote}></NoteEditor>
      {d.echeancier && <div className="t-echeancier"><b>Échéancier négocié</b><span>{d.echeancier.accord}</span>
        <div className="t-ech-rows">{d.echeancier.echeances.map((e, i) => (<div key={i} className={'t-ech-row' + (e.statut === 'payée' ? ' ok' : '')}><span>{e.d}</span><b>{fmtEUR(e.m)}</b><em>{e.statut}</em></div>))}</div></div>}
      <div className="t-tabs">
        <button className={tab === 'histo' ? 'on' : ''} onClick={() => setTab('histo')}>Relances ({d.relances.length})</button>
        <button className={tab === 'appels' ? 'on' : ''} onClick={() => setTab('appels')}>Appels ({(d.appels || []).length})</button>
        <button className={tab === 'action' ? 'on' : ''} onClick={() => setTab('action')}>Nouvelle relance</button>
      </div>
      {tab === 'histo' && <div className="t-timeline">
        {d.relances.length === 0 && <div className="t-col-empty">Aucune relance envoyée</div>}
        {[...d.relances].reverse().map((r, i) => (<div className="t-tl-item" key={i}>
          <span className={'t-tl-chan t-tl-chan--' + r.t}><ChanIcon t={r.t}></ChanIcon></span>
          <div><div className="t-tl-date">{r.d} · {r.t === 'sms' ? 'SMS' : r.t === 'courrier' ? 'Courrier' : 'Email'}</div><div className="t-tl-desc">{r.s}</div></div>
        </div>))}
      </div>}
      {tab === 'appels' && <div className="t-timeline">
        {(d.appels || []).length === 0 && <div className="t-col-empty">Aucun appel synchronisé depuis Aircall</div>}
        {(d.appels || []).slice().reverse().map((a, i) => (<div className="t-tl-item" key={i}>
          <span className={'t-tl-chan ' + (a.dir === 'in' ? 't-tl-chan--sms' : 't-tl-chan--email')}>{a.dir === 'in' ? '↙' : '↗'}</span>
          <div><div className="t-tl-date">{a.d} · {a.dir === 'in' ? 'Entrant' : 'Sortant'} · {a.duree} · Aircall</div><div className="t-tl-desc">{a.resume}</div></div>
        </div>))}
      </div>}
      {tab === 'action' && <RelanceForm d={d} onSend={(r) => { onRelance(d, r); setTab('histo'); }}></RelanceForm>}
    </div>
  </div>);
}
function RelanceForm({ d, onSend }) {
  const [chan, setChan] = usePipeState('email');
  const [niveau, setNiveau] = usePipeState(d.stage === 'avis' || d.stage === 'ctx' ? 'r2' : 'r1');
  const key = niveau + '_' + chan;
  const tpl = TALOS_TEMPLATES[key].body(d);
  const [txt, setTxt] = usePipeState(tpl);
  React.useEffect(() => setTxt(TALOS_TEMPLATES[niveau + '_' + chan].body(d)), [chan, niveau]);
  return (<div className="t-form">
    <div className="t-chan-pick">
      <button className={chan === 'email' ? 'on' : ''} onClick={() => setChan('email')}><ChanIcon t="email"></ChanIcon> Email</button>
      <button className={chan === 'sms' ? 'on' : ''} onClick={() => setChan('sms')}><ChanIcon t="sms"></ChanIcon> SMS</button>
      <span className="t-chan-sep"></span>
      <button className={niveau === 'r1' ? 'on' : ''} onClick={() => setNiveau('r1')}>Relance 1</button>
      <button className={niveau === 'r2' ? 'on' : ''} onClick={() => setNiveau('r2')}>Dernier avis</button>
    </div>
    {chan === 'email' && <label className="t-ar"><input type="checkbox" defaultChecked={true}></input> Demander un accusé de lecture</label>}
    <textarea value={txt} onChange={e => setTxt(e.target.value)} rows={chan === 'email' ? 12 : 4}></textarea>
    <button className="t-btn t-btn--primary" onClick={() => onSend({ t: chan, d: new Date().toLocaleDateString('fr-FR'), s: (niveau === 'r2' ? 'Dernier avis' : 'Relance 1') + (chan === 'email' ? ' envoyé par email' : ' envoyé par SMS') })}>Envoyer par {chan === 'email' ? 'email' : 'SMS'}</button>
  </div>);
}
Object.assign(window, { PipeBoard, ClientDrawer, DossierCard, RelanceForm });