@extends('layouts.app')

@section('title', $brief->title)
@section('page-title', $brief->title)
@section('page-subtitle', $brief->platform_icon . ' ' . ucfirst($brief->platform) . ' · ' . $brief->status->label())

@section('content')
<div class="max-w-3xl mx-auto">
    <div class="flex gap-3 mb-5">
        <a href="{{ route('content.edit', $brief) }}" class="btn-sakura">Edit</a>
        <form action="{{ route('content.destroy', $brief) }}" method="POST" onsubmit="return confirm('Delete this brief?')">
            @csrf @method('DELETE')
            <button class="btn btn-ghost rounded-full text-error">Delete</button>
        </form>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-5">
        {{-- Main Brief --}}
        <div class="lg:col-span-2 space-y-4">
            {{-- Storyline --}}
            @foreach([['🎣', 'Hook', $brief->hook], ['📖', 'Body', $brief->body], ['📣', 'CTA', $brief->cta], ['📝', 'Script', $brief->script]] as [$icon, $label, $value])
                @if($value)
                    <div class="cat-card p-5">
                        <div class="flex items-center gap-2 mb-2">
                            <span class="text-lg">{{ $icon }}</span>
                            <h3 class="font-bold text-gray-700">{{ $label }}</h3>
                        </div>
                        <p class="text-sm text-gray-600 whitespace-pre-wrap leading-relaxed">{{ $value }}</p>
                    </div>
                @endif
            @endforeach

            @if($brief->caption)
                <div class="cat-card p-5">
                    <h3 class="font-bold text-gray-700 mb-2">Caption</h3>
                    <p class="text-sm text-gray-600 whitespace-pre-wrap">{{ $brief->caption }}</p>
                    @if($brief->hashtags)
                        <div class="mt-2 text-xs text-pink-500">{{ $brief->hashtags }}</div>
                    @endif
                </div>
            @endif
        </div>

        {{-- Sidebar --}}
        <div class="space-y-4">
            <div class="cat-card p-5 space-y-3 text-sm">
                <div class="flex justify-between">
                    <span class="text-gray-500">Platform</span>
                    <span class="font-medium">{{ $brief->platform_icon }} {{ ucfirst($brief->platform) }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-500">Type</span>
                    <span class="font-medium">{{ $brief->content_type ?? '—' }}</span>
                </div>
                <div class="flex justify-between items-center">
                    <span class="text-gray-500">Status</span>
                    <span class="badge {{ $brief->status->badgeClass() }}">{{ $brief->status->label() }}</span>
                </div>
                @if($brief->client)
                    <div class="flex justify-between">
                        <span class="text-gray-500">Client</span>
                        <a href="{{ route('clients.show', $brief->client) }}" class="font-medium text-pink-500 hover:underline">{{ $brief->client->name }}</a>
                    </div>
                @endif
                @if($brief->target_date)
                    <div class="flex justify-between">
                        <span class="text-gray-500">Target</span>
                        <span class="font-medium">{{ $brief->target_date->format('d M Y') }}</span>
                    </div>
                @endif
                @if($brief->posted_date)
                    <div class="flex justify-between">
                        <span class="text-gray-500">Posted</span>
                        <span class="font-medium text-green-600">{{ $brief->posted_date->format('d M Y') }}</span>
                    </div>
                @endif
                @if($brief->posted_url)
                    <div>
                        <a href="{{ $brief->posted_url }}" target="_blank" class="btn-sakura text-xs px-4 py-1.5 w-full text-center block">🔗 View Post</a>
                    </div>
                @endif
            </div>

            @if($brief->notes)
                <div class="cat-card p-5">
                    <h4 class="font-bold text-gray-600 text-xs uppercase mb-2">Notes</h4>
                    <p class="text-sm text-gray-500">{{ $brief->notes }}</p>
                </div>
            @endif
        </div>
    </div>
</div>
@endsection