import React from 'react';
import AppLayout from '@/layouts/app-layout';
import { Head } from '@inertiajs/react';
import { LineChart, Line, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
import { type BreadcrumbItem } from '@/types';

const breadcrumbs: BreadcrumbItem[] = [
    {
        title: 'Dashboard',
        href: '/dashboard',
    },
];

export default function Dashboard({ auth, patientRegistrations, dailyRevenue, todayStats }) {
    return (
        <AppLayout breadcrumbs={breadcrumbs}>
            <Head title="Dashboard" />
            <div className="flex h-full flex-1 flex-col gap-4 rounded-xl p-4">
                {/* Today's Statistics */}
                <div className="grid auto-rows-min gap-4 md:grid-cols-3">
                    <div className="rounded-xl border bg-white p-4 shadow-sm dark:bg-gray-800 dark:border-sidebar-border/70">
                        <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100">Pasien Hari Ini</h3>
                        <p className="text-2xl font-bold">{todayStats.patient_count}</p>
                    </div>
                    <div className="rounded-xl border bg-white p-4 shadow-sm dark:bg-gray-800 dark:border-sidebar-border/70">
                        <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100">Pendapatan Hari Ini</h3>
                        <p className="text-2xl font-bold">
                            {new Intl.NumberFormat('id-ID', {
                                style: 'currency',
                                currency: 'IDR'
                            }).format(todayStats.revenue)}
                        </p>
                    </div>
                    <div className="rounded-xl border bg-white p-4 shadow-sm dark:bg-gray-800 dark:border-sidebar-border/70">
                        <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100">Pembayaran Tertunda</h3>
                        <p className="text-2xl font-bold">{todayStats.pending_payments}</p>
                    </div>
                </div>

                {/* Charts */}
                <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
                    {/* Patient Registration Chart */}
                    <div className="rounded-xl border bg-white p-4 shadow-sm dark:bg-gray-800 dark:border-sidebar-border/70">
                        <h3 className="mb-4 text-lg font-medium text-gray-900 dark:text-gray-100">
                            Jumlah Pasien Mendaftar (7 Hari Terakhir)
                        </h3>
                        <div className="h-64">
                            <ResponsiveContainer width="100%" height="100%">
                                <BarChart data={patientRegistrations}>
                                    <CartesianGrid strokeDasharray="3 3" />
                                    <XAxis dataKey="date" />
                                    <YAxis />
                                    <Tooltip />
                                    <Legend />
                                    <Bar dataKey="count" fill="#8884d8" name="Jumlah Pasien" />
                                </BarChart>
                            </ResponsiveContainer>
                        </div>
                    </div>

                    {/* Revenue Chart */}
                    <div className="rounded-xl border bg-white p-4 shadow-sm dark:bg-gray-800 dark:border-sidebar-border/70">
                        <h3 className="mb-4 text-lg font-medium text-gray-900 dark:text-gray-100">
                            Pendapatan Harian (7 Hari Terakhir)
                        </h3>
                        <div className="h-64">
                            <ResponsiveContainer width="100%" height="100%">
                                <LineChart data={dailyRevenue}>
                                    <CartesianGrid strokeDasharray="3 3" />
                                    <XAxis dataKey="date" />
                                    <YAxis />
                                    <Tooltip
                                        formatter={(value) => [
                                            new Intl.NumberFormat('id-ID', {
                                                style: 'currency',
                                                currency: 'IDR'
                                            }).format(value),
                                            'Total Pendapatan'
                                        ]}
                                    />
                                    <Legend />
                                    <Line
                                        type="monotone"
                                        dataKey="total"
                                        stroke="#82ca9d"
                                        name="Pendapatan"
                                        activeDot={{ r: 8 }}
                                    />
                                </LineChart>
                            </ResponsiveContainer>
                        </div>
                    </div>
                </div>
            </div>
        </AppLayout>
    );
}
