{{-- resources/views/admin/analytics.blade.php --}}
@extends('admin.layouts.app')

@section('title', 'Analytics')
@section('page_title', 'Platform Analytics')
@section('breadcrumb', 'Platform-wide metrics and trends')

@section('content')

@php
    $snapshot = $latest?->snapshot_date?->format('d M Y') ?? 'No snapshot yet';
@endphp

{{-- Snapshot notice --}}
<div style="font-size:.75rem;color:var(--muted);margin-bottom:16px;">
    <i class="bi bi-clock me-1"></i>
    Last snapshot: <strong>{{ $snapshot }}</strong>
    · Live property counts shown in overview
</div>

{{-- Overview Stat Cards --}}
<div class="row g-3 mb-4">
    <div class="col-sm-6 col-xl-3">
        <div class="stat-card">
            <div class="stat-icon clay"><i class="bi bi-building"></i></div>
            <div>
                <div class="stat-value">{{ number_format($overview['total_properties']) }}</div>
                <div class="stat-label">Total Properties</div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-xl-3">
        <div class="stat-card">
            <div class="stat-icon success"><i class="bi bi-check-circle"></i></div>
            <div>
                <div class="stat-value">{{ number_format($overview['active']) }}</div>
                <div class="stat-label">Approved & Active</div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-xl-3">
        <div class="stat-card">
            <div class="stat-icon info"><i class="bi bi-clock-history"></i></div>
            <div>
                <div class="stat-value">{{ number_format($overview['trialing']) }}</div>
                <div class="stat-label">On Trial</div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-xl-3">
        <div class="stat-card">
            <div class="stat-icon danger"><i class="bi bi-slash-circle"></i></div>
            <div>
                <div class="stat-value">{{ number_format($overview['suspended']) }}</div>
                <div class="stat-label">Suspended</div>
            </div>
        </div>
    </div>
</div>

{{-- Latest snapshot revenue cards --}}
@if($latest)
    <div class="row g-3 mb-4">
        <div class="col-sm-6 col-xl-3">
            <div class="stat-card">
                <div class="stat-icon clay"><i class="bi bi-calendar-plus"></i></div>
                <div>
                    <div class="stat-value">{{ number_format($latest->new_registrations) }}</div>
                    <div class="stat-label">New Registrations</div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-xl-3">
            <div class="stat-card">
                <div class="stat-icon success"><i class="bi bi-calendar-check"></i></div>
                <div>
                    <div class="stat-value">{{ number_format($latest->total_reservations) }}</div>
                    <div class="stat-label">Total Reservations</div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-xl-3">
            <div class="stat-card">
                <div class="stat-icon clay"><i class="bi bi-currency-dollar"></i></div>
                <div>
                    <div class="stat-value">
                        ${{ number_format($latest->total_revenue_usd, 0) }}
                    </div>
                    <div class="stat-label">Total Revenue (USD)</div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-xl-3">
            <div class="stat-card">
                <div class="stat-icon warning"><i class="bi bi-percent"></i></div>
                <div>
                    <div class="stat-value">
                        ${{ number_format($latest->total_commission_usd, 0) }}
                    </div>
                    <div class="stat-label">Commission Earned (USD)</div>
                </div>
            </div>
        </div>
    </div>
@endif

