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

function ReportsScreen({ theme, user, onBack }) {
  const api = window.kwistApi;
  const [tab, setTab] = useState("teams");
  const [teams, setTeams] = useState([]);
  const [selectedUser, setSelectedUser] = useState(null);
  const [selectedTeam, setSelectedTeam] = useState(null);
  const [heatmapQuiz, setHeatmapQuiz] = useState(null);
  const [loading, setLoading] = useState(true);

  const load = useCallback(async () => {
    setLoading(true);
    const t = await api.get("/api/reports/teams").catch(() => ({ teams: [] }));
    setTeams(t.teams || []);
    setLoading(false);
  }, []);

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

  if (loading) return React.createElement("div", { style: { padding: 40, textAlign: "center" } }, "Laden...");

  if (selectedUser) {
    return React.createElement(UserReport, { userId: selectedUser, theme, onBack: () => setSelectedUser(null) });
  }
  if (selectedTeam) {
    return React.createElement(TeamDetail, { teamId: selectedTeam, theme, onBack: () => setSelectedTeam(null), onSelectUser: setSelectedUser });
  }
  if (heatmapQuiz) {
    return React.createElement(HeatmapView, { quizId: heatmapQuiz, theme, onBack: () => setHeatmapQuiz(null) });
  }

  const tabs = [
    { id: "teams", label: "Teams" },
    { id: "compliance", label: "Compliance" },
    { id: "reminders", label: "Reminders" },
  ];

  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, "Rapporten"),
      React.createElement(Btn, { size: "sm", onClick: onBack }, "← Terug"),
    ),

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

    tab === "teams" && React.createElement("div", { style: { marginTop: 20 } },
      teams.length === 0 && React.createElement(Body, null, "Geen teams gevonden."),
      React.createElement("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: 16 } },
        teams.map((t) => React.createElement(Card, { key: t.id, theme, style: { padding: 16, cursor: "pointer" }, onClick: () => setSelectedTeam(t.id) },
          React.createElement(H3, null, t.name),
          React.createElement("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8, marginTop: 12 } },
            MiniStat("Leden", t.member_count),
            MiniStat("Gem. score", (t.avg_score_pct || 0) + "%"),
            MiniStat("Pogingen", t.total_attempts || 0),
            MiniStat("Geslaagd", t.passed_count || 0),
            MiniStat("Voltooiing", (t.completionRate || 0) + "%"),
          ),
        )),
      ),
    ),

    tab === "compliance" && React.createElement(ComplianceExport, { theme }),
    tab === "reminders" && React.createElement(ReminderCheck, { theme }),
  );
}

function MiniStat(label, value) {
  return React.createElement("div", null,
    React.createElement(Small, { style: { opacity: 0.6 } }, label),
    React.createElement("div", { style: { fontWeight: 700, fontFamily: "var(--font-display)" } }, value),
  );
}

function TeamDetail({ teamId, theme, onBack, onSelectUser }) {
  const api = window.kwistApi;
  const [members, setMembers] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    api.get(`/api/reports/teams/${teamId}`).then((r) => { setMembers(r.members || []); setLoading(false); });
  }, [teamId]);

  if (loading) return React.createElement("div", { style: { padding: 40, textAlign: "center" } }, "Laden...");

  return React.createElement("div", { style: { maxWidth: 800, margin: "0 auto", padding: "24px 16px" } },
    React.createElement("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: 24 } },
      React.createElement(H2, null, "Teamleden"),
      React.createElement(Btn, { size: "sm", onClick: onBack }, "← Terug"),
    ),
    React.createElement("table", { style: { width: "100%", borderCollapse: "collapse" }, role: "table" },
      React.createElement("thead", null,
        React.createElement("tr", null,
          ["Naam", "E-mail", "Pogingen", "Geslaagd", "Gem. score"].map((h) =>
            React.createElement("th", { key: h, style: { textAlign: "left", padding: "8px 12px", borderBottom: `2px solid ${theme.rule}`, fontSize: 13, textTransform: "uppercase", fontFamily: "var(--font-display)" } }, h)
          )
        )
      ),
      React.createElement("tbody", null,
        members.map((m) => React.createElement("tr", { key: m.id, style: { cursor: "pointer" }, onClick: () => onSelectUser(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" } }, m.attempts),
          React.createElement("td", { style: { padding: "8px 12px" } }, m.passed),
          React.createElement("td", { style: { padding: "8px 12px" } }, (m.avg_score_pct || 0) + "%"),
        ))
      ),
    ),
  );
}

function UserReport({ userId, theme, onBack }) {
  const api = window.kwistApi;
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    api.get(`/api/reports/users/${userId}`).then((r) => { setData(r); setLoading(false); });
  }, [userId]);

  if (loading) return React.createElement("div", { style: { padding: 40, textAlign: "center" } }, "Laden...");
  if (!data?.user) return React.createElement(Body, null, "Gebruiker niet gevonden.");

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

    React.createElement("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(160px, 1fr))", gap: 16, marginBottom: 24 } },
      StatBox("Modules", `${data.summary.completedModules}/${data.summary.totalModules}`, theme),
      StatBox("Voltooiing", data.summary.completionRate + "%", theme),
      StatBox("Gem. score", data.summary.avgScore + "%", theme),
    ),

    data.attempts.length > 0 && React.createElement("div", null,
      React.createElement(H3, { style: { marginBottom: 12 } }, "Pogingen"),
      data.attempts.map((a) => React.createElement("div", { key: a.id, style: { padding: "8px 0", borderBottom: `1px solid ${theme.rule}20`, display: "flex", justifyContent: "space-between" } },
        React.createElement("span", null, a.quiz_title, " ", React.createElement(Tag, { theme }, a.passed ? "✓" : "✗")),
        React.createElement(Small, null, `${a.score}/${a.max_score} · ${new Date(a.started_at).toLocaleDateString("nl-BE")}`),
      )),
    ),
  );
}

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

