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

<div class="container">

    <div class="card page-hero">
        <h1>Create SBA Variants</h1>
        <p class="page-intro">
            Upload a source file, review questions one at a time, and generate one variant for each selected question.
        </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">
                    Upload Source File
                    <span class="info-icon" data-info="upload" title="More information">ℹ</span>
                </h2>

                <form id="upload-form" enctype="multipart/form-data" class="generator-form">
                    <input type="file" id="risr_file" name="risr_file" accept=".xlsx" required aria-label="RISR Excel file (.xlsx)">

                    <div class="form-actions">
                        <button type="submit" class="btn btn-primary">Upload File</button>
                    </div>
                </form>

                <div id="upload-status" class="variant-status-box">
                    <p class="empty-state">No file uploaded yet.</p>
                </div>
            </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>
                <p id="export-panel-error" class="sidebar-compact-line export-panel-error hidden" role="alert"></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="instructions-panel">
                <div class="collapsible-header">
                    <h2 class="generator-panel-heading">Instructions</h2>
                    <span class="chevron">▼</span>
                </div>

                <div class="collapsible-body">
                    <div class="variant-instructions-body variant-instructions-body-plain">
                        <p>1. Upload a RISR file on the left.</p>
                        <p>2. Review source questions using Prev and Next.</p>
                        <p>3. Untick any source question you do not want before generation.</p>
                        <p>4. Click Generate Variants.</p>
                        <p>5. Review each generated variant, then Edit, Regenerate, Reject, or mark Done.</p>

                        <div class="variant-instructions-actions">
                            <button type="button" id="start-variant-generation-btn" class="btn btn-primary">
                                Generate Variants
                            </button>
                        </div>

                        <div id="variant-generation-status" class="variant-status-box">
                            <p class="empty-state">No variants generated yet.</p>
                        </div>
                    </div>
                </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 uploaded questions 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 id="variant-selection-controls" class="variant-selection-controls">
                        <div class="filter-chip-row" role="group" aria-label="Selection">
                            <button type="button" id="select-all-btn" class="filter-chip">Select all</button>
                            <button type="button" id="clear-selection-btn" class="filter-chip">Clear selection</button>
                        </div>
                        <div id="selection-count" class="variant-selection-count">0 selected of 0</div>
                    </div>

                    <div class="jump-container hidden" id="jump-container">
                        <select id="jump-select" class="jump-select" aria-label="Select question">
                            <option value="">No questions loaded</option>
                        </select>
                    </div>

                    <div id="question-list-container" class="variant-question-list-container">
                        <p class="empty-state">No uploaded questions yet.</p>
                    </div>
                </div>
            </div>

            <div class="card collapsible generator-panel-card" id="original-question-panel">
                <div class="collapsible-header">
                    <h2 class="generator-panel-heading">Original question</h2>
                    <span class="chevron">▼</span>
                </div>

                <div class="collapsible-body">
                    <div id="original-question-navigation" class="question-nav-row hidden">
                        <span id="source-counter-original" class="question-nav-label">Question 0 of 0</span>
                        <div class="question-nav-buttons">
                            <button type="button" id="prev-source-btn-original" class="btn btn-secondary btn--small">Previous</button>
                            <button type="button" id="next-source-btn-original" class="btn btn-secondary btn--small">Next</button>
                        </div>
                    </div>

                    <div class="review-tools hidden" id="original-include-tools-row">
                        <label class="variant-current-include variant-current-include--toolbar" id="include-question-wrapper">
                            <input type="checkbox" id="current-include-checkbox">
                            <span class="variant-current-include-text">Include this question</span>
                        </label>
                    </div>

                    <div id="original-question-body" class="variant-question-display">
                        <p class="variant-review-empty empty-state">Upload a RISR file to begin.</p>
                    </div>
                </div>
            </div>

            <div class="card collapsible card--questions card--question-display card--empty-state generator-panel-card" id="generated-question-panel">
                <div class="collapsible-header">
                    <h2 class="generator-panel-heading">Generated question</h2>
                    <span class="chevron">▼</span>
                </div>

                <div class="collapsible-body">
                    <div id="question-navigation" class="question-nav-row hidden">
                        <span id="source-counter" class="question-nav-label">Question 0 of 0</span>
                        <div class="question-nav-buttons">
                            <button type="button" id="prev-source-btn" class="btn btn-secondary btn--small">Previous</button>
                            <button type="button" id="next-source-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="generated-question-body" class="variant-question-display">
                        <p class="variant-placeholder empty-state">No variants generated yet.</p>
                    </div>
                </div>
            </div>

            <section class="card card--ai-review card--empty-state generator-panel-card" id="variant-ai-review-card" aria-label="AI review and suggestions">
                <h2 class="generator-panel-heading">AI review and suggestions</h2>
                <p id="variant-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="variant-ai-review-panel" class="ai-review-panel-body">
                    <p class="ai-review-empty">Generate a variant to run optional AI review.</p>
                </div>
            </section>

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

<div id="edit-panel-wrapper">
    <div id="edit-panel-header">
        <h2>Edit Variant</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"></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 variants marked Done (approved for export).</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>

<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>

<script src="assets/js/variant.js?v=66"></script>
<script src="assets/js/theme.js?v=1"></script>

</body>
</html>
