/* global React, lecygne */
// =====================================================================
// Super-administration — gestion des sociétés (tenants) et de leurs
// licences. Réservé au super-admin (filtré sidebar + RLS + RPC).
// =====================================================================

const PLANS = ["standard", "pro", "entreprise"];

function LicenseModal({ company, onClose, onSaved }) {
  const lic = company.license || {};
  const [f, setF] = React.useState({
    plan: lic.plan || "standard",
    status: lic.status || "trial",
    start_date: lic.start_date || new Date().toISOString().slice(0, 10),
    end_date: lic.end_date || "",
    max_users: lic.max_users != null ? lic.max_users : "",
    notes: lic.notes || "",
  });
  const [err, setErr] = React.useState("");
  const [busy, setBusy] = React.useState(false);
  const set = (k) => (e) => setF({ ...f, [k]: e.target.value });

  async function save() {
    setBusy(true); setErr("");
    const res = await lecygne.superadmin.setLicense({ company_id: company.id, ...f });
    setBusy(false);
    if (res.error) setErr(res.error.message);
    else { onSaved(); onClose(); }
  }

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <h2>Licence — {company.display_name}</h2>
        <div className="grid2">
          <div><label>Plan</label>
            <select className="field" value={f.plan} onChange={set("plan")}>
              {PLANS.map((p) => <option key={p} value={p}>{p}</option>)}
            </select></div>
          <div><label>Statut</label>
            <select className="field" value={f.status} onChange={set("status")}>
              {Object.entries(lecygne.LICENSE_STATUS).map(([k, v]) => <option key={k} value={k}>{v.fr}</option>)}
            </select></div>
        </div>
        <div className="grid2">
          <div><label>Début</label><input className="field" type="date" value={f.start_date} onChange={set("start_date")} /></div>
          <div><label>Échéance (vide = illimité)</label><input className="field" type="date" value={f.end_date} onChange={set("end_date")} /></div>
        </div>
        <div className="grid2">
          <div><label>Max. utilisateurs (vide = illimité)</label><input className="field" type="number" value={f.max_users} onChange={set("max_users")} /></div>
          <div><label>Notes</label><input className="field" value={f.notes} onChange={set("notes")} /></div>
        </div>
        {err && <div className="auth-err">{err}</div>}
        <div className="actions">
          <button className="btn" onClick={onClose}>Annuler</button>
          <button className="btn primary" onClick={save} disabled={busy}>{busy ? "…" : "Enregistrer la licence"}</button>
        </div>
      </div>
    </div>
  );
}

function NewCompanyModal({ onClose, onSaved }) {
  const [f, setF] = React.useState({ display_name: "", slug: "", status: "trial", end_date: "" });
  const [err, setErr] = React.useState("");
  const [busy, setBusy] = React.useState(false);
  const set = (k) => (e) => setF({ ...f, [k]: e.target.value });

  function autoSlug(name) {
    return name.toLowerCase().normalize("NFD").replace(/[̀-ͯ]/g, "")
      .replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
  }

  async function save() {
    setErr("");
    if (!f.display_name) { setErr("Nom requis."); return; }
    setBusy(true);
    const res = await lecygne.superadmin.createCompany({
      slug: f.slug || autoSlug(f.display_name), display_name: f.display_name,
      status: f.status, end_date: f.end_date || null,
    });
    setBusy(false);
    if (res.error) setErr(res.error.message);
    else { onSaved(); onClose(); }
  }

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <h2>Nouvelle société</h2>
        <div className="grid2">
          <div><label>Nom affiché *</label>
            <input className="field" value={f.display_name}
              onChange={(e) => setF({ ...f, display_name: e.target.value, slug: f.slug || autoSlug(e.target.value) })} /></div>
          <div><label>Identifiant (slug)</label><input className="field" value={f.slug} onChange={set("slug")} /></div>
        </div>
        <div className="grid2">
          <div><label>Statut licence</label>
            <select className="field" value={f.status} onChange={set("status")}>
              {Object.entries(lecygne.LICENSE_STATUS).map(([k, v]) => <option key={k} value={k}>{v.fr}</option>)}
            </select></div>
          <div><label>Échéance</label><input className="field" type="date" value={f.end_date} onChange={set("end_date")} /></div>
        </div>
        <p className="hint">La société est créée vide. Affectez-lui ensuite des utilisateurs (onglet Utilisateurs) et l'admin pourra personnaliser nom + logo.</p>
        {err && <div className="auth-err">{err}</div>}
        <div className="actions">
          <button className="btn" onClick={onClose}>Annuler</button>
          <button className="btn primary" onClick={save} disabled={busy}>{busy ? "…" : "Créer la société"}</button>
        </div>
      </div>
    </div>
  );
}

