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 { FormErrors, IntervalUnit, Recipient, User } from '@/types';
import { useForm } from '@inertiajs/react';
import axios from 'axios';
import { Loader2 } from 'lucide-react';
import React, { FormEventHandler, useState } from 'react';

interface AlertCreateFormProps {
    availableMeasureTypes: string[];
    availableConditionTypes: string[];
    availablePeriodUnits: string[];
    availableChannels?: string[];
}

type AlertFormData = {
    user: User | null;
    metric: string;
    condition_type: string;
    condition_value: number;
    period_unit: string;
    period_value: number;
    message: string;
    condition_threshold: number;
    recipients: Recipient[];
    reminder_max_sends: number | null;
    reminder_interval_value: number;
    reminder_interval_unit: IntervalUnit;
};

export default function AlertCreateForm({
    availableMeasureTypes,
    availableConditionTypes,
    availablePeriodUnits,
}: AlertCreateFormProps) {
    const [open, setOpen] = React.useState(false);
    const [availableUsers, setAvailableUsers] = useState<User[]>([]);

    const { data, setData, post, processing, errors, reset, transform } =
        useForm<AlertFormData>({
            user: null,
            metric: availableMeasureTypes[0],
            condition_type: availableConditionTypes[0],
            condition_value: 100,
            period_unit: availablePeriodUnits[0],
            period_value: 2,
            message: 'Attento! I tuoi valori sono troppo alti',
            condition_threshold: 1,
            recipients: [],

            // ✅ NEW: retry reminder (max sends + every)
            reminder_max_sends: null,
            reminder_interval_value: 60,
            reminder_interval_unit: 'minutes',
        });

    const formErrors = errors as FormErrors;

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

        transform(
            (data) =>
                ({
                    user_id: data.user ? data.user.id : null,
                    metric: data.metric,
                    message: data.message,
                    condition: {
                        type: data.condition_type,
                        threshold: data.condition_threshold,
                        period: {
                            unit: data.period_unit,
                            value: data.period_value,
                        },
                    },
                    recipients: data.recipients.map((recipient) => ({
                        id: recipient.id,
                        type: recipient.type,
                    })),

                    // ✅ NEW fields for backend (nullable => disabled)
                    reminder_max_sends: data.reminder_max_sends,
                    reminder_interval_value: data.reminder_max_sends
                        ? data.reminder_interval_value
                        : null,
                    reminder_interval_unit: data.reminder_max_sends
                        ? data.reminder_interval_unit
                        : null,
                }) as unknown as AlertFormData,
        );

        post(route('alerts.create'), {
            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 items:', error);
        }
    };

    const availableMeasureTypesOptions = availableMeasureTypes.map((type) => ({
        value: type,
        label: capitalize(t(type)),
    }));

    const availableConditionsOptions = availableConditionTypes.map(
        (condition) => ({
            value: condition,
            label: capitalize(t(condition)),
        }),
    );

    const availablePeriodUnitsOptions = availablePeriodUnits.map((unit) => ({
        value: unit,
        label: capitalize(t(unit)),
    }));

    const reminderIntervalUnitOptions = [
        { value: 'minutes', label: 'Minuti' },
        { value: 'hours', label: 'Ore' },
        { value: 'days', label: 'Giorni' },
    ];

    return (
        <Sheet open={open} onOpenChange={setOpen}>
            <SheetTrigger asChild>
                <PrimaryButton>Aggiungi</PrimaryButton>
            </SheetTrigger>
            <SheetContent side="right" className="overflow-auto">
                <SheetHeader>
                    <SheetTitle>Nuovo avviso</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) =>
                                        `${user.name} ${user.surname}`
                                    }
                                    onChange={(value: User | null) => {
                                        setData((data) => ({
                                            ...data,
                                            user: value,
                                            recipients: [],
                                        }));
                                    }}
                                    onSearchChange={fetchUsers}
                                />
                            </FormInput>

                            <div className="mt-8 text-black">
                                <div>Invia se</div>
                                <FormInput
                                    label=""
                                    id="metric"
                                    error={errors.metric}
                                >
                                    <SelectInput
                                        value={data.metric}
                                        options={availableMeasureTypesOptions}
                                        onChange={(value) =>
                                            setData('metric', value)
                                        }
                                    />
                                </FormInput>

                                <div className="flex items-baseline justify-between gap-4">
                                    <FormInput
                                        label=""
                                        id="condition_type"
                                        className="w-full"
                                        error={errors.condition_type}
                                    >
                                        <SelectInput
                                            value={data.condition_type}
                                            options={availableConditionsOptions}
                                            onChange={(value) =>
                                                setData('condition_type', value)
                                            }
                                        />
                                    </FormInput>
                                    <FormInput
                                        label=""
                                        id="condition_threshold"
                                        className="w-full"
                                        error={
                                            formErrors['condition.threshold']
                                        }
                                    >
                                        <TextInput
                                            type="number"
                                            step="any"
                                            value={data.condition_threshold}
                                            onChange={(e) =>
                                                setData(
                                                    'condition_threshold',
                                                    parseFloat(e.target.value),
                                                )
                                            }
                                        />
                                    </FormInput>
                                </div>

                                <div>Negli ultimi</div>
                                <div className="flex items-baseline justify-between gap-4">
                                    <FormInput
                                        label=""
                                        id="period_value"
                                        className="w-full"
                                        error={
                                            formErrors['condition.period.value']
                                        }
                                    >
                                        <TextInput
                                            type="number"
                                            value={data.period_value}
                                            onChange={(e) =>
                                                setData(
                                                    'period_value',
                                                    parseInt(e.target.value),
                                                )
                                            }
                                        />
                                    </FormInput>
                                    <FormInput
                                        label=""
                                        id="period_unit"
                                        className="w-full"
                                        error={errors.period_unit}
                                    >
                                        <SelectInput
                                            value={data.period_unit}
                                            options={
                                                availablePeriodUnitsOptions
                                            }
                                            onChange={(value) =>
                                                setData('period_unit', value)
                                            }
                                        />
                                    </FormInput>
                                </div>
                            </div>

                            <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>

                            {/* NEW: retry section */}
                            <div className="mt-8 text-black">
                                <div>
                                    Ripetizione promemoria (se non conferma)
                                </div>

                                <FormInput
                                    label="Numero massimo di invii"
                                    id="reminder_max_sends"
                                    error={formErrors.reminder_max_sends}
                                >
                                    <TextInput
                                        type="number"
                                        min={1}
                                        value={data.reminder_max_sends ?? ''}
                                        onChange={(e) =>
                                            setData(
                                                'reminder_max_sends',
                                                e.target.value === ''
                                                    ? null
                                                    : parseInt(e.target.value),
                                            )
                                        }
                                        placeholder="(vuoto = senza ripetizioni)"
                                    />
                                </FormInput>

                                <div className="mt-3 flex items-baseline justify-between gap-4">
                                    <FormInput
                                        label="Ogni"
                                        id="reminder_interval_value"
                                        className="w-full"
                                        error={
                                            formErrors.reminder_interval_value
                                        }
                                    >
                                        <TextInput
                                            type="number"
                                            min={1}
                                            disabled={!data.reminder_max_sends}
                                            value={data.reminder_interval_value}
                                            onChange={(e) =>
                                                setData(
                                                    'reminder_interval_value',
                                                    parseInt(e.target.value),
                                                )
                                            }
                                        />
                                    </FormInput>

                                    <FormInput
                                        label="Unità"
                                        id="reminder_interval_unit"
                                        className="w-full"
                                        error={
                                            formErrors.reminder_interval_unit
                                        }
                                    >
                                        <SelectInput
                                            value={data.reminder_interval_unit}
                                            options={
                                                reminderIntervalUnitOptions
                                            }
                                            onChange={(value) =>
                                                setData(
                                                    'reminder_interval_unit',
                                                    value as IntervalUnit,
                                                )
                                            }
                                            disabled={!data.reminder_max_sends}
                                        />
                                    </FormInput>
                                </div>
                            </div>

                            {data?.user?.id ? (
                                <div className="mt-8 block w-full">
                                    <RecipientsSelectInput
                                        selectedRecipients={data.recipients}
                                        user={data.user}
                                        onChange={(recipients) =>
                                            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>
    );
}