@extends('layouts.app')

@section('title', 'Content Board')
@section('page-title', 'Content Board 🎬')
@section('page-subtitle', 'Drag cards between columns to update status')

@section('content')
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-5">
        <div class="flex gap-2 flex-wrap">
            <a href="{{ route('content.create') }}" class="btn-sakura text-sm shrink-0">＋ New Brief</a>
            @foreach(['instagram', 'tiktok', 'youtube'] as $p)
                <a href="{{ request()->fullUrlWithQuery(['platform' => $p]) }}"
                    class="px-3 py-1.5 rounded-full text-xs font-semibold transition-colors
                              {{ request('platform') === $p ? 'text-white' : 'bg-white text-gray-500 hover:bg-pink-50 border border-pink-100' }}"
                    style="{{ request('platform') === $p ? 'background:#FFB7C5' : '' }}">
                    {{ ['instagram' => '📸', 'tiktok' => '🎵', 'youtube' => '▶️'][$p] }} {{ ucfirst($p) }}
                </a>
            @endforeach
            @if(request('platform'))
                <a href="{{ route('content.index') }}"
                    class="px-3 py-1.5 rounded-full text-xs text-gray-400 hover:text-gray-600 border border-gray-200 bg-white">✕
                    Clear</a>
            @endif
        </div>

    </div>

    {{--
    Mobile : grid grid-cols-1 → columns stack vertically, each full width
    Desktop : flex flex-nowrap → columns in a single horizontal row, each flex-1
    x-sort:group is on the INNER items div (not the column div) to avoid
    SortableJS mutating the outer layout container.
    --}}
    <div class="grid grid-cols-1 gap-4 lg:flex lg:flex-nowrap lg:gap-4" x-data="kanban()">
        @foreach($columns as $col)
            @php $status = $col['status']; @endphp

            {{-- Column shell — layout only, NOT the sort target --}}
            <div class="{{ $status->colorClass() }} flex flex-col w-full lg:flex-1 lg:min-w-36 rounded-2xl p-3"
                data-status="{{ $status->value }}">

                {{-- Column header --}}
                <div class="flex items-center justify-between mb-3">
                    <div class="flex items-center gap-1.5">
                        <span class="text-base">{{ $status->icon() }}</span>
                        <span class="font-bold text-gray-700 text-sm">{{ $status->label() }}</span>
                    </div>
                    <span
                        class="text-xs bg-white rounded-full px-2 py-0.5 font-bold text-gray-500 shadow-sm">{{ count($col['items']) }}</span>
                </div>

                {{-- Sortable items container --}}
                <div class="flex flex-col gap-2 flex-1 min-h-12" x-sort:group="kanban"
                    @sort="moved($event, '{{ $status->value }}')" data-col-status="{{ $status->value }}">

                    @foreach($col['items'] as $brief)
                        <div class="bg-white rounded-2xl p-3 shadow-sm border border-pink-50 select-none
                                            cursor-grab active:cursor-grabbing hover:shadow-md transition-shadow"
                            x-sort:item="{{ $brief->id }}" data-id="{{ $brief->id }}">
                            <div class="flex items-start gap-2 mb-1.5">
                                <span class="text-sm shrink-0">{{ $brief->platform_icon }}</span>
                                <a href="{{ route('content.show', $brief) }}"
                                    class="font-semibold text-gray-800 text-xs leading-tight hover:text-pink-500 line-clamp-2 flex-1">
                                    {{ $brief->title }}
                                </a>
                            </div>
                            @if($brief->client)
                                <div class="text-xs text-gray-400 mb-1">👥 {{ $brief->client->name }}</div>
                            @endif
                            @if($brief->target_date)
                                <div
                                    class="text-xs {{ $brief->target_date->isPast() && $brief->status->value !== 'posted' ? 'text-red-400 font-bold' : 'text-gray-400' }}">
                                    📅 {{ $brief->target_date->format('d M') }}
                                </div>
                            @endif
                            <div class="flex justify-end mt-1.5">
                                <a href="{{ route('content.edit', $brief) }}"
                                    class="text-xs text-gray-400 hover:text-pink-500">Edit</a>
                            </div>
                        </div>
                    @endforeach
                </div>

                {{-- Add button --}}
                <a href="{{ route('content.create') }}?status={{ $status->value }}"
                    class="mt-3 text-xs text-gray-400 hover:text-pink-500 text-center py-2
                              border-2 border-dashed border-pink-100 rounded-2xl hover:border-pink-300 transition-colors block">
                    ＋ Add
                </a>
            </div>
        @endforeach
    </div>

    @push('scripts')
        <script>
            function kanban() {
                return {
                    moved(event, targetStatus) {
                        const id = event.item?.dataset?.id;
                        if (!id) return;
                        fetch(`/content/${id}/status`, {
                            method: 'PATCH',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                            },
                            body: JSON.stringify({ status: targetStatus }),
                        }).then(r => { if (r.ok) window.KolManager.notify('Status updated! 🎬'); });
                    },
                };
            }
        </script>
    @endpush
@endsection