function HeatmapView({ quizId, theme, onBack }) {
  const api = window.kwistApi;
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    api.get(`/api/reports/heatmap/${quizId}`).then((r) => { setData(r.heatmap || []); setLoading(false); });
  }, [quizId]);

  if (loading) return React.createElement("div", { style: { padding: 40, textAlign: "center" } }, "Laden...");

  return React.createElement("div", { style: { maxWidth: 800, margin: "0 auto", padding: "24px 16px" } },
    React.createElement("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: 24 } },
      React.createElement(H2, null, "Antwoord-heatmap"),
      React.createElement(Btn, { size: "sm", onClick: onBack }, "← Terug"),
    ),
    data.map((q) => {
      const barWidth = q.totalAnswers > 0 ? Math.round((q.wrongCount / q.totalAnswers) * 100) : 0;
      return React.createElement(Card, { key: q.questionId, theme, style: { padding: 16, marginBottom: 12 } },
        React.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" } },
          React.createElement(Body, { style: { fontWeight: 700 } }, `V${q.position + 1}: ${q.prompt}`),
          React.createElement(Tag, { theme, style: { background: q.errorRate > 50 ? "#ff3b6f20" : undefined } }, `${q.errorRate}% fout`),
        ),
        React.createElement("div", { style: { marginTop: 8, height: 6, background: theme.rule + "30", borderRadius: 3, overflow: "hidden" } },
          React.createElement("div", { style: { width: barWidth + "%", height: "100%", background: barWidth > 50 ? "#ff3b6f" : barWidth > 25 ? "#ff9f1c" : "#22c55e", transition: "width 0.3s" } }),
        ),
        React.createElement(Small, { style: { marginTop: 4 } }, `${q.totalAnswers} antwoorden · ${q.correctCount} correct · ${q.wrongCount} fout`),
      );
    }),
  );
}

function ComplianceExport({ theme }) {
  const api = window.kwistApi;

  const download = async (format) => {
    if (format === "csv") {
      const res = await fetch("/api/reports/compliance?format=csv", {
        headers: { authorization: `Bearer ${api.getToken()}` },
      });
      const blob = await res.blob();
      const url = URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = url;
      a.download = `compliance-report.csv`;
      a.click();
      URL.revokeObjectURL(url);
    } else {
      const data = await api.get("/api/reports/compliance?format=json");
      const blob = new Blob([JSON.stringify(data, null, 2)], { type: "application/json" });
      const url = URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = url;
      a.download = `compliance-report.json`;
      a.click();
      URL.revokeObjectURL(url);
    }
  };

  return React.createElement("div", { style: { marginTop: 20 } },
    React.createElement(H3, null, "Compliance-export"),
    React.createElement(Body, { style: { marginBottom: 16 } }, "Exporteer een audit-rapport met alle afgeronde trainingsmodules, scores en certificaten."),
    React.createElement("div", { style: { display: "flex", gap: 12 } },
      React.createElement(Btn, { onClick: () => download("csv") }, "Download CSV"),
      React.createElement(Btn, { variant: "ghost", onClick: () => download("json") }, "Download JSON"),
    ),
  );
}

function ReminderCheck({ theme }) {
  const api = window.kwistApi;
  const [reminders, setReminders] = useState(null);
  const [loading, setLoading] = useState(false);

  const check = async () => {
    setLoading(true);
    const res = await api.post("/api/reports/check-reminders").catch(() => null);
    setReminders(res?.reminders || null);
    setLoading(false);
  };

  return React.createElement("div", { style: { marginTop: 20 } },
    React.createElement(H3, null, "E-mail reminders"),
    React.createElement(Body, { style: { marginBottom: 16 } }, "Controleer welke learners een herinnering moeten krijgen voor hun deadlines."),
    React.createElement(Btn, { onClick: check, disabled: loading }, loading ? "Controleren..." : "Check deadlines"),

    reminders && React.createElement("div", { style: { marginTop: 20 } },
      React.createElement("div", { style: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16, marginBottom: 16 } },
        StatBox("Achterstallig", reminders.overdue?.length || 0, theme),
        StatBox("Morgen deadline", reminders.dueIn1Day?.length || 0, theme),
        StatBox("Binnen 7 dagen", reminders.dueIn7Days?.length || 0, theme),
      ),

      reminders.overdue?.length > 0 && React.createElement("div", null,
        React.createElement(H3, { style: { color: "#ff3b6f" } }, "Achterstallig"),
        reminders.overdue.map((r, i) => React.createElement("div", { key: i, style: { padding: "6px 0", borderBottom: `1px solid ${theme.rule}20` } },
          React.createElement(Small, null, `${r.userName} (${r.email}) — ${r.quizTitle || r.curriculumTitle} — ${r.daysLeft}d te laat`),
        )),
      ),
    ),
  );
}

window.ReportsScreen = ReportsScreen;
window.HeatmapView = HeatmapView;