@extends('layouts.app')

@section('title', 'Platform Analytics')
@section('heading', 'Platform Analytics')

@section('content')
    <div class="mb-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        <x-stat-card title="Total companies" :value="$totalCompanies" />
        <x-stat-card title="Active companies" :value="$activeCompanies" />
        <x-stat-card title="Total users (all tenants)" :value="$totalUsers" />
        <x-stat-card title="On trial" :value="$trialCompanies" />
    </div>

    <div class="grid gap-6 lg:grid-cols-2">
        <x-card>
            <h3 class="mb-4 text-sm font-semibold text-slate-700">Companies by status</h3>
            @if($companiesByStatus->isEmpty())
                <p class="py-4 text-sm text-slate-500">No data.</p>
            @else
                <ul class="space-y-3">
                    @foreach($companiesByStatus as $statusKey => $row)
                        <li class="flex items-center justify-between rounded-lg border border-slate-100 bg-slate-50/50 px-4 py-2">
                            <span class="text-sm font-medium text-slate-700">{{ $statusKey ?? $row->status ?? 'N/A' }}</span>
                            <span class="text-sm font-semibold text-slate-900">{{ $row->total }}</span>
                        </li>
                    @endforeach
                </ul>
            @endif
        </x-card>

        <x-card>
            <h3 class="mb-4 text-sm font-semibold text-slate-700">New companies (last 6 months)</h3>
            <div class="h-48">
                <canvas id="analytics-chart" width="400" height="180"></canvas>
            </div>
            <script>
                (function () {
                    const ctx = document.getElementById('analytics-chart');
                    if (!ctx) return;
                    const data = @json($newCompaniesLast6Months);
                    new Chart(ctx, {
                        type: 'bar',
                        data: {
                            labels: data.map(d => d.label),
                            datasets: [{
                                label: 'New companies',
                                data: data.map(d => d.count),
                                backgroundColor: 'rgba(30, 41, 59, 0.7)',
                                borderColor: 'rgb(30, 41, 59)',
                                borderWidth: 1
                            }]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            scales: {
                                y: { beginAtZero: true, ticks: { stepSize: 1 } }
                            }
                        }
                    });
                })();
            </script>
        </x-card>
    </div>

    <x-card class="mt-6">
        <h3 class="mb-4 text-sm font-semibold text-slate-700">Tenants by plan</h3>
        @if($plans->isEmpty())
            <p class="py-4 text-sm text-slate-500">No plans.</p>
        @else
            <div class="overflow-x-auto">
                <x-table>
                    <x-slot name="head">
                        <tr>
                            <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Plan</th>
                            <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Pricing</th>
                            <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Tenants</th>
                        </tr>
                    </x-slot>
                    @foreach($plans as $plan)
                        <tr class="hover:bg-slate-50">
                            <td class="whitespace-nowrap px-4 py-3 font-medium text-slate-900">{{ $plan->name }}</td>
                            <td class="whitespace-nowrap px-4 py-3 text-sm text-slate-600">
                                {{ $plan->currency_symbol ?? config('app.currency_symbol', '₹') }}{{ number_format($plan->base_price_monthly ?? 0, 0) }}
                                + {{ $plan->currency_symbol ?? config('app.currency_symbol', '₹') }}{{ number_format($plan->per_employee_price ?? 0, 0) }}/employee
                            </td>
                            <td class="whitespace-nowrap px-4 py-3 text-sm font-medium text-slate-900">{{ $plan->companies_count ?? 0 }}</td>
                        </tr>
                    @endforeach
                </x-table>
            </div>
        @endif
    </x-card>
@endsection