@extends('layouts.app')

@section('content')
    <article class="model-top-layout" style="display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:stretch;height:650px;">
        <section class="model-main-panel" style="min-width:0;height:100%;display:flex;flex-direction:column;">
            <section class="app-card flex min-h-0 flex-1 flex-col p-5">
                <h1 class="text-3xl font-bold text-white">{{ $model->title }}</h1>
                <p class="mt-2 text-sm text-slate-300">{{ $model->summary }}</p>
                <div class="model-viewer-container model-viewer mt-4 overflow-hidden rounded-xl border border-white/10" style="flex:1 1 auto;width:100%;display:flex;min-height:480px;height:100%;min-width:0;">
                    @php
                        $viewerUrl = $model->embed_url;
                        if (is_string($viewerUrl) && str_contains($viewerUrl, 'sketchfab.com') && ! str_contains($viewerUrl, '/embed')) {
                            if (preg_match('#sketchfab\.com/models/([a-zA-Z0-9\-]+)#', $viewerUrl, $matches)) {
                                $viewerUrl = 'https://sketchfab.com/models/' . $matches[1] . '/embed';
                            } elseif (preg_match('#sketchfab\.com/3d-models/[^/?#]+-([a-zA-Z0-9\-]+)#', $viewerUrl, $matches)) {
                                $viewerUrl = 'https://sketchfab.com/models/' . $matches[1] . '/embed';
                            }
                        }
                    @endphp
                    <iframe
                        src="{{ $viewerUrl }}"
                        allow="autoplay; fullscreen; xr-spatial-tracking"
                        allowfullscreen
                        loading="lazy"
                        style="width:100%;height:100%;min-height:480px;display:block;flex:1 1 auto;align-self:stretch;min-width:0;max-width:none;border:0;border-radius:12px;"
                    ></iframe>
                </div>
            </section>
        </section>

        <aside class="model-sidebar">
            <section class="app-card audio-card p-4">
                <h2 class="font-semibold text-white">Audio Narration</h2>
                @if($model->audio_path)
                    <audio controls class="mt-3 w-full">
                        <source src="{{ asset('storage/' . $model->audio_path) }}">
                        Your browser does not support audio playback.
                    </audio>
                @else
                    <p class="mt-2 text-sm text-slate-300">No audio narration uploaded for this model.</p>
                @endif
            </section>

            <section class="app-card ai-card p-4">
                <h2 class="font-semibold text-white">AI Study Assistant</h2>
                @php
                    $isAiEnabled = $aiEnabled ?? session('ai_enabled', false);
                @endphp
                <p class="mt-2 inline-flex items-center rounded-full px-2.5 py-1 text-xs font-medium {{ $isAiEnabled ? 'bg-emerald-500/20 text-emerald-200' : 'bg-amber-500/20 text-amber-200' }}">
                    {{ $isAiEnabled ? 'Live AI connected' : 'Local fallback mode' }}
                </p>

                @php $assistantPrompts = $assistantPrompts ?? []; @endphp
                @if(!empty($assistantPrompts))
                    <div class="ai-prompts mt-3 hidden"
                         role="group"
                         aria-label="Suggested next question"
                         data-prompt-rotator
                         data-prompts='@json(array_values($assistantPrompts))'
                         data-storage-key="assistant-prompts-{{ $model->slug }}"
                         data-last-question="{{ session('assistant_question', '') }}"
                         data-last-answer="{{ session('assistant_response', '') }}">
                        <p class="ai-prompts-label">Try this</p>
                        <div class="ai-prompts-list" data-prompt-slot></div>
                    </div>
                @endif

                <form method="post" action="{{ route('models.assistant', $model->slug) }}" class="ai-input-area mt-3 space-y-2" id="assistant-form">
                    @csrf
                    <textarea name="question" id="assistant-question" rows="3" class="w-full rounded-lg px-3 py-2 border border-white/25 bg-white/5 text-white placeholder-white/50 placeholder:italic focus:outline-none focus:border-blue-400 focus:bg-white/10" placeholder="Ask a question about the model..."></textarea>
                    <button type="submit" class="btn-primary text-sm">Ask</button>
                </form>
                @if($errors->has('question'))
                    <p class="ai-input-area mt-2 text-sm text-rose-300">{{ $errors->first('question') }}</p>
                @endif

                <p id="assistant-typing-indicator" class="ai-input-area mt-3 hidden text-xs text-slate-300">Assistant is typing...</p>

                @if(session('assistant_response'))
                    <div id="assistant-chat-history" class="ai-answer-area border border-white/10 bg-slate-900/60">
                        <p class="ai-answer-label mb-1 text-[11px] uppercase tracking-wide text-emerald-200">Assistant</p>
                        <div class="ai-message ai-answer text-sm text-slate-100"><span class="assistant-typing" data-full-text="{{ e(session('assistant_response')) }}"></span></div>
                    </div>
                @endif
            </section>

        </aside>
    </article>

    <section class="app-card mt-6 p-5 model-main" id="model-tabs">
                <div class="mb-4 flex flex-wrap gap-2 border-b border-white/10 pb-3">
                    <button type="button" data-tab-btn="metadata" class="rounded-lg bg-blue-500/30 px-3 py-1.5 text-sm text-white">Metadata</button>
                    <button type="button" data-tab-btn="teaching-content" class="rounded-lg px-3 py-1.5 text-sm text-slate-300">Teaching Content</button>
                    @if(!empty($model->video_url))
                        <button type="button" data-tab-btn="video" class="rounded-lg px-3 py-1.5 text-sm text-slate-300">Video</button>
                    @endif
                    <button type="button" data-tab-btn="quiz" class="rounded-lg px-3 py-1.5 text-sm text-slate-300">Quiz</button>
                </div>

                <div data-tab-panel="metadata" class="space-y-4">
                    @php
                        $hasVideoTab = !empty($model->video_url);
                        $hasQuizTab = ($quiz?->published_questions_count ?? 0) > 0;
                        $sectionsCount = count(array_filter(($model->content_sections ?? []), fn ($v) => is_string($v) && trim($v) !== ''));
                    @endphp

                    <h2 class="text-xl font-semibold text-white">Metadata</h2>

                    <div class="meta-strip">
                        <span class="meta-strip-chip meta-strip-chip-blue">{{ ucfirst($model->model_type) }}</span>
                        <span class="meta-strip-dot" aria-hidden="true">&bull;</span>
                        <span class="meta-strip-chip meta-strip-chip-emerald">{{ $model->species }}</span>
                        <span class="meta-strip-dot" aria-hidden="true">&bull;</span>
                        <span class="meta-strip-chip meta-strip-chip-amber">{{ $model->programme }}</span>
                        @if($hasVideoTab || $hasQuizTab || $sectionsCount > 0)
                            <span class="meta-strip-dot" aria-hidden="true">&bull;</span>
                            <span class="meta-strip-included">
                                @if($sectionsCount > 0) {{ $sectionsCount }} {{ \Illuminate\Support\Str::plural('section', $sectionsCount) }} @endif
                                @if($hasVideoTab) &middot; Video @endif
                                @if($hasQuizTab) &middot; Quiz @endif
                            </span>
                        @endif
                    </div>

                </div>

                <div data-tab-panel="teaching-content" class="hidden space-y-4">
                    <h2 class="text-xl font-semibold text-white">Teaching Content</h2>
                    @if($model->show_learning_levels)
                        @php
                            $sections = $model->content_sections ?? [];
                            $humanizeSectionKey = function ($key) {
                                $key = (string) $key;
                                if (preg_match('/^[a-z0-9_]+$/', $key)) {
                                    return \Illuminate\Support\Str::title(str_replace('_', ' ', $key));
                                }
                                return $key;
                            };
                            $renderableSections = [];
                            foreach ($sections as $key => $body) {
                                if (! is_string($body) && ! is_numeric($body)) continue;
                                $body = trim((string) $body);
                                if ($body === '') continue;
                                $renderableSections[] = ['heading' => $humanizeSectionKey($key), 'body' => $body];
                            }
                            $totalWords = array_sum(array_map(fn ($s) => str_word_count($s['body']), $renderableSections));
                            $readingMinutes = max(1, (int) ceil($totalWords / 200));
                        @endphp
                        @if(!empty($renderableSections))
                            <div class="tc-meta">
                                <span class="tc-meta-chip">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 5h12a3 3 0 0 1 3 3v11H7a3 3 0 0 1-3-3z"/><path d="M4 5v11a3 3 0 0 0 3 3"/></svg>
                                    {{ count($renderableSections) }} {{ \Illuminate\Support\Str::plural('section', count($renderableSections)) }}
                                </span>
                                <span class="tc-meta-chip">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>
                                    ~{{ $readingMinutes }} min read
                                </span>
                                <span class="tc-meta-hint">Tap a step to expand &middot; only one open at a time</span>
                            </div>
                            <div class="tc-stack" data-accordion="teaching-content">
                                @foreach($renderableSections as $i => $section)
                                    <details name="teaching-content" class="tc-step">
                                        <summary class="tc-step-summary">
                                            <span class="tc-step-num" aria-hidden="true">{{ str_pad((string) ($i + 1), 2, '0', STR_PAD_LEFT) }}</span>
                                            <span class="tc-step-heading">{{ $section['heading'] }}</span>
                                            <span class="tc-step-chevron" aria-hidden="true">
                                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
                                            </span>
                                        </summary>
                                        <div class="tc-step-body">
                                            <p class="tc-step-prose">{{ $section['body'] }}</p>
                                        </div>
                                    </details>
                                @endforeach
                            </div>
                        @else
                            <p class="text-sm text-slate-300">No teaching content generated yet.</p>
                        @endif
                    @else
                        <p class="text-sm text-slate-300">Teaching content is hidden for this model.</p>
                    @endif
                </div>

                @if(!empty($model->video_url))
                    @php
                        $videoHost = parse_url($model->video_url, PHP_URL_HOST) ?? '';
                        $videoHost = strtolower(preg_replace('/^www\./', '', (string) $videoHost));
                        if ($model->is_video_direct) {
                            $providerLabel = strtoupper(pathinfo(parse_url($model->video_url, PHP_URL_PATH) ?? '', PATHINFO_EXTENSION) ?: 'File');
                            $providerClass = 'video-badge-file';
                        } elseif (str_contains($videoHost, 'youtu')) {
                            $providerLabel = 'YouTube';
                            $providerClass = 'video-badge-youtube';
                        } elseif (str_contains($videoHost, 'vimeo')) {
                            $providerLabel = 'Vimeo';
                            $providerClass = 'video-badge-vimeo';
                        } elseif (str_contains($videoHost, 'media.ed.ac.uk') || str_contains($videoHost, 'kaltura.com')) {
                            $providerLabel = 'Media Hopper';
                            $providerClass = 'video-badge-mediahopper';
                        } else {
                            $providerLabel = 'External';
                            $providerClass = 'video-badge-external';
                        }
                    @endphp
                    <div data-tab-panel="video" class="hidden space-y-4">
                        <div class="flex flex-wrap items-center justify-between gap-3">
                            <h2 class="text-xl font-semibold text-white">Video</h2>
                            <div class="flex flex-wrap items-center gap-2">
                                <span class="video-badge {{ $providerClass }}">
                                    <span class="video-badge-dot" aria-hidden="true"></span>
                                    {{ $providerLabel }}
                                </span>
                                <a href="{{ $model->video_url }}" target="_blank" rel="noopener" class="video-action">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 4h6v6"/><path d="M20 4 10 14"/><path d="M19 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h5"/></svg>
                                    Open original
                                </a>
                                <button type="button" class="video-action" data-copy-link="{{ $model->video_url }}">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 13a5 5 0 0 0 7.07 0l3-3a5 5 0 0 0-7.07-7.07l-1.5 1.5"/><path d="M14 11a5 5 0 0 0-7.07 0l-3 3a5 5 0 0 0 7.07 7.07l1.5-1.5"/></svg>
                                    <span data-copy-label>Copy link</span>
                                </button>
                            </div>
                        </div>

                        <div class="video-frame">
                            <div class="video-frame-inner">
                                @if($model->is_video_direct)
                                    <video controls preload="metadata" class="video-player">
                                        <source src="{{ $model->video_url }}">
                                        Your browser cannot play this video. <a class="underline" href="{{ $model->video_url }}" target="_blank" rel="noopener">Open it in a new tab</a>.
                                    </video>
                                @elseif($model->video_embed_url)
                                    <iframe
                                        src="{{ $model->video_embed_url }}"
                                        title="Supplementary video for {{ $model->title }}"
                                        allow="accelerometer; autoplay *; clipboard-write; encrypted-media *; fullscreen *; gyroscope; picture-in-picture *; web-share"
                                        allowfullscreen
                                        webkitallowfullscreen
                                        mozallowfullscreen
                                        class="video-player"
                                    ></iframe>
                                @else
                                    <div class="video-fallback">
                                        <p class="mb-2">This video can't be embedded inline.</p>
                                        <a class="underline" href="{{ $model->video_url }}" target="_blank" rel="noopener">Open it in a new tab &rarr;</a>
                                    </div>
                                @endif
                            </div>
                        </div>

                        @if(!empty(trim((string) $model->video_comment)))
                            <div class="video-notes">
                                <p class="video-notes-label">Notes</p>
                                <p class="video-notes-body">{{ $model->video_comment }}</p>
                            </div>
                        @endif
                    </div>
                @endif

                <div data-tab-panel="quiz" class="hidden">
                    @if(($quiz?->published_questions_count ?? 0) > 0)
                        @include('models._quiz_runner', ['quiz' => $quiz])
                    @else
                        <h2 class="text-xl font-semibold text-white">Quiz</h2>
                        <p class="mt-2 text-sm text-slate-300">No published quiz questions available yet.</p>
                    @endif
                </div>
    </section>

    <script>
        (function () {
            var root = document.getElementById('model-tabs');
            if (!root) return;
            var buttons = root.querySelectorAll('[data-tab-btn]');
            var panels = root.querySelectorAll('[data-tab-panel]');
            var activate = function (name) {
                buttons.forEach(function (btn) {
                    var active = btn.getAttribute('data-tab-btn') === name;
                    btn.classList.toggle('bg-blue-500/30', active);
                    btn.classList.toggle('text-white', active);
                    btn.classList.toggle('text-slate-300', !active);
                });
                panels.forEach(function (panel) {
                    panel.classList.toggle('hidden', panel.getAttribute('data-tab-panel') !== name);
                });
            };
            buttons.forEach(function (btn) {
                btn.addEventListener('click', function () {
                    activate(btn.getAttribute('data-tab-btn'));
                });
            });
            activate('metadata');
        })();

        (function () {
            document.querySelectorAll('[data-copy-link]').forEach(function (btn) {
                btn.addEventListener('click', function () {
                    var url = btn.getAttribute('data-copy-link');
                    if (!url) return;
                    var label = btn.querySelector('[data-copy-label]');
                    var originalText = label ? label.textContent : null;
                    var done = function (ok) {
                        if (label) label.textContent = ok ? 'Copied!' : 'Copy failed';
                        btn.classList.toggle('video-action-success', ok);
                        setTimeout(function () {
                            if (label && originalText) label.textContent = originalText;
                            btn.classList.remove('video-action-success');
                        }, 1600);
                    };
                    if (navigator.clipboard && navigator.clipboard.writeText) {
                        navigator.clipboard.writeText(url).then(function () { done(true); }, function () { done(false); });
                    } else {
                        try {
                            var ta = document.createElement('textarea');
                            ta.value = url;
                            ta.style.position = 'fixed';
                            ta.style.opacity = '0';
                            document.body.appendChild(ta);
                            ta.select();
                            document.execCommand('copy');
                            document.body.removeChild(ta);
                            done(true);
                        } catch (e) {
                            done(false);
                        }
                    }
                });
            });
        })();

        (function () {
            var supportsExclusive = (function () {
                try {
                    var probe = document.createElement('details');
                    probe.setAttribute('name', 'probe');
                    return probe.name === 'probe';
                } catch (e) {
                    return false;
                }
            })();

            if (supportsExclusive) return;

            document.querySelectorAll('[data-accordion]').forEach(function (group) {
                var groupName = group.getAttribute('data-accordion');
                group.querySelectorAll('details[name="' + groupName + '"]').forEach(function (detail) {
                    detail.addEventListener('toggle', function () {
                        if (!detail.open) return;
                        group.querySelectorAll('details[name="' + groupName + '"]').forEach(function (other) {
                            if (other !== detail && other.open) other.open = false;
                        });
                    });
                });
            });
        })();

        (function () {
            var rotator = document.querySelector('[data-prompt-rotator]');
            var input   = document.getElementById('assistant-question');
            var form    = document.getElementById('assistant-form');
            if (!rotator || !input || !form) return;

            var prompts = [];
            try { prompts = JSON.parse(rotator.getAttribute('data-prompts') || '[]'); } catch (e) {}
            if (!Array.isArray(prompts) || !prompts.length) return;

            var slot     = rotator.querySelector('[data-prompt-slot]');
            var key      = rotator.getAttribute('data-storage-key') || 'assistant-prompts';
            var lastQ    = rotator.getAttribute('data-last-question') || '';
            var lastA    = rotator.getAttribute('data-last-answer') || '';

            // Small English stop-list — keeps overlap detection focused on
            // content words rather than glue words.
            var STOP = ('a an and are as at be been being but by can could did do does doing for from had has have having he her hers him his how i if in into is it its just like may me might more most much my no nor not now of off on once one only or other our ours out over own same she should so some such than that the their them then there these they this those though through to too under up us was we were what when where which while who whom why will with you your yours able about above across after again ago all also any back behind below come even ever every few first get going great little long made make many new old other really see still take that them then time two very want way well what which would' ).split(' ');
            var STOP_SET = {};
            for (var i = 0; i < STOP.length; i++) STOP_SET[STOP[i]] = true;

            function tokens(text) {
                var matches = (text || '').toLowerCase().match(/[a-z][a-z0-9-]{2,}/g) || [];
                return matches.filter(function (w) { return !STOP_SET[w]; });
            }

            function readState() {
                try {
                    var raw = sessionStorage.getItem(key);
                    if (!raw) return { asked: [], transcript: '' };
                    var s = JSON.parse(raw) || {};
                    return {
                        asked: Array.isArray(s.asked) ? s.asked : [],
                        transcript: typeof s.transcript === 'string' ? s.transcript : ''
                    };
                } catch (e) { return { asked: [], transcript: '' }; }
            }
            function writeState(s) {
                try { sessionStorage.setItem(key, JSON.stringify(s)); } catch (e) {}
            }

            // Append the latest Q + A from this round-trip into the rolling
            // transcript so coverage analysis can mark related prompts as
            // already discussed.
            var state = readState();
            if (lastQ || lastA) {
                var fingerprint = '|' + lastQ.slice(0, 80) + '|' + lastA.slice(0, 80) + '|';
                if (state.transcript.indexOf(fingerprint) === -1) {
                    state.transcript = (state.transcript + ' ' + lastQ + ' ' + lastA + ' ' + fingerprint).slice(-6000);
                    writeState(state);
                }
            }

            function pickNext() {
                var tTokens = tokens(state.transcript);
                var tSet = {};
                tTokens.forEach(function (w) { tSet[w] = true; });
                for (var i = 0; i < prompts.length; i++) {
                    if (state.asked.indexOf(i) !== -1) continue;
                    var pTok = tokens(prompts[i]);
                    if (!pTok.length) continue;
                    var hits = 0, seen = {};
                    for (var j = 0; j < pTok.length; j++) {
                        if (seen[pTok[j]]) continue;
                        seen[pTok[j]] = true;
                        if (tSet[pTok[j]]) hits++;
                    }
                    // Two distinct content-word matches → consider already covered.
                    if (hits >= 2) continue;
                    return i;
                }
                return -1;
            }

            function render(idx) {
                slot.innerHTML = '';
                if (idx < 0) {
                    rotator.classList.add('hidden');
                    return;
                }
                rotator.classList.remove('hidden');
                var btn = document.createElement('button');
                btn.type = 'button';
                btn.className = 'ai-prompt-chip';
                btn.textContent = prompts[idx];
                btn.addEventListener('click', function () {
                    if (state.asked.indexOf(idx) === -1) state.asked.push(idx);
                    writeState(state);
                    input.value = prompts[idx];
                    if (typeof form.requestSubmit === 'function') form.requestSubmit();
                    else form.submit();
                });
                slot.appendChild(btn);
            }

            render(pickNext());
        })();

        (function () {
            var answerBox = document.getElementById('assistant-chat-history');
            var typingNode = document.querySelector('.assistant-typing');
            var typingIndicator = document.getElementById('assistant-typing-indicator');

            var scrollAnswerToBottom = function () {
                if (answerBox) {
                    answerBox.scrollTop = answerBox.scrollHeight;
                }
            };

            if (answerBox) {
                answerBox.scrollTop = 0;
            }

            if (!typingNode) {
                return;
            }

            var fullText = typingNode.getAttribute('data-full-text') || '';
            var words = fullText.split(/\s+/).filter(Boolean);
            var index = 0;
            typingNode.textContent = '';
            if (typingIndicator) {
                typingIndicator.classList.remove('hidden');
            }

            setTimeout(function () {
                if (typingIndicator) {
                    typingIndicator.classList.add('hidden');
                }
            }, 500);

            var timer = setInterval(function () {
                if (index >= words.length) {
                    clearInterval(timer);
                    if (typingIndicator) {
                        typingIndicator.classList.add('hidden');
                    }
                    scrollAnswerToBottom();
                    return;
                }

                typingNode.textContent += (index === 0 ? '' : ' ') + words[index];
                index += 1;
                scrollAnswerToBottom();
            }, 110);
        })();
    </script>
@endsection