/* global React, lecygne */
// =====================================================================
// Administration — paramétrage white-label (nom affiché + logo + thème)
// pour que l'application serve plusieurs sociétés, et gestion des
// utilisateurs. Réservé au rôle "admin" (filtré aussi côté sidebar/RLS).
// =====================================================================

function ScreenParametres({ ctx }) {
  const c = ctx.company || {};
  const [f, setF] = React.useState({
    display_name: c.display_name || "", legal_name: c.legal_name || "",
    primary_color: c.primary_color || "#1d6fb8", currency: c.currency || "XOF",
    vat_rate: c.vat_rate != null ? c.vat_rate : 18, city: c.city || "",
    address: c.address || "", phone: c.phone || "", email: c.email || "",
    ninea: c.ninea || "", rccm: c.rccm || "",
  });
  const [logoUrl, setLogoUrl] = React.useState(c.logo_url || "");
  const [msg, setMsg] = React.useState("");
  const [err, setErr] = React.useState("");
  const [busy, setBusy] = React.useState(false);
  const set = (k) => (e) => setF({ ...f, [k]: e.target.value });

  async function onLogo(e) {
    const file = e.target.files && e.target.files[0];
    if (!file) return;
    setBusy(true); setErr(""); setMsg("");
    const res = await lecygne.company.uploadLogo(c.id, file);
    setBusy(false);
    if (res.error) setErr("Échec du téléversement : " + res.error.message);
    else { setLogoUrl(res.url); setMsg("Logo téléversé — pensez à enregistrer."); }
  }

  async function save() {
    setBusy(true); setErr(""); setMsg("");
    const res = await lecygne.company.update(c.id, {
      ...f, vat_rate: Number(f.vat_rate), logo_url: logoUrl || null,
    });
    setBusy(false);
    if (res.error) setErr(res.error.message);
    else { setMsg("Paramètres enregistrés."); ctx.reloadCompany(); }
  }

  return (
    <div>
      <div className="topbar"><h1>Paramètres société</h1></div>

      <div className="card">
        <h2>Identité &amp; image de marque</h2>
        <p className="hint" style={{ marginBottom: 16 }}>
          Le nom affiché et le logo apparaissent dans la barre latérale, l'écran de connexion
          et les documents. Modifiez-les pour adapter l'application à une autre société.
        </p>

        <div className="row-flex" style={{ marginBottom: 18 }}>
          {logoUrl
            ? <img className="logo-preview" src={logoUrl} alt="logo" />
            : <div className="logo-preview" style={{ display: "flex", alignItems: "center", justifyContent: "center", fontSize: 26 }}>⚜</div>}
          <div>
            <label>Logo (PNG / SVG / JPG)</label>
            <input type="file" accept="image/*" onChange={onLogo} disabled={busy} />
            <div className="hint">Carré recommandé, ≥ 128 px.</div>
          </div>
        </div>

        <div className="grid2">
          <div><label>Nom affiché *</label><input className="field" value={f.display_name} onChange={set("display_name")} /></div>
          <div><label>Raison sociale</label><input className="field" value={f.legal_name} onChange={set("legal_name")} /></div>
        </div>
        <div className="grid3">
          <div><label>Couleur primaire</label>
            <div className="row-flex">
              <input type="color" value={f.primary_color} onChange={set("primary_color")} style={{ width: 44, height: 38, border: "1px solid var(--line2)", borderRadius: 8 }} />
              <input className="field" value={f.primary_color} onChange={set("primary_color")} />
            </div></div>
          <div><label>Devise</label><input className="field" value={f.currency} onChange={set("currency")} maxLength={3} /></div>
          <div><label>Taux TVA (%)</label><input className="field" type="number" value={f.vat_rate} onChange={set("vat_rate")} /></div>
        </div>
      </div>

      <div className="card">
        <h2>Coordonnées (factures &amp; bons de livraison)</h2>
        <div className="grid2">
          <div><label>Adresse</label><input className="field" value={f.address} onChange={set("address")} /></div>
          <div><label>Ville</label><input className="field" value={f.city} onChange={set("city")} /></div>
        </div>
        <div className="grid2">
          <div><label>Téléphone</label><input className="field" value={f.phone} onChange={set("phone")} /></div>
          <div><label>E-mail</label><input className="field" type="email" value={f.email} onChange={set("email")} /></div>
        </div>
        <div className="grid2">
          <div><label>NINEA</label><input className="field" value={f.ninea} onChange={set("ninea")} /></div>
          <div><label>RCCM</label><input className="field" value={f.rccm} onChange={set("rccm")} /></div>
        </div>
      </div>

      {err && <div className="auth-err">{err}</div>}
      {msg && <div className="auth-err" style={{ background: "var(--green-soft)", color: "var(--green)" }}>{msg}</div>}
      <div className="actions">
        <button className="btn primary" onClick={save} disabled={busy}>{busy ? "…" : "Enregistrer les paramètres"}</button>
      </div>
    </div>
  );
}

