@extends('partner.layouts.app')

@section('title', 'Analytics')

@section('content')
    @php
        $period = $period ?? '30d';
        $periodOptions = $periodOptions ?? [];
        $totalRedemptions = $totalRedemptions ?? 0;
        $totalSaved = $totalSaved ?? 0;
        $totalBill = $totalBill ?? 0;
        $uniqueMembers = $uniqueMembers ?? 0;
        $trendBars = $trendBars ?? collect();
        $topOffers = $topOffers ?? collect();
        $offerDonutStyle = $offerDonutStyle ?? 'background: conic-gradient(#e5e7eb 0 100%);';
    @endphp

    <div class="space-y-6">
        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
            <div>
                <h1 class="text-2xl font-bold text-gray-900">Analytics</h1>
                <p class="text-gray-600">Detailed insights into your offer performance.</p>
            </div>
            <form method="GET" action="{{ route('partner.analytics') }}">
                <select name="period" class="px-3 py-2 rounded-lg border border-gray-200 text-sm bg-white" onchange="this.form.submit()">
                    @foreach($periodOptions as $value => $meta)
                        <option value="{{ $value }}" @selected($period === $value)>{{ $meta['label'] }}</option>
                    @endforeach
                </select>
            </form>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4">
            <div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100">
                <p class="text-xs uppercase tracking-wide text-gray-500">Verified Redemptions</p>
                <p class="mt-2 text-2xl font-bold text-[#0d4a4a]">{{ number_format((int) $totalRedemptions) }}</p>
            </div>
            <div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100">
                <p class="text-xs uppercase tracking-wide text-gray-500">Member Savings</p>
                <p class="mt-2 text-2xl font-bold text-green-600">Rs. {{ number_format((float) $totalSaved, 2) }}</p>
            </div>
            <div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100">
                <p class="text-xs uppercase tracking-wide text-gray-500">Total Bill Value</p>
                <p class="mt-2 text-2xl font-bold text-[#F5A623]">Rs. {{ number_format((float) $totalBill, 2) }}</p>
            </div>
            <div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100">
                <p class="text-xs uppercase tracking-wide text-gray-500">Unique Members</p>
                <p class="mt-2 text-2xl font-bold text-[#1a6b6b]">{{ number_format((int) $uniqueMembers) }}</p>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
                <h3 class="text-lg font-bold text-gray-900 mb-6">Redemption Trend</h3>
                <div class="h-[300px] rounded-lg bg-gray-50 flex items-end gap-2 p-4 overflow-x-auto">
                    @forelse($trendBars as $bar)
                        <div class="min-w-[30px] flex-1 max-w-[46px]">
                            <div class="w-full bg-[#0d4a4a] rounded-t" style="height: {{ $bar['height'] }}%" title="{{ $bar['count'] }} redemptions"></div>
                            <p class="mt-2 text-[10px] text-center text-gray-500 whitespace-nowrap">{{ $bar['label'] }}</p>
                        </div>
                    @empty
                        <div class="w-full h-full flex items-center justify-center text-sm text-gray-500">No redemption trend data for selected period.</div>
                    @endforelse
                </div>
            </div>

            <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
                <h3 class="text-lg font-bold text-gray-900 mb-6">Redemptions by Offer</h3>
                <div class="h-[300px] rounded-lg bg-gray-50 p-6 flex items-center justify-center">
                    <div class="w-56 h-56 rounded-full" style="{{ $offerDonutStyle }}"></div>
                </div>
                <div class="mt-4 space-y-2 text-xs text-gray-600">
                    @forelse($topOffers as $offerItem)
                        <div class="flex items-center justify-between gap-3">
                            <div class="inline-flex items-center gap-2 min-w-0">
                                <span class="w-3 h-3 rounded-full" style="background-color: {{ $offerItem['color'] }}"></span>
                                <span class="truncate">{{ $offerItem['title'] }}</span>
                            </div>
                            <span class="font-semibold text-gray-700 whitespace-nowrap">{{ number_format((int) $offerItem['redemptions']) }} ({{ $offerItem['percent'] }}%)</span>
                        </div>
                    @empty
                        <p class="text-sm text-gray-500 text-center">No offer distribution data for selected period.</p>
                    @endforelse
                </div>
            </div>
        </div>
    </div>
@endsection