import ActivityFeed from '@/components/admin/ActivityFeed';
import PageHeader from '@/components/admin/PageHeader';
import AdminLayout from '@/Layouts/AdminLayout';
import type {
    ActivityItem,
    AttentionItem,
    DashboardStats,
    MonthlyData,
    PlanDistribution,
    SystemStatusItem,
    TenantRow,
} from '@/types/admin';
import { Head } from '@inertiajs/react';
import AttentionRow from './components/AttentionRow';
import HealthPill from './components/HealthPill';
import KpiCards from './components/KpiCards';
import MrrChart from './components/MrrChart';
import PlanDistributionCard from './components/PlanDistributionCard';
import RecentTenantsTable from './components/RecentTenantsTable';
import SignupsChart from './components/SignupsChart';
import SystemStatusCard from './components/SystemStatusCard';

interface Props {
    stats: DashboardStats;
    attention: AttentionItem[];
    monthly: MonthlyData[];
    recentTenants: TenantRow[];
    planDistribution: PlanDistribution[];
    systemStatus: SystemStatusItem[];
    recentActivity: ActivityItem[];
}

export default function DashboardIndex({
    stats,
    attention,
    monthly,
    recentTenants,
    planDistribution,
    systemStatus,
    recentActivity,
}: Props) {
    return (
        <AdminLayout title="Platform Overview">
            <Head title="Admin Dashboard" />

            <div className="space-y-6 p-6 lg:p-8">
                <PageHeader
                    title="Platform Overview"
                    description="Real-time visibility across all tenants and infrastructure"
                    action={<HealthPill systemStatus={systemStatus} />}
                />

                <KpiCards stats={stats} />

                <AttentionRow attention={attention} />

                <div className="grid grid-cols-1 gap-4 lg:grid-cols-5">
                    <MrrChart monthly={monthly} mrrYoy={stats.mrr_yoy} />
                    <SignupsChart monthly={monthly} />
                </div>

                <div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
                    <RecentTenantsTable recentTenants={recentTenants} />

                    <div className="flex flex-col gap-4">
                        <PlanDistributionCard
                            planDistribution={planDistribution}
                        />
                        <SystemStatusCard systemStatus={systemStatus} />
                    </div>
                </div>

                <ActivityFeed
                    items={recentActivity}
                    viewAllHref="/admin/audit"
                />
            </div>
        </AdminLayout>
    );
}
