/* global React, lecygne */
// Clients — liste filtrable + fiche (création / édition) en modal.

const CATEGORIES = [
  { id: 1, label: "Hôtel / Résidence" },
  { id: 2, label: "Restaurant / Commerce" },
  { id: 3, label: "Particulier" },
  { id: 9, label: "Autre / Divers" },
];

function ClientModal({ ctx, client, onClose, onSaved }) {
  const blank = { code_client: "", categorie_id: 3, societe: "", nom_client: "",
    prenoms: "", adresse: "", ville: "", pays: "SENEGAL", tel1: "", email: "" };
  const [f, setF] = React.useState(client ? { ...client } : blank);
  const [err, setErr] = React.useState("");
  const [busy, setBusy] = React.useState(false);
  const [hist, setHist] = React.useState(null);
  const set = (k) => (e) => setF({ ...f, [k]: e.target.value });

  React.useEffect(() => {
    if (client && client.code_client) lecygne.clients.history(client.code_client).then(setHist);
  }, [client]);

  async function save() {
    setErr("");
    if (!f.societe && !f.nom_client) { setErr("Renseigner une société ou un nom."); return; }
    if (!f.code_client) { setErr("Le code client est obligatoire."); return; }
    setBusy(true);
    const row = { ...f, code_client: Number(f.code_client), categorie_id: Number(f.categorie_id) };
    const res = await lecygne.clients.upsert(row, ctx.company.id);
    setBusy(false);
    if (res.error) setErr(res.error.message);
    else { window.lcToast("Client enregistré", "success"); onSaved(); onClose(); }
  }

  async function remove() {
    if (!window.confirm("Supprimer définitivement ce client ?")) return;
    setBusy(true);
    const res = await lecygne.clients.remove(client.code_client);
    setBusy(false);
    if (res.error) setErr(res.error.message + " (le client a peut-être des commandes liées)");
    else { window.lcToast("Client supprimé", "success"); onSaved(); onClose(); }
  }

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <h2>{client ? `Client #${client.code_client}` : "Nouveau client"}</h2>
        <div className="grid2">
          <div><label>Code client</label>
            <input className="field" value={f.code_client} onChange={set("code_client")}
              disabled={!!client} type="number" /></div>
          <div><label>Catégorie</label>
            <select className="field" value={f.categorie_id} onChange={set("categorie_id")}>
              {CATEGORIES.map((c) => <option key={c.id} value={c.id}>{c.label}</option>)}
            </select></div>
        </div>
        <div className="grid2">
          <div><label>Société</label><input className="field" value={f.societe || ""} onChange={set("societe")} /></div>
          <div><label>Nom</label><input className="field" value={f.nom_client || ""} onChange={set("nom_client")} /></div>
        </div>
        <div className="grid2">
          <div><label>Adresse</label><input className="field" value={f.adresse || ""} onChange={set("adresse")} /></div>
          <div><label>Ville</label><input className="field" value={f.ville || ""} onChange={set("ville")} /></div>
        </div>
        <div className="grid2">
          <div><label>Téléphone</label><input className="field" value={f.tel1 || ""} onChange={set("tel1")} /></div>
          <div><label>E-mail</label><input className="field" type="email" value={f.email || ""} onChange={set("email")} /></div>
        </div>
        {client && hist && (
          <div style={{ marginTop: 16, borderTop: "1px solid var(--line)", paddingTop: 14 }}>
            <div className="row-flex" style={{ justifyContent: "space-between", marginBottom: 8 }}>
              <b>Historique</b>
              <span className="pill amber">Solde dû : {lecygne.fmtAmount(hist.solde, (ctx.company && ctx.company.currency) || "XOF")}</span>
            </div>
            {hist.commandes.length ? (
              <div className="tbl-wrap" style={{ maxHeight: 180, overflowY: "auto" }}><table>
                <thead><tr><th>N°</th><th>Date</th><th>Statut</th><th>Facture</th></tr></thead>
                <tbody>
                  {hist.commandes.map((c) => {
                    const st = lecygne.STATUTS[c.statut] || {};
                    return <tr key={c.no_commande}>
                      <td>#{c.no_commande}</td><td>{lecygne.fmtDate(c.date_commande)}</td>
                      <td><span className={"pill " + (st.cls || "gray")}>{st.fr || c.statut}</span></td>
                      <td>{c.no_facture || "—"}</td></tr>;
                  })}
                </tbody>
              </table></div>
            ) : <p className="hint">Aucune commande pour ce client.</p>}
          </div>
        )}
        {err && <div className="auth-err">{err}</div>}
        <div className="actions">
          {client && <button className="btn danger" onClick={remove} disabled={busy} style={{ marginRight: "auto" }}>Supprimer</button>}
          <button className="btn" onClick={onClose}>Annuler</button>
          <button className="btn primary" onClick={save} disabled={busy}>{busy ? "…" : "Enregistrer"}</button>
        </div>
      </div>
    </div>
  );
}

function ScreenClients({ ctx }) {
  const [search, setSearch] = React.useState("");
  const [editing, setEditing] = React.useState(null); // null | {} | client
  React.useEffect(() => { if (ctx.seed && ctx.seed.route === "clients") setSearch(ctx.seed.term); }, [ctx.seed]);
  const list = lecygne.useClients({ search });
  const catLabel = (id) => (CATEGORIES.find((c) => c.id === id) || {}).label || "—";

  return (
    <div>
      <div className="topbar"><h1>Clients</h1>
        <input className="search" placeholder="Rechercher société, nom…"
          value={search} onChange={(e) => setSearch(e.target.value)} /></div>

      <div className="card">
        <h2>{list.loading ? "Clients" : `${(list.data || []).length} clients`}
          <span className="row-flex" style={{ gap: 8 }}>
            <button className="btn sm" onClick={() => window.exportCsv("clients.csv", list.data || [], [
              { key: "code_client", label: "Code" },
              { label: "Société / Nom", map: (c) => c.societe || c.nom_client },
              { label: "Catégorie", map: (c) => catLabel(c.categorie_id) },
              { key: "ville", label: "Ville" }, { key: "tel1", label: "Téléphone" }, { key: "email", label: "E-mail" },
            ])}>⤓ Exporter</button>
            <button className="btn sm primary" onClick={() => setEditing({})}>＋ Nouveau client</button>
          </span>
        </h2>
        {list.loading ? <div className="spinner">Chargement…</div> : (
          <div className="tbl-wrap">
            <table>
              <thead><tr>
                <th>Code</th><th>Société / Nom</th><th>Catégorie</th><th>Ville</th><th>Téléphone</th>
              </tr></thead>
              <tbody>
                {(list.data || []).map((c) => (
                  <tr key={c.code_client} className="row-click" onClick={() => setEditing(c)}>
                    <td>{c.code_client}</td>
                    <td>{c.societe || c.nom_client}</td>
                    <td><span className="pill">{catLabel(c.categorie_id)}</span></td>
                    <td>{c.ville || "—"}</td>
                    <td>{c.tel1 || "—"}</td>
                  </tr>
                ))}
                {!(list.data || []).length &&
                  <tr><td colSpan="5" className="empty">Aucun client.</td></tr>}
              </tbody>
            </table>
          </div>
        )}
      </div>

      {editing && (
        <ClientModal ctx={ctx} client={editing.code_client ? editing : null}
          onClose={() => setEditing(null)} onSaved={() => list.reload()} />
      )}
    </div>
  );
}