<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Create SBA Questions — MLA Question Builder</title>
    <link rel="stylesheet" href="assets/css/styles.css?v=2">
    <link rel="stylesheet" href="assets/css/app.css?v=65">
    <link rel="stylesheet" href="assets/css/theme.css?v=13">
</head>
<body class="app-shell page-sba-generator">
<?php require __DIR__ . '/partials/site_header.php'; ?>

<div class="container">

    <div class="card page-hero">
        <h1>Create SBA Questions</h1>
        <p class="page-intro">
            Create draft questions using tutor inputs.
        </p>

        <div class="top-actions">
            <a href="index.php" class="btn btn-quiet">← Back to Home</a>

            <button type="button" id="clear-workspace-btn" class="btn btn-danger-outline btn--small">
                Clear workspace
            </button>
        </div>
    </div>

    <div class="generator-layout">

        <div class="generator-col-sidebar">
            <div class="card left-panel-card left-panel-card--compact generator-panel-card">
                <h2 class="generator-panel-heading">Generation</h2>
                <p id="gen-context-compact" class="sidebar-compact-line">No questions generated yet.</p>
                <div id="gen-generation-status" class="gen-generation-status hidden" aria-live="polite"></div>
                <details class="sidebar-details">
                    <summary class="sidebar-details-summary">Show generation details</summary>
                    <div class="sidebar-details-body">
                        <div id="context-specialty" class="context-line">Specialty: -</div>
                        <div id="context-condition" class="context-line">Condition: -</div>
                        <div id="context-presentation" class="context-line">Presentation: -</div>
                        <div id="context-num" class="context-line">Questions requested: -</div>
                        <div id="context-skills" class="context-line">Skills: -</div>
                        <div id="generation-progress" class="generation-progress-compact">
                            <p>No generation in progress.</p>
                        </div>
                    </div>
                </details>
            </div>

            <div class="card left-panel-card left-panel-card--compact generator-panel-card">
                <h2 class="generator-panel-heading">Export</h2>
                <p id="export-summary-compact" class="sidebar-compact-line">Draft: 0 · Approved: 0 · Rejected: 0</p>
                <p id="export-ready-compact" class="sidebar-compact-line sidebar-compact-line--muted">No questions ready for export yet.</p>
                <button type="button" id="open-export-modal-btn" class="btn btn-primary btn--small hidden">Export questions</button>
                <details class="sidebar-details">
                    <summary class="sidebar-details-summary">Show export details</summary>
                    <div class="sidebar-details-body">
                        <p id="export-total" class="context-line">Total: 0</p>
                        <p id="export-draft" class="context-line">Draft: 0</p>
                        <p id="export-done" class="context-line">Approved: 0</p>
                        <p id="export-rejected" class="context-line">Rejected: 0</p>
                        <p class="context-line context-line--muted">Removing from the ready list moves a question to Rejected.</p>
                        <ul id="export-ready-items" class="export-ready-list"></ul>
                    </div>
                </details>
            </div>
        </div>

        <div class="generator-col-main">
            <div class="card collapsible open generator-panel-card" id="assessment-card">

                <div class="collapsible-header" id="assessment-toggle">
                    <h2 class="generator-panel-heading">
                        Question setup
                        <span class="info-icon" data-info="setup" title="More information">ℹ</span>
                    </h2>
                    <span class="chevron">▼</span>
                </div>

                <div class="collapsible-body assessment-setup-body">
                    <form id="generator-form" class="generator-form">

                        <label>Question Type</label>
                        <select>
                            <option>SBA</option>
                            <option disabled>VSA (coming soon)</option>
                        </select>

                        <p class="setup-required-notice" role="note">
                            Required: specialty, core condition, presentation, year, and at least one skill.
                            Tutor comments are optional.
                        </p>

                        <h3 class="section-heading">Clinical Focus</h3>

                        <label>Specialty <span class="field-required">*</span></label>
                        <input type="text" name="specialty" placeholder="Respiratory Medicine" required>

                        <label>Core condition <span class="field-required">*</span></label>
                        <input type="text" name="core_condition" placeholder="Asthma" required>

                        <label>Presentation <span class="field-required">*</span></label>
                        <input type="text" name="presentation" placeholder="e.g. Wheeze, chest pain, fever and cough" required>

                        <div class="field-group">
                            <label class="group-label">Skills <span class="field-required">*</span></label>
                            <p class="panel-tip">Select one or more skills. The generator will create one question for each selected skill.</p>

                            <div class="checkbox-list" id="skills-checkbox-list">
                                <label><input type="checkbox" name="skills[]" value="Diagnosis"> Diagnosis</label>
                                <label><input type="checkbox" name="skills[]" value="Investigation"> Investigation</label>
                                <label><input type="checkbox" name="skills[]" value="Interpretation"> Interpretation</label>
                                <label><input type="checkbox" name="skills[]" value="Management"> Management</label>
                                <label><input type="checkbox" name="skills[]" value="Prescribing"> Prescribing</label>
                                <label><input type="checkbox" name="skills[]" value="Emergency Management"> Emergency Management</label>
                                <label><input type="checkbox" name="skills[]" value="Monitoring"> Monitoring</label>
                            </div>
                            <p id="skill-question-count" class="skill-question-count is-hidden" role="status" aria-live="polite" hidden></p>
                        </div>

                        <label>Tutor Comments (optional)</label>
                        <textarea name="tutor_comments" rows="4" placeholder="Add any optional guidance for the generator"></textarea>

                        <h3 class="section-heading">Generation Settings</h3>

                        <label>Summative/Formative</label>
                        <select name="summative_formative" required>
                            <option value="">Select one</option>
                            <option value="Summative">Summative</option>
                            <option value="Formative">Formative</option>
                        </select>

                        <label>Year level <span class="field-required">*</span></label>
                        <p class="panel-tip panel-tip--compact">For curation and organising outputs only — not question difficulty.</p>
                        <select name="year" required>
                            <option value="">Select year</option>
                            <option value="4">Year 4</option>
                            <option value="5">Year 5</option>
                            <option value="6">Year 6</option>
                        </select>

                        <p id="skills-validation-error" class="setup-field-error is-hidden" role="alert" aria-live="polite" hidden></p>

                        <div class="form-actions">
                            <button type="submit" id="generate-questions-btn" class="btn btn-primary">Generate Questions</button>
                        </div>

                    </form>
                </div>
            </div>

            <div class="card card--compact card--question-list generator-panel-card" id="question-list-card">
                <h2 class="generator-panel-heading">Filter questions</h2>
                <p id="question-list-empty" class="workspace-empty workspace-empty--compact">No questions generated yet.</p>
                <div id="question-list-controls" class="question-list-controls hidden" aria-hidden="true">
                    <div class="filter-chip-row" role="group" aria-label="Filter by status">
                        <button type="button" class="filter-chip filter-btn active-filter" data-filter="All">All</button>
                        <button type="button" class="filter-chip filter-btn" data-filter="Draft">Draft</button>
                        <button type="button" class="filter-chip filter-btn" data-filter="Done">Approved</button>
                        <button type="button" class="filter-chip filter-btn" data-filter="Rejected">Rejected</button>
                    </div>
                    <div class="jump-container hidden" id="jump-container">
                        <select id="jump-select" class="jump-select" aria-label="Select question">
                            <option value="">No questions</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="card card--questions card--question-display card--empty-state generator-panel-card" id="question-display-card">
                <h2 class="generator-panel-heading" id="question-display-heading">Generated question</h2>
                <div id="question-navigation" class="question-nav-row hidden">
                    <span id="question-counter" class="question-nav-label">Question 0 of 0</span>
                    <div class="question-nav-buttons">
                        <button type="button" id="prev-question-btn" class="btn btn-secondary btn--small">Previous</button>
                        <button type="button" id="next-question-btn" class="btn btn-secondary btn--small">Next</button>
                    </div>
                </div>

                <div class="review-tools hidden" id="review-tools-row">
                    <button type="button" id="next-draft-btn" class="btn btn-quiet btn--small">Jump to next draft</button>
                </div>

                <div id="question-results">
                    <p class="workspace-empty workspace-empty--compact">No questions generated yet.</p>
                </div>
            </div>

            <section class="card card--ai-review card--empty-state generator-panel-card" id="ai-review-card" aria-label="AI review and suggestions">
                <h2 class="generator-panel-heading">AI review and suggestions</h2>
                <p id="ai-review-column-note" class="ai-review-column-note hidden" role="note">Advisory only. Tutor review is still required before approval or export.</p>
                <div id="ai-review-panel" class="ai-review-panel-body">
                    <p class="ai-review-empty">Generate questions to run AI review.</p>
                </div>
            </section>
        </div>
    </div>