<div class="row g-3">

    {{-- 30-day history chart --}}
    <div class="col-xl-8">
        <div class="card mb-3">
            <div class="card-header">
                <span class="card-title">
                    <i class="bi bi-bar-chart me-2" style="color:var(--clay)"></i>
                    Properties & Registrations — Last 30 Days
                </span>
            </div>
            <div class="card-body">
                @if($history->isEmpty())
                    <div class="text-center py-5" style="color:var(--muted);font-size:.82rem;">
                        <i class="bi bi-bar-chart"
                           style="font-size:2rem;display:block;margin-bottom:8px;"></i>
                        No snapshot data yet
                    </div>
                @else
                    <canvas id="historyChart" height="100"></canvas>
                @endif
            </div>
        </div>

        {{-- Revenue trend --}}
        @if($history->isNotEmpty())
            <div class="card mb-3">
                <div class="card-header">
                    <span class="card-title">
                        <i class="bi bi-graph-up me-2" style="color:var(--clay)"></i>
                        Revenue & Commission — Last 30 Days
                    </span>
                </div>
                <div class="card-body">
                    <canvas id="revenueChart" height="100"></canvas>
                </div>
            </div>
        @endif
    </div>

    {{-- Right column breakdowns --}}
    <div class="col-xl-4">

        {{-- By Country (live) --}}
        <div class="card mb-3">
            <div class="card-header">
                <span class="card-title">
                    <i class="bi bi-globe me-2" style="color:var(--clay)"></i>
                    By Country
                </span>
                <span style="font-size:.72rem;color:var(--muted);">Live</span>
            </div>
            <div class="card-body" style="padding:0;">
                @if($overview['by_country']->isEmpty())
                    <div class="text-center py-4"
                         style="font-size:.8rem;color:var(--muted);">No data</div>
                @else
                    @php
                        $maxCountry = $overview['by_country']->max();
                    @endphp
                    @foreach($overview['by_country']->sortDesc()->take(10) as $country => $count)
                        <div style="padding:10px 18px;border-bottom:1px solid var(--border);">
                            <div style="display:flex;justify-content:space-between;
                                        align-items:center;margin-bottom:5px;">
                                <span style="font-size:.8rem;font-weight:500;">
                                    {{ $country ?: 'Unknown' }}
                                </span>
                                <span style="font-size:.78rem;font-weight:600;color:var(--clay);">
                                    {{ $count }}
                                </span>
                            </div>
                            <div style="height:4px;background:var(--bg);border-radius:2px;">
                                <div style="height:4px;background:var(--clay);border-radius:2px;
                                            width:{{ $maxCountry > 0 ? round(($count / $maxCountry) * 100) : 0 }}%;
                                            opacity:.6;"></div>
                            </div>
                        </div>
                    @endforeach
                @endif
            </div>
        </div>

        {{-- By Property Type (live) --}}
        <div class="card mb-3">
            <div class="card-header">
                <span class="card-title">
                    <i class="bi bi-house me-2" style="color:var(--clay)"></i>
                    By Property Type
                </span>
                <span style="font-size:.72rem;color:var(--muted);">Live</span>
            </div>
            <div class="card-body" style="padding:0;">
                @if($overview['by_type']->isEmpty())
                    <div class="text-center py-4"
                         style="font-size:.8rem;color:var(--muted);">No data</div>
                @else
                    @php $maxType = $overview['by_type']->max(); @endphp
                    @foreach($overview['by_type']->sortDesc() as $type => $count)
                        <div style="padding:10px 18px;border-bottom:1px solid var(--border);">
                            <div style="display:flex;justify-content:space-between;
                                        align-items:center;margin-bottom:5px;">
                                <span style="font-size:.8rem;font-weight:500;">
                                    {{ ucfirst(str_replace('_', ' ', $type)) }}
                                </span>
                                <span style="font-size:.78rem;font-weight:600;color:var(--clay);">
                                    {{ $count }}
                                </span>
                            </div>
                            <div style="height:4px;background:var(--bg);border-radius:2px;">
                                <div style="height:4px;background:var(--clay);border-radius:2px;
                                            width:{{ $maxType > 0 ? round(($count / $maxType) * 100) : 0 }}%;
                                            opacity:.6;"></div>
                            </div>
                        </div>
                    @endforeach
                @endif
            </div>
        </div>

        {{-- Latest snapshot breakdown by plan --}}
        @if($latest && !empty($latest->breakdown_by_plan))
            <div class="card mb-3">
                <div class="card-header">
                    <span class="card-title">
                        <i class="bi bi-credit-card me-2" style="color:var(--clay)"></i>
                        By Plan
                    </span>
                    <span style="font-size:.72rem;color:var(--muted);">{{ $snapshot }}</span>
                </div>
                <div class="card-body" style="padding:0;">
                    @php $maxPlan = max($latest->breakdown_by_plan); @endphp
                    @foreach($latest->breakdown_by_plan as $plan => $count)
                        <div style="padding:10px 18px;border-bottom:1px solid var(--border);">
                            <div style="display:flex;justify-content:space-between;
                                        align-items:center;margin-bottom:5px;">
                                <span style="font-size:.78rem;font-weight:600;
                                             background:var(--clay-light);color:var(--clay);
                                             padding:2px 8px;border-radius:4px;">
                                    {{ strtoupper($plan) }}
                                </span>
                                <span style="font-size:.78rem;font-weight:600;">
                                    {{ $count }}
                                </span>
                            </div>
                            <div style="height:4px;background:var(--bg);border-radius:2px;">
                                <div style="height:4px;background:var(--clay);border-radius:2px;
                                            width:{{ $maxPlan > 0 ? round(($count / $maxPlan) * 100) : 0 }}%;
                                            opacity:.6;"></div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        @endif

    </div>

    {{-- Snapshot history table --}}
    @if($history->count() > 1)
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <span class="card-title">
                        <i class="bi bi-table me-2" style="color:var(--clay)"></i>
                        Snapshot History
                    </span>
                    <span style="font-size:.75rem;color:var(--muted);">
                        Last {{ $history->count() }} days
                    </span>
                </div>
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Date</th>
                                <th>Total Props</th>
                                <th>Active</th>
                                <th>Trial</th>
                                <th>New Regs</th>
                                <th>Reservations</th>
                                <th>Revenue (USD)</th>
                                <th>Commission (USD)</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($history as $snap)
                                <tr {{ $loop->first ? 'style=font-weight:500' : '' }}>
                                    <td style="font-size:.78rem;white-space:nowrap;">
                                        {{ $snap->snapshot_date->format('d M Y') }}
                                        @if($loop->first)
                                            <span style="font-size:.65rem;background:var(--clay-light);
                                                         color:var(--clay);padding:1px 5px;
                                                         border-radius:3px;margin-left:4px;">
                                                latest
                                            </span>
                                        @endif
                                    </td>
                                    <td style="font-size:.8rem;">{{ number_format($snap->total_properties) }}</td>
                                    <td style="font-size:.8rem;">{{ number_format($snap->active_properties) }}</td>
                                    <td style="font-size:.8rem;">{{ number_format($snap->trial_properties) }}</td>
                                    <td style="font-size:.8rem;">
                                        @if($snap->new_registrations > 0)
                                            <span style="color:var(--success);font-weight:600;">
                                                +{{ number_format($snap->new_registrations) }}
                                            </span>
                                        @else
                                            <span style="color:var(--muted);">0</span>
                                        @endif
                                    </td>
                                    <td style="font-size:.8rem;">{{ number_format($snap->total_reservations) }}</td>
                                    <td style="font-size:.8rem;font-weight:500;">
                                        ${{ number_format($snap->total_revenue_usd, 2) }}
                                    </td>
                                    <td style="font-size:.8rem;color:var(--clay);font-weight:500;">
                                        ${{ number_format($snap->total_commission_usd, 2) }}
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    @endif

