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

function TrainingScreen({ theme, user, onBack }) {
  const api = window.kwistApi;
  const [tab, setTab] = useState("assignments");
  const [assignments, setAssignments] = useState([]);
  const [certificates, setCertificates] = useState([]);
  const [soloQuiz, setSoloQuiz] = useState(null);
  const [loading, setLoading] = useState(true);

  const load = useCallback(async () => {
    setLoading(true);
    const [aRes, cRes] = await Promise.all([
      api.get("/api/assignments").catch(() => ({ assignments: [] })),
      api.get("/api/certificates").catch(() => ({ certificates: [] })),
    ]);
    setAssignments(aRes.assignments || []);
    setCertificates(cRes.certificates || []);
    setLoading(false);
  }, []);

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

  if (soloQuiz) {
    return React.createElement(SoloPlayScreen, { theme, quiz: soloQuiz, user, onBack: () => { setSoloQuiz(null); load(); } });
  }

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

  const tabs = [
    { id: "assignments", label: `Opdrachten (${assignments.length})` },
    { id: "certificates", label: `Certificaten (${certificates.length})` },
  ];

  const pending = assignments.filter((a) => a.status === "pending");
  const completed = assignments.filter((a) => a.status === "completed");
  const overdue = pending.filter((a) => a.due_at && new Date(a.due_at) < new Date());

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

    overdue.length > 0 && React.createElement(Card, { theme, style: { padding: 16, marginBottom: 20, borderLeft: "4px solid #ff3b6f" } },
      React.createElement(Body, { style: { fontWeight: 700 } }, `${overdue.length} achterstallige opdracht(en)`),
    ),

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

    tab === "assignments" && React.createElement("div", { style: { marginTop: 20 } },
      pending.length === 0 && completed.length === 0 && React.createElement(Body, null, "Geen opdrachten toegewezen."),

      pending.length > 0 && React.createElement("div", null,
        React.createElement(H3, { style: { marginBottom: 12 } }, "Te doen"),
        pending.map((a) => React.createElement(AssignmentCard, { key: a.id, assignment: a, theme, onStart: () => startAssignment(a) })),
      ),

      completed.length > 0 && React.createElement("div", { style: { marginTop: 24 } },
        React.createElement(H3, { style: { marginBottom: 12 } }, "Voltooid"),
        completed.map((a) => React.createElement(AssignmentCard, { key: a.id, assignment: a, theme, completed: true })),
      ),
    ),

    tab === "certificates" && React.createElement("div", { style: { marginTop: 20 } },
      certificates.length === 0 && React.createElement(Body, null, "Nog geen certificaten behaald."),
      certificates.map((c) => React.createElement(Card, { key: c.id, theme, style: { padding: 16, marginBottom: 12 } },
        React.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" } },
          React.createElement("div", null,
            React.createElement(Body, { style: { fontWeight: 700 } }, c.quiz_title || c.curriculum_title || "Certificaat"),
            React.createElement(Small, null, `Score: ${c.score}/${c.max_score} · ${new Date(c.issued_at).toLocaleDateString("nl-BE")}`),
          ),
          React.createElement("div", null,
            React.createElement(Tag, { theme }, c.validation_code?.slice(0, 8) + "..."),
          ),
        ),
      )),
    ),
  );

  async function startAssignment(assignment) {
    const quizId = assignment.quiz_id;
    if (!quizId) {
      window.kwistDialog?.alert("Curricula worden binnenkort ondersteund.");
      return;
    }
    setSoloQuiz({ quizId, assignmentId: assignment.id });
  }
}