</div>

<div id="edit-panel-wrapper">
    <div id="edit-panel-header">
        <h2 id="edit-panel-title">Edit question</h2>
        <button type="button" id="close-edit-panel" class="btn btn-quiet btn--small" aria-label="Close edit panel">Close</button>
    </div>
    <div id="edit-panel-body"></div>
    <div id="edit-panel-footer">
        <span id="autosave-status" class="autosave-status">No changes yet</span>
        <div class="edit-panel-footer-actions">
            <button type="button" id="cancel-edit-panel-btn" class="btn btn-secondary btn--small">Cancel</button>
            <button type="button" id="save-question-btn" class="btn btn-primary btn--small">Save changes</button>
        </div>
    </div>
</div>

<div id="app-modal-overlay" class="app-modal-overlay hidden">
    <div class="app-modal" role="dialog" aria-modal="true" aria-labelledby="app-modal-title">
        <div class="app-modal-header">
            <h3 id="app-modal-title">Information</h3>
            <button type="button" id="app-modal-close" class="modal-icon-btn" aria-label="Close">×</button>
        </div>

        <div class="app-modal-body">
            <p id="app-modal-message"></p>
        </div>

        <div class="app-modal-footer" id="app-modal-footer">
            <button type="button" id="app-modal-cancel" class="btn btn-secondary hidden">Cancel</button>
            <button type="button" id="app-modal-confirm" class="btn btn-primary hidden">Confirm</button>
            <button type="button" id="app-modal-ok" class="btn btn-primary">OK</button>
        </div>
    </div>
