{% extends 'base.html' %}

{% block title %}Documentation - AutograderGen{% endblock %}

{% block content %}
<style>
    .schema-explorer-card {
        background: #ffffff;
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.04);
        border: 1px solid rgba(0,0,0,0.06);
        padding: 2rem;
        margin-bottom: 2rem;
    }

    .schema-title-badge {
        font-size: 0.85rem;
        font-weight: 700;
        padding: 0.35rem 0.6rem;
        border-radius: 6px;
    }

    .code-example {
        background-color: #f8fafc;
        border: 1px solid #cbd5e1;
        border-radius: 8px;
        padding: 1.25rem 1.5rem;
        font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
        font-size: 0.9rem;
        line-height: 1.6;
        overflow: auto;
        max-height: 550px;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
        margin: 1.5rem 0;
    }
    .code-example code {
        color: #0f172a !important;
        white-space: pre-wrap;
        word-break: break-word;
        font-family: inherit;
    }
</style>

<div class="d-flex justify-content-between align-items-center mb-4">
    <h1 class="text-dark font-weight-bold mb-0">Configuration Schema Explorer</h1>
    <span class="badge bg-secondary schema-title-badge">Pydantic v2 Schema</span>
</div>

<p class="text-muted mb-4">AutograderGen validates your <code>autograder_gen.yaml</code> against a strict structure defined by <code>Config</code>. Use this explorer to understand all properties, nested components, and validation rules.</p>

{% macro render_model_card(title, model_id, model_def) %}
<div class="schema-explorer-card" id="{{ model_id }}">
    <h4 class="text-primary font-weight-bold mb-3">
        {{ title }}
    </h4>
    {% if model_def.description %}
    <p class="text-muted small">{{ model_def.description }}</p>
    {% endif %}

    <div class="table-responsive">
        <table class="table table-hover border rounded">
            <thead class="table-light">
                <tr>
                    <th scope="col" style="width: 25%;">Field</th>
                    <th scope="col" style="width: 20%;">Type</th>
                    <th scope="col" style="width: 15%;">Requirement</th>
                    <th scope="col" style="width: 40%;">Description & Constraints</th>
                </tr>
            </thead>
            <tbody>
                {% for name, prop in (model_def.properties or {}).items() %}
                <tr>
                    <td><strong><code>{{ name }}</code></strong></td>
                    <td>
                        <code>
                            {%- if prop.type -%}
                                {{ prop.type }}
                                {%- if prop.type == 'array' and prop.items -%}
                                    {%- if prop.items.type -%}
                                        [{{ prop.items.type }}]
                                    {%- elif prop.items['$ref'] -%}
                                        [{{ prop.items['$ref'].split('/')[-1] }}]
                                    {%- endif -%}
                                {%- endif -%}
                            {%- elif prop['$ref'] -%}
                                {{ prop['$ref'].split('/')[-1] }}
                            {%- else -%}
                                any
                            {%- endif -%}
                        </code>
                    </td>
                    <td>
                        {% if name in (model_def.required or []) %}
                        <span class="badge bg-success">Required</span>
                        {% elif prop.default is defined and prop.default is not none %}
                        <span class="badge bg-light text-dark">Default: {{ prop.default }}</span>
                        {% else %}
                        <span class="badge bg-light text-dark">Optional</span>
                        {% endif %}
                    </td>
                    <td>
                        {{ prop.description or prop.title or '' }}
                        {% if prop.enum %}
                        <br><small class="text-muted">Allowed: <code>{{ prop.enum|join(', ') }}</code></small>
                        {% endif %}
                        {% if prop.minimum is defined %}
                        <br><small class="text-muted">Min: {{ prop.minimum }}</small>
                        {% endif %}
                        {% if prop.maximum is defined %}
                        <br><small class="text-muted">Max: {{ prop.maximum }}</small>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endmacro %}

{{ render_model_card('Root Configuration', 'config-model', schema_dict) }}
{{ render_model_card('Question Model', 'question-model', schema_dict.get('$defs', {}).get('Question', {})) }}
{{ render_model_card('Marking Item Model', 'marking-item-model', schema_dict.get('$defs', {}).get('MarkingItem', {})) }}

<div class="accordion mb-5" id="rawSchemaAccordion">
    <div class="accordion-item border rounded shadow-sm">
        <h2 class="accordion-header" id="headingRawSchema">
            <button class="accordion-button collapsed font-weight-bold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseRawSchema" aria-expanded="false" aria-controls="collapseRawSchema">
                <i class="fas fa-code me-2"></i> View Raw JSON Schema
            </button>
        </h2>
        <div id="collapseRawSchema" class="accordion-collapse collapse" aria-labelledby="headingRawSchema" data-bs-parent="#rawSchemaAccordion">
            <div class="accordion-body p-0">
                <pre class="code-example mb-0"><code>{{ schema }}</code></pre>
            </div>
        </div>
    </div>
</div>
{% endblock %}