@extends('layouts.admin')
@section('title', 'Social analytics')
@section('content')
<x-admin.page
    title="Analytics"
    subtitle="Normalized daily metrics from connector insights. Sync sandbox insights to populate the rail."
>
    <x-slot:actions>
        @if($sandbox)
            <span class="admin-btn pointer-events-none">Sandbox mode</span>
        @endif
        <form method="post" action="{{ route('admin.social.analytics.sync') }}">@csrf
            <button class="admin-btn admin-btn-primary" type="submit">Sync sandbox insights</button>
        </form>
    </x-slot:actions>

    @if(session('status'))
        <div class="mb-4 rounded-lg border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-900">{{ session('status') }}</div>
    @endif

    <form method="get" class="mb-4 flex flex-wrap gap-2">
        <label class="text-sm">From <input type="date" name="from" value="{{ $from->toDateString() }}" class="ml-1 rounded-lg border border-[var(--color-admin-border)] px-2 py-1.5"></label>
        <label class="text-sm">To <input type="date" name="to" value="{{ $to->toDateString() }}" class="ml-1 rounded-lg border border-[var(--color-admin-border)] px-2 py-1.5"></label>
        <button class="admin-btn" type="submit">Apply</button>
    </form>

    <div class="order-ops-stat-rail mb-5">
        <div class="order-ops-stat">
            <span class="order-ops-stat-label">Accounts</span>
            <span class="order-ops-stat-value">{{ number_format($summary['accounts'] ?? 0) }}</span>
            <span class="order-ops-stat-meta">{{ number_format($summary['days'] ?? 0) }} day rows</span>
        </div>
        <div class="order-ops-stat">
            <span class="order-ops-stat-label">Impressions</span>
            <span class="order-ops-stat-value">{{ number_format($summary['totals']['impressions'] ?? 0) }}</span>
        </div>
        <div class="order-ops-stat">
            <span class="order-ops-stat-label">Engagements</span>
            <span class="order-ops-stat-value">{{ number_format($summary['totals']['engagements'] ?? 0) }}</span>
        </div>
        <div class="order-ops-stat">
            <span class="order-ops-stat-label">Publishes</span>
            <span class="order-ops-stat-value">{{ number_format($summary['totals']['publishes'] ?? 0) }}</span>
            <span class="order-ops-stat-meta">{{ number_format($summary['totals']['clicks'] ?? 0) }} clicks</span>
        </div>
    </div>

    @if(!empty($summary['by_account']))
        <div class="mb-5 grid gap-4 md:grid-cols-2 xl:grid-cols-3">
            @foreach($summary['by_account'] as $row)
                <div class="rounded-xl border border-[var(--color-admin-border)] bg-white p-4 shadow-[var(--admin-shadow)]">
                    <div class="text-sm font-semibold capitalize">{{ $row['network'] ?? 'Account #'.$row['social_account_id'] }}</div>
                    <div class="mt-1 text-xs text-[#6d7175]">{{ $row['days'] }} day(s)</div>
                    <dl class="mt-3 grid grid-cols-2 gap-2 text-xs">
                        <div><dt class="text-[#6d7175]">Impressions</dt><dd class="font-semibold">{{ number_format($row['totals']['impressions'] ?? 0) }}</dd></div>
                        <div><dt class="text-[#6d7175]">Engagements</dt><dd class="font-semibold">{{ number_format($row['totals']['engagements'] ?? 0) }}</dd></div>
                        <div><dt class="text-[#6d7175]">Reach</dt><dd class="font-semibold">{{ number_format($row['totals']['reach'] ?? 0) }}</dd></div>
                        <div><dt class="text-[#6d7175]">Clicks</dt><dd class="font-semibold">{{ number_format($row['totals']['clicks'] ?? 0) }}</dd></div>
                    </dl>
                </div>
            @endforeach
        </div>
    @endif

    <div class="overflow-hidden rounded-xl border border-[var(--color-admin-border)] bg-white shadow-[var(--admin-shadow)]">
        <table class="min-w-full text-sm">
            <thead class="bg-[#fafbfb] text-left text-xs uppercase tracking-wide text-[#6d7175]">
                <tr>
                    <th class="px-4 py-3">Date</th>
                    <th>Account</th>
                    <th>Impressions</th>
                    <th>Engagements</th>
                    <th>Publishes</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-[var(--color-admin-border)]">
                @forelse($recent as $row)
                    <tr>
                        <td class="px-4 py-3">{{ $row->metric_date?->toDateString() ?? $row->metric_date }}</td>
                        <td class="capitalize">{{ $row->account?->name ?? $row->account?->network }}</td>
                        <td>{{ number_format(data_get($row->metrics, 'impressions', 0)) }}</td>
                        <td>{{ number_format(data_get($row->metrics, 'engagements', 0)) }}</td>
                        <td>{{ number_format(data_get($row->metrics, 'publishes', 0)) }}</td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="5" class="px-4 py-10 text-center text-[#6d7175]">
                            No metrics yet. Click <strong>Sync sandbox insights</strong> to seed daily rows.
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</x-admin.page>
@endsection