/* global React, Card, Btn, Tag, Input, H2, H3, Body, Small, TabBar, TextArea */
const { useState, useEffect, useCallback } = React;

function OrgAdminScreen({ theme, user, onBack }) {
  const api = window.kwistApi;
  const [tab, setTab] = useState("overview");
  const [org, setOrg] = useState(null);
  const [members, setMembers] = useState([]);
  const [teams, setTeams] = useState([]);
  const [invites, setInvites] = useState([]);
  const [overview, setOverview] = useState(null);
  const [loading, setLoading] = useState(true);

  const load = useCallback(async () => {
    setLoading(true);
    try {
      const [orgRes, membersRes, teamsRes, invitesRes] = await Promise.all([
        api.get("/api/orgs/mine"),
        api.get("/api/orgs/members").catch(() => ({ members: [] })),
        api.get("/api/orgs/teams").catch(() => ({ teams: [] })),
        api.get("/api/orgs/invites").catch(() => ({ invites: [] })),
      ]);
      setOrg(orgRes.org);
      setMembers(membersRes.members || []);
      setTeams(teamsRes.teams || []);
      setInvites(invitesRes.invites || []);
      if (user.orgRole === "org_admin" || user.orgRole === "trainer") {
        const ov = await api.get("/api/reports/overview").catch(() => null);
        setOverview(ov);
      }
    } catch (e) { console.error("org load error", e); }
    setLoading(false);
  }, []);

  useEffect(() => { load(); }, [load]);

  if (loading) return React.createElement("div", { style: { padding: 40, textAlign: "center" } }, "Laden...");
  if (!org) return React.createElement("div", { style: { padding: 40, textAlign: "center" } },
    React.createElement(Body, null, "Je bent geen lid van een organisatie."),
    React.createElement(Btn, { onClick: onBack, style: { marginTop: 16 } }, "Terug")
  );

  const tabs = [
    { id: "overview", label: "Overzicht" },
    { id: "members", label: `Leden (${members.length})` },
    { id: "teams", label: `Teams (${teams.length})` },
    { id: "invites", label: "Uitnodigingen" },
    { id: "branding", label: "Branding" },
    { id: "settings", label: "Instellingen" },
  ];

  return React.createElement("div", { style: { maxWidth: 960, margin: "0 auto", padding: "24px 16px" } },
    React.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 24 } },
      React.createElement(H2, null, org.name),
      React.createElement(Btn, { size: "sm", onClick: onBack }, "← Terug"),
    ),

    React.createElement(TabBar, { tabs, activeTab: tab, onTab: setTab, theme }),

    tab === "overview" && React.createElement(OrgOverview, { org, overview, theme }),
    tab === "members" && React.createElement(OrgMembers, { members, teams, orgId: org.id, onReload: load, theme }),
    tab === "teams" && React.createElement(OrgTeams, { teams, onReload: load, theme }),
    tab === "invites" && React.createElement(OrgInvites, { invites, teams, onReload: load, theme }),
    tab === "branding" && React.createElement(OrgBranding, { org, onReload: load, theme }),
    tab === "settings" && React.createElement(OrgSettings, { org, onReload: load, theme }),
  );
}

function OrgOverview({ org, overview, theme }) {
  if (!overview) return React.createElement(Body, null, "Geen overzichtsdata beschikbaar.");
  return React.createElement("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))", gap: 16, marginTop: 24 } },
    StatCard("Leden", overview.members, theme),
    StatCard("Quizzes", overview.quizzes?.total || 0, theme),
    StatCard("Trainingsmodules", overview.quizzes?.training || 0, theme),
    StatCard("Pogingen", overview.attempts?.total || 0, theme),
    StatCard("Geslaagd", overview.attempts?.passed || 0, theme),
    StatCard("Gem. score", (overview.attempts?.avg_pct || 0) + "%", theme),
    StatCard("Toewijzingen", overview.assignments?.total || 0, theme),
    StatCard("Voltooid", overview.assignments?.completed || 0, theme),
    StatCard("Achterstallig", overview.assignments?.overdue || 0, theme),
  );
}

function StatCard(label, value, theme) {
  return React.createElement(Card, { theme, style: { padding: 20, textAlign: "center" } },
    React.createElement("div", { style: { fontSize: 28, fontWeight: 800, fontFamily: "var(--font-display)" } }, value),
    React.createElement(Small, null, label),
  );
}