</div>

<div id="export-modal-overlay" class="app-modal-overlay hidden">
    <div class="app-modal" role="dialog" aria-modal="true" aria-labelledby="export-modal-title">
        <div class="app-modal-header">
            <h3 id="export-modal-title">Export Questions</h3>
            <button type="button" id="export-modal-close" class="modal-icon-btn" aria-label="Close">×</button>
        </div>

        <div class="app-modal-body">
            <p>Select an export format for questions marked Done.</p>

            <div class="export-options">
                <button type="button" class="btn btn-primary export-option" data-format="risr">RISR (CSV)</button>
                <button type="button" class="btn btn-primary export-option" data-format="word">Word Document</button>
                <button type="button" class="btn btn-primary export-option" data-format="forms">Microsoft Forms</button>
                <button type="button" class="btn btn-primary export-option" data-format="ultra">Learn Ultra</button>
            </div>

            <p class="export-forms-note" role="note">
                <strong>Microsoft Forms:</strong> Import the .docx as a <strong>Quiz</strong> (Quick Import). The file includes
                <strong>Answer:</strong> and <strong>Points:</strong> lines for scoring. After import, confirm all questions are
                marked <strong>Required</strong> before sharing — Quick Import cannot set Required from the .docx.
            </p>
        </div>
    </div>
</div>

<script src="/exam-question-generator/public/assets/js/generator.js?v=52"></script>
<script src="/exam-question-generator/public/assets/js/theme.js?v=1"></script>

</body>
</html>