import ComboBoxInput from '@/Components/ComboBoxInput';
import FormInput from '@/Components/FormInput';
import PrimaryButton from '@/Components/PrimaryButton';
import SelectInput from '@/Components/SelectInput';
import TextInput from '@/Components/TextInput';
import {
    Sheet,
    SheetContent,
    SheetDescription,
    SheetHeader,
    SheetTitle,
    SheetTrigger,
} from '@/Components/ui/sheet';
import { Textarea } from '@/Components/ui/textarea';
import { capitalize, t } from '@/lib/utils';
import RecipientsSelectInput from '@/Pages/Alert/RecipientsSelectInput';
import WeekDaysSelect from '@/Pages/DrugPrescription/WeekDaysSelect';
import { FormErrors, Recipient, User } from '@/types';
import { useForm } from '@inertiajs/react';
import axios from 'axios';
import dayjs from 'dayjs';
import { Loader2 } from 'lucide-react';
import React, { FormEventHandler, useEffect, useState } from 'react';

interface ReminderCreateFormProps {
    availableScheduleTypes: string[]; // ['once','daily','weekly','interval']
    availableIntervalUnits: string[]; // ['minutes','hours','days']
}

type ReminderFormData = {
    user: User | null;
    message: string;
    schedule_type: 'once' | 'daily' | 'weekly' | 'interval';
    run_at_local: string;
    time_of_day: string;
    weekdays: number[];
    interval_value: number;
    interval_unit: string;
    max_sends: number | null;
    timezone: string;
    enabled: boolean;
    recipients: Recipient[];
};

