// Licenses screen — superadmin-only. Three sub-tabs:
//   1. Teams        — create/rename/delete teams; manage their members.
//   2. Organization — re-parent the module tree (what's a child of what).
//   3. Licensing    — per-team module enablement matrix (toggles).
// All data comes from the API (window.api.teams / window.api.modules); the
// backend gates every endpoint behind [SuperAdmin].

// ── Teams tab ────────────────────────────────────────────────────────────────
function TeamsTab({ lang, toast }) {
  const Icons = window.Icons;
  const [teams, setTeams] = React.useState([]);
  const [allMembers, setAllMembers] = React.useState([]);
  const [selected, setSelected] = React.useState(null);
  const [roster, setRoster] = React.useState([]);
  const [newName, setNewName] = React.useState("");
  const [busy, setBusy] = React.useState(false);

  const loadTeams = React.useCallback(() => {
    window.api.teams.list().then(setTeams).catch(e => toast(e.message, "danger"));
  }, [toast]);

  React.useEffect(() => { loadTeams(); }, [loadTeams]);
  React.useEffect(() => {
    window.api.teamMembers.list().then(setAllMembers).catch(() => {});
  }, []);

  const loadRoster = React.useCallback((teamId) => {
    if (!teamId) { setRoster([]); return; }
    window.api.teams.members(teamId).then(setRoster).catch(e => toast(e.message, "danger"));
  }, [toast]);

  React.useEffect(() => { loadRoster(selected?.id); }, [selected, loadRoster]);

  const createTeam = async () => {
    const name = newName.trim();
    if (!name) return;
    setBusy(true);
    try {
      await window.api.teams.create({ name });
      setNewName("");
      toast(lang === "es" ? "Equipo creado" : "Team created", "success");
      loadTeams();
    } catch (e) { toast(e.message, "danger"); } finally { setBusy(false); }
  };

  const removeTeam = async (team) => {
    if (!window.confirm(lang === "es" ? `¿Eliminar el equipo "${team.name}"?` : `Delete team "${team.name}"?`)) return;
    try {
      await window.api.teams.remove(team.id);
      if (selected?.id === team.id) setSelected(null);
      toast(lang === "es" ? "Equipo eliminado" : "Team deleted", "success");
      loadTeams();
    } catch (e) { toast(e.message, "danger"); }
  };

  const addMember = async (memberId) => {
    try { await window.api.teams.addMember(selected.id, memberId); loadRoster(selected.id); }
    catch (e) { toast(e.message, "danger"); }
  };

  const removeMember = async (memberId) => {
    try { await window.api.teams.removeMember(selected.id, memberId); loadRoster(selected.id); }
    catch (e) { toast(e.message, "danger"); }
  };

  const rosterIds = new Set(roster.map(r => r.memberId));
  const candidates = allMembers.filter(m => !rosterIds.has(m.id));

  return (
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, alignItems: "start" }}>
      <div className="card">
        <div style={{ display: "flex", gap: 8, padding: 12, borderBottom: "1px solid var(--border)" }}>
          <input
            className="input"
            placeholder={lang === "es" ? "Nuevo equipo…" : "New team…"}
            value={newName}
            onChange={e => setNewName(e.target.value)}
            onKeyDown={e => { if (e.key === "Enter") createTeam(); }}
            style={{ flex: 1 }}
          />
          <window.Btn variant="brand" icon={Icons.Plus} onClick={createTeam} disabled={busy || !newName.trim()}>
            {lang === "es" ? "Crear" : "Create"}
          </window.Btn>
        </div>
        <table className="tbl">
          <tbody>
            {teams.map(team => (
              <tr key={team.id} onClick={() => setSelected(team)}
                style={{ cursor: "pointer", background: selected?.id === team.id ? "var(--bg-hover)" : undefined }}>
                <td>{team.name}</td>
                <td style={{ width: 40, textAlign: "right" }}>
                  <button className="icon-btn" style={{ width: 24, height: 24 }}
                    onClick={(e) => { e.stopPropagation(); removeTeam(team); }}
                    title={lang === "es" ? "Eliminar" : "Delete"}>
                    <Icons.Trash />
                  </button>
                </td>
              </tr>
            ))}
            {teams.length === 0 && (
              <tr><td style={{ padding: 24, textAlign: "center", color: "var(--text-muted)" }}>
                {lang === "es" ? "No hay equipos aún." : "No teams yet."}
              </td></tr>
            )}
          </tbody>
        </table>
      </div>

      <div className="card" style={{ padding: 16 }}>
        {!selected ? (
          <div style={{ color: "var(--text-muted)", fontSize: 13, textAlign: "center", padding: 24 }}>
            {lang === "es" ? "Selecciona un equipo para gestionar sus miembros." : "Select a team to manage its members."}
          </div>
        ) : (
          <>
            <div style={{ fontWeight: 600, marginBottom: 12 }}>{selected.name}</div>
            <div style={{ fontSize: 12, color: "var(--text-muted)", marginBottom: 6 }}>
              {lang === "es" ? "Miembros" : "Members"}
            </div>
            {roster.map(m => (
              <div key={m.memberId} style={{ display: "flex", alignItems: "center", gap: 8, padding: "4px 0" }}>
                <window.Avatar initials={m.initials} size="sm" />
                <span style={{ flex: 1 }}>{m.name} <span style={{ color: "var(--text-muted)", fontSize: 11 }}>{m.email}</span></span>
                <button className="icon-btn" style={{ width: 24, height: 24 }} onClick={() => removeMember(m.memberId)}>
                  <Icons.X />
                </button>
              </div>
            ))}
            {roster.length === 0 && <div style={{ color: "var(--text-muted)", fontSize: 12 }}>{lang === "es" ? "Sin miembros." : "No members."}</div>}

            {candidates.length > 0 && (
              <div style={{ marginTop: 16 }}>
                <div style={{ fontSize: 12, color: "var(--text-muted)", marginBottom: 6 }}>
                  {lang === "es" ? "Añadir miembro" : "Add member"}
                </div>
                <window.Select
                  value=""
                  onChange={v => v && addMember(v)}
                  options={[{ value: "", label: lang === "es" ? "Selecciona…" : "Select…" },
                    ...candidates.map(m => ({ value: m.id, label: `${m.name} (${m.email})` }))]}
                />
              </div>
            )}
          </>
        )}
      </div>
    </div>
  );
}

