@extends('layouts.app')

@section('content')
    @php
        $errorFields = $errors->any() ? array_values(array_unique(array_map(function ($key) {
            return explode('.', $key)[0];
        }, array_keys($errors->getMessages())))) : [];
    @endphp

    <section class="app-card mx-auto max-w-3xl p-6">
        <h1 class="mb-1 text-2xl font-bold text-white">Create Model</h1>
        <p class="mb-6 text-sm text-slate-300">Add a new 3D model. Step through each tab — paste reference material or upload a file and the app will generate the teaching content sections from it.</p>

        @if(session('staff_notice'))
            <div class="mb-4 rounded-lg bg-emerald-500/20 p-3 text-sm text-emerald-100">{{ session('staff_notice') }}</div>
        @endif

        @if($errors->any())
            <div class="mb-4 rounded-lg bg-rose-500/20 p-3 text-sm text-rose-100">
                <p class="font-semibold">Please fix the following:</p>
                <ul class="mt-2 list-disc pl-5">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form
            method="post"
            action="{{ route('staff.models.store') }}"
            enctype="multipart/form-data"
            class="staff-form"
            data-tabbed-form
            data-error-fields='@json($errorFields)'
            data-storage-key="staff-model-create"
        >
            @csrf
            <input type="hidden" name="_active_tab" value="basics" data-active-tab>

            <div class="staff-tabs" role="tablist">
                <button type="button" role="tab" data-tab-btn="basics"    class="staff-tab"><span class="staff-tab-num">1</span> Basics</button>
                <button type="button" role="tab" data-tab-btn="source"    class="staff-tab"><span class="staff-tab-num">2</span> Source content</button>
                <button type="button" role="tab" data-tab-btn="teaching"  class="staff-tab"><span class="staff-tab-num">3</span> Teaching sections</button>
                <button type="button" role="tab" data-tab-btn="assistant" class="staff-tab"><span class="staff-tab-num">4</span> AI Assistant</button>
                <button type="button" role="tab" data-tab-btn="media"     class="staff-tab"><span class="staff-tab-num">5</span> Media &amp; publish</button>
            </div>

            {{-- 1. BASICS --}}
            <section data-tab-panel="basics" class="staff-panel space-y-4">
                <div>
                    <label class="mb-1 block text-sm font-medium text-slate-200">Model title</label>
                    <input name="title" value="{{ old('title') }}" required class="w-full rounded-lg border border-white/15 bg-slate-900/70 px-3 py-2 text-slate-100">
                </div>

                <div>
                    <label class="mb-1 block text-sm font-medium text-slate-200">Model type</label>
                    <select name="model_type" class="w-full rounded-lg border border-white/15 bg-slate-900/70 px-3 py-2 text-slate-100">
                        @foreach($modelTypes as $type)
                            <option value="{{ $type }}" @selected(old('model_type', 'anatomy') === $type)>{{ ucfirst($type) }}</option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <label class="mb-1 block text-sm font-medium text-slate-200">Sketchfab model link</label>
                    <input name="embed_url" value="{{ old('embed_url') }}" required placeholder="https://sketchfab.com/3d-models/slug-name or https://sketchfab.com/models/MODEL_ID" class="w-full rounded-lg border border-white/15 bg-slate-900/70 px-3 py-2 text-slate-100">
                    <p class="mt-1 text-xs text-slate-400">Paste a normal Sketchfab model URL. We convert it to embed URL automatically.</p>
                </div>

                <div class="grid gap-4 md:grid-cols-2">
                    <div>
                        <label class="mb-1 block text-sm font-medium text-slate-200">Programme</label>
                        <input name="programme" value="{{ old('programme', 'Medicine') }}" required class="w-full rounded-lg border border-white/15 bg-slate-900/70 px-3 py-2 text-slate-100">
                    </div>
                    <div>
                        <label class="mb-1 block text-sm font-medium text-slate-200">Species</label>
                        <input name="species" value="{{ old('species', 'Human') }}" required class="w-full rounded-lg border border-white/15 bg-slate-900/70 px-3 py-2 text-slate-100">
                    </div>
                </div>

                <div class="grid gap-4 md:grid-cols-2">
                    <div>
                        <label class="mb-1 block text-sm font-medium text-slate-200">Body system</label>
                        <input name="body_system" value="{{ old('body_system') }}" required class="w-full rounded-lg border border-white/15 bg-slate-900/70 px-3 py-2 text-slate-100">
                    </div>
                    <div>
                        <label class="mb-1 block text-sm font-medium text-slate-200">Estimated study minutes</label>
                        <input type="number" min="1" max="600" name="estimated_minutes" value="{{ old('estimated_minutes', 20) }}" required class="w-full rounded-lg border border-white/15 bg-slate-900/70 px-3 py-2 text-slate-100">
                    </div>
                </div>

                <div>
                    <label class="mb-1 block text-sm font-medium text-slate-200">Short summary</label>
                    <textarea name="summary" rows="3" class="w-full rounded-lg border border-white/15 bg-slate-900/70 px-3 py-2 text-slate-100">{{ old('summary') }}</textarea>
                </div>

                <div class="staff-panel-footer">
                    <button type="button" class="btn-secondary" data-form-nav="prev" disabled>Back</button>
                    <div class="staff-panel-footer-right">
                        <button type="button" class="btn-primary" data-form-nav="next">Next</button>
                    </div>
                </div>
            </section>

            {{-- 2. SOURCE CONTENT --}}
            <section data-tab-panel="source" class="staff-panel space-y-4 hidden">
                <div class="rounded-xl border border-white/10 bg-white/5 p-4">
                    <h3 class="mb-2 text-sm font-semibold text-white">Source content</h3>
                    <p class="mb-3 text-xs text-slate-400">
                        Paste the reference material below or upload a PDF/DOCX file. The app will generate appropriate teaching content sections from whatever you provide.
                    </p>

                    <textarea name="pasted_source_text" rows="10" placeholder="Paste the model's reference material here…" class="w-full rounded-lg border border-white/15 bg-slate-900/70 px-3 py-2 text-slate-100">{{ old('pasted_source_text') }}</textarea>

                    <div class="mt-3">
                        <label class="mb-1 block text-xs font-medium text-slate-300">Or upload a PDF / DOCX file</label>
                        <input type="file" name="source_file" accept=".pdf,.docx,application/pdf,application/vnd.openxmlformats-officedocument.wordprocessingml.document" class="w-full rounded-lg border border-white/15 bg-slate-900/70 px-3 py-2 text-slate-100">
                        <p class="mt-1 text-xs text-slate-400">If you upload a file, the extracted text replaces what's in the paste box above.</p>
                    </div>
                </div>

                <div class="staff-panel-footer">
                    <button type="button" class="btn-secondary" data-form-nav="prev">Back</button>
                    <div class="staff-panel-footer-right">
                        <button type="button" class="btn-primary" data-form-nav="next">Next</button>
                    </div>
                </div>
            </section>

            {{-- 3. TEACHING SECTIONS --}}
            <section data-tab-panel="teaching" class="staff-panel space-y-4 hidden">
                <div class="rounded-xl border border-white/10 bg-white/5 p-4">
                    <h3 class="mb-2 text-sm font-semibold text-white">Teaching content sections</h3>
                    <p class="mb-3 text-xs text-slate-400">
                        After the model is created you'll be taken to the edit page where each section can be reviewed and fine-tuned. Tick the box below to have the app build them straight away from your source content.
                    </p>

                    <label class="inline-flex items-start gap-2 text-sm text-slate-200">
                        <input type="checkbox" name="generate_content_sections" value="1" @checked(old('generate_content_sections')) class="mt-0.5">
                        <span>Generate teaching content sections immediately after creating</span>
                    </label>
                </div>

                <div class="staff-panel-footer">
                    <button type="button" class="btn-secondary" data-form-nav="prev">Back</button>
                    <div class="staff-panel-footer-right">
                        <button type="button" class="btn-primary" data-form-nav="next">Next</button>
                    </div>
                </div>
            </section>

            {{-- 4. AI ASSISTANT --}}
            @include('staff.models._assistant_panel', ['model' => null, 'assistantModes' => $assistantModes])

            {{-- 5. MEDIA & PUBLISH --}}
            <section data-tab-panel="media" class="staff-panel space-y-4 hidden">
                <div class="rounded-xl border border-white/10 bg-white/5 p-4">
                    <h3 class="mb-2 text-sm font-semibold text-white">Supplementary video <span class="text-xs font-normal text-slate-400">(optional)</span></h3>
                    <p class="mb-1 text-xs text-slate-400">Paste any of: a YouTube/Vimeo/Media&nbsp;Hopper page URL, a direct video file URL, or a full <code class="rounded bg-slate-800 px-1">&lt;iframe&gt;</code> embed snippet.</p>
                    <p class="mb-3 text-xs text-slate-400">For Media&nbsp;Hopper videos, pasting the <em>iframe embed code</em> from the video's Share &rarr; Embed dialog is the most reliable option.</p>

                    <label class="mb-1 block text-xs font-medium text-slate-300">Video URL or embed code</label>
                    <textarea name="video_url" rows="2" placeholder="https://www.youtube.com/watch?v=…  or  &lt;iframe src=&quot;…&quot;&gt;&lt;/iframe&gt;" class="w-full rounded-lg border border-white/15 bg-slate-900/70 px-3 py-2 text-slate-100">{{ old('video_url') }}</textarea>

                    <label class="mt-3 mb-1 block text-xs font-medium text-slate-300">Comment shown next to the video <span class="font-normal text-slate-400">(optional)</span></label>
                    <textarea name="video_comment" rows="3" placeholder="Add a note, transcript snippet, or talking points to display alongside the video…" class="w-full rounded-lg border border-white/15 bg-slate-900/70 px-3 py-2 text-slate-100">{{ old('video_comment') }}</textarea>
                </div>

                <div>
                    <label class="mb-1 block text-sm font-medium text-slate-200">Audio narration (optional)</label>
                    <input id="audio_file_create" type="file" name="audio_file" accept="audio/*" class="w-full rounded-lg border border-white/15 bg-slate-900/70 px-3 py-2 text-slate-100">
                    <p class="mt-1 text-xs text-slate-400">Upload MP3, WAV, M4A, or OGG (max 20MB).</p>
                    <p id="audio_file_create_preview" class="mt-2 text-xs text-slate-300"></p>
                </div>

                <label class="inline-flex items-center gap-2 text-sm text-slate-200">
                    <input type="checkbox" name="show_learning_levels" value="1" @checked(old('show_learning_levels', true))>
                    Show teaching content sections on the public model page
                </label>

                <label class="inline-flex items-center gap-2 text-sm text-slate-200">
                    <input type="checkbox" name="published" value="1" @checked(old('published', true))>
                    Publish immediately
                </label>

                <div class="staff-panel-footer">
                    <button type="button" class="btn-secondary" data-form-nav="prev">Back</button>
                    <div class="staff-panel-footer-right">
                        <a href="{{ route('staff.models.index') }}" class="btn-secondary">Cancel</a>
                        <button type="submit" class="btn-primary">Create model</button>
                    </div>
                </div>
            </section>
        </form>
    </section>

    <script>
        (function () {
            var input = document.getElementById('audio_file_create');
            var preview = document.getElementById('audio_file_create_preview');
            if (!input || !preview) return;
            input.addEventListener('change', function () {
                var file = input.files && input.files[0];
                if (!file) { preview.textContent = ''; return; }
                var sizeMb = (file.size / (1024 * 1024)).toFixed(2);
                preview.textContent = 'Selected: ' + file.name + ' (' + sizeMb + ' MB)';
                var audio = document.createElement('audio');
                audio.preload = 'metadata';
                audio.src = URL.createObjectURL(file);
                audio.onloadedmetadata = function () {
                    var seconds = Math.round(audio.duration || 0);
                    preview.textContent += ' • Duration: ' + seconds + ' sec';
                    URL.revokeObjectURL(audio.src);
                };
            });
        })();
    </script>

    @include('staff.models._tabbed_form_script')
    @include('staff.models._assistant_panel_script')
@endsection