@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">
        @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>
    <a href="{{ route('content.create') }}" class="btn-sakura text-sm shrink-0">＋ New Brief</a>
</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