import { Head } from '@inertiajs/react';
import { PageHeader } from '@/components/page-header';
import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
} from '@/components/ui/card';
import { LayoutGrid, CalendarClock, Clock, FileWarning, AlertTriangle } from 'lucide-react';

export default function ExecutiveDashboard({ metrics }: { metrics: any }) {
    return (
        <>
            <Head title="Executive Dashboard" />
            <div className="flex flex-col gap-6 p-4">
                <PageHeader title="Executive Dashboard" subtitle="Firm-wide operational insights." />

                <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
                    <Card className="col-span-full xl:col-span-2 border-destructive/50">
                        <CardHeader>
                            <CardTitle className="flex items-center gap-2 text-destructive">
                                <AlertTriangle className="size-5" />
                                Attention Panel
                            </CardTitle>
                        </CardHeader>
                        <CardContent className="grid grid-cols-1 md:grid-cols-3 gap-4">
                            <MetricCard title="Missed Appearances" value={metrics.missed_appearances} />
                            <MetricCard title="Past Due Hearings" value={metrics.past_due_hearings} />
                            <MetricCard title="Upcoming Deadlines" value={metrics.upcoming_deadlines} />
                            <MetricCard title="Overdue Invoices" value={metrics.overdue_invoices} />
                            <MetricCard title="Pending Approvals" value={metrics.pending_fee_approvals} />
                        </CardContent>
                    </Card>
                </div>
            </div>
        </>
    );
}

function MetricCard({ title, value }: { title: string; value: number }) {
    return (
        <Card>
            <CardHeader className="p-4">
                <CardTitle className="text-sm font-medium">{title}</CardTitle>
            </CardHeader>
            <CardContent className="p-4 pt-0 text-2xl font-bold">{value}</CardContent>
        </Card>
    );
}
