const { useState: useTblState, useMemo: useTblMemo } = React;
function SortTh({ id, label, sort, setSort, right }) {
  const on = sort.k === id;
  return (<th className={right ? 'num' : ''} onClick={() => setSort({ k: id, dir: on && sort.dir === 'desc' ? 'asc' : 'desc' })}>
    {label}{on ? (sort.dir === 'desc' ? ' ↓' : ' ↑') : ''}
  </th>);
}
function DossierTable({ dossiers, onOpen, cheques }) {
  const [sort, setSort] = useTblState({ k: 'impaye', dir: 'desc' });
  const sorted = useTblMemo(() => {
    const arr = [...dossiers];
    const get = d => {
      if (sort.k === 'nom') return d.nom;
      if (sort.k === 'stage') return TALOS_STAGES.findIndex(s => s.id === d.stage);
      if (sort.k === 'cheque') return d.cheque ? d.cheque.montant : 0;
      return d[sort.k];
    };
    arr.sort((a, b) => { const x = get(a), y = get(b); const c = typeof x === 'string' ? x.localeCompare(y) : x - y; return sort.dir === 'desc' ? -c : c; });
    return arr;
  }, [dossiers, sort]);
  return (<div className="t-tablewrap">
    <table className="t-table">
      <thead><tr>
        <SortTh id="nom" label="Client" sort={sort} setSort={setSort}></SortTh>
        <th>Pôle</th>
        <SortTh id="dateFacture" label="Facture" sort={sort} setSort={setSort}></SortTh>
        <SortTh id="total" label="Total" sort={sort} setSort={setSort} right={true}></SortTh>
        <SortTh id="impaye" label="Reste dû" sort={sort} setSort={setSort} right={true}></SortTh>
        <SortTh id="recupere" label="Récupéré" sort={sort} setSort={setSort} right={true}></SortTh>
        <SortTh id="jours" label="Retard" sort={sort} setSort={setSort} right={true}></SortTh>
        <th>Boucle</th>
        {cheques && <SortTh id="cheque" label="Chèque rejeté" sort={sort} setSort={setSort} right={true}></SortTh>}
        {cheques && <th>Motif</th>}
        {cheques && <th>Statut chèque</th>}
        <SortTh id="stage" label="Étape" sort={sort} setSort={setSort}></SortTh>
        {!cheques && <th>Dernière relance</th>}
        <th></th>
      </tr></thead>
      <tbody>
        {sorted.map(d => {
          const last = d.relances[d.relances.length - 1];
          return (<tr key={d.id} onClick={() => onOpen(d)}>
            <td><div className="t-cell-name">{d.prenom} {d.nom}</div><div className="t-cell-sub">#{d.id} · {d.tel}</div></td>
            <td><PoleBadge pole={d.pole}></PoleBadge></td>
            <td className="t-cell-sub2">{d.dateFacture}</td>
            <td className="num">{fmtEUR(d.total)}</td>
            <td className="num t-cell-due">{d.impaye > 0 ? fmtEUR(d.impaye) : '—'}</td>
            <td className="num t-cell-rec">{d.recupere > 0 ? fmtEUR(d.recupere) : '—'}</td>
            <td className={'num' + (d.jours > 52 ? ' t-cell-due' : '')}>{d.jours} j</td>
            <td>{d.stage !== 'ok' && <BoucleBadge on={d.boucle}></BoucleBadge>}</td>
            {cheques && <td className="num t-cell-due">{fmtEUR(d.cheque.montant)}</td>}
            {cheques && <td className="t-cell-sub2">{d.cheque.motif}<div className="t-cell-sub">{d.cheque.date}</div></td>}
            {cheques && <td><span className="t-flag t-flag--amber">{d.cheque.statut}</span></td>}
            <td><StageDot stage={d.stage}></StageDot></td>
            {!cheques && <td className="t-cell-last">{last ? <span><ChanIcon t={last.t}></ChanIcon> {last.d}</span> : <span className="t-cell-sub">aucune</span>}
              <div className="t-cell-flags">{d.huissier && <span className="t-flag t-flag--red">Huissier</span>}{d.med && <span className="t-flag t-flag--amber">MED</span>}</div></td>}
            <td className="t-cell-arrow">›</td>
          </tr>);
        })}
        {sorted.length === 0 && <tr><td colSpan={cheques ? 12 : 11} className="t-col-empty">Aucun dossier ne correspond aux filtres</td></tr>}
      </tbody>
    </table>
  </div>);
}
Object.assign(window, { DossierTable });