@extends('layouts.app')

@section('content')
<div class="space-y-6">

    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 pb-2 border-b border-slate-800">
        <div>
            <h1 class="text-2xl font-black text-white">Content Calendar</h1>
            <p class="text-xs text-slate-400 mt-1">Scheduled video publications in East Africa Time (Africa/Nairobi UTC+3).</p>
        </div>

        <!-- Month Navigation -->
        <div class="flex items-center gap-3">
            <a href="{{ route('calendar.index', ['month' => $currentMonth->copy()->subMonth()->format('Y-m')]) }}" class="btn-secondary text-xs py-1.5 px-3">
                &larr; Prev
            </a>

            <span class="text-sm font-bold text-slate-100 font-mono">
                {{ $currentMonth->format('F Y') }}
            </span>

            <a href="{{ route('calendar.index', ['month' => $currentMonth->copy()->addMonth()->format('Y-m')]) }}" class="btn-secondary text-xs py-1.5 px-3">
                Next &rarr;
            </a>
        </div>
    </div>

    <!-- Calendar Grid -->
    <div class="studio-card overflow-hidden">
        <!-- Weekday header -->
        <div class="grid grid-cols-7 bg-slate-900 border-b border-slate-800 text-center text-xs font-mono text-slate-400 py-2.5">
            <div>Mon</div>
            <div>Tue</div>
            <div>Wed</div>
            <div>Thu</div>
            <div>Fri</div>
            <div>Sat</div>
            <div>Sun</div>
        </div>

        @php
            $startDay = $currentMonth->copy()->startOfMonth()->startOfWeek();
            $endDay = $currentMonth->copy()->endOfMonth()->endOfWeek();
            $dayIterator = $startDay->copy();
        @endphp

        <div class="grid grid-cols-7 divide-x divide-y divide-slate-800/80">
            @while($dayIterator <= $endDay)
                @php
                    $dateKey = $dayIterator->format('Y-m-d');
                    $isCurrentMonth = $dayIterator->month === $currentMonth->month;
                    $isToday = $dayIterator->isToday();
                    $dayPosts = $posts[$dateKey] ?? collect();
                @endphp

                <div class="min-h-[110px] p-2 flex flex-col justify-between {{ $isCurrentMonth ? 'bg-[#121824]' : 'bg-[#0B0F17]/60 text-slate-600' }} {{ $isToday ? 'ring-1 ring-amber-500/50' : '' }}">
                    <div class="flex items-center justify-between text-[11px] font-mono">
                        <span class="{{ $isToday ? 'text-amber-400 font-bold' : ($isCurrentMonth ? 'text-slate-300' : 'text-slate-600') }}">
                            {{ $dayIterator->day }}
                        </span>
                        @if($isToday)
                            <span class="text-[9px] px-1 rounded bg-amber-500/20 text-amber-400">TODAY</span>
                        @endif
                    </div>

                    <div class="space-y-1 mt-1 flex-1 overflow-y-auto max-h-[85px]">
                        @foreach($dayPosts as $p)
                            <a href="{{ route('posts.show', $p) }}"
                                class="block p-1 rounded text-[10px] truncate border font-medium
                                {{ $p->status === 'published' ? 'bg-emerald-950/70 border-emerald-500/30 text-emerald-300' : 'bg-slate-900/90 border-amber-500/30 text-amber-300 hover:border-amber-400' }}">
                                {{ $p->scheduled_at->format('H:i') }} &bull; {{ $p->title }}
                            </a>
                        @endforeach
                    </div>
                </div>

                @php $dayIterator->addDay(); @endphp
            @endwhile
        </div>
    </div>

</div>
@endsection