import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
import { Head, router } from '@inertiajs/react';
import { ColumnDef } from '@tanstack/react-table';
import dayjs from 'dayjs';
import React from 'react';

import { Button } from '@/Components/ui/button';
import ReminderDeleteAction from '@/Pages/Reminder/ReminderDeleteAction';
import ReminderInfoDialog from '@/Pages/Reminder/ReminderInfoDialog';
import RemindersFilters from '@/Pages/Reminder/RemindersFilters';
import { RemindersTable } from '@/Pages/Reminder/RemindersTable';
import { Reminder, RemindersResponse, User } from '@/types';
import { Check, Info } from 'lucide-react';

interface AdminListProps {
    reminders: RemindersResponse;
    availableScheduleTypes: string[];
    availableIntervalUnits: string[];
    availableNotificationTypes: string[];
    filters: {
        search?: string;
        notification_type?: string;
        schedule_type?: string;
    };
}

export default function AdminList({
    reminders,
    availableScheduleTypes,
    availableIntervalUnits,
    availableNotificationTypes,
    filters,
}: AdminListProps) {
    const [infoOpen, setInfoOpen] = React.useState(false);
    const [infoReminder, setInfoReminder] = React.useState<Reminder | null>(
        null,
    );
    const [confirmingReminderId, setConfirmingReminderId] = React.useState<
        number | null
    >(null);

    const handleConfirmReminder = (reminder: Reminder, e: React.MouseEvent) => {
        e.preventDefault();
        e.stopPropagation();

        if (reminder.confirmed_at) return;

        setConfirmingReminderId(reminder.id);

        router.post(
            route('reminders.confirm', { reminder: reminder.id }),
            {},
            {
                preserveScroll: true,
                onFinish: () => setConfirmingReminderId(null),
            },
        );
    };

    const tableColumns: ColumnDef<Reminder>[] = [
        {
            header: 'Utente',
            cell: ({ row }) => {
                const reminder = row.original;
                const user: User = reminder.user;
                return <span>{`${user.name} ${user.surname}`}</span>;
            },
        },
        {
            header: 'Messaggio',
            cell: ({ row }) => {
                const reminder = row.original;
                return <span>{reminder.message}</span>;
            },
        },
        {
            header: 'Prossima esecuzione',
            cell: ({ row }) => {
                const reminder = row.original;
                const next = reminder.next_run_at
                    ? dayjs(reminder.next_run_at).format('DD.MM.YYYY - HH:mm')
                    : '';
                return <span>{next}</span>;
            },
        },
        {
            header: 'Ultimo invio',
            cell: ({ row }) => {
                const reminder = row.original;
                const last = reminder.last_sent_at
                    ? dayjs(reminder.last_sent_at).format('DD.MM.YYYY - HH:mm')
                    : '';
                return <span>{last}</span>;
            },
        },
        {
            header: 'Conferma',
            cell: ({ row }) => {
                const reminder = row.original;
                const isDrugPrescriptionReminder =
                    reminder.remindable_type ===
                    'App\\Models\\DrugPrescription';

                if (!isDrugPrescriptionReminder) {
                    return null;
                }

                const isConfirmed = !!reminder.confirmed_at;
                const isLoading = confirmingReminderId === reminder.id;

                return (
                    <Button
                        variant={isConfirmed ? 'secondary' : 'default'}
                        size="sm"
                        disabled={isConfirmed || isLoading}
                        onClick={(e) => handleConfirmReminder(reminder, e)}
                        title={
                            isConfirmed
                                ? 'Promemoria già confermato'
                                : 'Conferma promemoria'
                        }
                    >
                        <Check className="mr-2 h-4 w-4" />
                        {isConfirmed
                            ? 'Confermato'
                            : isLoading
                              ? 'Conferma...'
                              : 'Conferma'}
                    </Button>
                );
            },
        },
        {
            id: 'info',
            header: '',
            cell: ({ row }) => {
                const reminder = row.original;
                return (
                    <Button
                        variant="ghost"
                        size="icon"
                        onClick={(e) => {
                            e.preventDefault();
                            e.stopPropagation();
                            setInfoReminder(reminder);
                            setInfoOpen(true);
                        }}
                        title="Dettagli"
                    >
                        <Info className="h-4 w-4" />
                    </Button>
                );
            },
        },
        {
            id: 'actions',
            cell: ({ row }) => {
                const reminder = row.original;
                return <ReminderDeleteAction reminder={reminder} />;
            },
        },
    ];

    return (
        <AuthenticatedLayout
            backLink={route('dashboard')}
            backLinkLabel="Dashboard"
        >
            <Head title="Promemoria" />

            <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">
                            <div className="scroll-m-20 text-4xl font-light tracking-tight lg:text-5xl">
                                Promemoria
                            </div>

                            <div className="container mx-auto py-6">
                                <RemindersFilters
                                    filters={filters}
                                    availableScheduleTypes={
                                        availableScheduleTypes
                                    }
                                    availableNotificationTypes={
                                        availableNotificationTypes
                                    }
                                    routeName="reminders.index"
                                />

                                <RemindersTable
                                    columns={tableColumns}
                                    data={reminders.data}
                                    rowCount={reminders.total}
                                    pageSize={reminders.per_page}
                                    pageCount={reminders.last_page}
                                    availableScheduleTypes={
                                        availableScheduleTypes
                                    }
                                    availableIntervalUnits={
                                        availableIntervalUnits
                                    }
                                />
                            </div>

                            <ReminderInfoDialog
                                open={infoOpen}
                                onOpenChange={setInfoOpen}
                                reminder={infoReminder}
                            />
                        </div>
                    </div>
                </div>
            </div>
        </AuthenticatedLayout>
    );
}