/* global React, Icon, Modal, sectorById, NewSectorModal */
const { useState: useStateSEC, useEffect: useEffectSEC } = React;

// ============================================================================
// SECTORS MANAGEMENT — super-admin screen
// ----------------------------------------------------------------------------
// Lets a platform super-admin rename, recolour and add sectors. Sectors are
// universal labels used everywhere (projects, programmes, indicators) so
// changes propagate automatically via the existing realtime channel on
// public.sectors (useSectors() refreshes every consumer immediately).
//
// Permission model:
//   • Visible only when isSuperAdmin === true (Sidebar already filters via
//     the `superAdminOnly` flag on the NAV entry).
//   • Even if a non-super-admin reaches the URL, the RLS on public.sectors
//     would refuse any UPDATE / DELETE coming from them (see sectors.sql),
//     so the screen is defence-in-depth.
//
// Built-in vs custom:
//   • is_builtin = true → seeded by the platform (the 12 originals: Santé,
//     Nutrition, …). Can be RENAMED + RECOLOURED by super-admin but cannot
//     be DELETED.
//   • is_builtin = false → created by an admin via the "+ Nouveau secteur"
//     flow. Can be renamed, recoloured and archived by super-admin.
// ============================================================================

// Pre-baked colour palette (same 9 pairs as NewSectorModal so colours stay
// consistent across the app).
const SECTOR_PALETTE_SEC = [
  { key: "blue",    fr: "Bleu",     en: "Blue",     color: "oklch(0.50 0.17 256)", bg: "oklch(0.96 0.04 256)" },
  { key: "teal",    fr: "Sarcelle", en: "Teal",     color: "oklch(0.55 0.12 195)", bg: "oklch(0.96 0.04 195)" },
  { key: "green",   fr: "Vert",     en: "Green",    color: "oklch(0.55 0.14 145)", bg: "oklch(0.96 0.04 145)" },
  { key: "amber",   fr: "Ambre",    en: "Amber",    color: "oklch(0.62 0.15 75)",  bg: "oklch(0.96 0.06 75)"  },
  { key: "red",     fr: "Rouge",    en: "Red",      color: "oklch(0.58 0.18 25)",  bg: "oklch(0.96 0.04 25)"  },
  { key: "pink",    fr: "Rose",     en: "Pink",     color: "oklch(0.55 0.16 12)",  bg: "oklch(0.96 0.05 12)"  },
  { key: "purple",  fr: "Violet",   en: "Purple",   color: "oklch(0.55 0.15 290)", bg: "oklch(0.96 0.04 290)" },
  { key: "magenta", fr: "Magenta",  en: "Magenta",  color: "oklch(0.55 0.17 350)", bg: "oklch(0.96 0.05 350)" },
  { key: "slate",   fr: "Ardoise",  en: "Slate",    color: "oklch(0.42 0.04 250)", bg: "oklch(0.95 0.01 250)" },
];

