/* global React, lecygne */
// Tableau de bord — cartes chiffres-clés + dernières commandes.

function ScreenDashboard({ ctx }) {
  const stats = lecygne.useStats();
  const cmds = lecygne.useCommandes({});
  const revenue = lecygne.useRevenue();
  const cur = (ctx.company && ctx.company.currency) || "XOF";
  const S = stats.data || {};

  const clientName = (c) => (c.client && (c.client.societe || c.client.nom_client)) || `#${c.code_client}`;

  // Répartition par statut + top clients, calculés depuis les commandes chargées
  const rows = cmds.data || [];
  const byStatut = Object.keys(lecygne.STATUTS).map((k) => ({
    k, ...lecygne.STATUTS[k], count: rows.filter((c) => c.statut === k).length,
  })).filter((s) => s.count > 0);
  const maxStatut = Math.max(1, ...byStatut.map((s) => s.count));
  const topMap = {};
  rows.forEach((c) => { const n = clientName(c); topMap[n] = (topMap[n] || 0) + 1; });
  const topClients = Object.entries(topMap).map(([name, n]) => ({ name, n }))
    .sort((a, b) => b.n - a.n).slice(0, 5);

  return (
    <div>
      <div className="topbar"><h1>Tableau de bord</h1></div>

      <div className="stats">
        <div className="stat"><div className="lbl">Commandes en cours</div>
          <div className="val">{stats.loading ? "…" : S.enCours}</div>
          <div className="sub">déposées · en traitement · prêtes</div></div>
        <div className="stat"><div className="lbl">À livrer</div>
          <div className="val">{stats.loading ? "…" : S.aLivrer}</div>
          <div className="sub">échéance fixée</div></div>
        <div className="stat"><div className="lbl">CA du mois</div>
          <div className="val">{stats.loading ? "…" : lecygne.fmtAmount(S.caMonth)}</div>
          <div className="sub">{cur} · factures émises</div></div>
        <div className="stat"><div className="lbl">Impayés</div>
          <div className="val">{stats.loading ? "…" : lecygne.fmtAmount(S.impayes)}</div>
          <div className="sub" style={{ color: "var(--amber)" }}>{stats.loading ? "" : `${S.nbImpayees} facture(s) · ${cur}`}</div></div>
      </div>

      <div className="card">
        <h2>Chiffre d'affaires — 6 derniers mois <span className="pill blue">{cur}</span></h2>
        {revenue.loading
          ? <div className="spinner">Chargement…</div>
          : (revenue.data || []).some((d) => d.value > 0)
            ? <BarChart data={revenue.data || []} currency={cur} />
            : <div className="empty">Aucune facture sur la période. Le graphique se remplira au fil des facturations.</div>}
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18 }} className="dash-2col">
        <div className="card" style={{ margin: 0 }}>
          <h2>Commandes par statut</h2>
          {!byStatut.length ? <div className="empty">Aucune commande.</div> : byStatut.map((s) => (
            <div key={s.k} style={{ marginBottom: 10 }}>
              <div className="row-flex" style={{ justifyContent: "space-between", marginBottom: 4 }}>
                <span className={"pill " + s.cls}>{s.fr}</span>
                <b>{s.count}</b>
              </div>
              <div style={{ height: 8, background: "var(--gray-soft)", borderRadius: 4 }}>
                <div style={{ height: 8, width: (s.count / maxStatut * 100) + "%", background: "var(--primary)", borderRadius: 4 }} />
              </div>
            </div>
          ))}
        </div>
        <div className="card" style={{ margin: 0 }}>
          <h2>Top clients</h2>
          {!topClients.length ? <div className="empty">Aucune commande.</div> : (
            <table><tbody>
              {topClients.map((c, i) => (
                <tr key={i}><td style={{ width: 26, color: "var(--hint)" }}>{i + 1}</td>
                  <td>{c.name}</td><td className="num"><b>{c.n}</b> cmd.</td></tr>
              ))}
            </tbody></table>
          )}
        </div>
      </div>

      <div className="card">
        <h2>Dernières commandes
          <button className="btn sm primary" onClick={() => ctx.setRoute("commandes")}>Voir tout</button>
        </h2>
        {cmds.loading ? <div className="spinner">Chargement…</div> : (
          <div className="tbl-wrap">
            <table>
              <thead><tr>
                <th>N°</th><th>Client</th><th>Date</th><th>Statut</th>
              </tr></thead>
              <tbody>
                {(cmds.data || []).slice(0, 10).map((c) => {
                  const st = lecygne.STATUTS[c.statut] || {};
                  return (
                    <tr key={c.no_commande}>
                      <td>#{c.no_commande}</td>
                      <td>{clientName(c)}</td>
                      <td>{lecygne.fmtDate(c.date_commande)}</td>
                      <td><span className={"pill " + (st.cls || "gray")}>{st.fr || c.statut}</span></td>
                    </tr>
                  );
                })}
                {!cmds.loading && !(cmds.data || []).length &&
                  <tr><td colSpan="4" className="empty">Aucune commande.</td></tr>}
              </tbody>
            </table>
          </div>
        )}
      </div>
    </div>
  );
}