</div>

@endsection

@push('scripts')
@if($history->isNotEmpty())
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
(function () {
    const history = @json($history->reverse()->values());

    const labels  = history.map(s => s.snapshot_date);
    const clay    = '#C4622D';
    const clayBg  = 'rgba(196,98,45,.12)';
    const green   = '#10b981';
    const greenBg = 'rgba(16,185,129,.1)';
    const blue    = '#3b82f6';
    const blueBg  = 'rgba(59,130,246,.1)';

    const defaults = {
        tension: 0.3,
        pointRadius: 2,
        pointHoverRadius: 4,
        borderWidth: 1.5,
        fill: true,
    };

    // Properties + Registrations chart
    new Chart(document.getElementById('historyChart'), {
        type: 'line',
        data: {
            labels,
            datasets: [
                {
                    ...defaults,
                    label: 'Total Properties',
                    data: history.map(s => s.total_properties),
                    borderColor: clay,
                    backgroundColor: clayBg,
                    pointBackgroundColor: clay,
                },
                {
                    ...defaults,
                    label: 'Active',
                    data: history.map(s => s.active_properties),
                    borderColor: green,
                    backgroundColor: greenBg,
                    pointBackgroundColor: green,
                },
                {
                    ...defaults,
                    label: 'Trial',
                    data: history.map(s => s.trial_properties),
                    borderColor: blue,
                    backgroundColor: blueBg,
                    pointBackgroundColor: blue,
                    fill: false,
                },
            ]
        },
        options: {
            responsive: true,
            interaction: { mode: 'index', intersect: false },
            plugins: {
                legend: {
                    labels: { font: { size: 11 }, boxWidth: 12, padding: 16 }
                },
                tooltip: { bodyFont: { size: 11 }, titleFont: { size: 11 } },
            },
            scales: {
                x: {
                    ticks: { font: { size: 10 }, maxTicksLimit: 10 },
                    grid:  { display: false },
                },
                y: {
                    ticks: { font: { size: 10 } },
                    beginAtZero: false,
                },
            }
        }
    });

    // Revenue chart
    new Chart(document.getElementById('revenueChart'), {
        type: 'line',
        data: {
            labels,
            datasets: [
                {
                    ...defaults,
                    label: 'Revenue (USD)',
                    data: history.map(s => parseFloat(s.total_revenue_usd)),
                    borderColor: clay,
                    backgroundColor: clayBg,
                    pointBackgroundColor: clay,
                },
                {
                    ...defaults,
                    label: 'Commission (USD)',
                    data: history.map(s => parseFloat(s.total_commission_usd)),
                    borderColor: green,
                    backgroundColor: greenBg,
                    pointBackgroundColor: green,
                    fill: false,
                },
            ]
        },
        options: {
            responsive: true,
            interaction: { mode: 'index', intersect: false },
            plugins: {
                legend: {
                    labels: { font: { size: 11 }, boxWidth: 12, padding: 16 }
                },
                tooltip: {
                    bodyFont: { size: 11 }, titleFont: { size: 11 },
                    callbacks: {
                        label: ctx => ' $' + ctx.parsed.y.toFixed(2)
                    }
                },
            },
            scales: {
                x: {
                    ticks: { font: { size: 10 }, maxTicksLimit: 10 },
                    grid:  { display: false },
                },
                y: {
                    ticks: {
                        font: { size: 10 },
                        callback: v => '$' + v.toLocaleString()
                    },
                    beginAtZero: true,
                },
            }
        }
    });
})();
</script>
@endif
@endpush