function OrgMembers({ members, teams, orgId, onReload, theme }) {
  const api = window.kwistApi;
  const [editId, setEditId] = useState(null);
  const [editRole, setEditRole] = useState("");
  const [editTeam, setEditTeam] = useState("");

  const updateMember = async (userId) => {
    await api.patch(`/api/orgs/members/${userId}`, { orgRole: editRole || undefined, teamId: editTeam || null });
    setEditId(null);
    onReload();
  };

  const removeMember = async (userId) => {
    if (!confirm("Weet je zeker dat je dit lid wilt verwijderen?")) return;
    await api.del(`/api/orgs/members/${userId}`);
    onReload();
  };

  return React.createElement("div", { style: { marginTop: 24 } },
    React.createElement("table", { style: { width: "100%", borderCollapse: "collapse" }, role: "table" },
      React.createElement("thead", null,
        React.createElement("tr", null,
          ["Naam", "E-mail", "Rol", "Team", "Acties"].map((h) =>
            React.createElement("th", { key: h, style: { textAlign: "left", padding: "8px 12px", borderBottom: `2px solid ${theme.rule}`, fontFamily: "var(--font-display)", fontSize: 13, textTransform: "uppercase" } }, h)
          )
        )
      ),
      React.createElement("tbody", null,
        members.map((m) => React.createElement("tr", { key: m.id },
          React.createElement("td", { style: { padding: "8px 12px" } }, m.name),
          React.createElement("td", { style: { padding: "8px 12px" } }, m.email),
          React.createElement("td", { style: { padding: "8px 12px" } },
            editId === m.id
              ? React.createElement("select", { value: editRole, onChange: (e) => setEditRole(e.target.value), "aria-label": "Rol" },
                  React.createElement("option", { value: "learner" }, "Learner"),
                  React.createElement("option", { value: "trainer" }, "Trainer"),
                  React.createElement("option", { value: "org_admin" }, "Admin"),
                )
              : React.createElement(Tag, { theme }, m.org_role || "—")
          ),
          React.createElement("td", { style: { padding: "8px 12px" } },
            editId === m.id
              ? React.createElement("select", { value: editTeam, onChange: (e) => setEditTeam(e.target.value), "aria-label": "Team" },
                  React.createElement("option", { value: "" }, "Geen"),
                  ...teams.map((t) => React.createElement("option", { key: t.id, value: t.id }, t.name))
                )
              : (m.team_name || "—")
          ),
          React.createElement("td", { style: { padding: "8px 12px" } },
            editId === m.id
              ? React.createElement("span", null,
                  React.createElement(Btn, { size: "xs", onClick: () => updateMember(m.id) }, "Opslaan"),
                  " ",
                  React.createElement(Btn, { size: "xs", variant: "ghost", onClick: () => setEditId(null) }, "Annuleer"),
                )
              : React.createElement("span", null,
                  React.createElement(Btn, { size: "xs", variant: "ghost", onClick: () => { setEditId(m.id); setEditRole(m.org_role || "learner"); setEditTeam(m.team_id || ""); } }, "Bewerk"),
                  " ",
                  React.createElement(Btn, { size: "xs", variant: "ghost", onClick: () => removeMember(m.id) }, "×"),
                )
          ),
        ))
      ),
    ),
  );
}

function OrgTeams({ teams, onReload, theme }) {
  const api = window.kwistApi;
  const [newName, setNewName] = useState("");
  const [newDesc, setNewDesc] = useState("");

  const addTeam = async () => {
    if (!newName.trim()) return;
    await api.post("/api/orgs/teams", { name: newName.trim(), description: newDesc.trim() || null });
    setNewName(""); setNewDesc("");
    onReload();
  };

  const deleteTeam = async (id) => {
    if (!confirm("Team verwijderen?")) return;
    await api.del(`/api/orgs/teams/${id}`);
    onReload();
  };

  return React.createElement("div", { style: { marginTop: 24 } },
    React.createElement("div", { style: { display: "flex", gap: 12, marginBottom: 20, flexWrap: "wrap" } },
      React.createElement(Input, { placeholder: "Teamnaam", value: newName, onChange: (e) => setNewName(e.target.value), "aria-label": "Nieuwe teamnaam", style: { flex: 1, minWidth: 200 } }),
      React.createElement(Input, { placeholder: "Beschrijving (optioneel)", value: newDesc, onChange: (e) => setNewDesc(e.target.value), "aria-label": "Beschrijving", style: { flex: 2, minWidth: 200 } }),
      React.createElement(Btn, { onClick: addTeam }, "+ Team"),
    ),
    React.createElement("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(250px, 1fr))", gap: 16 } },
      teams.map((t) => React.createElement(Card, { key: t.id, theme, style: { padding: 16 } },
        React.createElement(H3, null, t.name),
        React.createElement(Small, null, t.description || "Geen beschrijving"),
        React.createElement("div", { style: { marginTop: 8 } },
          React.createElement(Tag, { theme }, `${t.member_count} leden`),
          React.createElement(Btn, { size: "xs", variant: "ghost", onClick: () => deleteTeam(t.id), style: { marginLeft: 8 } }, "Verwijder"),
        ),
      )),
    ),
  );
}

