import FormInput from '@/Components/FormInput';
import SelectInput from '@/Components/SelectInput';
import SidebarForm from '@/Components/SidebarForm';
import TextInput from '@/Components/TextInput';
import { Textarea } from '@/Components/ui/textarea';
import { capitalize, t } from '@/lib/utils';
import RecipientsSelectInput from '@/Pages/Alert/RecipientsSelectInput';
import {
    Alert,
    FormErrors,
    IntervalUnit,
    Notification,
    Recipient,
    SidebarFormBodyProps,
} from '@/types';
import dayjs from 'dayjs';
import React from 'react';

interface AlertEditFormProps {
    alert: Alert;
    children: React.ReactNode;
    availableChannels: string[];
    availableMeasureTypes: string[];
    availableConditionTypes: string[];
    availablePeriodUnits: string[];
}

type AlertEditFormData = {
    metric: string;
    condition_type: string;
    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 AlertEditForm({
    alert,
    children: trigger,
    availableMeasureTypes,
    availableConditionTypes,
    availablePeriodUnits,
}: AlertEditFormProps) {
    const initialData = {
        metric: alert.metric,
        condition_type: alert.condition.type,
        period_unit: alert.condition.period.unit,
        period_value: alert.condition.period.value,
        message: alert.message,
        condition_threshold: alert.condition.threshold,
        recipients: alert.recipients,

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

    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' },
    ];

    const Body = (
        bodyProps: Partial<SidebarFormBodyProps<AlertEditFormData>>,
    ) => {
        const { data, setData, errors, transform } =
            bodyProps as SidebarFormBodyProps<AlertEditFormData>;
        const formErrors = errors as FormErrors;

        transform((data) => ({
            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,
        }));

        return (
            <>
                <FormInput
                    label="Utente"
                    id="user_id"
                    className="mt-8 block w-full"
                >
                    <TextInput
                        value={`${alert.user.name} ${alert.user.surname}`}
                        disabled
                    />
                </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)
                                }
                                disabled={!data.reminder_max_sends}
                            />
                        </FormInput>
                    </div>
                </div>

                <div className="mt-8 block w-full">
                    <RecipientsSelectInput
                        selectedRecipients={data.recipients}
                        user={alert.user}
                        onChange={(recipients) =>
                            setData('recipients', recipients)
                        }
                    />
                </div>

                <div className="mt-8 block w-full text-black">Notifiche</div>
                <ul>
                    {alert.notifications.map((notification: Notification) => (
                        <li
                            key={notification.id ?? notification.created_at}
                            className="block w-full pt-2 text-zinc-500"
                        >
                            <span>
                                {dayjs(notification.created_at).format(
                                    'DD.MM.YYYY - HH:mm',
                                )}
                            </span>
                        </li>
                    ))}
                </ul>
            </>
        );
    };

    return (
        <SidebarForm
            title="Modifica avviso"
            trigger={trigger}
            submitMethod={'put'}
            submitRoute={route('admin-alerts.update', { alert: alert.id })}
            initialData={initialData}
        >
            <Body />
        </SidebarForm>
    );
}