<div @if (! in_array($creative->status, ['completed', 'failed'], true)) wire:poll.5s="refreshStatus" @endif>
    <div class="mb-page">
        <div class="mb-page-inner">

            <div class="mb-page-head">
                <div>
                    <a class="mb-back" href="{{ route('creatives.index') }}" wire:navigate><i class="bi bi-arrow-left"></i>All creatives</a>
                    <div class="mb-title-row">
                        <h1 class="mb-page-title">{{ $creative->title ?? 'Creative #'.$creative->id }}</h1>
                        <span class="mb-status is-{{ $creative->status === 'processing' ? 'generating' : $creative->status }}"><span class="mb-dot"></span>{{ $creative->status }}</span>
                    </div>
                    <p class="mb-page-sub">{{ ucfirst($creative->type) }} · {{ $creative->ratio }} · {{ $creative->created_at->diffForHumans() }}</p>
                </div>
                <div class="mb-page-head-actions">
                    @if ($creative->status === 'completed' && ($creative->asset || $creative->asset_path))
                        @php
                            $previewUrl = $creative->asset ? route('assets.preview', ['asset' => $creative->asset, 'full' => 1]) : asset('storage/'.$creative->asset_path);
                        @endphp
                        <a href="{{ $previewUrl }}" target="_blank" class="mb-btn-ghost"><i class="bi bi-download"></i><span class="d-none d-sm-inline">Download</span></a>
                    @endif
                    <button type="button" class="mb-btn-ghost" data-act="copy-link"><i class="bi bi-link-45deg"></i><span class="d-none d-sm-inline">Copy link</span></button>
                    @unless ($creative->source === 'manual_upload')
                        <form method="POST" action="{{ route('creatives.regenerate', $creative) }}">
                            @csrf
                            <button type="submit" class="mb-btn-primary mb-btn-lg"><i class="bi bi-arrow-repeat"></i>Regenerate</button>
                        </form>
                    @endunless
                </div>
            </div>

            @if (session('video_error'))
                <div class="mb-note is-error"><i class="bi bi-exclamation-triangle"></i><div>{{ session('video_error') }}</div></div>
            @endif

            @if ($creative->status === 'failed' && $creative->failure_reason)
                <div class="mb-note is-error"><i class="bi bi-exclamation-triangle"></i><div><strong>Generation failed</strong>{{ $creative->failure_reason }}</div></div>
            @endif

            @if (! in_array($creative->status, ['completed', 'failed']))
                @php
                    $renderProgress = min(99, max(0, (int) $creative->render_progress));
                    $renderStage = $creative->render_stage ?: ($creative->status === 'queued' ? 'Waiting for renderer' : 'Preparing your creative');
                @endphp
                <section class="mb-detail-progress" aria-label="Render progress">
                    <div class="mb-detail-progress-icon"><i class="bi bi-camera-reels-fill"></i></div>
                    <div class="mb-detail-progress-body">
                        <div class="mb-detail-progress-head">
                            <div><span>Creating your {{ $creative->type }}</span><strong>{{ $renderStage }}</strong></div>
                            <b>{{ $renderProgress }}%</b>
                        </div>
                        <div class="mb-detail-progress-track" role="progressbar" aria-label="Estimated render progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="{{ $renderProgress }}">
                            <span style="width: {{ $renderProgress }}%"></span>
                        </div>
                        <div class="mb-detail-progress-foot"><span>Estimated progress</span><span><i class="bi bi-arrow-repeat"></i>Updates automatically every 5s</span></div>
                        @if ($creative->type === 'video')
                            <div class="mb-detail-progress-steps">
                                <span class="{{ $renderProgress >= 5 ? 'is-done' : '' }}">Prepared</span>
                                <span class="{{ $renderProgress >= 12 ? 'is-active' : '' }} {{ $renderProgress >= 90 ? 'is-done' : '' }}">Rendering scenes</span>
                                <span class="{{ $renderProgress >= 90 ? 'is-active' : '' }}">Finalizing</span>
                            </div>
                        @endif
                    </div>
                </section>
            @endif

            <div class="mb-detail">
                <div class="mb-preview-card">
                    <div class="mb-preview-stage">
                        @php
                            $ratioParts = explode(':', $creative->ratio ?? '1:1');
                            $cssAspectRatio = (count($ratioParts) === 2 && (float) $ratioParts[1] > 0)
                                ? $ratioParts[0].' / '.$ratioParts[1]
                                : '1 / 1';
                        @endphp
                        <div class="mb-frame" style="aspect-ratio: {{ $cssAspectRatio }};">
                            <span class="mb-ratio-badge">{{ $creative->ratio }}</span>
                            @if ($creative->status === 'completed' && ($creative->asset || $creative->asset_path))
                                @php
                                    $previewUrl = $creative->asset ? route('assets.preview', ['asset' => $creative->asset, 'full' => 1]) : asset('storage/'.$creative->asset_path);
                                @endphp
                                @if ($creative->type === 'video')
                                    <video src="{{ $previewUrl }}" controls style="position:absolute;inset:0;width:100%;height:100%;object-fit:contain"></video>
                                @else
                                    <img src="{{ $previewUrl }}" alt="Generated creative" style="position:absolute;inset:0;width:100%;height:100%;object-fit:contain">
                                @endif
                            @else
                                <div class="mb-frame-note">
                                    <i class="bi bi-{{ $creative->status === 'failed' ? 'exclamation-triangle' : 'camera-reels' }}"></i>
                                    <small>{{ $creative->status === 'failed' ? 'Generation failed' : ($creative->render_progress ?? 0).'% · '.($creative->render_stage ?: 'Generating') }}</small>
                                </div>
                            @endif
                        </div>
                    </div>
                    @if ($creative->status === 'completed' && ($creative->asset || $creative->asset_path))
                        @php
                            $previewUrl = $creative->asset ? route('assets.preview', ['asset' => $creative->asset, 'full' => 1]) : asset('storage/'.$creative->asset_path);
                        @endphp
                        <div class="mb-preview-bar">
                            <span class="mb-cell-meta">{{ ucfirst($creative->type) }} · {{ $creative->ratio }}</span>
                            <a href="{{ $previewUrl }}" target="_blank" class="mb-row-btn"><i class="bi bi-download"></i>Download</a>
                            <button type="button" class="mb-row-btn" data-act="copy-link" data-url="{{ $previewUrl }}"><i class="bi bi-clipboard"></i>Copy link</button>
                        </div>
                    @endif
                </div>

                <div>
                    <div class="mb-panel">
                        <div class="mb-panel-head"><i class="bi bi-info-circle"></i>Details</div>
                        <div class="mb-panel-body">
                            <dl class="mb-dl">
                                <div class="mb-dl-row">
                                    <dt class="mb-dl-key">Status</dt>
                                    <dd class="mb-dl-val">{{ $creative->status }}</dd>
                                </div>
                                @if (! in_array($creative->status, ['completed', 'failed']))
                                    <div class="mb-dl-row">
                                        <dt class="mb-dl-key">Progress</dt>
                                        <dd class="mb-dl-val">{{ $creative->render_progress ?? 0 }}% · {{ $creative->render_stage ?: 'Waiting for renderer' }}</dd>
                                    </div>
                                @endif
                                @if ($creative->project_name)
                                    <div class="mb-dl-row">
                                        <dt class="mb-dl-key">Project</dt>
                                        <dd class="mb-dl-val fw-semibold">{{ $creative->project_name }}</dd>
                                    </div>
                                @endif
                                <div class="mb-dl-row">
                                    <dt class="mb-dl-key">Type</dt>
                                    <dd class="mb-dl-val">{{ ucfirst($creative->type) }}</dd>
                                </div>
                                <div class="mb-dl-row">
                                    <dt class="mb-dl-key">Source</dt>
                                    <dd class="mb-dl-val">{{ $creative->source === 'manual_upload' ? 'Manual Upload' : ($creative->source === 'prompt' ? 'Prompt' : 'Product URL') }}</dd>
                                </div>
                                @if ($creative->product_url)
                                    <div class="mb-dl-row">
                                        <dt class="mb-dl-key">Product URL</dt>
                                        <dd class="mb-dl-val"><a href="{{ $creative->product_url }}" target="_blank">{{ $creative->product_url }}</a></dd>
                                    </div>
                                @endif
                                <div class="mb-dl-row">
                                    <dt class="mb-dl-key">Ratio</dt>
                                    <dd class="mb-dl-val mb-mono">{{ $creative->ratio }}</dd>
                                </div>
                                @if ($handlingLabel = \App\DTOs\CreativeBrief::handlingLabel($creative->brief['handling'] ?? null))
                                    <div class="mb-dl-row">
                                        <dt class="mb-dl-key">Handling</dt>
                                        <dd class="mb-dl-val">{{ $handlingLabel }}</dd>
                                    </div>
                                @endif
                                @if ($creative->style)
                                    <div class="mb-dl-row">
                                        <dt class="mb-dl-key">Style</dt>
                                        <dd class="mb-dl-val">{{ $creative->style }}</dd>
                                    </div>
                                @endif
                                @if ($creative->provider && !empty($creative->provider['model']))
                                    <div class="mb-dl-row">
                                        <dt class="mb-dl-key">Model</dt>
                                        <dd class="mb-dl-val mb-mono">{{ $creative->provider['model'] }}</dd>
                                    </div>
                                @endif
                                <div class="mb-dl-row">
                                    <dt class="mb-dl-key">Created</dt>
                                    <dd class="mb-dl-val">{{ $creative->created_at->toDayDateTimeString() }}</dd>
                                </div>
                                <div class="mb-dl-row">
                                    <dt class="mb-dl-key">Updated</dt>
                                    <dd class="mb-dl-val">{{ $creative->updated_at->toDayDateTimeString() }}</dd>
                                </div>
                            </dl>
                        </div>
                    </div>

                    @if ($creative->type === 'video')
                        @if ($creative->avatar)
                            <div class="mb-panel">
                                <div class="mb-panel-head"><i class="bi bi-person-badge"></i>Avatar</div>
                                <div class="mb-panel-body">
                                    <div class="d-flex align-items-center gap-3">
                                        @if ($creative->avatar->source_path)
                                            <img src="{{ asset($creative->avatar->source_path) }}" alt="{{ $creative->avatar->name }}" style="width:48px;height:48px;border-radius:12px;object-fit:cover;">
                                        @endif
                                        <div>
                                            <div class="fw-semibold">{{ $creative->avatar->name }}</div>
                                            <div class="mb-cell-meta">{{ $creative->avatar->gender }} · {{ $creative->avatar->persona }}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif

                        @if ($creative->voice)
                            <div class="mb-panel">
                                <div class="mb-panel-head"><i class="bi bi-mic"></i>Voice</div>
                                <div class="mb-panel-body">
                                    <div class="fw-semibold">{{ $creative->voice->name }}</div>
                                    <div class="mb-cell-meta">{{ $creative->voice->gender }} · {{ $creative->voice->accent }} · {{ $creative->voice->provider }}</div>
                                </div>
                            </div>
                        @endif

                        @if ($creative->script)
                            <div class="mb-panel">
                                <div class="mb-panel-head"><i class="bi bi-card-text"></i>Script</div>
                                <div class="mb-panel-body">
                                    @if (is_array($creative->script))
                                        @php
                                            $isAssociative = \Illuminate\Support\Arr::isAssoc($creative->script);
                                        @endphp
                                        @if ($isAssociative)
                                            <div class="d-flex flex-column gap-2">
                                                @foreach ($creative->script as $section => $line)
                                                    <div class="mb-prompt">
                                                        <strong>{{ ucfirst(str_replace('_', ' ', (string) $section)) }}:</strong>
                                                        {{ is_array($line) ? implode(' ', array_filter($line, 'is_string')) : $line }}
                                                    </div>
                                                @endforeach
                                            </div>
                                        @else
                                            <div class="d-flex flex-column gap-2">
                                                @foreach ($creative->script as $line)
                                                    <div class="mb-prompt">
                                                        @if (is_array($line))
                                                            @if (!empty($line['speaker']))
                                                                <strong>{{ $line['speaker'] }}:</strong>
                                                            @endif
                                                            {{ $line['text'] ?? $line['line'] ?? implode(' ', array_filter($line, 'is_string')) }}
                                                        @else
                                                            {{ $line }}
                                                        @endif
                                                    </div>
                                                @endforeach
                                            </div>
                                        @endif
                                    @else
                                        <div class="mb-prompt">{{ $creative->script }}</div>
                                    @endif
                                </div>
                            </div>
                        @endif
                    @else
                        @if ($creative->prompt)
                            <div class="mb-panel">
                                <div class="mb-panel-head"><i class="bi bi-chat-left-text"></i>Prompt</div>
                                <div class="mb-panel-body">
                                    <div class="mb-prompt">{{ $creative->prompt }}</div>
                                </div>
                            </div>
                        @endif
                    @endif

                    <div class="mb-panel">
                        <div class="mb-panel-head"><i class="bi bi-trash3"></i>Danger zone</div>
                        <div class="mb-panel-body">
                            <p class="mb-cell-meta mb-2">Deleting a creative removes it from the library and any campaign using it.</p>
                            <form method="POST" action="{{ route('creatives.destroy', $creative) }}" onsubmit="return confirm('Delete this creative? This can\'t be undone.');">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="mb-danger-link"><i class="bi bi-trash3"></i>Delete creative</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <div class="mb-toast" id="mb-toast" role="status" aria-live="polite"></div>

    <script>
        document.addEventListener('click', function (e) {
            var btn = e.target.closest('[data-act="copy-link"]');
            if (!btn) return;
            var url = btn.dataset.url || window.location.href;
            var toast = document.getElementById('mb-toast');
            var showToast = function (text) {
                if (!toast) return;
                toast.textContent = text;
                toast.classList.add('is-on');
                clearTimeout(toast._t);
                toast._t = setTimeout(function () { toast.classList.remove('is-on'); }, 1900);
            };
            if (navigator.clipboard && window.isSecureContext) {
                navigator.clipboard.writeText(url).then(function () { showToast('Link copied'); }, function () { showToast('Copy failed'); });
                return;
            }
            var ta = document.createElement('textarea');
            ta.value = url;
            ta.style.position = 'fixed';
            ta.style.opacity = '0';
            document.body.appendChild(ta);
            ta.select();
            try {
                document.execCommand('copy');
                showToast('Link copied');
            } catch (err) {
                showToast('Copy failed');
            }
            document.body.removeChild(ta);
        });
    </script>
</div>