function OrgInvites({ invites, teams, onReload, theme }) {
  const api = window.kwistApi;
  const [email, setEmail] = useState("");
  const [role, setRole] = useState("learner");
  const [csvMode, setCsvMode] = useState(false);
  const [csv, setCsv] = useState("");

  const sendInvite = async () => {
    if (!email.trim()) return;
    await api.post("/api/orgs/invites", { email: email.trim(), orgRole: role });
    setEmail("");
    onReload();
  };

  const sendCsv = async () => {
    if (!csv.trim()) return;
    await api.post("/api/orgs/invites/csv", { csv });
    setCsv(""); setCsvMode(false);
    onReload();
  };

  const pending = invites.filter((i) => !i.accepted_at);
  const accepted = invites.filter((i) => i.accepted_at);

  return React.createElement("div", { style: { marginTop: 24 } },
    React.createElement("div", { style: { display: "flex", gap: 12, marginBottom: 16 } },
      React.createElement(Btn, { size: "sm", variant: csvMode ? "ghost" : "default", onClick: () => setCsvMode(false) }, "Individueel"),
      React.createElement(Btn, { size: "sm", variant: csvMode ? "default" : "ghost", onClick: () => setCsvMode(true) }, "CSV Bulk"),
    ),

    !csvMode && React.createElement("div", { style: { display: "flex", gap: 12, marginBottom: 20, flexWrap: "wrap" } },
      React.createElement(Input, { type: "email", placeholder: "E-mailadres", value: email, onChange: (e) => setEmail(e.target.value), "aria-label": "E-mail uitnodiging", style: { flex: 1, minWidth: 240 } }),
      React.createElement("select", { value: role, onChange: (e) => setRole(e.target.value), style: { padding: "8px 12px", border: `var(--border-width) solid ${theme.rule}`, background: theme.card, color: theme.fg }, "aria-label": "Rol" },
        React.createElement("option", { value: "learner" }, "Learner"),
        React.createElement("option", { value: "trainer" }, "Trainer"),
        React.createElement("option", { value: "org_admin" }, "Admin"),
      ),
      React.createElement(Btn, { onClick: sendInvite }, "Uitnodigen"),
    ),

    csvMode && React.createElement("div", { style: { marginBottom: 20 } },
      React.createElement(Small, { style: { marginBottom: 8, display: "block" } }, "Kolommen: email, name (optioneel), role (optioneel: learner/trainer/org_admin)"),
      React.createElement("textarea", {
        value: csv, onChange: (e) => setCsv(e.target.value),
        placeholder: "email,name,role\njan@bedrijf.be,Jan Janssen,learner\nlisa@bedrijf.be,Lisa Peeters,trainer",
        style: { width: "100%", minHeight: 120, padding: 12, fontFamily: "var(--font-mono)", fontSize: 13, border: `var(--border-width) solid ${theme.rule}`, background: theme.card, color: theme.fg, resize: "vertical" },
        "aria-label": "CSV data",
      }),
      React.createElement(Btn, { onClick: sendCsv, style: { marginTop: 8 } }, "CSV importeren"),
    ),

    pending.length > 0 && React.createElement("div", null,
      React.createElement(H3, null, "Openstaand"),
      pending.map((inv) => React.createElement("div", { key: inv.id, style: { padding: "8px 0", borderBottom: `1px solid ${theme.rule}20`, display: "flex", justifyContent: "space-between", alignItems: "center" } },
        React.createElement("span", null, inv.email, " ", React.createElement(Tag, { theme }, inv.org_role)),
        React.createElement(Small, null, new Date(inv.created_at).toLocaleDateString("nl-BE")),
      ))
    ),

    accepted.length > 0 && React.createElement("div", { style: { marginTop: 20 } },
      React.createElement(H3, null, "Geaccepteerd"),
      accepted.map((inv) => React.createElement("div", { key: inv.id, style: { padding: "8px 0", borderBottom: `1px solid ${theme.rule}20` } },
        React.createElement("span", null, inv.email, " ", React.createElement(Tag, { theme }, "✓")),
      ))
    ),
  );
}

