@extends('layouts.app')

@section('title', 'Dashboard')
@section('page-title', 'Dashboard 🐾')
@section('page-subtitle', today()->format('l, d F Y'))

@section('content')

    {{-- ── Today's Schedule (TOP) ───────────────────────────────── --}}
    <div class="cat-card p-4 lg:p-6 mb-4">
        <div class="flex items-center justify-between mb-4">
            <h2 class="text-sm lg:text-base font-bold text-gray-700 flex items-center gap-2">
                <span>📅</span> Today's Schedule
            </h2>
            <a href="{{ route('schedule.index') }}" class="text-xs text-pink-500 hover:underline font-medium">View all →</a>
        </div>

        @forelse($todayActivities as $activity)
            <div class="flex items-start gap-3 py-3 border-b border-pink-50 last:border-0">
                <div class="w-1 h-10 rounded-full shrink-0 mt-0.5" style="background-color: {{ $activity['color'] }};"></div>
                <div class="flex-1 min-w-0">
                    <div class="flex items-center gap-1.5 flex-wrap">
                        @if($activity['priority'])<span class="text-amber-400 text-xs">⭐</span>@endif
                        <span class="text-base shrink-0">{{ $activity['icon'] }}</span>
                        <span class="font-semibold text-gray-800 text-sm truncate">{{ $activity['title'] }}</span>
                        <span
                            class="text-xs px-2 py-0.5 rounded-full bg-pink-50 text-pink-600 shrink-0 capitalize">{{ $activity['label'] }}</span>
                    </div>
                    <div class="text-xs text-gray-500 mt-0.5">{{ $activity['subtitle'] }}</div>
                </div>
                <span class="badge {{ $activity['badge_class'] }} shrink-0 text-xs">{{ $activity['badge'] }}</span>
            </div>
        @empty
            <div class="text-center py-6 text-gray-400">
                <span class="text-4xl block mb-1">😸</span>
                <p class="text-sm">No activities today — enjoy your day!</p>
                <div class="flex gap-2 justify-center mt-3">
                    <a href="{{ route('schedule.index') }}" class="text-xs text-pink-500 hover:underline">Add event</a>
                    <span class="text-xs text-gray-300">·</span>
                    <a href="{{ route('invoices.create') }}" class="text-xs text-pink-500 hover:underline">Create invoice</a>
                    <span class="text-xs text-gray-300">·</span>
                    <a href="{{ route('content.create') }}" class="text-xs text-pink-500 hover:underline">New brief</a>
                </div>
            </div>
        @endforelse
    </div>

    {{-- ── Stat Pills (BELOW schedule) ─────────────────────────── --}}
    <div class="grid grid-cols-2 sm:grid-cols-4 gap-3 mb-4">
        <a href="{{ route('clients.index') }}" class="stat-pill hover:shadow-md transition-shadow">
            <div class="text-2xl lg:text-3xl font-extrabold text-pink-500">{{ $stats['total_clients'] }}</div>
            <div class="text-xs lg:text-sm font-semibold text-gray-600">Total Clients</div>
            <div class="text-xs text-gray-400">{{ $stats['active_clients'] }} active</div>
        </a>
        <a href="{{ route('schedule.index') }}" class="stat-pill hover:shadow-md transition-shadow">
            <div class="text-2xl lg:text-3xl font-extrabold text-purple-500">{{ $stats['upcoming_events'] }}</div>
            <div class="text-xs lg:text-sm font-semibold text-gray-600">Upcoming Events</div>
            <div class="text-xs text-gray-400">Next 3 months</div>
        </a>
        <a href="{{ route('invoices.index') }}" class="stat-pill hover:shadow-md transition-shadow">
            <div class="text-2xl lg:text-3xl font-extrabold text-amber-500">{{ $stats['pending_invoices'] }}</div>
            <div class="text-xs lg:text-sm font-semibold text-gray-600">Pending Invoices</div>
            <div class="text-xs text-gray-400">Awaiting payment</div>
        </a>
        <div class="stat-pill">
            <div class="text-lg lg:text-2xl font-extrabold text-emerald-500 leading-tight">
                Rp {{ number_format($stats['total_revenue'], 0, ',', '.') }}
            </div>
            <div class="text-xs lg:text-sm font-semibold text-gray-600">Revenue (Paid)</div>
            <div class="text-xs text-gray-400">All time</div>
        </div>
    </div>

    {{-- ── Secondary Stats ──────────────────────────────────────── --}}
    <div class="grid grid-cols-3 gap-3 mb-4">
        <a href="{{ route('client-categories.index') }}" class="stat-pill hover:shadow-md transition-shadow">
            <div class="text-2xl font-extrabold text-indigo-500">{{ $stats['total_categories'] }}</div>
            <div class="text-xs font-semibold text-gray-600">Categories</div>
            <div class="text-xs text-gray-400">{{ $stats['total_subcategories'] }} subcategories</div>
        </a>
        <a href="{{ route('contracts.index') }}" class="stat-pill hover:shadow-md transition-shadow">
            <div class="text-2xl font-extrabold text-rose-500">{{ $stats['active_contracts'] }}</div>
            <div class="text-xs font-semibold text-gray-600">Brand Contracts</div>
            <div class="text-xs text-gray-400">{{ $stats['total_contracts'] }} total</div>
        </a>
        <a href="{{ route('files.index') }}" class="stat-pill hover:shadow-md transition-shadow">
            <div class="text-2xl font-extrabold text-teal-500">{{ $stats['total_files'] }}</div>
            <div class="text-xs font-semibold text-gray-600">Files Saved</div>
            <div class="text-xs text-gray-400">In file manager</div>
        </a>
    </div>

    {{-- ── Bottom Row ───────────────────────────────────────────── --}}
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
        <!--
        {{-- Social Stats --}}
        <div class="cat-card p-4 lg:p-5">
            <h2 class="text-sm font-bold text-gray-700 flex items-center gap-2 mb-3">
                <span>📱</span> Social Snapshot
            </h2>
            @forelse($socialStats as $stat)
                <div class="flex items-center justify-between py-2 border-b border-pink-50 last:border-0">
                    <div class="flex items-center gap-2">
                        <span class="text-xl">{{ $stat->platform_icon }}</span>
                        <div>
                            <div class="text-xs font-semibold text-gray-700">{{ ucfirst($stat->platform) }}</div>
                            <div class="text-xs text-gray-400">{{ $stat->handle ?? 'Not set' }}</div>
                        </div>
                    </div>
                    <div class="text-right">
                        <div class="font-bold text-gray-800 text-sm">{{ $stat->formatted_followers }}</div>
                        <div class="text-xs text-gray-400">{{ $stat->engagement_rate }}% eng.</div>
                    </div>
                </div>
            @empty
                <p class="text-xs text-gray-400 text-center py-3">
                    No stats yet.
                    <a href="{{ route('social-hub.index') }}" class="text-pink-500 hover:underline">Add stats →</a>
                </p>
            @endforelse
        </div>
    -->
        {{-- Recent Invoices --}}
        <div class="cat-card p-4 lg:p-5">
            <div class="flex items-center justify-between mb-3">
                <h2 class="text-sm font-bold text-gray-700 flex items-center gap-2"><span>🧾</span> Recent Invoices</h2>
                <a href="{{ route('invoices.index') }}" class="text-xs text-pink-500 hover:underline">All →</a>
            </div>
            @forelse($latestInvoices as $invoice)
                <div class="flex items-center justify-between py-2 border-b border-pink-50 last:border-0">
                    <div class="min-w-0">
                        <div class="text-xs font-semibold text-gray-700 truncate">{{ $invoice->invoice_number }}</div>
                        <div class="text-xs text-gray-400 truncate">{{ $invoice->client?->name ?? 'No client' }}</div>
                    </div>
                    <div class="text-right shrink-0 ml-2">
                        <div class="text-xs font-bold text-gray-700">{{ $invoice->formatted_total }}</div>
                        <span class="badge {{ $invoice->status->badgeClass() }} text-xs">{{ $invoice->status->label() }}</span>
                    </div>
                </div>
            @empty
                <p class="text-xs text-gray-400 text-center py-3">No invoices yet.</p>
            @endforelse
        </div>

        {{-- Content Progress --}}
        <div class="cat-card p-4 lg:p-5">
            <div class="flex items-center justify-between mb-3">
                <h2 class="text-sm font-bold text-gray-700 flex items-center gap-2"><span>🎬</span> Content Pipeline</h2>
                <a href="{{ route('content.index') }}" class="text-xs text-pink-500 hover:underline">Board →</a>
            </div>
            <div class="flex items-center gap-3 py-3">
                <span class="text-3xl font-extrabold text-purple-500">{{ $stats['content_in_progress'] }}</span>
                <span class="text-sm text-gray-600">pieces currently in progress</span>
            </div>
            <a href="{{ route('content.create') }}" class="btn-sakura text-xs w-full text-center mt-2">＋ New Brief</a>
        </div>
    </div>

    @include('layouts.fab')

@endsection