function SectorsManagement({ t, lang, isSuperAdmin }) {
  const { data: sectors, loading, refresh } = window.melr.useSectors();
  const [editing, setEditing]   = useStateSEC(null); // sector being edited
  const [newOpen, setNewOpen]   = useStateSEC(false);
  const [busy, setBusy]         = useStateSEC(null);
  const [toast, setToast]       = useStateSEC(null);
  const [filterKind, setFilterKind] = useStateSEC("all"); // all | builtin | custom

  const showToast = (ok, msg, ttl) => {
    setToast({ ok, msg });
    setTimeout(() => setToast(null), ttl || 4000);
  };

  if (!isSuperAdmin) {
    return (
      <div className="page">
        <div className="page-header">
          <div className="page-eyebrow">{lang === "fr" ? "ACCÈS REFUSÉ" : "ACCESS DENIED"}</div>
          <h1 className="page-title">{lang === "fr" ? "Gestion des secteurs" : "Sectors management"}</h1>
        </div>
        <div className="page-body">
          <div className="card" style={{ padding: 24, textAlign: "center" }}>
            <div className="text-faint">
              {lang === "fr"
                ? "Cette page est réservée aux super-administrateurs de la plateforme."
                : "This page is restricted to platform super-administrators."}
            </div>
          </div>
        </div>
      </div>
    );
  }

  const visible = sectors.filter((s) => {
    if (filterKind === "builtin") return !!s.is_builtin;
    if (filterKind === "custom")  return !s.is_builtin;
    return true;
  });

  const onArchive = async (s) => {
    if (s.is_builtin) {
      window.alert(lang === "fr"
        ? "Les secteurs intégrés (système) ne peuvent pas être supprimés. Vous pouvez les renommer ou les recolorer."
        : "Built-in (system) sectors cannot be deleted. You can rename or recolour them.");
      return;
    }
    if (!window.confirm(lang === "fr"
      ? `Archiver le secteur « ${s.fr} » ? Les projets et indicateurs qui s'y rattachent ne seront pas supprimés ; le secteur disparaîtra simplement des listes de choix.`
      : `Archive the sector "${s.en || s.fr}"? Linked projects / indicators stay; the sector just disappears from picker lists.`)) return;
    setBusy(s.id);
    try {
      const sb = window.melr.supabase;
      const r = await sb.from("sectors").update({ archived_at: new Date().toISOString() }).eq("id", s.id);
      if (r.error) throw new Error(r.error.message);
      showToast(true, lang === "fr" ? "✓ Secteur archivé" : "✓ Sector archived");
      refresh();
    } catch (e) {
      showToast(false, (lang === "fr" ? "Erreur : " : "Error: ") + e.message, 7000);
    } finally {
      setBusy(null);
    }
  };

  return (
    <div className="page">
      <div className="page-header">
        <div className="page-eyebrow">
          🛡 {lang === "fr" ? "SUPER-ADMIN · CATALOGUE TRANSVERSE" : "SUPER-ADMIN · CROSS-CUT CATALOGUE"}
        </div>
        <div className="page-header-row">
          <div>
            <h1 className="page-title">{lang === "fr" ? "Gestion des secteurs" : "Sectors management"}</h1>
            <div className="page-sub">
              {lang === "fr"
                ? `${sectors.length} secteur${sectors.length > 1 ? "s" : ""} actif${sectors.length > 1 ? "s" : ""} · ${sectors.filter((s) => s.is_builtin).length} intégré${sectors.filter((s) => s.is_builtin).length > 1 ? "s" : ""} · ${sectors.filter((s) => !s.is_builtin).length} personnalisé${sectors.filter((s) => !s.is_builtin).length > 1 ? "s" : ""}`
                : `${sectors.length} active sector${sectors.length > 1 ? "s" : ""} · ${sectors.filter((s) => s.is_builtin).length} built-in · ${sectors.filter((s) => !s.is_builtin).length} custom`}
            </div>
          </div>
          <div className="page-header-actions">
            <button className="btn sm primary" onClick={() => setNewOpen(true)}>
              <Icon.plus /> {lang === "fr" ? "Nouveau secteur" : "New sector"}
            </button>
          </div>
        </div>
        <div className="page-tabs">
          {[
            { k: "all",     l: lang === "fr" ? "Tous"            : "All",      n: sectors.length },
            { k: "builtin", l: lang === "fr" ? "Intégrés"        : "Built-in", n: sectors.filter((s) => s.is_builtin).length },
            { k: "custom",  l: lang === "fr" ? "Personnalisés"   : "Custom",   n: sectors.filter((s) => !s.is_builtin).length },
          ].map((tab) => (
            <div key={tab.k} className={"tab" + (filterKind === tab.k ? " active" : "")}
              onClick={() => setFilterKind(tab.k)} style={{ cursor: "pointer" }}>
              {tab.l} <span className="tag-mono" style={{ marginLeft: 4 }}>{tab.n}</span>
            </div>
          ))}
        </div>
      </div>

      <div className="page-body">
        <div className="card">
          <div className="card-body flush">
            {loading ? (
              <div className="text-faint" style={{ padding: 24, textAlign: "center" }}>
                {lang === "fr" ? "Chargement…" : "Loading…"}
              </div>
            ) : visible.length === 0 ? (
              <div className="text-faint" style={{ padding: 24, textAlign: "center" }}>
                {lang === "fr" ? "Aucun secteur dans cette catégorie." : "No sector in this category."}
              </div>
            ) : (
              <table className="tbl">
                <thead>
                  <tr>
                    <th style={{ width: 60 }}>{lang === "fr" ? "Couleur" : "Colour"}</th>
                    <th>{lang === "fr" ? "Nom (FR)" : "Name (FR)"}</th>
                    <th>{lang === "fr" ? "Nom (EN)" : "Name (EN)"}</th>
                    <th>{lang === "fr" ? "Identifiant" : "Slug"}</th>
                    <th>{lang === "fr" ? "Origine" : "Origin"}</th>
                    <th></th>
                  </tr>
                </thead>
                <tbody>
                  {visible.map((s) => (
                    <tr key={s.id}>
                      <td>
                        <span className="sector-chip" style={{ background: s.bg, color: s.color, borderColor: s.color, fontSize: 11 }}>
                          ●
                        </span>
                      </td>
                      <td><b>{s.fr}</b></td>
                      <td className="text-faint">{s.en || s.fr}</td>
                      <td className="mono text-faint" style={{ fontSize: 11 }}>{s.id}</td>
                      <td>
                        {s.is_builtin ? (
                          <span className="pill" style={{ fontSize: 10, background: "#dbeafe", color: "#1e3a8a" }}>
                            🛡 {lang === "fr" ? "Intégré" : "Built-in"}
                          </span>
                        ) : (
                          <span className="pill" style={{ fontSize: 10, background: "var(--bg-sunken)" }}>
                            {lang === "fr" ? "Personnalisé" : "Custom"}
                          </span>
                        )}
                      </td>
                      <td>
                        <div className="row gap-xs" style={{ justifyContent: "flex-end" }}>
                          <button className="btn xs" onClick={() => setEditing(s)}>
                            <Icon.edit /> {lang === "fr" ? "Modifier" : "Edit"}
                          </button>
                          {!s.is_builtin && (
                            <button className="btn xs ghost" onClick={() => onArchive(s)} disabled={busy === s.id}
                              title={lang === "fr" ? "Archiver (suppression douce)" : "Archive (soft delete)"}>
                              <Icon.x />
                            </button>
                          )}
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            )}
          </div>
          {toast && (
            <div style={{
              margin: 12, padding: "8px 12px", borderRadius: 6, fontSize: 12.5,
              background: toast.ok ? "#dcfce7" : "#fee2e2",
              color:      toast.ok ? "#166534" : "#991b1b",
            }}>{toast.msg}</div>
          )}
        </div>
      </div>

      {editing && (
        <SectorEditor lang={lang} sector={editing}
          onClose={() => setEditing(null)}
          onSaved={() => {
            showToast(true, lang === "fr" ? "✓ Secteur mis à jour" : "✓ Sector updated");
            refresh();
          }} />
      )}
      {newOpen && (
        <NewSectorModal lang={lang}
          onClose={() => setNewOpen(false)}
          onCreated={() => { showToast(true, lang === "fr" ? "✓ Secteur créé" : "✓ Sector created"); refresh(); }} />
      )}
    </div>
  );
}

// ─── SectorEditor · rename + recolour ──────────────────────────────────────
// A small modal with FR / EN name inputs and the 9-colour palette picker.
// Saves via sectorsCrud.update which RLS-gates to super-admin for built-ins
// and creator-org admin for customs.
function SectorEditor({ lang, sector, onClose, onSaved }) {
  const [nameFr, setNameFr] = useStateSEC(sector.fr);
  const [nameEn, setNameEn] = useStateSEC(sector.en || "");
  // Pre-select the palette entry whose color matches (if any).
  const [paletteKey, setPaletteKey] = useStateSEC(() => {
    const match = SECTOR_PALETTE_SEC.find((p) => p.color === sector.color && p.bg === sector.bg);
    return match ? match.key : SECTOR_PALETTE_SEC[0].key;
  });
  const [busy, setBusy] = useStateSEC(false);
  const [err, setErr] = useStateSEC(null);

  const palette = SECTOR_PALETTE_SEC.find((p) => p.key === paletteKey) || SECTOR_PALETTE_SEC[0];

  const onSubmit = async (e) => {
    e.preventDefault();
    setErr(null);
    if (!nameFr.trim()) { setErr(lang === "fr" ? "Le nom FR est requis." : "FR name is required."); return; }
    setBusy(true);
    try {
      await window.melr.sectorsCrud.update(sector.id, {
        name_fr: nameFr.trim(),
        name_en: nameEn.trim() || null,
        color:   palette.color,
        bg:      palette.bg,
      });
      if (onSaved) await onSaved();
      onClose();
    } catch (e2) {
      setErr(e2.message);
    } finally {
      setBusy(false);
    }
  };

  return (
    <Modal
      title={<>{lang === "fr" ? "Modifier le secteur" : "Edit sector"}
        <span className="text-faint" style={{ marginLeft: 8, fontSize: 12, fontWeight: 400 }}>
          ({sector.id})
        </span>
      </>}
      onClose={onClose}
      onSubmit={onSubmit}
      footer={<>
        <button type="button" className="btn sm ghost" onClick={onClose} disabled={busy}>
          {lang === "fr" ? "Annuler" : "Cancel"}
        </button>
        <button type="submit" className="btn sm primary" disabled={busy}>
          {busy
            ? (lang === "fr" ? "Enregistrement…" : "Saving…")
            : (lang === "fr" ? "Enregistrer" : "Save")}
        </button>
      </>}>
      <div style={{ display: "grid", gap: 12 }}>
        {sector.is_builtin && (
          <div style={{ padding: "8px 10px", background: "#dbeafe", color: "#1e3a8a", borderRadius: 6, fontSize: 12 }}>
            🛡 {lang === "fr"
              ? "Secteur intégré (système). Vous pouvez renommer et changer la couleur. L'identifiant ne peut pas être modifié."
              : "Built-in (system) sector. You can rename and recolour. The slug cannot be changed."}
          </div>
        )}
        <label style={{ display: "grid", gap: 4 }}>
          <span style={{ fontSize: 11, opacity: 0.75 }}>{lang === "fr" ? "Nom (FR) *" : "Name (FR) *"}</span>
          <input required value={nameFr} onChange={(e) => setNameFr(e.target.value)}
            style={{ padding: "8px 10px", borderRadius: 6, border: "1px solid var(--line)", fontSize: 13 }}
            autoFocus />
        </label>
        <label style={{ display: "grid", gap: 4 }}>
          <span style={{ fontSize: 11, opacity: 0.75 }}>{lang === "fr" ? "Nom (EN, optionnel)" : "Name (EN, optional)"}</span>
          <input value={nameEn} onChange={(e) => setNameEn(e.target.value)}
            style={{ padding: "8px 10px", borderRadius: 6, border: "1px solid var(--line)", fontSize: 13 }} />
        </label>
        <div>
          <span style={{ fontSize: 11, opacity: 0.75, display: "block", marginBottom: 6 }}>
            {lang === "fr" ? "Couleur" : "Colour"}
          </span>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
            {SECTOR_PALETTE_SEC.map((p) => (
              <button key={p.key} type="button" onClick={() => setPaletteKey(p.key)}
                title={lang === "fr" ? p.fr : p.en}
                style={{
                  width: 30, height: 30, borderRadius: 6, cursor: "pointer",
                  border: paletteKey === p.key ? "2px solid var(--text)" : "1px solid var(--line)",
                  background: p.bg, position: "relative",
                }}>
                <span style={{ display: "block", width: 12, height: 12, borderRadius: "50%", background: p.color, margin: "0 auto" }} />
              </button>
            ))}
          </div>
          <div style={{ marginTop: 8 }}>
            <span className="sector-chip"
              style={{ background: palette.bg, color: palette.color, borderColor: palette.color, fontSize: 12 }}>
              {nameFr.trim() || (lang === "fr" ? "Aperçu" : "Preview")}
            </span>
          </div>
        </div>
        {err && (
          <div style={{ color: "#b91c1c", fontSize: 12 }}>{err}</div>
        )}
      </div>
    </Modal>
  );
}

window.SectorsManagement = SectorsManagement;