{% extends "base.html" %}
{% block title %}Exam Builder | {{ school_name }}{% endblock %}
{% block head %}
<style>
  .builder-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 16px; align-items: start; }
  .sticky-panel { position: sticky; top: 14px; }
  .mode-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
  .mode-tabs button { min-height: 38px; }
  .question-card { border: 1px solid var(--border); border-radius: 8px; padding: 16px; margin-bottom: 12px; background: var(--surface); }
  .question-head { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-bottom: 12px; }
  .option-grid { display: grid; grid-template-columns: minmax(0, 1fr) 92px; gap: 8px; align-items: center; margin-bottom: 8px; }
  .hidden { display: none !important; }
  .builder-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
  @media (max-width: 860px) {
    .builder-layout { grid-template-columns: 1fr; }
    .sticky-panel { position: static; }
  }
</style>
{% endblock %}
{% block body %}
<nav class="nav">
  <span class="brand">Exam Builder</span>
  <a href="{{ url_for('admin_dashboard') }}">Dashboard</a>
  <a href="{{ url_for('all_results') }}">Results</a>
</nav>

<main class="container">
  {% with messages = get_flashed_messages(with_categories=true) %}
    {% for cat, msg in messages %}<div class="alert alert-{{ cat }}">{{ msg }}</div>{% endfor %}
  {% endwith %}

  <form id="builderForm" method="post" action="{{ url_for('generate_exam') }}" enctype="multipart/form-data">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <input type="hidden" name="questions_json" id="questionsJson">

    <div class="builder-layout">
      <aside class="card sticky-panel">
        <h1 class="title">Create Exam</h1>
        <p class="subtle">Design questions, attach PDFs, or upload a ready-made HTML form.</p>

        <div class="form-group">
          <label>Title *</label>
          <input type="text" name="title" class="form-control" required>
        </div>
        <div class="grid grid-2">
          <div class="form-group">
            <label>Subject</label>
            <input type="text" name="subject" class="form-control">
          </div>
          <div class="form-group">
            <label>Class</label>
            <input type="text" name="grade" class="form-control">
          </div>
        </div>
        <div class="form-group">
          <label>Teacher</label>
          <input type="text" name="teacher" class="form-control">
        </div>
        <div class="grid grid-2">
          <div class="form-group">
            <label>Minutes</label>
            <input type="number" name="duration_minutes" class="form-control" value="0" min="0" max="600">
          </div>
          <div class="form-group">
            <label>Password</label>
            <input type="text" name="password" class="form-control">
          </div>
        </div>
        <div class="form-group">
          <label>Start</label>
          <input type="datetime-local" name="starts_at" class="form-control">
        </div>
        <div class="form-group">
          <label>End</label>
          <input type="datetime-local" name="ends_at" class="form-control">
        </div>
        <div class="form-group">
          <label>Description</label>
          <textarea name="description" class="form-control"></textarea>
        </div>
        <div class="form-group">
          <label>Instructions and equipment</label>
          <textarea name="instructions" class="form-control" placeholder="Calculator, formula sheet, PDF resources, rules..."></textarea>
        </div>
        <label class="checkline">
          <input type="checkbox" name="active" checked>
          <span>Active after creation</span>
        </label>
        <button type="submit" class="btn btn-primary btn-block" style="margin-top:14px;">Save Exam</button>
      </aside>

      <section>
        <section class="card">
          <h2 class="title">Creation Mode</h2>
          <div class="mode-tabs">
            <button type="button" class="btn btn-primary" data-mode-btn="designer">Designer</button>
            <button type="button" class="btn btn-ghost" data-mode-btn="paste">Question Bank</button>
            <button type="button" class="btn btn-ghost" data-mode-btn="html">Ready HTML</button>
          </div>

          <div id="designerMode">
            <div class="row" style="justify-content:space-between;margin-bottom:12px;">
              <div>
                <strong>Question Designer</strong>
                <p class="subtle">Single choice, multiple choice, true/false, short answer, and essay.</p>
              </div>
              <div class="builder-actions">
                <button type="button" class="btn btn-ghost btn-sm" data-add-type="single">Single</button>
                <button type="button" class="btn btn-ghost btn-sm" data-add-type="multiple">Multiple</button>
                <button type="button" class="btn btn-ghost btn-sm" data-add-type="true_false">True/False</button>
                <button type="button" class="btn btn-ghost btn-sm" data-add-type="short">Short</button>
                <button type="button" class="btn btn-ghost btn-sm" data-add-type="essay">Essay</button>
              </div>
            </div>
            <div id="questionsList"></div>
          </div>

          <div id="pasteMode" class="hidden">
            <div class="form-group">
              <label>Question file</label>
              <input type="file" name="question_file" class="form-control" accept=".txt,.csv">
            </div>
            <div class="form-group">
              <label>Paste question rows</label>
              <textarea name="questions" class="form-control" style="min-height:220px;" placeholder="Question | option 1 | option 2 | option 3 | correct option"></textarea>
            </div>
          </div>

          <div id="htmlMode" class="hidden">
            <div class="form-group">
              <label>Ready-made HTML form</label>
              <input type="file" name="html_file" class="form-control" accept=".html">
              <span class="meta">Use this when you already have a full exam page. It should submit results to the platform or use window.EXAM_PLATFORM.</span>
            </div>
          </div>
        </section>

        <section class="card">
          <h2 class="title">PDF Resources</h2>
          <p class="subtle">Attach PDF files for reading passages, formulas, maps, answer sheets, or source documents.</p>
          <input type="file" name="pdf_files" class="form-control" accept=".pdf" multiple>
        </section>
      </section>
    </div>
  </form>