export default function ReminderCreateForm({
    availableScheduleTypes,
    availableIntervalUnits,
}: ReminderCreateFormProps) {
    const [open, setOpen] = React.useState(false);
    const [availableUsers, setAvailableUsers] = useState<User[]>([]);

    const { data, setData, post, processing, errors, reset, transform } =
        useForm<ReminderFormData>({
            user: null,
            message: '',
            schedule_type: (availableScheduleTypes[0] ??
                'once') as ReminderFormData['schedule_type'],

            // once
            run_at_local: '',

            // daily/weekly
            time_of_day: '09:00:00',

            // weekly
            weekdays: [],

            // interval
            interval_value: 1,
            interval_unit: availableIntervalUnits[0] ?? 'days',

            // NEW: max sends (NULL => infinite). Not available for 'once'
            max_sends: null,

            timezone: 'Europe/Rome',
            enabled: true,

            recipients: [],
        });

    const formErrors = errors as FormErrors;

    // Se cambia a "once", azzero max_sends (non applicabile)
    useEffect(() => {
        if (data.schedule_type === 'once' && data.max_sends !== null) {
            setData('max_sends', null);
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [data.schedule_type]);

    const submit: FormEventHandler = (e) => {
        e.preventDefault();

        transform(
            (d) =>
                ({
                    user_id: d.user ? d.user.id : null,
                    message: d.message,
                    enabled: d.enabled,
                    timezone: d.timezone,
                    schedule_type: d.schedule_type,

                    run_at:
                        d.schedule_type === 'once' && d.run_at_local
                            ? dayjs(d.run_at_local).toISOString()
                            : null,
                    time_of_day: ['daily', 'weekly'].includes(d.schedule_type)
                        ? d.time_of_day
                        : null,
                    weekdays: d.schedule_type === 'weekly' ? d.weekdays : null,
                    interval_value:
                        d.schedule_type === 'interval'
                            ? d.interval_value
                            : null,
                    interval_unit:
                        d.schedule_type === 'interval' ? d.interval_unit : null,

                    // NEW
                    max_sends: d.schedule_type === 'once' ? null : d.max_sends,

                    recipients: d.recipients.map((r) => ({
                        id: r.id,
                        type: r.type,
                    })),
                }) as unknown as ReminderFormData,
        );

        post(route('reminders.store'), {
            onSuccess: () => {
                setOpen(false);
                reset();
            },
        });
    };

    const fetchUsers = async (search: string) => {
        try {
            const response = await axios.get(route('search-users'), {
                params: { search },
            });
            setAvailableUsers(response.data);
        } catch (error) {
            console.error('Error fetching users:', error);
        }
    };

    const scheduleOptions = availableScheduleTypes.map((x) => ({
        value: x,
        label: capitalize(t(`reminders.schedule_types.${x}`)),
    }));

    const intervalUnitOptions = availableIntervalUnits.map((x) => ({
        value: x,
        label: capitalize(t(`reminders.interval_units.${x}`)),
    }));

    return (
        <Sheet open={open} onOpenChange={setOpen}>
            <SheetTrigger asChild>
                <PrimaryButton>Aggiungi</PrimaryButton>
            </SheetTrigger>

            <SheetContent side="right" className="overflow-auto">
                <SheetHeader>
                    <SheetTitle>Nuovo promemoria</SheetTitle>
                    <SheetDescription>
                        <form onSubmit={submit}>
                            <FormInput
                                label="Utente"
                                id="user_id"
                                className="mt-8 block w-full"
                                error={formErrors.user_id}
                            >
                                <ComboBoxInput
                                    value={data.user}
                                    options={availableUsers}
                                    renderOption={(user) =>
                                        `${user.name} ${user.surname}`
                                    }
                                    onChange={(value) => {
                                        setData((prev) => ({
                                            ...prev,
                                            user: value,
                                            recipients: [],
                                        }));
                                    }}
                                    onSearchChange={fetchUsers}
                                />
                            </FormInput>

                            <FormInput
                                label="Messaggio"
                                id="message"
                                className="mt-8 block w-full"
                                error={errors.message}
                            >
                                <Textarea
                                    value={data.message}
                                    onChange={(e) =>
                                        setData('message', e.target.value)
                                    }
                                />
                            </FormInput>

                            <div className="mt-8 text-black">
                                <div>Quando</div>

                                <FormInput
                                    label=""
                                    id="schedule_type"
                                    error={errors.schedule_type}
                                >
                                    <SelectInput
                                        value={data.schedule_type}
                                        options={scheduleOptions}
                                        onChange={(value) =>
                                            setData((prev) => ({
                                                ...prev,
                                                schedule_type:
                                                    value as ReminderFormData['schedule_type'],
                                            }))
                                        }
                                    />
                                </FormInput>

                                {data.schedule_type === 'once' ? (
                                    <FormInput
                                        label="Data/ora"
                                        id="run_at"
                                        error={formErrors.run_at}
                                    >
                                        <input
                                            type="datetime-local"
                                            value={data.run_at_local}
                                            onChange={(e) =>
                                                setData(
                                                    'run_at_local',
                                                    e.target.value,
                                                )
                                            }
                                            className="focus:border-indigo-500 focus:ring-indigo-500 mt-1 block w-full rounded-md border-gray-300 shadow-sm"
                                        />
                                    </FormInput>
                                ) : null}

                                {data.schedule_type === 'daily' ? (
                                    <FormInput
                                        label="Orario"
                                        id="time_of_day"
                                        error={errors.time_of_day}
                                    >
                                        <TextInput
                                            value={data.time_of_day}
                                            onChange={(e) =>
                                                setData(
                                                    'time_of_day',
                                                    e.target.value,
                                                )
                                            }
                                            placeholder="HH:mm:ss"
                                        />
                                    </FormInput>
                                ) : null}

                                {data.schedule_type === 'weekly' ? (
                                    <>
                                        <FormInput
                                            label="Orario"
                                            id="time_of_day"
                                            error={errors.time_of_day}
                                        >
                                            <TextInput
                                                value={data.time_of_day}
                                                onChange={(e) =>
                                                    setData(
                                                        'time_of_day',
                                                        e.target.value,
                                                    )
                                                }
                                                placeholder="HH:mm:ss"
                                            />
                                        </FormInput>

                                        <FormInput
                                            label="Giorni"
                                            id="weekdays"
                                            error={errors.weekdays}
                                        >
                                            <WeekDaysSelect
                                                value={(
                                                    data.weekdays || []
                                                ).map((d) => (d === 7 ? 0 : d))}
                                                onChange={(days) =>
                                                    setData(
                                                        'weekdays',
                                                        days.map((d) =>
                                                            d === 0 ? 7 : d,
                                                        ),
                                                    )
                                                }
                                            />
                                        </FormInput>
                                    </>
                                ) : null}

                                {data.schedule_type === 'interval' ? (
                                    <div className="flex items-baseline justify-between gap-4">
                                        <FormInput
                                            label="Ogni"
                                            id="interval_value"
                                            className="w-full"
                                            error={errors.interval_value}
                                        >
                                            <TextInput
                                                type="number"
                                                value={data.interval_value}
                                                onChange={(e) =>
                                                    setData(
                                                        'interval_value',
                                                        parseInt(
                                                            e.target.value,
                                                        ),
                                                    )
                                                }
                                            />
                                        </FormInput>

                                        <FormInput
                                            label="Unità"
                                            id="interval_unit"
                                            className="w-full"
                                            error={errors.interval_unit}
                                        >
                                            <SelectInput
                                                value={data.interval_unit}
                                                options={intervalUnitOptions}
                                                onChange={(value) =>
                                                    setData(
                                                        'interval_unit',
                                                        value,
                                                    )
                                                }
                                            />
                                        </FormInput>
                                    </div>
                                ) : null}

                                {data.schedule_type !== 'once' ? (
                                    <FormInput
                                        label="Numero massimo di invii"
                                        id="max_sends"
                                        className="mt-6 block w-full"
                                        error={formErrors.max_sends}
                                    >
                                        <TextInput
                                            type="number"
                                            min={1}
                                            value={data.max_sends ?? ''}
                                            onChange={(e) =>
                                                setData(
                                                    'max_sends',
                                                    e.target.value === ''
                                                        ? null
                                                        : parseInt(
                                                              e.target.value,
                                                          ),
                                                )
                                            }
                                            placeholder="(vuoto = senza limite)"
                                        />
                                    </FormInput>
                                ) : null}
                            </div>

                            {data?.user?.id ? (
                                <div className="mt-8 block w-full">
                                    <RecipientsSelectInput
                                        selectedRecipients={data.recipients}
                                        user={data.user}
                                        onChange={(recipients: Recipient[]) =>
                                            setData('recipients', recipients)
                                        }
                                    />
                                </div>
                            ) : null}

                            <div className="mt-20 flex items-center justify-end">
                                <PrimaryButton
                                    className="ms-4"
                                    disabled={processing}
                                >
                                    {processing ? (
                                        <Loader2 className="animate-spin" />
                                    ) : null}
                                    {t('Save')}
                                </PrimaryButton>
                            </div>
                        </form>
                    </SheetDescription>
                </SheetHeader>
            </SheetContent>
        </Sheet>
    );
}