const { useState: useAppState } = React;
/* Barre de process : les 5 étapes du recouvrement, compteur + montant + boucle auto, cliquables pour filtrer. */
function ProcessBar({ dossiers, etape, onEtape }) {
  return (<div className="t-process">
    {TALOS_STAGES.map((s, i) => {
      const items = dossiers.filter(d => d.stage === s.id);
      const sum = items.reduce((a, d) => a + (s.id === 'ok' ? d.recupere : d.impaye), 0);
      const nAuto = items.filter(d => d.boucle).length;
      return (<React.Fragment key={s.id}>
        <button type="button" className={'t-pstep' + (etape === s.id ? ' on' : '')} style={{ '--stg': s.color }} onClick={() => onEtape(etape === s.id ? 'ALL' : s.id)} title={s.hint}>
          <span className="t-pstep-lab">{s.label}</span>
          <span className="t-pstep-row"><span className="t-pstep-n">{items.length}</span><span className="t-pstep-eur">{fmtEUR(sum)}</span></span>
          {s.id !== 'ok' && nAuto > 0 ? <span className="t-pstep-auto">⟳ {nAuto} en boucle auto</span> : <span className="t-pstep-auto">&nbsp;</span>}
        </button>
        {i < TALOS_STAGES.length - 1 ? <span className="t-parrow">→</span> : null}
      </React.Fragment>);
    })}
  </div>);
}
function TalosApp() {
  const [view, setView] = useAppState('dossiers');
  const [pole, setPole] = useAppState('ALL');
  const [etape, setEtape] = useAppState('ALL');
  const [q, setQ] = useAppState('');
  const [dossiers, setDossiers] = useAppState([]);
  const [loading, setLoading] = useAppState(true);
  const [open, setOpen] = useAppState(null);
  const TALOS_API = 'https://crm.groupeverlaine.net/talos_api.php';
  React.useEffect(() => {
    TALOS_AUTH.authedFetch(TALOS_API)
      .then(r => r.json())
      .then(d => { if (d && d.ok) setDossiers(d.dossiers || []); setLoading(false); })
      .catch(() => setLoading(false));
  }, []);
  const apiPost = (payload) => TALOS_AUTH.authedFetch(TALOS_API, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) }).catch(() => {});
  const base = view === 'cheques' ? dossiers.filter(d => d.cheque) : dossiers;
  const filtered = base.filter(d => (pole === 'ALL' || d.pole === pole) && (etape === 'ALL' || d.stage === etape) && (q === '' || (d.nom + ' ' + d.prenom + ' ' + d.id).toLowerCase().includes(q.toLowerCase())));
  const du = dossiers.filter(d => d.stage !== 'ok').reduce((a, d) => a + d.impaye, 0);
  const rec = dossiers.reduce((a, d) => a + d.recupere, 0);
  const ctx = dossiers.filter(d => d.stage === 'ctx').length;
  const nbCheques = dossiers.filter(d => d.cheque).length;
  const move = (d, stage) => { apiPost({ action: 'stage', id: d.id, stage }); setDossiers(ds => ds.map(x => x.id === d.id ? { ...x, stage, ...(stage === 'ok' ? { recupere: x.recupere + x.impaye, impaye: 0 } : {}) } : x)); setOpen(o => o && o.id === d.id ? { ...o, stage, ...(stage === 'ok' ? { recupere: o.recupere + o.impaye, impaye: 0 } : {}) } : o); };
  const relance = (d, r) => { apiPost({ action: 'relance', id: d.id, canal: r.t, descr: r.s }); setDossiers(ds => ds.map(x => x.id === d.id ? { ...x, relances: [...x.relances, r] } : x)); setOpen(o => o && o.id === d.id ? { ...o, relances: [...o.relances, r] } : o); };
  const boucle = (d) => { apiPost({ action: 'boucle', id: d.id, boucle: !d.boucle }); setDossiers(ds => ds.map(x => x.id === d.id ? { ...x, boucle: !x.boucle } : x)); setOpen(o => o && o.id === d.id ? { ...o, boucle: !o.boucle } : o); };
  const note = (d, text) => { apiPost({ action: 'note', id: d.id, note: text }); setDossiers(ds => ds.map(x => x.id === d.id ? { ...x, note: text } : x)); setOpen(o => o && o.id === d.id ? { ...o, note: text } : o); };
  const isTable = view === 'dossiers' || view === 'cheques';
  return (<div className="t-app">
    <header className="t-top">
      <div className="t-brand"><img className="t-brand-logo" src="assets/logo-verlaine.png" alt="Groupe Verlaine"></img><div className="t-brand-sep"></div><div><b>Talos</b><span>Recouvrement</span></div></div>
      <nav className="t-nav">
        <button className={view === 'dossiers' ? 'on' : ''} onClick={() => setView('dossiers')}>Dossiers</button>
        <button className={view === 'cheques' ? 'on' : ''} onClick={() => setView('cheques')}>Chèques impayés <em className="t-count">{nbCheques}</em></button>
      </nav>
      <div className="t-top-kpis">
        <Kpi label="Reste dû" value={fmtEUR(du)} tone="red"></Kpi>
        <Kpi label="Récupéré" value={fmtEUR(rec)} tone="green"></Kpi>
        <Kpi label="Contentieux" value={ctx}></Kpi>
      </div>
      <button className="t-logout" onClick={() => TALOS_AUTH.logout()} title="Se déconnecter" style={{ marginLeft: '14px', background: 'transparent', border: '1.5px solid #e3e6f0', color: '#5a6473', borderRadius: '999px', padding: '8px 16px', fontSize: '13px', fontWeight: 700, cursor: 'pointer', fontFamily: 'inherit', whiteSpace: 'nowrap' }}>Quitter</button>
    </header>
    {view === 'dossiers' && <ProcessBar dossiers={dossiers} etape={etape} onEtape={setEtape}></ProcessBar>}
    {isTable && (<div className="t-toolbar">
      <div className="t-poles">
        {['ALL', 'ITE', 'PV', 'PAC'].map(p => <button key={p} className={pole === p ? 'on' : ''} onClick={() => setPole(p)}>{p === 'ALL' ? 'Tous les pôles' : p}</button>)}
      </div>
      <select className="t-select" value={etape} onChange={e => setEtape(e.target.value)}>
        <option value="ALL">Toutes les étapes</option>
        {TALOS_STAGES.map(s => <option key={s.id} value={s.id}>{s.label}</option>)}
      </select>
      <span className="t-result-count">{filtered.length} dossier{filtered.length > 1 ? 's' : ''} · {fmtEUR(filtered.reduce((a, d) => a + d.impaye, 0))} dû</span>
      <input className="t-search" placeholder="Rechercher un client, un n° de dossier…" value={q} onChange={e => setQ(e.target.value)}></input>
    </div>)}
    {isTable && loading && <div className="empty-load" style={{ padding: 48, textAlign: 'center', color: '#8a93a6', fontWeight: 600 }}>Chargement des dossiers…</div>}
    {isTable && !loading && <DossierTable dossiers={filtered} onOpen={setOpen} cheques={view === 'cheques'}></DossierTable>}
    <ClientDrawer d={open} onClose={() => setOpen(null)} onMove={move} onRelance={relance} onBoucle={boucle} onNote={note}></ClientDrawer>
  </div>);
}
/* ---- Gate d'authentification (id.groupeverlaine.com, 3 emails autorisés) ---- */
const TALOS_BTN = { background: '#1c3a8f', color: '#fff', border: 0, borderRadius: 12, padding: '13px 22px', fontSize: 15, fontWeight: 700, cursor: 'pointer', fontFamily: 'inherit' };
function AuthScreen({ title, sub, children }) {
  return (<div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background: '#f7f8fc', fontFamily: 'Manrope, system-ui, sans-serif', padding: 24 }}>
    <div style={{ maxWidth: 420, width: '100%', background: '#fff', border: '1px solid #e3e6f0', borderRadius: 18, padding: '40px 34px', textAlign: 'center', boxShadow: '0 20px 50px -28px rgba(13,28,77,.3)' }}>
      <img src="assets/logo-verlaine.png" alt="Groupe Verlaine" style={{ height: 40, marginBottom: 6 }} />
      <div style={{ fontWeight: 800, fontSize: 22, color: '#0d1c4d', letterSpacing: '-.5px' }}>Talos</div>
      <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '.6px', textTransform: 'uppercase', color: '#8a93a6', marginBottom: 22 }}>Recouvrement</div>
      <h1 style={{ fontSize: 19, color: '#0d1c4d', margin: '0 0 8px' }}>{title}</h1>
      <p style={{ fontSize: 14, color: '#5a6473', lineHeight: 1.5, margin: '0 0 22px' }}>{sub}</p>
      {children}
    </div>
  </div>);
}
function TalosRoot() {
  const [st, setSt] = React.useState({ loading: true });
  React.useEffect(() => { TALOS_AUTH.init().then(r => setSt(Object.assign({ loading: false }, r))).catch(e => setSt({ loading: false, authed: false, error: String((e && e.message) || e) })); }, []);
  if (st.loading) return <AuthScreen title="Connexion…" sub="Vérification de votre session."></AuthScreen>;
  if (st.forbidden) return <AuthScreen title="Accès restreint" sub={'Le compte ' + (st.email || '') + ' n’est pas autorisé à accéder à Talos. Rapprochez-vous d’un administrateur.'}><button style={TALOS_BTN} onClick={() => TALOS_AUTH.logout()}>Changer de compte</button></AuthScreen>;
  if (!st.authed) return <AuthScreen title="Espace recouvrement" sub={st.error ? ('Connexion impossible : ' + st.error) : 'Connectez-vous avec votre compte Groupe Verlaine pour accéder à Talos.'}><button style={TALOS_BTN} onClick={() => TALOS_AUTH.login()}>Se connecter</button></AuthScreen>;
  return <TalosApp></TalosApp>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<TalosRoot></TalosRoot>);