// ── Organization tab ─────────────────────────────────────────────────────────
function OrganizationTab({ lang, toast }) {
  const [modules, setModules] = React.useState([]);

  const load = React.useCallback(() => {
    window.api.modules.all().then(setModules).catch(e => toast(e.message, "danger"));
  }, [toast]);
  React.useEffect(() => { load(); }, [load]);

  const labelFor = (m) => (lang === "es" ? m.labelEs : m.labelEn) || m.key;

  const setParent = async (mod, parentId) => {
    try {
      await window.api.modules.move(mod.id, { parentId: parentId || null, sortOrder: mod.sortOrder });
      toast(lang === "es" ? "Módulo movido" : "Module moved", "success");
      load();
    } catch (e) { toast(e.message, "danger"); }
  };

  const parentOptions = (mod) => [
    { value: "", label: lang === "es" ? "— Raíz —" : "— Root —" },
    ...modules.filter(m => m.id !== mod.id).map(m => ({ value: m.id, label: labelFor(m) })),
  ];

  return (
    <div className="card">
      <table className="tbl">
        <thead>
          <tr>
            <th>{lang === "es" ? "Módulo" : "Module"}</th>
            <th>{lang === "es" ? "Padre" : "Parent"}</th>
            <th style={{ width: 90 }}>{lang === "es" ? "Orden" : "Order"}</th>
          </tr>
        </thead>
        <tbody>
          {modules.map(m => (
            <tr key={m.id}>
              <td>
                {labelFor(m)}
                {m.isContainer && <span className="badge neutral" style={{ marginLeft: 8 }}>{lang === "es" ? "Contenedor" : "Container"}</span>}
                {m.superAdminOnly && <span className="badge neutral" style={{ marginLeft: 8 }}>superadmin</span>}
              </td>
              <td>
                <window.Select value={m.parentId || ""} onChange={v => setParent(m, v)} options={parentOptions(m)} />
              </td>
              <td className="num" style={{ color: "var(--text-muted)" }}>{m.sortOrder}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

// ── Licensing tab ────────────────────────────────────────────────────────────
function LicensingTab({ lang, toast }) {
  const [teams, setTeams] = React.useState([]);
  const [teamId, setTeamId] = React.useState("");
  const [states, setStates] = React.useState([]);

  React.useEffect(() => {
    window.api.teams.list().then(list => {
      setTeams(list);
      if (list.length) setTeamId(prev => prev || list[0].id);
    }).catch(e => toast(e.message, "danger"));
  }, []); // eslint-disable-line

  const load = React.useCallback((id) => {
    if (!id) { setStates([]); return; }
    window.api.teams.modules(id).then(setStates).catch(e => toast(e.message, "danger"));
  }, [toast]);
  React.useEffect(() => { load(teamId); }, [teamId, load]);

  const toggle = async (mod) => {
    try {
      if (mod.enabled) await window.api.teams.disableModule(teamId, mod.moduleId);
      else await window.api.teams.enableModule(teamId, mod.moduleId);
      load(teamId);
    } catch (e) { toast(e.message, "danger"); }
  };

  return (
    <div>
      <div style={{ marginBottom: 12, maxWidth: 320 }}>
        <window.Select value={teamId} onChange={setTeamId} options={teams.map(t => ({ value: t.id, label: t.name }))} />
      </div>
      <div className="card">
        <table className="tbl">
          <thead>
            <tr>
              <th>{lang === "es" ? "Módulo" : "Module"}</th>
              <th style={{ width: 120 }}>{lang === "es" ? "Habilitado" : "Enabled"}</th>
            </tr>
          </thead>
          <tbody>
            {states.map(s => (
              <tr key={s.moduleId}>
                <td>{(lang === "es" ? s.labelEs : s.labelEn) || s.key}</td>
                <td>
                  <button
                    type="button"
                    onClick={() => toggle(s)}
                    aria-pressed={s.enabled}
                    style={{ width: 36, height: 20, position: "relative", border: 0, borderRadius: 999, padding: 0,
                             background: s.enabled ? "var(--success, #34c759)" : "rgba(0,0,0,.2)", cursor: "pointer" }}
                  >
                    <i style={{ position: "absolute", top: 2, left: 2, width: 16, height: 16, borderRadius: "50%",
                                background: "#fff", transition: "transform .15s",
                                transform: s.enabled ? "translateX(16px)" : "none" }} />
                  </button>
                </td>
              </tr>
            ))}
            {states.length === 0 && (
              <tr><td colSpan={2} style={{ padding: 24, textAlign: "center", color: "var(--text-muted)" }}>
                {teams.length === 0
                  ? (lang === "es" ? "Crea un equipo primero." : "Create a team first.")
                  : (lang === "es" ? "No hay módulos." : "No modules.")}
              </td></tr>
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
}

window.LicensesScreen = function LicensesScreen({ lang, subTab }) {
  const sub = subTab || "teams";
  const toast = window.useToast();

  return (
    <div className="page">
      <window.PageHeader
        title={lang === "es" ? "Licencias" : "Licenses"}
        subtitle={lang === "es"
          ? "Crea equipos, añade usuarios y decide qué módulos tiene cada equipo."
          : "Create teams, add users, and decide which modules each team gets."}
      />
      {sub === "teams" && <TeamsTab lang={lang} toast={toast} />}
      {sub === "organization" && <OrganizationTab lang={lang} toast={toast} />}
      {sub === "licensing" && <LicensingTab lang={lang} toast={toast} />}
    </div>
  );
};

Object.assign(window, { LicensesScreen: window.LicensesScreen });