function AssignmentCard({ assignment, theme, onStart, completed }) {
  const a = assignment;
  const isOverdue = !completed && a.due_at && new Date(a.due_at) < new Date();
  const dueStr = a.due_at ? new Date(a.due_at).toLocaleDateString("nl-BE") : null;

  return React.createElement(Card, { theme, style: { padding: 16, marginBottom: 12, borderLeft: isOverdue ? "4px solid #ff3b6f" : completed ? "4px solid #22c55e" : "4px solid var(--accent)" } },
    React.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" } },
      React.createElement("div", null,
        React.createElement(Body, { style: { fontWeight: 700 } }, a.quiz_title || a.curriculum_title || "Opdracht"),
        React.createElement(Small, null,
          a.assigned_by_name ? `Toegewezen door ${a.assigned_by_name}` : "",
          dueStr ? ` · Deadline: ${dueStr}` : "",
          isOverdue ? " · ACHTERSTALLIG" : "",
        ),
      ),
      !completed && onStart && React.createElement(Btn, { onClick: onStart, "aria-label": `Start ${a.quiz_title}` }, "Start"),
      completed && React.createElement(Tag, { theme }, "✓ Voltooid"),
    ),
  );
}

function SoloPlayScreen({ theme, quiz, user, onBack }) {
  const api = window.kwistApi;
  const [state, setState] = useState("loading");
  const [attemptId, setAttemptId] = useState(null);
  const [questions, setQuestions] = useState([]);
  const [quizInfo, setQuizInfo] = useState(null);
  const [currentIdx, setCurrentIdx] = useState(0);
  const [answers, setAnswers] = useState([]);
  const [selected, setSelected] = useState(null);
  const [result, setResult] = useState(null);

  useEffect(() => {
    (async () => {
      try {
        const res = await api.post("/api/learn/start", { quizId: quiz.quizId, assignmentId: quiz.assignmentId });
        setAttemptId(res.attempt.id);
        setQuestions(res.questions);
        setQuizInfo(res.quiz);
        setState("playing");
      } catch (e) {
        if (e.status === 429) {
          setState("blocked");
          setResult({ error: e.data?.error || "Maximum pogingen bereikt" });
        } else {
          setState("error");
          setResult({ error: e.message });
        }
      }
    })();
  }, []);

  const submitAnswer = () => {
    if (selected === null) return;
    const q = questions[currentIdx];
    setAnswers((prev) => [...prev, { questionId: q.id, answer: selected }]);
    setSelected(null);
    if (currentIdx + 1 < questions.length) {
      setCurrentIdx(currentIdx + 1);
    } else {
      finishQuiz([...answers, { questionId: q.id, answer: selected }]);
    }
  };

  const finishQuiz = async (allAnswers) => {
    setState("submitting");
    try {
      const res = await api.post("/api/learn/submit", { attemptId, answers: allAnswers });
      setResult(res);
      setState("result");
      if (res.passed) {
        try { await api.post("/api/certificates/generate", { attemptId }); } catch {}
      }
    } catch (e) {
      setResult({ error: e.message });
      setState("error");
    }
  };

  if (state === "loading") return React.createElement("div", { style: { padding: 40, textAlign: "center" } }, "Quiz laden...");
  if (state === "blocked") return React.createElement("div", { style: { padding: 40, textAlign: "center" } },
    React.createElement(H2, null, "Niet beschikbaar"),
    React.createElement(Body, null, result?.error || "Je kunt deze quiz nu niet maken."),
    React.createElement(Btn, { onClick: onBack, style: { marginTop: 16 } }, "Terug"),
  );
  if (state === "error") return React.createElement("div", { style: { padding: 40, textAlign: "center" } },
    React.createElement(Body, null, `Fout: ${result?.error}`),
    React.createElement(Btn, { onClick: onBack, style: { marginTop: 16 } }, "Terug"),
  );
  if (state === "submitting") return React.createElement("div", { style: { padding: 40, textAlign: "center" } }, "Resultaten berekenen...");

  if (state === "result") {
    return React.createElement("div", { style: { maxWidth: 600, margin: "0 auto", padding: "40px 16px", textAlign: "center" } },
      React.createElement(H2, null, result.passed ? "Geslaagd!" : "Niet geslaagd"),
      React.createElement("div", { style: { fontSize: 48, fontWeight: 800, fontFamily: "var(--font-display)", color: result.passed ? "#22c55e" : "#ff3b6f", margin: "24px 0" } },
        `${result.percentage}%`
      ),
      React.createElement(Body, null, `Score: ${result.score} / ${result.maxScore}`),
      result.threshold > 0 && React.createElement(Small, null, `Minimaal ${result.threshold}% vereist`),

      React.createElement("div", { style: { marginTop: 32 } },
        result.answers?.map((a, i) => {
          const q = questions[i];
          return React.createElement("div", { key: i, style: { textAlign: "left", padding: "12px 0", borderBottom: `1px solid ${theme.rule}20` } },
            React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 8 } },
              React.createElement("span", { style: { fontWeight: 700, color: a.correct ? "#22c55e" : "#ff3b6f" } }, a.correct ? "✓" : "✗"),
              React.createElement(Body, null, q?.prompt || `Vraag ${i + 1}`),
            ),
            q?.sourceUrl && React.createElement(Small, null,
              React.createElement("a", { href: q.sourceUrl, target: "_blank", rel: "noopener", style: { color: theme.accent } }, q.sourceLabel || "Bron bekijken"),
            ),
          );
        }),
      ),

      React.createElement(Btn, { onClick: onBack, style: { marginTop: 24 } }, "Terug naar opdrachten"),
    );
  }

  // Playing state
  const q = questions[currentIdx];
  if (!q) return null;

  return React.createElement("div", { style: { maxWidth: 600, margin: "0 auto", padding: "24px 16px" } },
    React.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 24 } },
      React.createElement(Small, null, `${quizInfo?.title || "Quiz"} · Vraag ${currentIdx + 1} van ${questions.length}`),
      React.createElement("div", { style: { width: `${((currentIdx + 1) / questions.length) * 100}%`, height: 4, background: theme.accent, borderRadius: 2, transition: "width 0.3s" } }),
    ),

    React.createElement(H2, { style: { marginBottom: 24 } }, q.prompt),

    q.options && React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 12 } },
      q.options.map((opt) => React.createElement("button", {
        key: opt.id,
        onClick: () => setSelected(opt.id),
        "aria-pressed": selected === opt.id,
        style: {
          padding: "16px 20px", textAlign: "left", fontSize: 16,
          border: `var(--border-width) solid ${selected === opt.id ? theme.accent : theme.rule}`,
          background: selected === opt.id ? theme.accent + "15" : theme.card,
          color: theme.fg, cursor: "pointer", fontFamily: "var(--font-body)",
          transition: "all 0.15s",
        },
      }, opt.text)),
    ),

    !q.options && React.createElement(React.Fragment, null,
      React.createElement("input", {
        type: "text", value: selected || "",
        onChange: (e) => setSelected(e.target.value),
        placeholder: "Typ je antwoord...",
        "aria-label": "Antwoord",
        style: { width: "100%", padding: "12px 16px", fontSize: 16, border: `var(--border-width) solid ${theme.rule}`, background: theme.card, color: theme.fg, fontFamily: "var(--font-body)" },
      }),
    ),

    React.createElement("div", { style: { marginTop: 24, display: "flex", justifyContent: "space-between" } },
      React.createElement(Btn, { variant: "ghost", onClick: onBack }, "Stoppen"),
      React.createElement(Btn, { onClick: submitAnswer, disabled: selected === null }, currentIdx + 1 < questions.length ? "Volgende →" : "Afronden"),
    ),

    q.sourceUrl && React.createElement("div", { style: { marginTop: 16 } },
      React.createElement(Small, null,
        React.createElement("a", { href: q.sourceUrl, target: "_blank", rel: "noopener", style: { color: theme.accent } }, q.sourceLabel || "Bronmateriaal"),
      ),
    ),
  );
}

window.TrainingScreen = TrainingScreen;