@extends('layouts.app')

@section('title', 'Advertiser Dashboard')

@section('content')

<div class="nx-wrap" style="padding-top:24px; padding-bottom:48px;">

    {{-- Page header --}}
    <div style="display:flex; justify-content:space-between; align-items:center;
                flex-wrap:wrap; gap:12px; margin-bottom:24px;">
        <div>
            <h2 style="margin:0 0 6px;">Welcome back, {{ auth()->user()->name }}</h2>
            <p class="nx-muted" style="margin:0;">
                Track your bookings, creatives, proof and reports from here.
            </p>
        </div>
        <div style="display:flex; gap:10px; flex-wrap:wrap;">
            <a class="nx-btn" href="{{ route('explore') }}">Explore inventory</a>
            <a class="nx-btn nx-btn-primary" href="{{ route('checkout') }}">View cart</a>
        </div>
    </div>

    {{-- ============================================================
         KPI TILES
    ============================================================ --}}
    <div class="nx-kpi-grid" style="margin-bottom:24px;">
        <div class="nx-tile">
            <strong>{{ $stats['total_bookings'] }}</strong>
            <span>Total bookings</span>
        </div>
        <div class="nx-tile">
            <strong>{{ $stats['active_bookings'] }}</strong>
            <span>Active now</span>
        </div>
        <div class="nx-tile">
            <strong>KES {{ number_format($stats['total_spent'], 0) }}</strong>
            <span>Total spent</span>
        </div>
        <div class="nx-tile">
            <strong>{{ $stats['open_disputes'] }}</strong>
            <span>Open disputes</span>
        </div>
    </div>

    <div class="nx-grid-2" style="gap:16px; align-items:start;">

        {{-- ============================================================
             LEFT COLUMN
        ============================================================ --}}
        <div>

            {{-- Active bookings --}}
            <div class="nx-card" style="margin-bottom:16px;">
                <div style="display:flex; justify-content:space-between;
                            align-items:center; margin-bottom:14px;">
                    <h3 style="margin:0;">Active bookings</h3>
                    <span class="nx-badge nx-badge-good">
                        {{ $activeBookings->count() }} active
                    </span>
                </div>

                @forelse($activeBookings as $booking)
                <div class="nx-item">
                    <div style="display:flex; justify-content:space-between;
                                align-items:flex-start; flex-wrap:wrap; gap:8px;">
                        <div>
                            <div style="font-weight:700; margin-bottom:4px;">
                                {{ $booking->campaign_name ?? $booking->reference }}
                            </div>
                            <div class="nx-muted" style="font-size:13px;">
                                {{ $booking->reference }} ·
                                {{ $booking->items->count() }}
                                placement{{ $booking->items->count() !== 1 ? 's' : '' }} ·
                                {{ $booking->getFormattedTotal() }}
                            </div>
                        </div>
                        <span class="nx-badge {{ $booking->getStatusBadgeClass() }}">
                            {{ strtoupper($booking->status) }}
                        </span>
                    </div>

                    {{-- Booking items --}}
                    @foreach($booking->items as $item)
                    <div style="margin-top:10px; padding:10px; border-radius:12px;
                                border:1px solid rgba(255,255,255,.06);
                                background:rgba(0,0,0,.12);">
                        <div style="display:flex; justify-content:space-between;
                                    flex-wrap:wrap; gap:8px;">
                            <div style="font-size:13px; font-weight:600;">
                                {{ $item->placement->name }}
                            </div>
                            <span class="nx-badge {{ $item->getStatusBadgeClass() }}"
                                  style="font-size:11px;">
                                {{ strtoupper(str_replace('_',' ',$item->status)) }}
                            </span>
                        </div>
                        <div class="nx-muted" style="font-size:12px; margin-top:4px;">
                            {{ $item->start_date->format('d M') }} –
                            {{ $item->end_date->format('d M Y') }}
                            @if($item->isProofPending())
                                · Proof due: {{ $item->getProofTimeRemaining() }}
                            @endif
                        </div>
                    </div>
                    @endforeach

                    <div style="display:flex; gap:8px; flex-wrap:wrap; margin-top:12px;">
                        <a class="nx-btn nx-btn-sm"
                           href="{{ route('advertiser.booking.show', $booking) }}">
                            View details
                        </a>
                        @if($booking->items->where('status','proof_pending')->count())
                            <span class="nx-badge nx-badge-warn" style="font-size:11px;">
                                ⏱ Proof pending
                            </span>
                        @endif
                        @if($booking->items->where('status','creative_pending')->count())
                            <span class="nx-badge nx-badge-warn" style="font-size:11px;">
                                🎨 Creative needed
                            </span>
                        @endif
                    </div>
                </div>
                @empty
                <div style="text-align:center; padding:32px 0;">
                    <div style="font-size:28px; margin-bottom:10px;">📋</div>
                    <p class="nx-muted" style="margin:0 0 14px;">No active bookings yet.</p>
                    <a class="nx-btn nx-btn-primary" href="{{ route('explore') }}">
                        Browse inventory
                    </a>
                </div>
                @endforelse
            </div>

            {{-- Recent bookings --}}
            @if($recentBookings->count())
            <div class="nx-card">
                <h3 style="margin:0 0 14px;">Recent bookings</h3>
                @foreach($recentBookings as $booking)
                <div class="nx-item">
                    <div style="display:flex; justify-content:space-between;
                                align-items:center; flex-wrap:wrap; gap:8px;">
                        <div>
                            <div style="font-weight:700; font-size:14px;">
                                {{ $booking->campaign_name ?? $booking->reference }}
                            </div>
                            <div class="nx-muted" style="font-size:12px; margin-top:3px;">
                                {{ $booking->reference }} ·
                                {{ $booking->getFormattedTotal() }} ·
                                {{ $booking->created_at->format('d M Y') }}
                            </div>
                        </div>
                        <span class="nx-badge {{ $booking->getStatusBadgeClass() }}">
                            {{ strtoupper($booking->status) }}
                        </span>
                    </div>
                    <div style="margin-top:8px;">
                        <a class="nx-btn nx-btn-sm"
                           href="{{ route('advertiser.booking.show', $booking) }}">
                            View →
                        </a>
                    </div>
                </div>
                @endforeach
            </div>
            @endif

        </div>

        {{-- ============================================================
             RIGHT COLUMN
        ============================================================ --}}
        <div>

            {{-- Open disputes --}}
            @if($openDisputes->count())
            <div class="nx-card" style="margin-bottom:16px;
                 border-color:rgba(251,191,36,.25); background:rgba(251,191,36,.04);">
                <div style="display:flex; justify-content:space-between;
                            align-items:center; margin-bottom:14px;">
                    <h3 style="margin:0;">Open disputes</h3>
                    <span class="nx-badge nx-badge-warn">
                        {{ $openDisputes->count() }} open
                    </span>
                </div>

                @foreach($openDisputes as $dispute)
                <div class="nx-item">
                    <div style="display:flex; justify-content:space-between;
                                flex-wrap:wrap; gap:8px;">
                        <div>
                            <div style="font-weight:700; font-size:14px;">
                                {{ $dispute->reference }}
                            </div>
                            <div class="nx-muted" style="font-size:12px; margin-top:3px;">
                                {{ $dispute->getReasonLabel() }} ·
                                {{ $dispute->bookingItem->placement->name ?? 'N/A' }}
                            </div>
                        </div>
                        <span class="nx-badge {{ $dispute->getStatusBadgeClass() }}">
                            {{ strtoupper(str_replace('_',' ',$dispute->status)) }}
                        </span>
                    </div>
                </div>
                @endforeach

                <div style="margin-top:12px;">
                    <a class="nx-btn nx-btn-sm nx-btn-warn"
                       href="{{ route('disputes.index') }}">
                        View all disputes →
                    </a>
                </div>
            </div>
            @endif

            {{-- Proof pending alerts --}}
            @if($pendingProofs->count())
            <div class="nx-card" style="margin-bottom:16px;
                 border-color:rgba(124,92,255,.25); background:rgba(124,92,255,.04);">
                <div style="display:flex; justify-content:space-between;
                            align-items:center; margin-bottom:14px;">
                    <h3 style="margin:0;">Awaiting proof</h3>
                    <span class="nx-badge nx-badge-accent">
                        {{ $pendingProofs->count() }} bookings
                    </span>
                </div>
                @foreach($pendingProofs as $booking)
                    @foreach($booking->items->where('status','proof_pending') as $item)
                    <div class="nx-item">
                        <div style="font-weight:700; font-size:14px; margin-bottom:4px;">
                            {{ $item->placement->name }}
                        </div>
                        <div class="nx-muted" style="font-size:12px;">
                            {{ $booking->reference }} ·
                            Proof due: {{ $item->getProofTimeRemaining() }}
                        </div>
                    </div>
                    @endforeach
                @endforeach
            </div>
            @endif

            {{-- Quick actions --}}
            <div class="nx-card">
                <h3 style="margin:0 0 14px;">Quick actions</h3>
                <div style="display:flex; flex-direction:column; gap:8px;">
                    <a class="nx-btn" href="{{ route('explore') }}"
                       style="justify-content:flex-start;">
                        🔍 &nbsp; Explore & book inventory
                    </a>
                    <a class="nx-btn" href="{{ route('checkout') }}"
                       style="justify-content:flex-start;">
                        🛒 &nbsp; View cart & checkout
                    </a>
                    <a class="nx-btn" href="{{ route('disputes.index') }}"
                       style="justify-content:flex-start;">
                        ⚑ &nbsp; Dispute center
                    </a>
                    <a class="nx-btn" href="{{ route('profile.edit') }}"
                       style="justify-content:flex-start;">
                        👤 &nbsp; Edit profile
                    </a>
                </div>

                <div class="nx-divider"></div>

                <div class="nx-muted" style="font-size:12px; line-height:1.6;">
                    <strong style="color:var(--nx-text);">Booking flow:</strong>
                    Explore → Add to cart → Pay → Upload creative →
                    Owner deploys → Proof submitted → Report generated.
                </div>
            </div>

        </div>
    </div>
</div>

@endsection