// ---- Utilisateurs ----------------------------------------------------
const ROLES = [
  { id: "comptoir", label: "Comptoir" },
  { id: "gestion", label: "Gestion" },
  { id: "admin", label: "Administrateur" },
];

// ---- Journal des modifications (audit) -------------------------------
const AUDIT_OP = { INSERT: { fr: "Création", cls: "green" }, UPDATE: { fr: "Modification", cls: "amber" }, DELETE: { fr: "Suppression", cls: "red" } };

function ScreenAudit({ ctx }) {
  const [table, setTable] = React.useState("");
  const [open, setOpen] = React.useState(null);
  const log = lecygne.useAudit({ table: table || undefined });

  function fmtWhen(v) {
    try { return new Intl.DateTimeFormat("fr-FR", { dateStyle: "short", timeStyle: "short" }).format(new Date(v)); }
    catch (_) { return v; }
  }

  return (
    <div>
      <div className="topbar"><h1>Journal des modifications</h1></div>
      <div className="card">
        <div className="toolbar">
          <select className="field" style={{ width: 220 }} value={table} onChange={(e) => setTable(e.target.value)}>
            <option value="">Toutes les tables</option>
            {Object.entries(lecygne.AUDIT_TABLES).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
          </select>
          <div className="grow" />
          <button className="btn sm" onClick={() => log.reload()}>↻ Actualiser</button>
        </div>
        {log.loading ? <div className="spinner">Chargement…</div> :
          !(log.data || []).length ? (
            <div className="empty">Aucune entrée. Exécutez la migration <code>20260621090500_audit_log.sql</code> pour activer le journal.</div>
          ) : (
            <div className="tbl-wrap"><table>
              <thead><tr><th>Quand</th><th>Utilisateur</th><th>Table</th><th>Action</th><th>Réf.</th><th></th></tr></thead>
              <tbody>
                {(log.data || []).map((e) => {
                  const op = AUDIT_OP[e.op] || { fr: e.op, cls: "gray" };
                  return (
                    <React.Fragment key={e.id}>
                      <tr className="row-click" onClick={() => setOpen(open === e.id ? null : e.id)}>
                        <td>{fmtWhen(e.changed_at)}</td>
                        <td>{e.actor_name || "—"}</td>
                        <td>{lecygne.AUDIT_TABLES[e.table_name] || e.table_name}</td>
                        <td><span className={"pill " + op.cls}>{op.fr}</span></td>
                        <td>{e.row_pk || "—"}</td>
                        <td style={{ color: "var(--hint)" }}>{open === e.id ? "▲" : "▼"}</td>
                      </tr>
                      {open === e.id && (
                        <tr><td colSpan="6" style={{ background: "var(--bg)" }}>
                          <pre style={{ fontSize: 11, whiteSpace: "pre-wrap", margin: 0, color: "var(--muted)" }}>
                            {JSON.stringify(e.diff, null, 2)}
                          </pre>
                        </td></tr>
                      )}
                    </React.Fragment>
                  );
                })}
              </tbody>
            </table></div>
          )}
      </div>
    </div>
  );
}

function ScreenUtilisateurs({ ctx }) {
  const users = lecygne.useAsync(async () => {
    const sb = await lecygne.waitForSupabase();
    const { data } = await sb.from("profile")
      .select("id, full_name, role, is_active, created_at")
      .order("created_at");
    return data || [];
  }, []);

  async function setRole(id, role) {
    const sb = await lecygne.waitForSupabase();
    await sb.from("profile").update({ role }).eq("id", id);
    users.reload();
  }
  async function toggleActive(id, val) {
    const sb = await lecygne.waitForSupabase();
    await sb.from("profile").update({ is_active: val }).eq("id", id);
    users.reload();
  }

  return (
    <div>
      <div className="topbar"><h1>Utilisateurs</h1></div>
      <div className="card">
        <h2>Comptes de la société</h2>
        <p className="hint" style={{ marginBottom: 14 }}>
          Les nouveaux comptes s'inscrivent depuis l'écran de connexion et arrivent en
          rôle « Comptoir ». Promouvez-les ici. Seuls les administrateurs voient cet écran.
        </p>
        {users.loading ? <div className="spinner">Chargement…</div> : (
          <div className="tbl-wrap"><table>
            <thead><tr><th>Nom</th><th>Rôle</th><th>Actif</th></tr></thead>
            <tbody>
              {(users.data || []).map((u) => (
                <tr key={u.id}>
                  <td>{u.full_name || "—"}</td>
                  <td><select className="field" style={{ width: 180, height: 34 }}
                    value={u.role} onChange={(e) => setRole(u.id, e.target.value)}>
                    {ROLES.map((r) => <option key={r.id} value={r.id}>{r.label}</option>)}
                  </select></td>
                  <td><button className={"btn sm " + (u.is_active ? "" : "danger")}
                    onClick={() => toggleActive(u.id, !u.is_active)}>
                    {u.is_active ? "Actif" : "Inactif"}
                  </button></td>
                </tr>
              ))}
            </tbody>
          </table></div>
        )}
      </div>
    </div>
  );
}