import PageHeader from '@/components/admin/PageHeader';
import AdminLayout from '@/Layouts/AdminLayout';
import { Head } from '@inertiajs/react';
import HealthSection from './components/HealthSection';
import RevenueSection from './components/RevenueSection';
import { RangeSelector } from './components/shared';
import SupportSection from './components/SupportSection';
import TenantsSection from './components/TenantsSection';
import type {
    Cohort,
    HealthMetrics,
    RevenueMetrics,
    SupportMetrics,
    TenantMetrics,
} from './components/types';

interface Props {
    revenue: RevenueMetrics;
    tenants: TenantMetrics;
    support: SupportMetrics;
    cohorts: Cohort[];
    health: HealthMetrics;
    filters: { days: number };
}

export default function AnalyticsIndex({
    revenue,
    tenants,
    support,
    cohorts,
    health,
    filters,
}: Props) {
    return (
        <AdminLayout title="Analytics">
            <Head title="Analytics" />

            <div className="space-y-10 p-6 lg:p-8">
                <div className="flex flex-wrap items-start justify-between gap-4">
                    <PageHeader
                        title="Analytics"
                        description="Deep-dive metrics across revenue, tenants, and support"
                    />
                    <RangeSelector days={filters.days} />
                </div>

                <RevenueSection revenue={revenue} />
                <TenantsSection
                    tenants={tenants}
                    cohorts={cohorts}
                    days={filters.days}
                />
                <HealthSection health={health} />
                <SupportSection support={support} />
            </div>
        </AdminLayout>
    );
}
