{% extends 'base.html' %}
{% block extra_css %}
<style>
    /* ============================================
       NIX EXAMINATION COLOR SYSTEM
       ============================================ */
    :root {
        --nix-red: #B40000;
        --nix-red-dark: #8F0000;
        --nix-red-light: #FFF1F1;
        --nix-red-border: #F3C2C2;
        
        --nix-green: #006B3C;
        --nix-green-dark: #00552F;
        --nix-green-light: #EDF8F2;
        --nix-green-border: #B9DEC9;
        
        --nix-ink: #171717;
        --nix-text: #374151;
        --nix-muted: #6B7280;
        --nix-border: #E5E7EB;
        --nix-border-dark: #D1D5DB;
        --nix-bg: #F7F8F7;
        --nix-surface: #FFFFFF;
        --nix-surface-soft: #FAFAFA;
        
        --nix-warning: #B7791F;
        --nix-warning-light: #FFF8E7;
        --nix-danger: #B40000;
        --nix-danger-light: #FFF1F1;
    }

    body {
        background: var(--nix-bg);
        color: var(--nix-ink);
    }

    .create-page {
        max-width: 1180px;
        margin: 0 auto;
    }

    .create-hero {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 24px;
        margin-bottom: 18px;
        padding-bottom: 1rem;
        border-bottom: 1px solid var(--nix-border);
    }

    .create-title {
        font-size: 1.85rem;
        font-weight: 800;
        letter-spacing: -0.02em;
        margin: 0;
        color: var(--nix-ink);
    }

    .create-title .accent {
        color: var(--nix-red);
    }

    .create-kicker {
        color: var(--nix-muted);
        font-size: .92rem;
        margin: 6px 0 0;
    }

    .mode-chip {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border: 1px solid var(--nix-red-border);
        border-radius: 999px;
        padding: 8px 14px;
        color: var(--nix-red-dark);
        background: var(--nix-red-light);
        font-size: .86rem;
        font-weight: 650;
        white-space: nowrap;
    }

    .mode-chip i {
        color: var(--nix-red);
    }

    .create-shell {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: 18px;
        align-items: start;
    }

    .assessment-panel,
    .summary-panel {
        background: var(--nix-surface);
        border: 1px solid var(--nix-border);
        border-radius: 14px;
        box-shadow: 0 8px 30px rgba(23, 23, 23, 0.05);
        transition: box-shadow .2s ease;
    }

    .assessment-panel:hover,
    .summary-panel:hover {
        box-shadow: 0 12px 40px rgba(23, 23, 23, 0.07);
    }

    .assessment-panel {
        overflow: hidden;
    }

    .panel-topbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        padding: 18px 20px;
        border-bottom: 1px solid var(--nix-border);
        background: var(--nix-surface);
    }

    .panel-topbar strong {
        color: var(--nix-ink);
        font-size: .95rem;
        font-weight: 700;
    }

    .panel-topbar .text-muted {
        color: var(--nix-muted) !important;
        font-size: .8rem;
    }

    .engine-toggle {
        display: inline-flex;
        padding: 4px;
        background: var(--nix-surface-soft);
        border: 1px solid var(--nix-border);
        border-radius: 10px;
    }

    .engine-toggle .btn {
        border: 0;
        color: var(--nix-muted);
        background: transparent;
        border-radius: 7px;
        padding: 8px 14px;
        font-weight: 600;
        font-size: .82rem;
        transition: all .2s ease;
        cursor: pointer;
    }

    .engine-toggle .btn:hover:not(.btn-check:checked + .btn) {
        color: var(--nix-ink);
        background: var(--nix-surface);
    }

    .engine-toggle .engine-kcse {
        color: var(--nix-red);
    }

    .engine-toggle .engine-cbc {
        color: var(--nix-green);
    }

    .engine-toggle .btn-check:checked + .engine-kcse {
        background: var(--nix-red);
        color: #fff;
        box-shadow: 0 2px 8px rgba(180, 0, 0, .18);
    }

    .engine-toggle .btn-check:checked + .engine-cbc {
        background: var(--nix-green);
        color: #fff;
        box-shadow: 0 2px 8px rgba(0, 107, 60, .18);
    }

    .form-inner {
        padding: 20px 18px 18px;
    }

    .form-section {
        border-top: 1px solid var(--nix-border);
        padding-top: 18px;
        margin-top: 18px;
    }

    .form-section:first-of-type {
        border-top: 0;
        padding-top: 0;
        margin-top: 0;
    }

    .section-heading {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 1rem;
        font-weight: 700;
        margin-bottom: 14px;
        color: var(--nix-ink);
    }

    .section-heading i {
        width: 30px;
        height: 30px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: var(--nix-red-light);
        color: var(--nix-red);
        font-size: .82rem;
        flex-shrink: 0;
    }

    #cbc_fields .section-heading i {
        background: var(--nix-green-light);
        color: var(--nix-green);
    }

    .scope-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        border: 0;
        border-radius: 0;
        overflow: hidden;
        background: transparent;
    }

    .scope-grid .btn {
        border: 1px solid var(--nix-border-dark);
        border-radius: 10px !important;
        min-height: 56px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        font-weight: 600;
        white-space: normal;
        padding: 10px 16px;
        font-size: .85rem;
        cursor: pointer;
        transition: all .2s ease;
        background: var(--nix-surface);
        color: var(--nix-text);
        text-align: center;
        line-height: 1.3;
    }

    .scope-grid .btn i {
        font-size: 1.1rem;
        color: var(--nix-muted);
        transition: color .2s ease;
    }

    .scope-grid .btn:hover:not(.btn-check:checked + .btn) {
        border-color: var(--nix-red);
        background: var(--nix-red-light);
        color: var(--nix-red);
    }

    .scope-grid .btn:hover:not(.btn-check:checked + .btn) i {
        color: var(--nix-red);
    }

    .scope-grid .btn-check:checked + .btn {
        background: var(--nix-red-light);
        color: var(--nix-red);
        border-color: var(--nix-red);
        box-shadow: 0 0 0 1px var(--nix-red);
    }

    .scope-grid .btn-check:checked + .btn i {
        color: var(--nix-red);
    }

    .inline-hint {
        margin-top: 10px;
        padding: 8px 12px;
        background: var(--nix-green-light);
        border: 1px solid var(--nix-green-border);
        border-radius: 8px;
        color: var(--nix-green-dark);
        font-size: .85rem;
        line-height: 1.5;
    }

    .inline-hint i {
        color: var(--nix-green);
        margin-right: 4px;
    }

    .topic-scope-control {
        background: var(--nix-surface-soft);
        border: 1px solid var(--nix-border);
        border-radius: 10px;
        padding: 12px 16px;
        margin-bottom: 12px;
    }

    .topic-scope-label {
        font-size: .78rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--nix-muted);
        display: block;
        margin-bottom: 8px;
    }

    .topic-scope-options {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
    }

    .topic-scope-options .btn {
        border: 1px solid var(--nix-border-dark);
        border-radius: 8px !important;
        padding: 6px 14px;
        font-size: .8rem;
        font-weight: 600;
        background: var(--nix-surface);
        color: var(--nix-text);
        transition: all .2s ease;
        cursor: pointer;
    }

    .topic-scope-options .btn:hover:not(.btn-check:checked + .btn) {
        border-color: var(--nix-red);
        background: var(--nix-red-light);
        color: var(--nix-red);
    }

    .topic-scope-options .btn-check:checked + .btn-scope-current {
        background: var(--nix-red-light);
        color: var(--nix-red);
        border-color: var(--nix-red);
        box-shadow: 0 0 0 1px var(--nix-red);
    }

    .topic-scope-options .btn-check:checked + .btn-scope-cumulative {
        background: var(--nix-green-light);
        color: var(--nix-green-dark);
        border-color: var(--nix-green);
        box-shadow: 0 0 0 1px var(--nix-green);
    }

    .topic-scope-description {
        margin-top: 8px;
        font-size: .82rem;
        color: var(--nix-muted);
        padding: 6px 10px;
        background: var(--nix-surface);
        border-radius: 6px;
        border-left: 3px solid var(--nix-green);
    }

    .topic-scope-description .highlight {
        font-weight: 700;
        color: var(--nix-ink);
    }

    .form-label {
        font-weight: 600;
        font-size: .875rem;
        color: var(--nix-text);
        margin-bottom: .35rem;
    }

    .form-control,
    .form-select {
        background: var(--nix-surface);
        border: 1px solid var(--nix-border-dark);
        border-radius: 8px;
        min-height: 44px;
        transition: all .2s ease;
        font-size: .95rem;
        color: var(--nix-ink);
    }

    .form-control:focus,
    .form-select:focus {
        border-color: var(--nix-red);
        box-shadow: 0 0 0 3px rgba(180, 0, 0, 0.10);
        outline: none;
    }

    .form-control::placeholder {
        color: var(--nix-muted);
        opacity: .6;
    }

    .form-control:disabled,
    .form-select:disabled {
        background: var(--nix-surface-soft);
        color: var(--nix-muted);
    }

    .topics-box {
        border: 1px dashed var(--nix-border-dark);
        border-radius: 8px;
        padding: 14px;
        background: var(--nix-surface-soft);
        min-height: 58px;
    }

    .topics-box .form-check {
        padding: 9px 12px 9px 34px;
        border-bottom: 1px solid var(--nix-border);
        margin: 0;
    }

    .topics-box .form-check:last-child {
        border-bottom: 0;
    }

    .topics-box .form-check-input {
        border-color: var(--nix-border-dark);
        border-radius: 4px;
        transition: all .2s ease;
    }

    .topics-box .form-check-input:checked {
        background-color: var(--nix-red);
        border-color: var(--nix-red);
    }

    .topics-box .form-check-input:focus {
        box-shadow: 0 0 0 2px rgba(180, 0, 0, .12);
    }

    #cbc_fields .topics-box .form-check-input:checked {
        background-color: var(--nix-green);
        border-color: var(--nix-green);
    }

    .topic-toolbar {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
        margin-bottom: 10px;
    }

    .topic-toolbar .topic-search {
        flex: 1 1 240px;
        min-width: 180px;
        border: 1px solid var(--nix-border-dark);
        border-radius: 8px;
        padding: .4rem .75rem;
        font-size: .85rem;
        background: var(--nix-surface);
        transition: all .2s ease;
    }

    .topic-toolbar .topic-search:focus {
        border-color: var(--nix-red);
        box-shadow: 0 0 0 2px rgba(180, 0, 0, .08);
        outline: none;
    }

    .topic-tree {
        max-height: 420px;
        overflow-y: auto;
        border: 1px dashed var(--nix-border-dark);
        border-radius: 8px;
        background: var(--nix-surface-soft);
        padding: 6px 0;
    }

    .topic-tree::-webkit-scrollbar {
        width: 6px;
    }
    .topic-tree::-webkit-scrollbar-track {
        background: var(--nix-border);
        border-radius: 3px;
    }
    .topic-tree::-webkit-scrollbar-thumb {
        background: var(--nix-border-dark);
        border-radius: 3px;
    }
    .topic-tree::-webkit-scrollbar-thumb:hover {
        background: var(--nix-muted);
    }

    .topic-strand + .topic-strand {
        border-top: 1px solid var(--nix-border);
    }

    .topic-strand-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 9px 14px;
        font-weight: 700;
        font-size: .85rem;
        color: var(--nix-ink);
        background: var(--nix-surface);
        border-bottom: 1px solid var(--nix-border);
    }

    .topic-strand-head .form-level-badge {
        font-size: .6rem;
        font-weight: 600;
        padding: 2px 10px;
        border-radius: 999px;
        background: var(--nix-border);
        color: var(--nix-muted);
        text-transform: uppercase;
        letter-spacing: .04em;
    }

    .topic-strand-head .form-level-badge.current {
        background: var(--nix-red-light);
        color: var(--nix-red);
    }

    .topic-strand-head .form-level-badge.previous {
        background: var(--nix-border);
        color: var(--nix-muted);
    }

    .topic-strand-head .form-level-badge.mixed {
        background: var(--nix-green-light);
        color: var(--nix-green-dark);
    }

    .topic-strand-head button {
        border: 0;
        background: none;
        color: var(--nix-red);
        font-size: .78rem;
        font-weight: 650;
        padding: 0;
        cursor: pointer;
        transition: color .2s ease;
    }

    .topic-strand-head button:hover {
        color: var(--nix-red-dark);
        text-decoration: underline;
    }

    .topic-leaf {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 6px 14px 6px 22px;
        font-size: .88rem;
        transition: background .2s ease;
    }

    .topic-leaf:hover {
        background: var(--nix-red-light);
    }

    .topic-leaf label {
        margin: 0;
        cursor: pointer;
        flex: 1;
        color: var(--nix-text);
    }

    .topic-leaf .topic-level-tag {
        font-size: .6rem;
        font-weight: 600;
        padding: 1px 8px;
        border-radius: 999px;
        background: var(--nix-border);
        color: var(--nix-muted);
        margin-left: 6px;
        text-transform: uppercase;
        letter-spacing: .04em;
    }

    .topic-leaf .topic-level-tag.current {
        background: var(--nix-red-light);
        color: var(--nix-red);
    }

    .topic-leaf .topic-level-tag.previous {
        background: var(--nix-border);
        color: var(--nix-muted);
    }

    .topic-group-label {
        padding: 6px 14px 2px 18px;
        font-size: .74rem;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--nix-muted);
        font-weight: 700;
    }

    .topic-empty {
        padding: 16px 14px;
        color: var(--nix-muted);
        font-size: .86rem;
    }

    .selected-topics {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 12px;
    }

    .topic-chip {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border: 1px solid var(--nix-red-border);
        background: var(--nix-red-light);
        color: var(--nix-red-dark);
        border-radius: 999px;
        padding: 5px 6px 5px 14px;
        font-size: .82rem;
        font-weight: 650;
    }

    .topic-chip .topic-chip-level {
        font-size: .55rem;
        font-weight: 600;
        padding: 1px 6px;
        border-radius: 999px;
        background: var(--nix-surface);
        color: var(--nix-muted);
        text-transform: uppercase;
        letter-spacing: .04em;
    }

    .topic-chip select {
        border: 1px solid var(--nix-border);
        border-radius: 999px;
        background: var(--nix-surface);
        color: var(--nix-text);
        font-size: .76rem;
        font-weight: 600;
        padding: 2px 6px;
        transition: border .2s ease;
    }

    .topic-chip select:focus {
        outline: none;
        border-color: var(--nix-red);
    }

    .topic-chip .chip-remove {
        border: 0;
        background: none;
        color: var(--nix-red-dark);
        cursor: pointer;
        line-height: 1;
        padding: 0 6px;
        font-size: .95rem;
        transition: all .2s ease;
    }

    .topic-chip .chip-remove:hover {
        color: var(--nix-red);
        transform: scale(1.2);
    }

    .alert-success {
        background: var(--nix-green-light);
        border: 1px solid var(--nix-green-border);
        color: var(--nix-green-dark);
        border-radius: 8px;
        padding: .75rem 1rem;
    }

    .alert-success i {
        color: var(--nix-green);
        margin-right: .5rem;
    }

    .text-danger {
        color: var(--nix-danger) !important;
    }

    #topicError,
    #cbcTopicError {
        color: var(--nix-danger);
        font-size: .85rem;
        font-weight: 600;
    }

    #topicError i,
    #cbcTopicError i {
        color: var(--nix-danger);
        margin-right: .4rem;
    }

    .btn-primary {
        background: var(--nix-red);
        border: none;
        color: #fff;
        padding: .7rem 1.5rem;
        border-radius: 10px;
        font-weight: 700;
        font-size: 1rem;
        transition: all .2s ease;
        box-shadow: 0 6px 18px rgba(180, 0, 0, .18);
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        min-height: 52px;
        justify-content: center;
    }

    .btn-primary:hover {
        background: var(--nix-red-dark);
        transform: translateY(-1px);
        box-shadow: 0 8px 25px rgba(180, 0, 0, .25);
        color: #fff;
    }

    .btn-primary:disabled {
        opacity: .6;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

    .btn-primary .generate-spinner {
        display: none;
    }

    .btn-primary.is-generating .generate-spinner {
        display: inline-block;
    }

    .btn-primary.is-generating .generate-icon {
        display: none;
    }

    .btn-outline-secondary {
        border: 1px solid var(--nix-border-dark);
        color: var(--nix-text);
        background: transparent;
        padding: .4rem 1rem;
        border-radius: 8px;
        font-weight: 600;
        transition: all .2s ease;
    }

    .btn-outline-secondary:hover {
        border-color: var(--nix-red);
        color: var(--nix-red);
        background: var(--nix-red-light);
    }

    .btn-sm {
        padding: .35rem .75rem;
        font-size: .8rem;
    }

    .generation-progress {
        display: none;
        margin-top: 16px;
        border: 1px solid var(--nix-border);
        border-radius: 10px;
        padding: 14px;
        background: var(--nix-surface-soft);
    }

    .generation-progress.is-visible {
        display: block;
    }

    .progress-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 10px;
        font-size: .9rem;
        font-weight: 700;
        color: var(--nix-ink);
    }

    .progress-percent {
        font-variant-numeric: tabular-nums;
        color: var(--nix-red);
    }

    .progress {
        height: 6px;
        background: var(--nix-border);
        border-radius: 3px;
        overflow: hidden;
    }

    .progress-bar {
        background: var(--nix-red);
        transition: width .5s ease, background .8s ease;
        border-radius: 3px;
    }

    .progress-bar.complete {
        background: var(--nix-green);
    }

    .progress-bar.bg-danger {
        background: var(--nix-danger);
    }

    .progress-bar.progress-bar-animated {
        background: linear-gradient(90deg, var(--nix-red), var(--nix-red-dark));
        background-size: 200% 100%;
        animation: progressShimmer 1.5s ease-in-out infinite;
    }

    @keyframes progressShimmer {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }

    .progress-message {
        margin-top: 8px;
        color: var(--nix-muted);
        font-size: .86rem;
    }

    .progress-actions {
        display: none;
        gap: 8px;
        margin-top: 12px;
        flex-wrap: wrap;
    }

    .progress-actions.is-visible {
        display: flex;
    }

    .progress-actions .btn {
        font-size: .85rem;
        font-weight: 650;
        padding: .4rem .9rem;
    }

    .progress-detail {
        margin-top: 10px;
        font-size: .78rem;
        color: var(--nix-muted);
        word-break: break-word;
    }

    .progress-detail summary {
        cursor: pointer;
        color: var(--nix-muted);
        font-weight: 600;
    }

    .progress-detail summary:hover {
        color: var(--nix-ink);
    }

    .summary-panel {
        background: var(--nix-surface);
        border: 1px solid var(--nix-green-border);
        border-top: 4px solid var(--nix-green);
        border-radius: 14px;
        padding: 16px;
        position: sticky;
        top: 86px;
    }

    .summary-title {
        font-size: .95rem;
        font-weight: 750;
        margin-bottom: 12px;
        color: var(--nix-green-dark);
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .summary-title::before {
        content: '';
        width: 4px;
        height: 18px;
        background: var(--nix-green);
        border-radius: 2px;
    }

    .summary-list {
        display: grid;
        gap: 10px;
        margin-bottom: 16px;
    }

    .summary-item {
        display: flex;
        gap: 10px;
        align-items: flex-start;
        color: var(--nix-text);
        font-size: .88rem;
        padding: 6px 10px;
        border-radius: 6px;
        transition: background .2s ease;
    }

    .summary-item:hover {
        background: var(--nix-green-light);
    }

    .summary-item i {
        color: var(--nix-green);
        margin-top: 2px;
        width: 16px;
        flex-shrink: 0;
        font-size: .9rem;
    }

    .quality-strip {
        border-top: 1px solid var(--nix-border);
        padding-top: 14px;
        display: grid;
        gap: 8px;
    }

    .quality-pill {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        font-size: .82rem;
        padding: 6px 10px;
        background: var(--nix-surface-soft);
        border: 1px solid var(--nix-border);
        border-radius: 8px;
        transition: all .2s ease;
    }

    .quality-pill:hover {
        border-color: var(--nix-green-border);
    }

    .quality-pill span:first-child {
        color: var(--nix-muted);
        font-weight: 500;
    }

    .quality-pill span:last-child {
        color: var(--nix-green-dark);
        font-weight: 700;
    }

    @media (max-width: 991.98px) {
        .create-hero {
            align-items: flex-start;
            flex-direction: column;
        }
        .create-shell {
            grid-template-columns: 1fr;
        }
        .summary-panel {
            position: static;
        }
    }

    @media (max-width: 575.98px) {
        .panel-topbar {
            align-items: stretch;
            flex-direction: column;
        }
        .engine-toggle {
            width: 100%;
        }
        .engine-toggle .btn {
            flex: 1;
            text-align: center;
            font-size: .75rem;
            padding: 6px 10px;
        }
        .scope-grid {
            grid-template-columns: 1fr;
        }
        .create-title {
            font-size: 1.4rem;
        }
        .form-inner {
            padding: 14px 12px;
        }
        .panel-topbar {
            padding: 14px 12px;
        }
        .summary-panel {
            padding: 12px;
        }
        .mode-chip {
            font-size: .75rem;
            padding: 6px 12px;
        }
        .btn-primary {
            min-height: 44px;
            font-size: .9rem;
        }
        .quality-pill {
            font-size: .75rem;
            padding: 4px 8px;
        }
        .quality-strip {
            gap: 6px;
        }
        .topic-scope-options {
            flex-direction: column;
            width: 100%;
        }
        .topic-scope-options .btn {
            width: 100%;
            text-align: center;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="create-page">
    <div class="create-hero">
        <div>
            <h1 class="create-title">Create <span class="accent">Assessment</span></h1>
            <p class="create-kicker">Build a KCSE paper or CBC task &mdash; every generation is a fresh, unique paper with a teacher-style marking scheme.</p>
        </div>
        <div class="mode-chip">
            <i class="fas fa-wand-magic-sparkles"></i>
            <span>Unique every time &middot; validated</span>
        </div>
    </div>

    <div class="create-shell">
        <section class="assessment-panel">
            <div class="panel-topbar">
                <div>
                    <strong>Assessment setup</strong>
                    <div class="text-muted small">Select the paper type, curriculum scope, and output parameters.</div>
                </div>
                <div class="engine-toggle" role="group" aria-label="Exam Mode">
                    <input type="radio" class="btn-check mode-toggle" name="exam_mode" id="mode_kcse" value="kcse" autocomplete="off" checked form="examForm">
                    <label class="btn engine-kcse" for="mode_kcse">KCSE Engine</label>
                    <input type="radio" class="btn-check mode-toggle" name="exam_mode" id="mode_cbc" value="cbc" autocomplete="off" form="examForm">
                    <label class="btn engine-cbc" for="mode_cbc">CBC Engine</label>
                </div>
            </div>

            <div class="form-inner">
                <form method="POST" id="examForm">
                    <div class="form-section" id="shared_subject_section">
                        <div class="section-heading"><i class="fas fa-book"></i>Subject and Level</div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Subject / Learning Area</label>
                                <select name="subject_id" id="subjectSelect" class="form-select" required>
                                    <option value="">Select Subject</option>
                                    {% for subject in subjects %}
                                    <option value="{{ subject.id }}">{{ subject.name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label" id="classLabel">Class/Form</label>
                                <select name="exam_class" id="classSelect" class="form-select" required>
                                    <option value="Form 1">Form 1</option>
                                    <option value="Form 2">Form 2</option>
                                    <option value="Form 3">Form 3</option>
                                    <option value="Form 4">Form 4</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div id="kcse_fields">
                        <div class="form-section">
                            <div class="section-heading"><i class="fas fa-compass"></i>Assessment Scope</div>
                            <div class="mb-3">
                                <div class="scope-grid" role="group" aria-label="Scope Toggle">
                                    <input type="radio" class="btn-check scope-toggle" name="exam_scope" id="scope_full" value="full" autocomplete="off" checked>
                                    <label class="btn" for="scope_full">
                                        <i class="fas fa-file-alt"></i>
                                        Full Examination Paper<br>
                                        <span style="font-weight:400;font-size:.72rem;color:var(--nix-muted);">Comprehensive assessment using current and prerequisite topics</span>
                                    </label>
                                    <input type="radio" class="btn-check scope-toggle" name="exam_scope" id="scope_topical" value="topical" autocomplete="off">
                                    <label class="btn" for="scope_topical">
                                        <i class="fas fa-crosshairs"></i>
                                        Targeted Topic / Topical Test<br>
                                        <span style="font-weight:400;font-size:.72rem;color:var(--nix-muted);">Select specific topics from current or previous classes</span>
                                    </label>
                                </div>
                                <div class="inline-hint" id="scopeHint">
                                    <i class="fas fa-info-circle"></i> Full Examination uses <strong>current class and all previous classes</strong> as eligible curriculum, with current class receiving priority.
                                </div>
                            </div>
                        </div>

                        <div class="form-section">
                            <div class="section-heading"><i class="fas fa-list-check"></i>Topics Already Taught</div>
                            <div class="mb-3">
                                <label class="form-label">Taught topics / covered areas</label>
                                <textarea name="topics_taught" id="topicsTaught" class="form-control" rows="3" placeholder="Optional for full papers. Example: Linear equations, Fractions, Percentages, Cell structure"></textarea>
                                <div class="inline-hint">
                                    <i class="fas fa-info-circle"></i> When provided, the exam will be generated only from these covered areas and the selected class level.
                                </div>
                            </div>
                        </div>

                        <div id="topical_selectors_wrapper" style="display: none;">
                            <div class="form-section">
                                <div class="section-heading"><i class="fas fa-layer-group"></i>Topics to Examine</div>

                                <div class="topic-scope-control">
                                    <span class="topic-scope-label">Topic coverage</span>
                                    <div class="topic-scope-options">
                                        <input type="radio" class="btn-check" name="topic_scope" id="topicCurrentOnly" value="current" autocomplete="off">
                                        <label class="btn btn-scope-current" for="topicCurrentOnly">Current class only</label>
                                        <input type="radio" class="btn-check" name="topic_scope" id="topicCurrentPrevious" value="current_previous" autocomplete="off" checked>
                                        <label class="btn btn-scope-cumulative" for="topicCurrentPrevious">Current + previous classes</label>
                                    </div>
                                    <div class="topic-scope-description" id="topicScopeDescription">
                                        Topics from <span class="highlight" id="scopeLevelRange">Form 1 → Form 3</span>
                                    </div>
                                </div>

                                <div class="topic-toolbar">
                                    <input type="search" id="topicSearch" class="topic-search" placeholder="Search topics across all strands..." autocomplete="off" disabled>
                                    <span class="text-muted small" id="topicCount">0 topics selected</span>
                                    <button type="button" class="btn btn-sm btn-outline-secondary" id="clearTopicsBtn" disabled>Clear all</button>
                                </div>

                                <div id="topicTree" class="topic-tree">
                                    <div class="topic-empty">Select a subject to load its curriculum topics.</div>
                                </div>

                                <div id="selectedTopics" class="selected-topics"></div>
                                <div class="inline-hint" id="weightHint" style="display:none;">
                                    <i class="fas fa-info-circle"></i> Emphasis sets each topic's share of the questions and marks — use Heavy for what you taught longest.
                                </div>
                                <div id="topicError" class="text-danger mt-2" style="display:none;">
                                    <i class="fas fa-exclamation-circle"></i> Please select at least one topic.
                                </div>
                            </div>
                        </div>

                        <div class="form-section">
                            <div class="section-heading"><i class="fas fa-sliders-h"></i>Exam Parameters</div>
                            <div class="row">
                                <div class="col-md-4 mb-3" id="paperTypeWrapper">
                                    <label class="form-label">KCSE Paper Format</label>
                                    <select name="paper_type" id="paperType" class="form-select">
                                        <option value="paper_2" selected>Paper 2 (Advanced Mix)</option>
                                        <option value="paper_1">Paper 1 (Core Mix)</option>
                                        <option value="paper_3">Paper 3 (Languages: Literature / Fasihi)</option>
                                        <option value="custom">Custom Parameters...</option>
                                    </select>
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label class="form-label">Paper Standard</label>
                                    <select name="exam_type" id="examType" class="form-select">
                                        <option value="standard" selected>Standard (grade-level exam)</option>
                                        <option value="contest">Contest / Competition (extremely difficult)</option>
                                    </select>
                                    <small class="text-muted">Contest keeps the same syllabus level but makes every question non-routine.</small>
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label class="form-label">Task Type</label>
                                    <select name="kcse_task_type" id="kcseTaskType" class="form-select">
                                        <option value="exam" selected>Examination paper</option>
                                        <option value="assignment">Take-home assignment</option>
                                        <option value="homework">Short homework</option>
                                        <option value="cat">CAT (class test)</option>
                                    </select>
                                    <small class="text-muted">Assignments and homework are written for home study, not a timed exam.</small>
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label class="form-label">Generation Speed</label>
                                    <select name="speed" id="speedMode" class="form-select">
                                        <option value="thorough" selected>Thorough — reasoning model</option>
                                        <option value="fast">Fast draft — several times quicker</option>
                                    </select>
                                    <small class="text-muted" id="speedHint">Thorough reasons through every question; best for Mathematics and Sciences.</small>
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label class="form-label">Difficulty</label>
                                    <select name="difficulty_level" id="difficultyLevel" class="form-select">
                                        <option value="standard" selected>Standard — grade level</option>
                                        <option value="challenging">Challenging — half the paper is hard</option>
                                        <option value="very_hard">Very difficult — no easy questions</option>
                                        <option value="extreme">Extremely difficult — every question</option>
                                    </select>
                                    <small class="text-muted" id="difficultyHint">Sets how hard the questions are. The class level is still a hard ceiling on content.</small>
                                </div>
                                <div class="col-md-4 mb-3 custom-param-field" style="display:none;">
                                    <label class="form-label">Number of Questions</label>
                                    <input type="number" name="num_questions" id="numQuestions" class="form-control" value="24" min="5" max="50">
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label class="form-label">Total Marks</label>
                                    <input type="number" name="total_marks" id="totalMarks" class="form-control" value="100" min="20" max="500">
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label class="form-label">Duration (minutes)</label>
                                    <input type="number" name="duration" id="duration" class="form-control" value="150" min="15" max="180">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div id="cbc_fields" style="display: none;">
                        <div class="form-section">
                            <div class="section-heading"><i class="fas fa-book"></i>Grade and Learning Area</div>
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Grade Level</label>
                                    <select name="cbc_level_code" id="cbcLevelSelect" class="form-select">
                                        <option value="">Loading grade levels...</option>
                                    </select>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Learning Area / Subject</label>
                                    <select name="cbc_subject_id" id="cbcSubjectSelect" class="form-select" disabled>
                                        <option value="">Select a grade level first</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="form-section">
                            <div class="section-heading"><i class="fas fa-compass"></i>Assessment Scope</div>
                            <div class="mb-3">
                                <div class="scope-grid" role="group" aria-label="CBC Scope Toggle">
                                    <input type="radio" class="btn-check cbc-scope-toggle" name="cbc_exam_scope" id="cbc_scope_full" value="full" autocomplete="off" checked>
                                    <label class="btn" for="cbc_scope_full">
                                        <i class="fas fa-file-alt"></i>
                                        Full Exam (All Topics in the Learning Area)<br>
                                        <span style="font-weight:400;font-size:.72rem;color:var(--nix-muted);">Current and previous grades covered</span>
                                    </label>
                                    <input type="radio" class="btn-check cbc-scope-toggle" name="cbc_exam_scope" id="cbc_scope_topical" value="topical" autocomplete="off">
                                    <label class="btn" for="cbc_scope_topical">
                                        <i class="fas fa-crosshairs"></i>
                                        Selected Topics Only<br>
                                        <span style="font-weight:400;font-size:.72rem;color:var(--nix-muted);">Choose strands from current or previous grades</span>
                                    </label>
                                </div>
                                <div class="inline-hint" id="cbcScopeHint">
                                    <i class="fas fa-info-circle"></i> Full Exam draws questions from <strong>current grade and all previous grades</strong>, following the KICD curriculum.
                                </div>
                            </div>
                        </div>

                        <div class="form-section" id="cbcTopicPicker" style="display: none;">
                            <div class="section-heading"><i class="fas fa-layer-group"></i>Topics to Assess</div>
                            <div class="topic-scope-control">
                                <span class="topic-scope-label">Topic coverage</span>
                                <div class="topic-scope-options">
                                    <input type="radio" class="btn-check" name="cbc_topic_scope" id="cbcTopicCurrentOnly" value="current" autocomplete="off">
                                    <label class="btn btn-scope-current" for="cbcTopicCurrentOnly">Current grade only</label>
                                    <input type="radio" class="btn-check" name="cbc_topic_scope" id="cbcTopicCurrentPrevious" value="current_previous" autocomplete="off" checked>
                                    <label class="btn btn-scope-cumulative" for="cbcTopicCurrentPrevious">Current + previous grades</label>
                                </div>
                                <div class="topic-scope-description" id="cbcScopeLevelRange">
                                    Topics from <span class="highlight" id="cbcScopeLevelText">Grade 1 → Grade 4</span>
                                </div>
                            </div>
                            <label class="form-label">Strands</label>
                            <div id="cbcStrandsContainer" class="topics-box mb-3">
                                <small class="text-muted">Select a learning area to see its strands</small>
                            </div>
                            <div id="cbcTopicError" class="text-danger mb-2" style="display:none;">
                                <i class="fas fa-exclamation-circle"></i> Please select at least one strand, or switch to Full Exam.
                            </div>
                            <div id="cbcSubStrandsWrapper" style="display:none;">
                                <label class="form-label">Sub-strands (optional — narrows the selected strands)</label>
                                <div id="cbcSubStrandsContainer" class="topics-box mb-3"></div>
                            </div>
                        </div>

                        <div class="form-section">
                            <div class="section-heading"><i class="fas fa-bullseye"></i>Learning Outcomes</div>
                            <div class="mb-3">
                                <label class="form-label">Learning outcomes to assess (optional, one per line)</label>
                                <textarea name="learning_outcomes" id="learningOutcomes" class="form-control" rows="3" placeholder="e.g. Apply the Pythagorean relationship to solve problems&#10;Represent data using bar graphs"></textarea>
                            </div>
                        </div>

                        <div class="form-section">
                            <div class="section-heading"><i class="fas fa-clipboard-check"></i>Assessment Format</div>
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Task Type</label>
                                    <select name="task_type" id="taskType" class="form-select">
                                        <option value="exam">Examination Paper</option>
                                        <option value="worksheet">Practice Worksheet</option>
                                        <option value="quiz">Topic Quiz</option>
                                    </select>
                                </div>
                            </div>
                            <div class="alert alert-success mb-0">
                                <i class="fas fa-info-circle"></i> Questions are grounded in the KICD curriculum scope you select, with auto-generated diagrams where a question needs one.
                            </div>
                        </div>
                    </div>

                    <div class="submit-row">
                        <button type="submit" class="btn btn-primary flex-grow-1" id="generateBtn">
                            <span class="spinner-border spinner-border-sm generate-spinner" aria-hidden="true"></span>
                            <i class="fas fa-brain generate-icon"></i>
                            <span class="generate-text">Generate Exam with AI</span>
                        </button>
                    </div>

                    <div class="generation-progress" id="generationProgress" aria-live="polite">
                        <div class="progress-head">
                            <span id="progressTitle">Generating exam</span>
                            <span class="progress-percent" id="progressPercent">0%</span>
                        </div>
                        <div class="progress" role="progressbar" aria-label="Generation progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
                            <div class="progress-bar progress-bar-striped progress-bar-animated" id="progressBar" style="width: 0%"></div>
                        </div>
                        <div class="progress-message" id="progressMessage">Preparing generation...</div>
                        <div class="progress-actions" id="progressActions">
                            <button type="button" class="btn btn-primary text-white" id="retryBtn">
                                <i class="fas fa-rotate-right me-1"></i> Try again
                            </button>
                            <a href="{{ url_for('exams.index') }}" class="btn btn-outline-secondary">My Exams</a>
                        </div>
                        <details class="progress-detail" id="progressDetail" hidden>
                            <summary>Technical details</summary>
                            <div id="progressDetailText"></div>
                        </details>
                    </div>
                </form>
            </div>
        </section>

        <aside class="summary-panel">
            <div class="summary-title">Quality engine</div>
            <div class="summary-list">
                <div class="summary-item"><i class="fas fa-shuffle"></i><span>Fresh topic mix every generation &mdash; recent papers are not repeated</span></div>
                <div class="summary-item"><i class="fas fa-draw-polygon"></i><span>Diagrams drawn dynamically from each question's own data</span></div>
                <div class="summary-item"><i class="fas fa-pen-ruler"></i><span>Answer space sized to what each question asks</span></div>
                <div class="summary-item"><i class="fas fa-pen-nib"></i><span>Handwritten-style marking scheme in red pen</span></div>
                <div class="summary-item"><i class="fas fa-calculator"></i><span>Marks reconciled across parts and sections</span></div>
            </div>
            <div class="quality-strip">
                <div class="quality-pill"><span>Mode</span><span id="summaryMode">KCSE</span></div>
                <div class="quality-pill"><span>Scope</span><span id="summaryScope">Full Paper</span></div>
                <div class="quality-pill"><span>Format</span><span id="summaryFormat">Paper 2</span></div>
                <div class="quality-pill"><span>Difficulty</span><span id="summaryDifficulty">Standard</span></div>
                <div class="quality-pill"><span>Speed</span><span id="summarySpeed">Thorough</span></div>
                <div class="quality-pill"><span>Topics</span><span id="summaryTopics">Full syllabus</span></div>
                <div class="quality-pill"><span>Marks</span><span id="summaryMarks">100</span></div>
            </div>
        </aside>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// ========================================
// CLASS LEVEL HELPER
// ========================================
function getClassNumber(className) {
    if (!className) return 0;
    const match = className.match(/(\d+)/);
    return match ? parseInt(match[1], 10) : 0;
}

function getClassLevels(selectedClass) {
    const classNum = getClassNumber(selectedClass);
    const levels = {
        1: ['Form 1'],
        2: ['Form 1', 'Form 2'],
        3: ['Form 1', 'Form 2', 'Form 3'],
        4: ['Form 1', 'Form 2', 'Form 3', 'Form 4']
    };
    return levels[classNum] || [selectedClass];
}

function getClassRangeText(selectedClass) {
    const classNum = getClassNumber(selectedClass);
    if (classNum === 1) return 'Form 1';
    if (classNum === 2) return 'Form 1 → Form 2';
    if (classNum === 3) return 'Form 1 → Form 3';
    if (classNum === 4) return 'Form 1 → Form 4';
    return selectedClass;
}

function getCurrentClass() {
    return document.getElementById('classSelect').value;
}

function getTopicScope() {
    const scopeRadio = document.querySelector('input[name="topic_scope"]:checked');
    return scopeRadio ? scopeRadio.value : 'current_previous';
}

function getEligibleLevels() {
    const selectedClass = getCurrentClass();
    const scope = getTopicScope();
    if (scope === 'current') {
        return [selectedClass];
    }
    return getClassLevels(selectedClass);
}

function isTopicInEligibleLevels(topic, eligibleLevels, currentClass) {
    // If topic has no form_level, include it if we're in cumulative mode
    if (!topic.form_level) {
        const currentNum = getClassNumber(currentClass);
        const scope = getTopicScope();
        return scope === 'current_previous' && currentNum >= 2;
    }
    return eligibleLevels.includes(topic.form_level);
}

// ========================================
// UPDATE SCOPE DESCRIPTION - FIXED
// ========================================
function updateScopeDescription() {
    const selectedClass = getCurrentClass();
    const scope = getTopicScope();
    const classNum = getClassNumber(selectedClass);
    const scopeDescription = document.getElementById('topicScopeDescription');
    const levelRange = document.getElementById('scopeLevelRange');
    
    console.log('Updating scope description - Class:', selectedClass, 'Num:', classNum, 'Scope:', scope);
    
    if (scope === 'current') {
        levelRange.textContent = selectedClass + ' only';
        scopeDescription.innerHTML = 'Topics from <span class="highlight">' + selectedClass + ' only</span>';
    } else {
        let rangeText = '';
        if (classNum === 1) rangeText = 'Form 1';
        else if (classNum === 2) rangeText = 'Form 1 → Form 2';
        else if (classNum === 3) rangeText = 'Form 1 → Form 3';
        else if (classNum === 4) rangeText = 'Form 1 → Form 4';
        else rangeText = getClassRangeText(selectedClass);
        
        levelRange.textContent = rangeText;
        scopeDescription.innerHTML = 'Topics from <span class="highlight">' + rangeText + '</span>';
    }
    console.log('Scope description set to:', scopeDescription.innerHTML);
}

// ========================================
// UPDATE CBC SCOPE DESCRIPTION
// ========================================
function updateCbcScopeDescription() {
    const selectedGrade = document.getElementById('cbcLevelSelect').value;
    const scopeRadio = document.querySelector('input[name="cbc_topic_scope"]:checked');
    const scope = scopeRadio ? scopeRadio.value : 'current_previous';
    const gradeNum = parseInt(selectedGrade.replace('g', '')) || 0;
    const scopeDescription = document.getElementById('cbcScopeLevelRange');
    const levelText = document.getElementById('cbcScopeLevelText');
    
    if (scope === 'current') {
        levelText.textContent = 'Grade ' + gradeNum + ' only';
        scopeDescription.innerHTML = 'Topics from <span class="highlight">Grade ' + gradeNum + ' only</span>';
    } else {
        levelText.textContent = 'Grade 1 → Grade ' + gradeNum;
        scopeDescription.innerHTML = 'Topics from <span class="highlight">Grade 1 → Grade ' + gradeNum + '</span>';
    }
}

// ========================================
// LOAD TOPICS FOR KCSE
// ========================================
function loadTopicsForSubject(subjectId) {
    if (!subjectId) {
        document.getElementById('topicTree').innerHTML = 
            '<div class="topic-empty">Select a subject to load its curriculum topics.</div>';
        document.getElementById('topicSearch').disabled = true;
        return;
    }
    
    const tree = document.getElementById('topicTree');
    const eligibleLevels = getEligibleLevels();
    const currentClass = getCurrentClass();
    
    console.log('Loading topics - Subject:', subjectId, 'Eligible:', eligibleLevels, 'Current:', currentClass);
    
    const levelDisplay = eligibleLevels.join(', ');
    tree.innerHTML = '<div class="topic-empty"><i class="fas fa-spinner fa-spin"></i> Loading topics for ' + levelDisplay + '...</div>';
    
    fetch('/exams/topic-tree/' + subjectId)
        .then(r => r.json())
        .then(data => {
            console.log('Topic data received:', data);
            renderTopicTree(data, eligibleLevels, currentClass);
            document.getElementById('topicSearch').disabled = false;
        })
        .catch((err) => {
            console.error('Error loading topics:', err);
            tree.innerHTML = '<div class="topic-empty text-danger">Could not load topics. Please try again.</div>';
        });
}

// ========================================
// RENDER TOPIC TREE
// ========================================
function renderTopicTree(data, eligibleLevels, currentClass) {
    const tree = document.getElementById('topicTree');
    
    if (!data.strands || !data.strands.length) {
        tree.innerHTML = '<div class="topic-empty">No curriculum topics are set up for this subject yet.</div>';
        return;
    }

    let hasVisibleTopics = false;
    let topicCount = 0;
    
    const html = data.strands.map(strand => {
        let strandHasCurrent = false;
        let strandHasPrevious = false;
        
        const rows = strand.groups.map(group => {
            const leaves = group.topics
                .filter(t => {
                    const include = isTopicInEligibleLevels(t, eligibleLevels, currentClass);
                    if (include) {
                        console.log('Including topic:', t.name, 'Level:', t.form_level || 'None');
                    }
                    return include;
                })
                .map(t => {
                    topicCount++;
                    const isCurrent = t.form_level === currentClass;
                    const isPrevious = t.form_level && eligibleLevels.includes(t.form_level) && t.form_level !== currentClass;
                    
                    if (isCurrent) strandHasCurrent = true;
                    if (isPrevious) strandHasPrevious = true;
                    
                    let levelTag = '';
                    if (t.form_level) {
                        levelTag = `<span class="topic-level-tag ${isCurrent ? 'current' : 'previous'}">${t.form_level}</span>`;
                    }
                    
                    const searchText = (t.name + ' ' + (group.substrand || '') + ' ' + (strand.strand || '') + ' ' + (t.form_level || '')).toLowerCase();
                    
                    return `<div class="topic-leaf" data-level="${t.form_level || ''}" data-search="${searchText}">
                        <input class="form-check-input topic-checkbox" type="checkbox" name="topic_ids" value="${t.id}" id="topic${t.id}">
                        <label for="topic${t.id}">${t.name} ${levelTag}</label>
                    </div>`;
                }).join('');
            
            if (!leaves) return '';
            const header = group.collapsed ? '' :
                `<div class="topic-group-label">${group.substrand || ''}</div>`;
            return header + leaves;
        }).filter(r => r).join('');

        if (!rows) return '';

        hasVisibleTopics = true;
        
        let badgeText = '';
        let badgeClass = '';
        if (strandHasCurrent && strandHasPrevious) {
            badgeText = currentClass + '+ Previous';
            badgeClass = 'mixed';
        } else if (strandHasCurrent) {
            badgeText = currentClass;
            badgeClass = 'current';
        } else if (strandHasPrevious) {
            badgeText = 'Previous';
            badgeClass = 'previous';
        }

        return `<div class="topic-strand" data-strand="${strand.strand_id}">
            <div class="topic-strand-head">
                <span>${strand.strand} ${badgeText ? '<span class="form-level-badge ' + badgeClass + '">' + badgeText + '</span>' : ''}</span>
                <button type="button" data-select-strand="${strand.strand_id}">Select all</button>
            </div>
            ${rows}
        </div>`;
    }).filter(s => s).join('');

    if (!hasVisibleTopics) {
        const levelDisplay = eligibleLevels.join(', ');
        tree.innerHTML = `<div class="topic-empty">
            <i class="fas fa-info-circle"></i> 
            No topics found for ${levelDisplay}. 
            ${eligibleLevels.length === 1 ? 
                'Try selecting "Current + previous classes" to include more topics.' : 
                'The selected subject may not have topics for these levels.'}
        </div>`;
        return;
    }

    tree.innerHTML = html;
    document.getElementById('topicCount').textContent = topicCount + ' topics available';
    
    applyTopicFilter();
    restoreSelectedTopics();
}

// ========================================
// TOPIC FILTER
// ========================================
function applyTopicFilter() {
    const q = document.getElementById('topicSearch').value.trim().toLowerCase();
    const tree = document.getElementById('topicTree');
    
    tree.querySelectorAll('.topic-strand').forEach(strand => {
        let visible = 0;
        strand.querySelectorAll('.topic-leaf').forEach(leaf => {
            const hit = !q || leaf.getAttribute('data-search').includes(q);
            leaf.style.display = hit ? '' : 'none';
            if (hit) visible++;
        });
        strand.style.display = visible ? '' : 'none';
    });
}

// ========================================
// RESTORE SELECTED TOPICS
// ========================================
function restoreSelectedTopics() {
    renderSelectedChips();
}

// ========================================
// RENDER SELECTED CHIPS
// ========================================
function renderSelectedChips() {
    const tree = document.getElementById('topicTree');
    const chips = document.getElementById('selectedTopics');
    const checkedBoxes = tree.querySelectorAll('.topic-checkbox:checked');
    const countEl = document.getElementById('topicCount');
    const clearBtn = document.getElementById('clearTopicsBtn');
    const weightHint = document.getElementById('weightHint');
    const WEIGHTS = [[1, 'Light'], [2, 'Normal'], [3, 'Heavy']];
    
    const ids = Array.from(checkedBoxes).map(cb => cb.value);
    countEl.textContent = ids.length === 1 ? '1 topic selected' : ids.length + ' topics selected';
    clearBtn.disabled = ids.length === 0;
    weightHint.style.display = ids.length > 1 ? 'flex' : 'none';
    
    const weights = window._topicWeights || {};
    const topicLevels = window._topicLevels || {};
    const names = window._topicNames || {};
    
    chips.innerHTML = ids.map(id => {
        const w = weights[id] || 2;
        const opts = WEIGHTS.map(([v, label]) =>
            `<option value="${v}"${v === w ? ' selected' : ''}>${label}</option>`).join('');
        const level = topicLevels[id] || '';
        const levelTag = level ? `<span class="topic-chip-level">${level}</span>` : '';
        return `<span class="topic-chip">
            ${names[id] || id}
            ${levelTag}
            <select name="topic_weight_${id}" data-weight-for="${id}" title="Emphasis">${opts}</select>
            <button type="button" class="chip-remove" data-remove="${id}" title="Remove">&times;</button>
        </span>`;
    }).join('');
    
    if (ids.length) document.getElementById('topicError').style.display = 'none';
    updateSummary();
}

// ========================================
// TOGGLE STRAND SELECTION
// ========================================
function toggleStrandSelection(strandId) {
    const tree = document.getElementById('topicTree');
    const strand = tree.querySelector(`.topic-strand[data-strand="${strandId}"]`);
    if (!strand) return;
    
    const boxes = strand.querySelectorAll('.topic-checkbox');
    const allChecked = Array.from(boxes).every(b => b.checked);
    boxes.forEach(b => b.checked = !allChecked);
    
    const weights = window._topicWeights || {};
    boxes.forEach(b => {
        if (b.checked && !weights[b.value]) weights[b.value] = 2;
    });
    window._topicWeights = weights;
    
    renderSelectedChips();
}

// ========================================
// EVENT: CLASS SELECT CHANGE
// ========================================
document.getElementById('classSelect').addEventListener('change', function() {
    const selectedClass = this.value;
    const subjectId = document.getElementById('subjectSelect').value;
    
    console.log('Class changed to:', selectedClass);
    
    updateScopeDescription();
    
    const scope = document.querySelector('.scope-toggle:checked');
    const scopeHint = document.getElementById('scopeHint');
    if (scope && scope.value === 'full') {
        const rangeText = getClassRangeText(selectedClass);
        scopeHint.innerHTML = '<i class="fas fa-info-circle"></i> Full Examination uses <strong>current class and all previous classes</strong> as eligible curriculum (' + rangeText + '), with current class receiving priority.';
    } else {
        const rangeText = getClassRangeText(selectedClass);
        scopeHint.innerHTML = '<i class="fas fa-crosshairs"></i> Topical Test generates a focused assessment on specific topics from <strong>' + rangeText + '</strong>. Select topics below.';
    }
    
    if (subjectId) {
        loadTopicsForSubject(subjectId);
    }
});

// ========================================
// EVENT: TOPIC SCOPE RADIO CHANGE
// ========================================
document.querySelectorAll('input[name="topic_scope"]').forEach(radio => {
    radio.addEventListener('change', function() {
        console.log('Topic scope changed to:', this.value);
        updateScopeDescription();
        const subjectId = document.getElementById('subjectSelect').value;
        if (subjectId) {
            loadTopicsForSubject(subjectId);
        }
    });
});

// ========================================
// EVENT: SUBJECT SELECT CHANGE
// ========================================
document.getElementById('subjectSelect').addEventListener('change', function() {
    const subjectId = this.value;
    console.log('Subject changed to:', subjectId);
    if (subjectId) {
        loadTopicsForSubject(subjectId);
    } else {
        document.getElementById('topicTree').innerHTML = 
            '<div class="topic-empty">Select a subject to load its curriculum topics.</div>';
        document.getElementById('topicSearch').disabled = true;
        document.getElementById('topicCount').textContent = '0 topics selected';
    }
});

// ========================================
// EVENT: TOPIC SEARCH
// ========================================
document.getElementById('topicSearch').addEventListener('input', applyTopicFilter);

// ========================================
// EVENT: CLEAR TOPICS
// ========================================
document.getElementById('clearTopicsBtn').addEventListener('click', function() {
    const tree = document.getElementById('topicTree');
    tree.querySelectorAll('.topic-checkbox:checked').forEach(cb => cb.checked = false);
    window._topicWeights = {};
    renderSelectedChips();
});

// ========================================
// EVENT: TOPIC TREE CLICK (Select All)
// ========================================
document.getElementById('topicTree').addEventListener('click', function(e) {
    const target = e.target;
    if (target.matches('[data-select-strand]')) {
        const strandId = target.getAttribute('data-select-strand');
        toggleStrandSelection(strandId);
    }
});

// ========================================
// EVENT: TOPIC TREE CHANGE (Checkbox)
// ========================================
document.getElementById('topicTree').addEventListener('change', function(e) {
    if (e.target.matches('.topic-checkbox')) {
        const weights = window._topicWeights || {};
        if (e.target.checked && !weights[e.target.value]) {
            weights[e.target.value] = 2;
        }
        window._topicWeights = weights;
        renderSelectedChips();
    }
});

// ========================================
// EVENT: CHIPS (Weight Change, Remove)
// ========================================
document.getElementById('selectedTopics').addEventListener('change', function(e) {
    if (e.target.matches('select[data-weight-for]')) {
        const id = e.target.getAttribute('data-weight-for');
        const weights = window._topicWeights || {};
        weights[id] = parseInt(e.target.value, 10) || 2;
        window._topicWeights = weights;
    }
});

document.getElementById('selectedTopics').addEventListener('click', function(e) {
    if (e.target.matches('.chip-remove')) {
        const id = e.target.getAttribute('data-remove');
        const tree = document.getElementById('topicTree');
        const box = tree.querySelector(`.topic-checkbox[value="${id}"]`);
        if (box) {
            box.checked = false;
            const weights = window._topicWeights || {};
            delete weights[id];
            window._topicWeights = weights;
            renderSelectedChips();
        }
    }
});

// ========================================
// MODE TOGGLE: KCSE vs CBC
// ========================================
document.querySelectorAll('.mode-toggle').forEach(radio => {
    radio.addEventListener('change', function() {
        const mode = this.value;
        const kcseFields = document.getElementById('kcse_fields');
        const cbcFields = document.getElementById('cbc_fields');
        const sharedSection = document.getElementById('shared_subject_section');

        document.getElementById('generationProgress').classList.remove('is-visible');

        if (mode === 'kcse') {
            kcseFields.style.display = 'block';
            cbcFields.style.display = 'none';
            sharedSection.style.display = 'block';
            setGenerateLabel('Generate Exam with AI');

            document.getElementById('subjectSelect').required = true;
            document.getElementById('classSelect').required = true;
            document.getElementById('totalMarks').required = true;
            document.getElementById('duration').required = true;
        } else {
            kcseFields.style.display = 'none';
            cbcFields.style.display = 'block';
            sharedSection.style.display = 'none';
            setGenerateLabel('Generate CBC Exam');

            document.getElementById('subjectSelect').required = false;
            document.getElementById('classSelect').required = false;
            document.getElementById('totalMarks').required = false;
            document.getElementById('duration').required = false;

            loadCbcLevels();
        }
        updateSummary();
    });
});

// ========================================
// CBC SCOPE TOGGLE
// ========================================
document.querySelectorAll('.cbc-scope-toggle').forEach(radio => {
    radio.addEventListener('change', function() {
        const topicPicker = document.getElementById('cbcTopicPicker');
        const hint = document.getElementById('cbcScopeHint');
        document.getElementById('cbcTopicError').style.display = 'none';
        if (this.value === 'full') {
            topicPicker.style.display = 'none';
            hint.innerHTML = '<i class="fas fa-info-circle"></i> Full Exam draws questions from <strong>current grade and all previous grades</strong>, following the KICD curriculum.';
        } else {
            topicPicker.style.display = 'block';
            hint.innerHTML = '<i class="fas fa-crosshairs"></i> The exam will only assess the strands and sub-strands you tick below.';
        }
        updateSummary();
    });
});

// ========================================
// CBC TOPIC SCOPE CHANGE
// ========================================
document.querySelectorAll('input[name="cbc_topic_scope"]').forEach(radio => {
    radio.addEventListener('change', function() {
        updateCbcScopeDescription();
        const subjectId = document.getElementById('cbcSubjectSelect').value;
        const level = document.getElementById('cbcLevelSelect').value;
        if (subjectId && level) {
            loadCbcStrands(level, subjectId);
        }
    });
});

// ========================================
// CBC LEVEL CHANGE
// ========================================
document.getElementById('cbcLevelSelect').addEventListener('change', function() {
    updateCbcScopeDescription();
    const subjectSelect = document.getElementById('cbcSubjectSelect');
    resetCbcScope();
    if (!this.value) {
        subjectSelect.innerHTML = '<option value="">Select a grade level first</option>';
        subjectSelect.disabled = true;
        return;
    }
    subjectSelect.innerHTML = '<option value="">Loading learning areas...</option>';
    subjectSelect.disabled = true;
    fetch('/exams/cbc/subjects/' + this.value)
        .then(r => r.json())
        .then(data => {
            const option = s => `<option value="${s.id}">${s.name}</option>`;
            const groups = new Map();
            let html = '<option value="">Select Learning Area</option>';
            data.forEach(s => {
                if (!s.pathway) {
                    html += option(s);
                } else {
                    if (!groups.has(s.pathway)) groups.set(s.pathway, []);
                    groups.get(s.pathway).push(s);
                }
            });
            groups.forEach((subjects, pathway) => {
                html += `<optgroup label="${pathway} pathway">` +
                    subjects.map(option).join('') + '</optgroup>';
            });
            subjectSelect.innerHTML = html;
            subjectSelect.disabled = false;
        });
});

// ========================================
// CBC SUBJECT CHANGE
// ========================================
document.getElementById('cbcSubjectSelect').addEventListener('change', function() {
    const level = document.getElementById('cbcLevelSelect').value;
    resetCbcScope();
    if (!this.value || !level) return;
    loadCbcStrands(level, this.value);
});

function loadCbcStrands(level, subjectId) {
    const container = document.getElementById('cbcStrandsContainer');
    container.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Loading strands...';
    fetch(`/exams/cbc/strands/${level}/${subjectId}`)
        .then(r => r.json())
        .then(data => {
            window._cbcStrandData = data;
            if (data.length === 0) {
                container.innerHTML = '<small class="text-muted">No strands captured for this learning area yet — the whole syllabus scope will be used.</small>';
                return;
            }
            container.innerHTML = data.map(s =>
                `<div class="form-check">
                    <input class="form-check-input cbc-strand-checkbox" type="checkbox" name="cbc_strands" value="${s.name}" id="cbcStrand${s.id}" data-strand-id="${s.id}">
                    <label class="form-check-label" for="cbcStrand${s.id}">${s.name}</label>
                </div>`
            ).join('');
            container.querySelectorAll('.cbc-strand-checkbox').forEach(cb =>
                cb.addEventListener('change', renderCbcSubStrands));
        });
}

function resetCbcScope() {
    document.getElementById('cbcStrandsContainer').innerHTML =
        '<small class="text-muted">Select a learning area to see its strands</small>';
    document.getElementById('cbcSubStrandsWrapper').style.display = 'none';
    document.getElementById('cbcSubStrandsContainer').innerHTML = '';
    window._cbcStrandData = [];
}

function renderCbcSubStrands() {
    const data = window._cbcStrandData || [];
    const checked = [...document.querySelectorAll('.cbc-strand-checkbox:checked')]
        .map(cb => Number(cb.dataset.strandId));
    const wrapper = document.getElementById('cbcSubStrandsWrapper');
    const container = document.getElementById('cbcSubStrandsContainer');
    const withSubs = data.filter(s => checked.includes(s.id) && s.sub_strands.length);
    if (!withSubs.length) {
        wrapper.style.display = 'none';
        container.innerHTML = '';
        return;
    }
    wrapper.style.display = 'block';
    container.innerHTML = withSubs.map(s =>
        `<div class="mb-1"><strong class="small">${s.name}</strong></div>` +
        s.sub_strands.map((ss, i) =>
            `<div class="form-check">
                <input class="form-check-input" type="checkbox" name="cbc_sub_strands" value="${ss}" id="cbcSub${s.id}_${i}">
                <label class="form-check-label" for="cbcSub${s.id}_${i}">${ss}</label>
            </div>`).join('')
    ).join('');
}

// ========================================
// SCOPE TOGGLE: Full Exam vs Topical Test
// ========================================
document.querySelectorAll('.scope-toggle').forEach(radio => {
    radio.addEventListener('change', function() {
        const scope = this.value;
        const topicalSelectors = document.getElementById('topical_selectors_wrapper');
        const paperTypeWrapper = document.getElementById('paperTypeWrapper');
        const customParamFields = document.querySelectorAll('.custom-param-field');
        const scopeHint = document.getElementById('scopeHint');
        
        if (scope === 'full') {
            topicalSelectors.style.display = 'none';
            paperTypeWrapper.style.display = 'block';
            const selectedClass = getCurrentClass();
            const rangeText = getClassRangeText(selectedClass);
            scopeHint.innerHTML = '<i class="fas fa-info-circle"></i> Full Examination uses <strong>current class and all previous classes</strong> as eligible curriculum (' + rangeText + '), with current class receiving priority.';

            document.getElementById('totalMarks').value = 100;
            document.getElementById('duration').value = 150;
        } else {
            topicalSelectors.style.display = 'block';
            paperTypeWrapper.style.display = 'none';
            customParamFields.forEach(f => f.style.display = 'block');
            const selectedClass = getCurrentClass();
            const rangeText = getClassRangeText(selectedClass);
            scopeHint.innerHTML = '<i class="fas fa-crosshairs"></i> Topical Test generates a focused assessment on specific topics from <strong>' + rangeText + '</strong>. Select topics below.';
            
            const subjectId = document.getElementById('subjectSelect').value;
            if (subjectId) {
                loadTopicsForSubject(subjectId);
            }
        }
        updateSummary();
    });
});

// ========================================
// PAPER TYPE SELECTOR
// ========================================
document.getElementById('paperType').addEventListener('change', function() {
    const customFields = document.querySelectorAll('.custom-param-field');
    if (this.value === 'custom') {
        customFields.forEach(f => f.style.display = 'block');
    } else {
        customFields.forEach(f => f.style.display = 'none');
        document.getElementById('totalMarks').value = 100;
        document.getElementById('duration').value = 150;
    }
    updateSummary();
});

// ========================================
// PAPER STANDARD ↔ DIFFICULTY
// ========================================
(function () {
    const examType = document.getElementById('examType');
    const difficulty = document.getElementById('difficultyLevel');
    const hint = document.getElementById('difficultyHint');
    const baseHint = hint.textContent;
    let previous = difficulty.value;

    function sync() {
        if (examType.value === 'contest') {
            previous = difficulty.value === 'extreme' ? previous : difficulty.value;
            difficulty.value = 'extreme';
            difficulty.disabled = true;
            hint.textContent = 'Contest papers are always extremely difficult — every question, including the first.';
        } else {
            difficulty.disabled = false;
            difficulty.value = previous;
            hint.textContent = baseHint;
        }
        updateSummary();
    }

    examType.addEventListener('change', sync);
    difficulty.addEventListener('change', function () {
        previous = this.value;
        updateSummary();
    });
    sync();
})();

// ========================================
// TASK TYPE → sensible marks/duration defaults
// ========================================
document.getElementById('speedMode').addEventListener('change', function () {
    document.getElementById('speedHint').textContent = this.value === 'fast'
        ? 'Skips the reasoning model. Much quicker — check the working on calculation-heavy papers.'
        : 'Thorough reasons through every question; best for Mathematics and Sciences.';
    updateSummary();
});

document.getElementById('kcseTaskType').addEventListener('change', function () {
    const defaults = {
        exam: {marks: 100, minutes: 150},
        assignment: {marks: 40, minutes: 90},
        homework: {marks: 20, minutes: 30},
        cat: {marks: 30, minutes: 40}
    }[this.value];
    if (defaults) {
        document.getElementById('totalMarks').value = defaults.marks;
        document.getElementById('duration').value = defaults.minutes;
    }
    updateSummary();
});

// ========================================
// CBC LEVEL LOAD
// ========================================
let cbcLevelsLoaded = false;

function loadCbcLevels() {
    if (cbcLevelsLoaded) return;
    const levelSelect = document.getElementById('cbcLevelSelect');
    fetch('/exams/cbc/levels')
        .then(r => r.json())
        .then(data => {
            levelSelect.innerHTML = '<option value="">Select Grade Level</option>' +
                data.map(l => `<option value="${l.code}">${l.name} (${l.stage})</option>`).join('');
            cbcLevelsLoaded = true;
            if (levelSelect.value) {
                updateCbcScopeDescription();
            }
        })
        .catch(() => {
            levelSelect.innerHTML = '<option value="">Could not load grade levels</option>';
        });
}

// ========================================
// FORM SUBMIT VALIDATION
// ========================================
document.getElementById('examForm').addEventListener('submit', function(e) {
    const mode = document.querySelector('.mode-toggle:checked').value;
    const scope = document.querySelector('.scope-toggle:checked');
    const scopeValue = scope ? scope.value : 'full';
    
    if (mode === 'kcse' && scopeValue === 'topical') {
        const errorDiv = document.getElementById('topicError');
        const selectedCount = document.querySelectorAll('#topicTree .topic-checkbox:checked').length;
        if (selectedCount === 0) {
            e.preventDefault();
            errorDiv.style.display = 'block';
            document.getElementById('topicTree').scrollIntoView({ behavior: 'smooth', block: 'center' });
            return false;
        }
        errorDiv.style.display = 'none';
    }

    if (mode === 'cbc') {
        if (!document.getElementById('cbcLevelSelect').value ||
            !document.getElementById('cbcSubjectSelect').value) {
            e.preventDefault();
            showProgress(100, 'Please select a grade level and learning area first.', true);
            return false;
        }
        const cbcScope = document.querySelector('.cbc-scope-toggle:checked')?.value || 'full';
        if (cbcScope === 'topical') {
            const checkedStrands = document.querySelectorAll('.cbc-strand-checkbox:checked');
            const cbcError = document.getElementById('cbcTopicError');
            if (checkedStrands.length === 0) {
                e.preventDefault();
                cbcError.style.display = 'block';
                document.getElementById('cbcStrandsContainer').scrollIntoView({ behavior: 'smooth', block: 'center' });
                return false;
            }
            cbcError.style.display = 'none';
        }
    }

    e.preventDefault();
    startGeneration(this);
});

// ========================================
// GENERATION FUNCTIONS
// ========================================
let autoRetryUsed = false;
let isRetryAttempt = false;
let generationStartedAt = 0;

function startGeneration(form, isRetry) {
    const generateBtn = document.getElementById('generateBtn');
    if (!isRetry) { autoRetryUsed = false; isRetryAttempt = false; }
    generationStartedAt = Date.now();
    hideProgressActions();
    generateBtn.classList.add('is-generating');
    generateBtn.disabled = true;
    setGenerateLabel(isRetry ? 'Retrying generation...' : 'Starting generation...');
    showProgress(2, isRetry ? 'Retrying exam request...' : 'Submitting exam request...');

    fetch(form.action || window.location.href, {
        method: 'POST',
        body: new FormData(form),
        headers: {
            'X-Progress-Request': '1',
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
        .then(async response => {
            const data = await response.json().catch(() => ({}));
            if (!response.ok || !data.ok) {
                throw new Error(data.error || 'Could not start exam generation.');
            }
            setGenerateLabel('Generating...');
            pollGenerationProgress(data.progress_url, data.view_url);
        })
        .catch(error => {
            failGeneration(error.message || 'Could not start exam generation.');
        });
}

function resetGenerateButton() {
    const generateBtn = document.getElementById('generateBtn');
    generateBtn.classList.remove('is-generating');
    generateBtn.disabled = false;
    const activeMode = document.querySelector('.mode-toggle:checked')?.value || 'kcse';
    setGenerateLabel(activeMode === 'kcse' ? 'Generate Exam with AI' : 'Generate CBC Assessment');
}

function failGeneration(rawMessage) {
    const form = document.getElementById('examForm') || document.querySelector('form');
    if (!autoRetryUsed) {
        autoRetryUsed = true;
        isRetryAttempt = true;
        showProgress(0, 'First attempt did not complete — starting attempt 2 of 2...');
        window.setTimeout(() => startGeneration(form, true), 800);
        return;
    }
    showProgress(100, friendlyError(rawMessage), true, rawMessage);
    showProgressActions();
    resetGenerateButton();
}

function friendlyError(raw) {
    const text = String(raw || '');
    if (/incomplete/i.test(text)) {
        return 'The AI returned an incomplete paper. Trying again usually fixes this.';
    }
    if (/did not return a usable response|invalid data|JSON/i.test(text)) {
        return 'The AI response could not be read. Please try generating again.';
    }
    if (/timed out|timeout|connect/i.test(text)) {
        return 'The AI service did not respond in time. Please try again in a moment.';
    }
    if (/subscription|upgrade|limit/i.test(text)) {
        return text;
    }
    if (/object has no attribute|Traceback|NoneType|KeyError|TypeError|IndexError|Exception/i.test(text)) {
        return 'Something went wrong while building the paper. Please try again.';
    }
    return text || 'Generation failed. Please try again.';
}

function showProgressActions() {
    document.getElementById('progressActions')?.classList.add('is-visible');
}

function hideProgressActions() {
    document.getElementById('progressActions')?.classList.remove('is-visible');
    const detail = document.getElementById('progressDetail');
    if (detail) detail.hidden = true;
}

document.getElementById('retryBtn')?.addEventListener('click', () => {
    autoRetryUsed = true;
    const form = document.getElementById('examForm') || document.querySelector('form');
    startGeneration(form, true);
});

['paperType', 'totalMarks'].forEach(id => {
    document.getElementById(id).addEventListener('change', updateSummary);
    document.getElementById(id).addEventListener('input', updateSummary);
});

function setGenerateLabel(label) {
    document.querySelector('#generateBtn .generate-text').textContent = label;
}

function showProgress(percent, message, isError = false, detail = '') {
    const progressPanel = document.getElementById('generationProgress');
    const progressBar = document.getElementById('progressBar');
    const progressPercent = document.getElementById('progressPercent');
    const progressMessage = document.getElementById('progressMessage');
    const progressTitle = document.getElementById('progressTitle');
    const value = Math.max(0, Math.min(100, Number(percent) || 0));

    progressPanel.classList.add('is-visible');
    progressBar.style.width = `${value}%`;
    progressBar.parentElement.setAttribute('aria-valuenow', value);
    progressPercent.textContent = `${value}%`;
    progressMessage.textContent = message || 'Generating...';
    
    let heading = isError ? 'Generation failed'
                : value >= 100 ? 'Generation complete'
                : (isRetryAttempt ? 'Generating exam — attempt 2 of 2' : 'Generating exam');
    
    if (!isError && value < 100 && generationStartedAt) {
        const secs = Math.round((Date.now() - generationStartedAt) / 1000);
        if (secs >= 20) {
            const mins = Math.floor(secs / 60);
            heading += mins >= 1 ? ` · ${mins}m ${secs % 60}s` : ` · ${secs}s`;
        }
    }
    progressTitle.textContent = heading;
    progressBar.classList.toggle('bg-danger', isError);
    progressBar.classList.toggle('complete', !isError && value >= 100);
    progressBar.classList.toggle('progress-bar-animated', !isError && value < 100);

    const detailBox = document.getElementById('progressDetail');
    const detailText = document.getElementById('progressDetailText');
    if (detailBox && detailText) {
        if (detail && detail !== message) {
            detailText.textContent = detail;
            detailBox.hidden = false;
        } else {
            detailBox.hidden = true;
        }
    }
}

function pollGenerationProgress(progressUrl, fallbackViewUrl) {
    let attempts = 0;
    let lastPercent = -1;
    let stuckTicks = 0;
    const timer = window.setInterval(() => {
        attempts += 1;
        fetch(progressUrl, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
            .then(response => response.json())
            .then(data => {
                if (!data.ok) {
                    throw new Error(data.error || 'Could not read generation progress.');
                }

                if (data.percent === lastPercent) {
                    stuckTicks += 1;
                } else {
                    stuckTicks = 0;
                    lastPercent = data.percent;
                }
                let message = data.message;
                if (stuckTicks > 20 && data.status === 'generating') {
                    message = (data.message || 'Working') +
                        ' — this stage takes a few minutes on a full paper. Please keep this page open.';
                }
                showProgress(data.percent, message);

                if (data.status === 'completed') {
                    window.clearInterval(timer);
                    showProgress(100, 'Opening generated exam...');
                    window.location.href = data.view_url || fallbackViewUrl;
                } else if (data.status === 'failed') {
                    window.clearInterval(timer);
                    failGeneration(data.error || data.message || 'Generation failed.');
                }
            })
            .catch(error => {
                if (attempts > 3) {
                    window.clearInterval(timer);
                    failGeneration(error.message || 'Progress check failed.');
                }
            });
    }, 1200);
}

// ========================================
// UPDATE SUMMARY
// ========================================
function updateSummary() {
    const mode = document.querySelector('.mode-toggle:checked')?.value || 'kcse';
    document.getElementById('summaryMode').textContent = mode === 'kcse' ? 'KCSE' : 'CBC';

    if (mode === 'kcse') {
        const scope = document.querySelector('.scope-toggle:checked')?.value || 'full';
        const paperType = document.getElementById('paperType')?.value || 'paper_2';
        const marks = document.getElementById('totalMarks')?.value || '100';
        const taskType = document.getElementById('kcseTaskType');
        const taskLabel = taskType?.options[taskType.selectedIndex]?.text || 'Examination paper';
        const difficulty = document.getElementById('difficultyLevel');
        const difficultyLabel = {
            standard: 'Standard', challenging: 'Challenging',
            very_hard: 'Very difficult', extreme: 'Extremely difficult'
        }[difficulty?.value] || 'Standard';
        
        const selectedClass = getCurrentClass();
        const rangeText = getClassRangeText(selectedClass);
        const topicScope = getTopicScope();
        const scopeLabel = topicScope === 'current' ? selectedClass + ' only' : rangeText;

        document.getElementById('summaryScope').textContent = scope === 'full' ? 'Full Paper' : 'Topical (' + scopeLabel + ')';
        document.getElementById('summaryFormat').textContent =
            taskType?.value !== 'exam' ? taskLabel :
            paperType === 'paper_1' ? 'Paper 1' :
            paperType === 'paper_2' ? 'Paper 2' :
            paperType === 'paper_3' ? 'Paper 3' : 'Custom';
        document.getElementById('summaryDifficulty').textContent = difficultyLabel;
        document.getElementById('summarySpeed').textContent =
            document.getElementById('speedMode')?.value === 'fast' ? 'Fast draft' : 'Thorough';
        
        const selectedCount = document.querySelectorAll('#topicTree .topic-checkbox:checked').length;
        document.getElementById('summaryTopics').textContent =
            scope === 'full' ? 'Full syllabus (' + rangeText + ')'
                             : (selectedCount + ' selected');
        document.getElementById('summaryMarks').textContent = marks;
    } else {
        const cbcScope = document.querySelector('.cbc-scope-toggle:checked')?.value || 'full';
        const taskType = document.getElementById('taskType');
        const taskLabel = taskType?.options[taskType.selectedIndex]?.text || 'Examination';
        document.getElementById('summaryScope').textContent = cbcScope === 'full' ? 'Full Syllabus' : 'Selected Topics';
        document.getElementById('summaryFormat').textContent = taskLabel;
        document.getElementById('summaryDifficulty').textContent = 'Grade level';
        document.getElementById('summarySpeed').textContent = 'Pipeline';
        document.getElementById('summaryTopics').textContent =
            cbcScope === 'full' ? 'All strands' : 'Selected strands';
        document.getElementById('summaryMarks').textContent = 'Blueprint';
    }
}

document.getElementById('taskType').addEventListener('change', updateSummary);

// ========================================
// INITIALIZATION
// ========================================
document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM loaded, initializing...');
    
    // Initialize scope description
    updateScopeDescription();
    updateSummary();
    
    // Set initial state for topic search
    document.getElementById('topicSearch').disabled = true;
    
    // If subject is pre-selected, load topics
    const subjectId = document.getElementById('subjectSelect').value;
    if (subjectId) {
        console.log('Initial subject found:', subjectId);
        loadTopicsForSubject(subjectId);
    } else {
        console.log('No initial subject selected');
    }
    
    // Log current state
    console.log('Current class:', getCurrentClass());
    console.log('Topic scope:', getTopicScope());
    console.log('Eligible levels:', getEligibleLevels());
});
</script>
{% endblock %}s