@extends('layouts.app')

@section('content')
    @php
        $humanizeSectionKey = function ($key) {
            $key = (string) $key;
            if (preg_match('/^[a-z0-9_]+$/', $key)) {
                return \Illuminate\Support\Str::title(str_replace('_', ' ', $key));
            }
            return $key;
        };
        $existingSections = [];
        foreach (($model->content_sections ?? []) as $key => $body) {
            if (! is_string($body) && ! is_numeric($body)) continue;
            $body = trim((string) $body);
            if ($body === '') continue;
            $existingSections[] = ['heading' => $humanizeSectionKey($key), 'body' => $body];
        }
        $oldSections = old('sections');
        $sectionsForForm = is_array($oldSections) && count($oldSections) > 0 ? $oldSections : $existingSections;

        $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">Edit Model</h1>
        <p class="mb-6 text-sm text-slate-300">Work through each section below — your progress is saved when you hit <em>Save progress</em>.</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.update', $model) }}"
            enctype="multipart/form-data"
            class="staff-form"
            data-tabbed-form
            data-error-fields='@json($errorFields)'
            data-storage-key="staff-model-edit-{{ $model->id }}"
        >
            @csrf
            @method('PUT')
            <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', $model->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', $model->model_type) === $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', $model->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', $model->programme) }}" 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', $model->species) }}" 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', $model->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', $model->estimated_minutes) }}" 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', $model->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="submit" class="btn-secondary">Save progress</button>
                        <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">
                    <div class="mb-2 flex items-center justify-between gap-2">
                        <h3 class="text-sm font-semibold text-white">Source content</h3>
                        @if($model->source_text)
                            <span class="text-xs text-slate-400">{{ number_format(mb_strlen($model->source_text)) }} characters stored</span>
                        @endif
                    </div>
                    <p class="mb-3 text-xs text-slate-400">
                        Paste reference material below or upload a PDF/DOCX file. The app will read whatever you provide and generate appropriate headed sections from it.
                    </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', $model->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>
                        @if($model->source_file_name)
                            <p class="mt-2 text-xs text-slate-300">Currently linked file: <span class="font-medium">{{ $model->source_file_name }}</span></p>
                            <label class="mt-2 inline-flex items-center gap-2 text-xs text-slate-200">
                                <input type="checkbox" name="remove_source_file" value="1">
                                Remove uploaded file and clear all source content
                            </label>
                        @endif
                    </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="submit" class="btn-secondary">Save progress</button>
                        <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">
                    <div class="mb-3 flex flex-wrap items-center justify-between gap-2">
                        <div>
                            <h3 class="text-sm font-semibold text-white">Teaching content sections</h3>
                            <p class="mt-1 text-xs text-slate-400">The app picks suitable headings based on your source content. You can fine-tune each section before saving.</p>
                        </div>
                        <button type="submit" name="generate_content_sections" value="1" class="btn-secondary">
                            @if(empty($existingSections)) Generate sections @else Regenerate sections @endif
                        </button>
                    </div>

                    @if(empty($sectionsForForm))
                        <p class="rounded-lg border border-dashed border-white/15 bg-slate-900/40 p-3 text-sm text-slate-300">
                            No teaching sections yet. Add source content on the previous tab and click <em>Generate sections</em>.
                        </p>
                    @else
                        <div class="space-y-3" id="sections-list">
                            @foreach($sectionsForForm as $i => $section)
                                <div class="rounded-lg border border-white/10 bg-slate-900/40 p-3">
                                    <label class="mb-1 block text-xs font-medium uppercase tracking-wide text-slate-400">Section {{ $i + 1 }} heading</label>
                                    <input type="text" name="sections[{{ $i }}][heading]" value="{{ $section['heading'] ?? '' }}" class="mb-2 w-full rounded-lg border border-white/15 bg-slate-900/70 px-3 py-2 text-slate-100">
                                    <label class="mb-1 block text-xs font-medium uppercase tracking-wide text-slate-400">Body</label>
                                    <textarea name="sections[{{ $i }}][body]" rows="4" class="w-full rounded-lg border border-white/15 bg-slate-900/70 px-3 py-2 text-slate-100">{{ $section['body'] ?? '' }}</textarea>
                                </div>
                            @endforeach
                        </div>
                    @endif
                </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="submit" class="btn-secondary">Save progress</button>
                        <button type="button" class="btn-primary" data-form-nav="next">Next</button>
                    </div>
                </div>
            </section>

            {{-- 4. AI ASSISTANT --}}
            @include('staff.models._assistant_panel', ['model' => $model, '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', $model->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', $model->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_edit" 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 id="audio_file_edit_preview" class="mt-2 text-xs text-slate-300"></p>
                    @if($model->audio_path)
                        <p class="mt-2 text-xs text-slate-300">Current audio uploaded.</p>
                        <label class="mt-2 inline-flex items-center gap-2 text-xs text-slate-200">
                            <input type="checkbox" name="remove_audio" value="1">
                            Remove current audio
                        </label>
                    @endif
                </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', $model->show_learning_levels))>
                    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', $model->published))>
                    Publish model
                </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">Save changes</button>
                    </div>
                </div>
            </section>
        </form>
    </section>

    <script>
        (function () {
            var input = document.getElementById('audio_file_edit');
            var preview = document.getElementById('audio_file_edit_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