<?php /**
 * Ported from the design bundle (ai-marketing-platform-assets, 8 Sep 2026):
 * includes/components/creative-detail.php + assets/css/creatives.css
 * (".mb-detail / .mb-preview-card / .mb-panel" rules, shared with the
 * listing page's stylesheet). The design's own page is a client-side JS
 * shell with no shipped markup template, so this content is built from the
 * CSS class names directly using real, server-rendered `Creative` data.
 */ ?>
<x-mb-layout pageTitle="Creative #{{ $creative->id }}">
    @push('styles')
        <link href="{{ asset('assets/mb/css/creatives.css') }}?v={{ filemtime(public_path('assets/mb/css/creatives.css')) }}" rel="stylesheet">
    @endpush

    @if (! in_array($creative->status, ['completed', 'failed']))
        <meta http-equiv="refresh" content="3">
    @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 #{{ $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_path)
                        <a href="{{ asset('storage/'.$creative->asset_path) }}" 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>
                    <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>
                </div>
            </div>

            @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']))
                <div class="mb-note is-info"><i class="bi bi-hourglass-split"></i><div><strong>Generating…</strong>This page refreshes automatically.</div></div>
            @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_path)
                                @if ($creative->type === 'video')
                                    <video src="{{ asset('storage/'.$creative->asset_path) }}" controls style="position:absolute;inset:0;width:100%;height:100%;object-fit:contain" @if ($creative->thumbnail_path) poster="{{ asset('storage/'.$creative->thumbnail_path) }}" @endif></video>
                                @else
                                    <img src="{{ asset('storage/'.$creative->asset_path) }}" 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' : 'hourglass-split' }}"></i>
                                    <small>{{ $creative->status === 'failed' ? 'Generation failed' : 'Generating…' }}</small>
                                </div>
                            @endif
                        </div>
                    </div>
                    @if ($creative->status === 'completed' && $creative->asset_path)
                        <div class="mb-preview-bar">
                            <span class="mb-cell-meta">{{ ucfirst($creative->type) }} · {{ $creative->ratio }}</span>
                            <a href="{{ asset('storage/'.$creative->asset_path) }}" 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"><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>
                                <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 === '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 ($creative->style)
                                    <div class="mb-dl-row">
                                        <dt class="mb-dl-key">Style</dt>
                                        <dd class="mb-dl-val">{{ $creative->style }}</dd>
                                    </div>
                                @endif
                                <div class="mb-dl-row">
                                    <dt class="mb-dl-key">Created</dt>
                                    <dd class="mb-dl-val" title="{{ $creative->created_at }}">{{ $creative->created_at->diffForHumans() }}</dd>
                                </div>
                                <div class="mb-dl-row">
                                    <dt class="mb-dl-key">Updated</dt>
                                    <dd class="mb-dl-val" title="{{ $creative->updated_at }}">{{ $creative->updated_at->diffForHumans() }}</dd>
                                </div>
                            </dl>
                        </div>
                    </div>

                    @if ($creative->type === 'video')
                        @if ($creative->script)
                            <div class="mb-panel">
                                <div class="mb-panel-head"><i class="bi bi-chat-left-text"></i>Script</div>
                                <div class="mb-panel-body">
                                    @foreach ($creative->script as $line)
                                        <div class="mb-prompt mb-2">
                                            @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>
                            </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>

    @push('scripts')
        <script>
            document.addEventListener('click', function (e) {
                var btn = e.target.closest('[data-act="copy-link"]');
                if (!btn) return;
                navigator.clipboard.writeText(window.location.href).then(function () {
                    var toast = document.getElementById('mb-toast');
                    if (!toast) return;
                    toast.textContent = 'Link copied';
                    toast.classList.add('is-on');
                    clearTimeout(toast._t);
                    toast._t = setTimeout(function () { toast.classList.remove('is-on'); }, 1900);
                });
            });
        </script>
    @endpush
</x-mb-layout>
