import { useForm } from '@inertiajs/react';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Switch } from '@/components/ui/switch';
import type { MailboxServerListItem } from '@/features/mailboxes/types';
import { useI18n } from '@/hooks/use-i18n';

type MailboxAccountFormProps = {
    mode: 'create' | 'edit';
    mailboxId?: number;
    initialValues?: Partial<FormData>;
    mailServers: MailboxServerListItem[];
    clients: Array<{ id: number; name: string }>;
    onCancel: () => void;
};

type FormData = {
    name: string;
    email: string;
    username: string;
    password: string;
    mailbox_server_id: number;
    inbox_folder: string;
    active: boolean;
    client_id: number;
};

export type MailboxAccountFormState = ReturnType<typeof useForm<FormData>>;

export function useMailboxAccountForm({
    mode,
    mailboxId,
    initialValues,
    defaultClientId,
    defaultServerId,
    onSuccess,
}: {
    mode: 'create' | 'edit';
    mailboxId?: number;
    initialValues?: Partial<FormData>;
    defaultClientId?: number;
    defaultServerId?: number;
    onSuccess: () => void;
}) {
    const form = useForm<FormData>({
        name: initialValues?.name ?? '',
        email: initialValues?.email ?? '',
        username: initialValues?.username ?? '',
        password: '',
        mailbox_server_id:
            (initialValues?.mailbox_server_id as number | undefined) ?? defaultServerId ?? 0,
        inbox_folder: initialValues?.inbox_folder ?? '',
        active: initialValues?.active ?? true,
        client_id: (initialValues?.client_id as number | undefined) ?? defaultClientId ?? 0,
    });

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

            return;
        }

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

    return { form, submit };
}

export function MailboxAccountFields({
    mode,
    form,
    mailServers,
    clients,
}: {
    mode: 'create' | 'edit';
    form: MailboxAccountFormState;
    mailServers: MailboxServerListItem[];
    clients: Array<{ id: number; name: string }>;
}) {
    const { t } = useI18n();
    const selectedServer = mailServers.find((server) => server.id === form.data.mailbox_server_id);

    return (
        <div className="grid gap-4 md:grid-cols-2">
            <Field label={t('settings.mailboxes.form.field_server')} error={form.errors.mailbox_server_id} className="md:col-span-2">
                <Select
                    value={form.data.mailbox_server_id ? String(form.data.mailbox_server_id) : ''}
                    onValueChange={(value) => form.setData('mailbox_server_id', Number(value))}
                    disabled={form.processing || mailServers.length === 0}
                >
                    <SelectTrigger className="w-full">
                        <SelectValue placeholder={t('settings.mailboxes.form.server_placeholder')} />
                    </SelectTrigger>
                    <SelectContent>
                        {mailServers.map((server) => (
                            <SelectItem key={server.id} value={String(server.id)}>
                                {server.name} ({server.host}:{server.port})
                            </SelectItem>
                        ))}
                    </SelectContent>
                </Select>
                {selectedServer ? (
                    <p className="text-xs text-muted-foreground">
                        {selectedServer.protocol.toUpperCase()} · {selectedServer.encryption.toUpperCase()} ·{' '}
                        {selectedServer.inbox_folder}
                    </p>
                ) : null}
            </Field>
            <Field label={t('settings.mailboxes.form.field_name')} error={form.errors.name}>
                <Input value={form.data.name} onChange={(e) => form.setData('name', e.target.value)} disabled={form.processing} />
            </Field>
            <Field label={t('settings.mailboxes.form.field_email')} error={form.errors.email}>
                <Input
                    type="email"
                    value={form.data.email}
                    onChange={(e) => form.setData('email', e.target.value)}
                    disabled={form.processing}
                />
            </Field>
            <Field label={t('settings.mailboxes.form.field_username')} error={form.errors.username}>
                <Input
                    value={form.data.username}
                    onChange={(e) => form.setData('username', e.target.value)}
                    disabled={form.processing}
                />
            </Field>
            <Field
                label={
                    mode === 'create'
                        ? t('settings.mailboxes.form.field_password_create')
                        : t('settings.mailboxes.form.field_password_edit')
                }
                error={form.errors.password}
            >
                <Input
                    type="password"
                    value={form.data.password}
                    onChange={(e) => form.setData('password', e.target.value)}
                    disabled={form.processing}
                    placeholder={mode === 'edit' ? t('settings.mailboxes.form.password_placeholder_edit') : undefined}
                />
            </Field>
            <Field label={t('settings.mailboxes.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.form.inbox_override_placeholder')}
                />
                <p className="text-xs text-muted-foreground">{t('settings.mailboxes.form.inbox_override_hint')}</p>
            </Field>
            <Field label={t('settings.mailboxes.form.field_client')} error={form.errors.client_id}>
                <Select
                    value={String(form.data.client_id)}
                    onValueChange={(value) => form.setData('client_id', Number(value))}
                    disabled={form.processing}
                >
                    <SelectTrigger className="w-full">
                        <SelectValue placeholder={t('settings.mailboxes.form.client_placeholder')} />
                    </SelectTrigger>
                    <SelectContent>
                        {clients.map((client) => (
                            <SelectItem key={client.id} value={String(client.id)}>
                                {client.name}
                            </SelectItem>
                        ))}
                    </SelectContent>
                </Select>
            </Field>
            <div className="flex items-center justify-between rounded-md border p-3 md:col-span-2">
                <div>
                    <p className="text-sm font-medium">{t('settings.mailboxes.form.active_label')}</p>
                    <p className="text-xs text-muted-foreground">{t('settings.mailboxes.form.active_hint')}</p>
                </div>
                <Switch checked={form.data.active} onCheckedChange={(checked) => form.setData('active', checked)} disabled={form.processing} />
            </div>
        </div>
    );
}

export function MailboxAccountForm({
    mode,
    mailboxId,
    initialValues,
    mailServers,
    clients,
    onCancel,
}: MailboxAccountFormProps) {
    const { t } = useI18n();
    const { form, submit } = useMailboxAccountForm({
        mode,
        mailboxId,
        initialValues,
        defaultServerId: mailServers[0]?.id,
        onSuccess: onCancel,
    });

    return (
        <Card>
            <CardHeader>
                <CardTitle>
                    {mode === 'create' ? t('settings.mailboxes.form.card_title_create') : t('settings.mailboxes.form.card_title_edit')}
                </CardTitle>
            </CardHeader>
            <CardContent>
                <MailboxAccountFields mode={mode} form={form} mailServers={mailServers} clients={clients} />
            </CardContent>
            <CardFooter className="justify-end gap-2">
                <Button type="button" variant="outline" onClick={onCancel} disabled={form.processing}>
                    {t('settings.mailboxes.form.cancel')}
                </Button>
                <Button type="button" onClick={submit} disabled={form.processing || mailServers.length === 0}>
                    {form.processing
                        ? t('settings.mailboxes.form.saving')
                        : mode === 'create'
                          ? t('settings.mailboxes.form.create')
                          : t('settings.mailboxes.form.save')}
                </Button>
            </CardFooter>
        </Card>
    );
}

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