import { useForm } from '@inertiajs/react';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { useI18n } from '@/hooks/use-i18n';

export type MailboxServerFormData = {
    name: string;
    host: string;
    port: number;
    protocol: string;
    encryption: string;
    inbox_folder: string;
};

export type MailboxServerFormState = ReturnType<typeof useForm<MailboxServerFormData>>;

export function useMailboxServerForm({
    mode,
    serverId,
    initialValues,
    onSuccess,
}: {
    mode: 'create' | 'edit';
    serverId?: number;
    initialValues?: Partial<MailboxServerFormData>;
    onSuccess: () => void;
}) {
    const form = useForm<MailboxServerFormData>({
        name: initialValues?.name ?? '',
        host: initialValues?.host ?? '',
        port: initialValues?.port ?? 993,
        protocol: initialValues?.protocol ?? 'imap',
        encryption: initialValues?.encryption ?? 'ssl',
        inbox_folder: initialValues?.inbox_folder ?? 'INBOX',
    });

    const submit = () => {
        if (mode === 'create') {
            form.post('/admin/settings/mailboxes/servers', {
                preserveScroll: true,
                onSuccess: () => {
                    form.reset();
                    onSuccess();
                },
            });

            return;
        }

        form.patch(`/admin/settings/mailboxes/servers/${serverId}`, {
            preserveScroll: true,
            onSuccess,
        });
    };

    return { form, submit };
}

export function MailboxServerFields({
    form,
    encryptionOptions,
    protocolOptions,
}: {
    form: MailboxServerFormState;
    encryptionOptions: string[];
    protocolOptions: string[];
}) {
    const { t } = useI18n();

    return (
        <div className="grid gap-4 md:grid-cols-2">
            <Field label={t('settings.mailboxes.server_form.field_name')} error={form.errors.name}>
                <Input
                    value={form.data.name}
                    onChange={(e) => form.setData('name', e.target.value)}
                    disabled={form.processing}
                    placeholder={t('settings.mailboxes.server_form.name_placeholder')}
                />
            </Field>
            <Field label={t('settings.mailboxes.server_form.field_host')} error={form.errors.host}>
                <Input
                    value={form.data.host}
                    onChange={(e) => form.setData('host', e.target.value)}
                    disabled={form.processing}
                    placeholder={t('settings.mailboxes.server_form.host_placeholder')}
                />
            </Field>
            <Field label={t('settings.mailboxes.server_form.field_port')} error={form.errors.port}>
                <Input
                    type="number"
                    value={form.data.port}
                    onChange={(e) => form.setData('port', Number(e.target.value))}
                    disabled={form.processing}
                />
            </Field>
            <Field label={t('settings.mailboxes.server_form.field_protocol')} error={form.errors.protocol}>
                <Select
                    value={form.data.protocol}
                    onValueChange={(value) => form.setData('protocol', value)}
                    disabled={form.processing}
                >
                    <SelectTrigger className="w-full">
                        <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                        {protocolOptions.map((item) => (
                            <SelectItem key={item} value={item}>
                                {item.toUpperCase()}
                            </SelectItem>
                        ))}
                    </SelectContent>
                </Select>
            </Field>
            <Field label={t('settings.mailboxes.server_form.field_encryption')} error={form.errors.encryption}>
                <Select
                    value={form.data.encryption}
                    onValueChange={(value) => form.setData('encryption', value)}
                    disabled={form.processing}
                >
                    <SelectTrigger className="w-full">
                        <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                        {encryptionOptions.map((item) => (
                            <SelectItem key={item} value={item}>
                                {item.toUpperCase()}
                            </SelectItem>
                        ))}
                    </SelectContent>
                </Select>
            </Field>
            <Field label={t('settings.mailboxes.server_form.field_inbox_folder')} error={form.errors.inbox_folder}>
                <Input
                    value={form.data.inbox_folder}
                    onChange={(e) => form.setData('inbox_folder', e.target.value)}
                    disabled={form.processing}
                    placeholder={t('settings.mailboxes.server_form.inbox_placeholder')}
                />
            </Field>
        </div>
    );
}

function Field({
    label,
    error,
    children,
}: {
    label: string;
    error?: string;
    children: React.ReactNode;
}) {
    return (
        <div className="space-y-1.5">
            <Label>{label}</Label>
            {children}
            {error ? <p className="text-sm text-destructive">{error}</p> : null}
        </div>
    );
}