function OrgBranding({ org, onReload, theme }) {
  const api = window.kwistApi;
  const [config, setConfig] = useState(org.brandingConfig || {});

  const save = async () => {
    await api.put("/api/orgs/branding", config);
    onReload();
  };

  const set = (key, val) => setConfig((c) => ({ ...c, [key]: val }));

  return React.createElement("div", { style: { marginTop: 24, maxWidth: 600 } },
    React.createElement(H3, null, "White-label branding"),
    React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 16, marginTop: 16 } },
      LabeledInput("Logo URL", config.logo || "", (v) => set("logo", v)),
      LabeledInput("Accentkleur", config.accentColor || "#2540ff", (v) => set("accentColor", v), "color"),
      LabeledInput("Lettertype", config.fontFamily || "", (v) => set("fontFamily", v)),
      LabeledInput("Subdomein", config.subdomain || "", (v) => set("subdomain", v)),
      LabeledInput("Custom domein", config.customDomain || "", (v) => set("customDomain", v)),
      LabeledInput("Header tekst", config.headerText || "", (v) => set("headerText", v)),
      LabeledInput("Footer tekst", config.footerText || "", (v) => set("footerText", v)),
    ),
    React.createElement(Btn, { onClick: save, style: { marginTop: 20 } }, "Opslaan"),
  );
}

function OrgSettings({ org, onReload, theme }) {
  const api = window.kwistApi;
  const [residency, setResidency] = useState(org.dataResidency || "eu");
  const [retention, setRetention] = useState(org.retentionDays || "");
  const [domain, setDomain] = useState(org.domain || "");

  const saveDomain = async () => {
    if (!domain.trim()) return;
    await api.post("/api/orgs/domain-claim", { domain: domain.trim() });
    onReload();
  };

  const saveRetention = async () => {
    await api.put("/api/orgs/retention", { retentionDays: retention ? parseInt(retention) : null });
    onReload();
  };

  return React.createElement("div", { style: { marginTop: 24, maxWidth: 600 } },
    React.createElement(H3, null, "Domein-claim"),
    React.createElement(Small, { style: { display: "block", marginBottom: 8 } }, "Claim je e-maildomein zodat nieuwe signups automatisch onder je org vallen."),
    React.createElement("div", { style: { display: "flex", gap: 12, marginBottom: 24 } },
      React.createElement(Input, { value: domain, onChange: (e) => setDomain(e.target.value), placeholder: "bedrijf.be", "aria-label": "Domein", style: { flex: 1 } }),
      React.createElement(Btn, { onClick: saveDomain }, "Claim"),
    ),

    React.createElement(H3, null, "Data-residency"),
    React.createElement(Small, { style: { display: "block", marginBottom: 8 } }, "Je data wordt opgeslagen in: EU"),
    React.createElement(Tag, { theme }, residency.toUpperCase()),

    React.createElement(H3, { style: { marginTop: 24 } }, "Retentiebeleid"),
    React.createElement(Small, { style: { display: "block", marginBottom: 8 } }, "Na hoeveel dagen wordt oude data geanonimiseerd? Laat leeg voor onbeperkt."),
    React.createElement("div", { style: { display: "flex", gap: 12 } },
      React.createElement(Input, { type: "number", value: retention, onChange: (e) => setRetention(e.target.value), placeholder: "365", "aria-label": "Retentie in dagen", style: { width: 120 } }),
      React.createElement(Btn, { onClick: saveRetention }, "Opslaan"),
    ),
  );
}

function LabeledInput(label, value, onChange, type) {
  return React.createElement("label", { style: { display: "flex", flexDirection: "column", gap: 4 } },
    React.createElement(Small, null, label),
    React.createElement(Input, { type: type || "text", value, onChange: (e) => onChange(e.target.value), "aria-label": label }),
  );
}

window.OrgAdminScreen = OrgAdminScreen;