function AssignUserRow({ user, companies, onSaved }) {
  const [companyId, setCompanyId] = React.useState(user.company_id || "");
  const [role, setRole] = React.useState(user.role || "comptoir");
  const [sa, setSa] = React.useState(!!user.is_super_admin);
  const [busy, setBusy] = React.useState(false);

  async function save() {
    setBusy(true);
    await lecygne.superadmin.assignUser({ user_id: user.id, company_id: companyId || null, role, is_super_admin: sa });
    setBusy(false); onSaved();
  }
  const compName = (id) => { const c = companies.find((x) => x.id === id); return c ? c.display_name : "—"; };

  return (
    <tr>
      <td>{user.full_name || "—"}</td>
      <td><select className="field" style={{ width: 200, height: 34 }} value={companyId} onChange={(e) => setCompanyId(e.target.value)}>
        <option value="">— Aucune —</option>
        {companies.map((c) => <option key={c.id} value={c.id}>{c.display_name}</option>)}
      </select></td>
      <td><select className="field" style={{ width: 150, height: 34 }} value={role} onChange={(e) => setRole(e.target.value)}>
        <option value="comptoir">Comptoir</option>
        <option value="gestion">Gestion</option>
        <option value="admin">Administrateur</option>
      </select></td>
      <td style={{ textAlign: "center" }}>
        <input type="checkbox" checked={sa} onChange={(e) => setSa(e.target.checked)} /></td>
      <td><button className="btn sm primary" onClick={save} disabled={busy}>{busy ? "…" : "Appliquer"}</button></td>
    </tr>
  );
}

function ScreenSocietes({ ctx }) {
  const [tab, setTab] = React.useState("societes");
  const companies = lecygne.useCompaniesAdmin();
  const users = lecygne.useAllUsers();
  const [editLic, setEditLic] = React.useState(null);
  const [creating, setCreating] = React.useState(false);

  const reloadAll = () => { companies.reload(); users.reload(); };

  return (
    <div>
      <div className="topbar"><h1>Sociétés &amp; licences</h1></div>
      <div className="card">
        <div className="toolbar">
          <button className={"btn sm" + (tab === "societes" ? " primary" : "")} onClick={() => setTab("societes")}>Sociétés</button>
          <button className={"btn sm" + (tab === "users" ? " primary" : "")} onClick={() => setTab("users")}>Utilisateurs</button>
          <div className="grow" />
          {tab === "societes" && <button className="btn primary" onClick={() => setCreating(true)}>＋ Nouvelle société</button>}
        </div>

        {tab === "societes" && (
          companies.loading ? <div className="spinner">Chargement…</div> : (
            <div className="tbl-wrap"><table>
              <thead><tr><th>Société</th><th>Plan</th><th>Statut</th><th>Échéance</th><th>Max. users</th><th></th></tr></thead>
              <tbody>
                {(companies.data || []).map((c) => {
                  const lic = c.license || {};
                  const st = lecygne.LICENSE_STATUS[lic.status] || {};
                  return (
                    <tr key={c.id}>
                      <td>{c.display_name}<div className="hint">{c.slug}</div></td>
                      <td>{lic.plan || "—"}</td>
                      <td><span className={"pill " + (st.cls || "gray")}>{st.fr || "—"}</span></td>
                      <td>{lic.end_date ? lecygne.fmtDate(lic.end_date) : "Illimitée"}</td>
                      <td>{lic.max_users != null ? lic.max_users : "∞"}</td>
                      <td><button className="btn sm" onClick={() => setEditLic(c)}>Gérer la licence</button></td>
                    </tr>
                  );
                })}
              </tbody>
            </table></div>
          )
        )}

        {tab === "users" && (
          users.loading ? <div className="spinner">Chargement…</div> : (
            <div className="tbl-wrap"><table>
              <thead><tr><th>Nom</th><th>Société</th><th>Rôle</th><th>Super-admin</th><th></th></tr></thead>
              <tbody>
                {(users.data || []).map((u) => (
                  <AssignUserRow key={u.id} user={u} companies={companies.data || []} onSaved={reloadAll} />
                ))}
              </tbody>
            </table></div>
          )
        )}
      </div>

      {editLic && <LicenseModal company={editLic} onClose={() => setEditLic(null)} onSaved={reloadAll} />}
      {creating && <NewCompanyModal onClose={() => setCreating(false)} onSaved={reloadAll} />}
    </div>
  );
}