import ShowIf from '@/Components/ShowIf';
import SummaryCard from '@/Components/SummaryCard';
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
import { User } from '@/types';
import { Head, usePage } from '@inertiajs/react';
import {
    Bell,
    FlaskConical,
    Phone,
    Pill,
    ShoppingCart,
    Users,
} from 'lucide-react';

export default function MedicalDashboard({
    operator,
    usersCount,
    alertsCount,
    contactsCount,
    examsCount,
    drugPrescriptionsCount,
    drugsToRestockCount,
}: {
    usersCount: number;
    alertsCount: number;
    contactsCount: number;
    examsCount: number;
    drugPrescriptionsCount: number;
    drugsToRestockCount: number;
    operator: User;
}) {
    const user = usePage().props.auth.user;
    const isAdmin = user.role?.name === 'admin';

    return (
        <AuthenticatedLayout
            header={
                <h2 className="text-xl font-semibold leading-tight text-gray-800">
                    Dashboard
                </h2>
            }
        >
            <Head title="Dashboard" />

            <div className="py-2">
                <div className="mx-auto max-w-7xl sm:px-6 lg:px-8">
                    <div className="overflow-hidden sm:rounded-lg">
                        <div className="p-6 text-gray-900">
                            <ShowIf condition={!isAdmin}>
                                <div className="scroll-m-20 text-4xl font-light tracking-tight lg:text-5xl">
                                    Ciao,
                                </div>
                            </ShowIf>
                            <div className="scroll-m-20 pb-8 text-4xl font-semibold tracking-tight lg:text-5xl">
                                {`${operator.name} ${operator.surname}`}
                            </div>
                            <div>
                                <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
                                    <SummaryCard
                                        title="Pazienti"
                                        amount={usersCount}
                                        icon={Users}
                                        href={route('operator-patients', {
                                            operator: user.id,
                                        })}
                                    />
                                    <SummaryCard
                                        title="Avvisi"
                                        amount={alertsCount}
                                        icon={Bell}
                                        href={route('patient-alerts', {
                                            target: operator.id,
                                        })}
                                    />
                                    <SummaryCard
                                        title="Contatti"
                                        amount={contactsCount}
                                        icon={Phone}
                                        href={route(
                                            'medical-operator-contacts',
                                            { target: operator.id },
                                        )}
                                    />
                                    <SummaryCard
                                        title="Esami"
                                        amount={examsCount}
                                        icon={FlaskConical}
                                        href={route('medical-operator-exams', {
                                            target: user.id,
                                        })}
                                    />
                                    <SummaryCard
                                        title="Prescrizioni"
                                        amount={drugPrescriptionsCount}
                                        icon={Pill}
                                        href={route(
                                            'medical-operator-drug-prescriptions',
                                            { target: operator.id },
                                        )}
                                    />
                                    <SummaryCard
                                        title="Farmaci da riordinare"
                                        amount={drugsToRestockCount}
                                        icon={ShoppingCart}
                                        href={route('drug-restocks-dashboard')}
                                    />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </AuthenticatedLayout>
    );
}