</main>

<template id="questionTemplate">
  <div class="question-card" data-question>
    <div class="question-head">
      <strong data-question-title>Question</strong>
      <div class="row">
        <input type="number" data-points class="form-control" value="1" min="0" max="100" style="width:86px;">
        <button type="button" class="btn btn-danger btn-sm" data-remove>Remove</button>
      </div>
    </div>
    <input type="hidden" data-type>
    <div class="form-group">
      <label>Prompt</label>
      <textarea class="form-control" data-prompt required></textarea>
    </div>
    <div data-options-wrap>
      <label style="font-weight:800;">Options</label>
      <div data-options></div>
      <button type="button" class="btn btn-ghost btn-sm" data-add-option>Add option</button>
    </div>
    <div class="form-group hidden" data-short-wrap>
      <label>Expected answer</label>
      <input type="text" class="form-control" data-short-answer>
    </div>
    <div class="form-group">
      <label>Explanation</label>
      <input type="text" class="form-control" data-explanation>
    </div>
  </div>
</template>

<script>
const questionsList = document.getElementById("questionsList");
const template = document.getElementById("questionTemplate");
let mode = "designer";

function setMode(next) {
  mode = next;
  ["designer", "paste", "html"].forEach(name => {
    document.getElementById(name + "Mode").classList.toggle("hidden", name !== next);
    const btn = document.querySelector(`[data-mode-btn="${name}"]`);
    btn.classList.toggle("btn-primary", name === next);
    btn.classList.toggle("btn-ghost", name !== next);
  });
}

function addQuestion(type = "single") {
  const node = template.content.firstElementChild.cloneNode(true);
  node.querySelector("[data-type]").value = type;
  node.querySelector("[data-question-title]").textContent = type.replace("_", " ");
  node.querySelector("[data-remove]").addEventListener("click", () => node.remove());
  node.querySelector("[data-add-option]").addEventListener("click", () => addOption(node));
  const optionWrap = node.querySelector("[data-options-wrap]");
  const shortWrap = node.querySelector("[data-short-wrap]");
  optionWrap.classList.toggle("hidden", ["short", "essay"].includes(type));
  shortWrap.classList.toggle("hidden", type !== "short");
  if (type === "true_false") {
    addOption(node, "True", true);
    addOption(node, "False", false);
    node.querySelector("[data-add-option]").classList.add("hidden");
  } else if (!["short", "essay"].includes(type)) {
    addOption(node, "", true);
    addOption(node, "", false);
  }
  questionsList.appendChild(node);
}

function addOption(card, value = "", checked = false) {
  const type = card.querySelector("[data-type]").value;
  const row = document.createElement("div");
  row.className = "option-grid";
  row.innerHTML = `
    <input type="text" class="form-control" data-option value="${value}">
    <label class="checkline" style="padding:0;"><input type="${type === "multiple" ? "checkbox" : "radio"}" name="correct-${Date.now()}-${Math.random()}" data-correct ${checked ? "checked" : ""}><span>Correct</span></label>
  `;
  if (type === "single" || type === "true_false") {
    const group = card.dataset.group || ("g" + Date.now() + Math.random());
    card.dataset.group = group;
    row.querySelector("[data-correct]").name = group;
  }
  card.querySelector("[data-options]").appendChild(row);
}

function collectDesignerQuestions() {
  return [...document.querySelectorAll("[data-question]")].map(card => {
    const type = card.querySelector("[data-type]").value;
    const options = [...card.querySelectorAll("[data-option]")].map(input => input.value.trim()).filter(Boolean);
    const correctInputs = [...card.querySelectorAll("[data-correct]")];
    let correct = "";
    if (type === "multiple") correct = correctInputs.map((input, i) => input.checked ? i : -1).filter(i => i >= 0);
    else if (type === "single" || type === "true_false") correct = Math.max(0, correctInputs.findIndex(input => input.checked));
    else if (type === "short") correct = card.querySelector("[data-short-answer]").value.trim();
    return {
      type,
      prompt: card.querySelector("[data-prompt]").value.trim(),
      options,
      correct,
      points: Number(card.querySelector("[data-points]").value || 0),
      explanation: card.querySelector("[data-explanation]").value.trim()
    };
  }).filter(item => item.prompt);
}

document.querySelectorAll("[data-mode-btn]").forEach(btn => btn.addEventListener("click", () => setMode(btn.dataset.modeBtn)));
document.querySelectorAll("[data-add-type]").forEach(btn => btn.addEventListener("click", () => addQuestion(btn.dataset.addType)));
document.getElementById("builderForm").addEventListener("submit", () => {
  document.getElementById("questionsJson").value = mode === "designer" ? JSON.stringify(collectDesignerQuestions()) : "";
});
addQuestion("single");
</script>
{% endblock %}