@extends('layouts.app')

@section('title', 'Import Questions')

@push('styles')
<style>
    .form-label { display: block; font-size: 13px; font-weight: 500; color: var(--text-primary); margin-bottom: 4px; }
    .form-input { width: 100%; padding: 8px 12px; border: 1px solid var(--card-border); border-radius: 6px; font-size: 14px; outline: none; transition: border-color 0.15s; background: var(--card-bg); color: var(--text-primary); }
    .form-input:focus { border-color: var(--primary-light); }
    .btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 6px; font-size: 14px; font-weight: 500; border: none; cursor: pointer; transition: all 0.15s; text-decoration: none; }
    .btn-primary { background: var(--primary); color: white; }
    .btn-primary:hover { background: var(--primary-dark); }
    .btn-outline { background: transparent; border: 1px solid var(--card-border); color: var(--text-primary); }
    .btn-outline:hover { background: #F5F3F1; }
</style>
@endpush

@section('content')

<div style="max-width: 900px;">
    <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px;">
        <div>
            <a href="{{ route('question-bank.index') }}" style="display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--text-muted); text-decoration: none; margin-bottom: 8px;">
                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>
                Back to question bank
            </a>
            <h1 style="font-family: 'Fraunces', serif; font-size: 24px; font-weight: 600;">Import questions</h1>
            <p style="font-size: 13px; color: var(--text-muted);">Bulk import questions from a CSV file</p>
        </div>
    </div>

    <div style="background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 24px; margin-bottom: 24px;">
        <h3 style="font-size: 16px; font-weight: 600; margin-bottom: 16px; font-family: 'Fraunces', serif;">Upload CSV</h3>
        <form method="POST" action="{{ route('question-bank.import') }}" enctype="multipart/form-data">
            @csrf
            <div style="margin-bottom: 16px;">
                <label class="form-label">CSV file</label>
                <input type="file" name="csv_file" accept=".csv,.txt" required class="form-input" style="padding: 6px 12px;">
            </div>
            <div style="display: flex; align-items: center; gap: 12px;">
                <button type="submit" class="btn btn-primary">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                    Import
                </button>
                <a href="#" onclick="return false;" class="btn btn-outline opacity-50 cursor-not-allowed" title="Template download coming soon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                    Download template
                </a>
            </div>
        </form>
    </div>

    @if (session('import_errors'))
        <div style="background: #FEF2F2; border: 1px solid #FECACA; border-radius: var(--radius); padding: 20px; margin-bottom: 24px;">
            <h4 style="font-size: 14px; font-weight: 600; color: #991B1B; margin-bottom: 12px;">Import errors</h4>
            <ul style="list-style: none; padding: 0; margin: 0;">
                @foreach (session('import_errors') as $error)
                    <li style="font-size: 13px; color: #991B1B; padding: 4px 0; border-bottom: 1px solid #FECACA;">{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div style="background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 24px;">
        <h3 style="font-size: 16px; font-weight: 600; margin-bottom: 12px; font-family: 'Fraunces', serif;">CSV format</h3>
        <p style="font-size: 13px; color: var(--text-muted); margin-bottom: 16px;">Your CSV file must include a header row with the following columns:</p>
        <div style="background: #FAFAF8; border-radius: 6px; padding: 12px 16px; font-size: 13px; font-family: monospace; color: var(--text-primary); margin-bottom: 16px; overflow-x: auto;">
            subject, question_type, question_text, options, correct_answer, difficulty, marks
        </div>

        <h4 style="font-size: 14px; font-weight: 600; margin-bottom: 8px;">Sample data</h4>
        <div style="overflow-x: auto;">
            <table style="width: 100%; border-collapse: collapse; font-size: 13px;">
                <thead>
                    <tr style="background: #FAFAF8;">
                        <th style="text-align: left; padding: 8px 12px; font-weight: 500; color: var(--text-muted); border-bottom: 1px solid var(--card-border);">subject</th>
                        <th style="text-align: left; padding: 8px 12px; font-weight: 500; color: var(--text-muted); border-bottom: 1px solid var(--card-border);">question_type</th>
                        <th style="text-align: left; padding: 8px 12px; font-weight: 500; color: var(--text-muted); border-bottom: 1px solid var(--card-border);">question_text</th>
                        <th style="text-align: left; padding: 8px 12px; font-weight: 500; color: var(--text-muted); border-bottom: 1px solid var(--card-border);">options</th>
                        <th style="text-align: left; padding: 8px 12px; font-weight: 500; color: var(--text-muted); border-bottom: 1px solid var(--card-border);">correct_answer</th>
                        <th style="text-align: left; padding: 8px 12px; font-weight: 500; color: var(--text-muted); border-bottom: 1px solid var(--card-border);">difficulty</th>
                        <th style="text-align: left; padding: 8px 12px; font-weight: 500; color: var(--text-muted); border-bottom: 1px solid var(--card-border);">marks</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td style="padding: 8px 12px; border-bottom: 1px solid var(--card-border);">Mathematics</td>
                        <td style="padding: 8px 12px; border-bottom: 1px solid var(--card-border); color: var(--text-muted);">mcq</td>
                        <td style="padding: 8px 12px; border-bottom: 1px solid var(--card-border); color: var(--text-muted);">What is 2 + 2?</td>
                        <td style="padding: 8px 12px; border-bottom: 1px solid var(--card-border); color: var(--text-muted);">["1","2","3","4"]</td>
                        <td style="padding: 8px 12px; border-bottom: 1px solid var(--card-border); color: var(--text-muted);">3</td>
                        <td style="padding: 8px 12px; border-bottom: 1px solid var(--card-border);"><span style="display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 500; background: #D1FAE5; color: #059669;">easy</span></td>
                        <td style="padding: 8px 12px; border-bottom: 1px solid var(--card-border); font-weight: 500;">1</td>
                    </tr>
                    <tr>
                        <td style="padding: 8px 12px; border-bottom: 1px solid var(--card-border);">Science</td>
                        <td style="padding: 8px 12px; border-bottom: 1px solid var(--card-border); color: var(--text-muted);">short</td>
                        <td style="padding: 8px 12px; border-bottom: 1px solid var(--card-border); color: var(--text-muted);">What is photosynthesis?</td>
                        <td style="padding: 8px 12px; border-bottom: 1px solid var(--card-border); color: var(--text-muted);">—</td>
                        <td style="padding: 8px 12px; border-bottom: 1px solid var(--card-border); color: var(--text-muted);">Process by which plants make food</td>
                        <td style="padding: 8px 12px; border-bottom: 1px solid var(--card-border);"><span style="display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 500; background: #FEF3C7; color: #D97706;">medium</span></td>
                        <td style="padding: 8px 12px; border-bottom: 1px solid var(--card-border); font-weight: 500;">3</td>
                    </tr>
                    <tr>
                        <td style="padding: 8px 12px; border-bottom: 1px solid var(--card-border);">English</td>
                        <td style="padding: 8px 12px; border-bottom: 1px solid var(--card-border); color: var(--text-muted);">long</td>
                        <td style="padding: 8px 12px; border-bottom: 1px solid var(--card-border); color: var(--text-muted);">Write an essay on climate change.</td>
                        <td style="padding: 8px 12px; border-bottom: 1px solid var(--card-border); color: var(--text-muted);">—</td>
                        <td style="padding: 8px 12px; border-bottom: 1px solid var(--card-border); color: var(--text-muted);">Model answer with key points...</td>
                        <td style="padding: 8px 12px; border-bottom: 1px solid var(--card-border);"><span style="display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 500; background: #FEE2E2; color: #DC2626;">hard</span></td>
                        <td style="padding: 8px 12px; border-bottom: 1px solid var(--card-border); font-weight: 500;">5</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div style="margin-top: 16px; background: #FFF7ED; border: 1px solid #FED7AA; border-radius: 6px; padding: 12px 16px;">
            <p style="font-size: 13px; color: #9A3412; margin: 0;">
                <strong>Note:</strong> For MCQ type, the <code style="background: #FFEDD5; padding: 1px 4px; border-radius: 3px;">options</code> column must contain a valid JSON array of option strings, and <code style="background: #FFEDD5; padding: 1px 4px; border-radius: 3px;">correct_answer</code> should be the 0-based index of the correct option.
            </p>
        </div>
    </div>
</div>

@endsection