import { useForm } from '@inertiajs/react';
import { Loader2, PlugZap, ShieldCheck, Trash2 } from 'lucide-react';
import type { FormEvent } from 'react';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, 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 type { OpenAiPublicState } from '@/features/integrations/types';
import { formatDateTimeRo } from '@/lib/datetime';
import { useI18n } from '@/hooks/use-i18n';

type OpenAiSettingsFormProps = {
    state: OpenAiPublicState;
};

type OpenAiFormData = {
    api_key: string;
    model: string;
};

export function OpenAiSettingsForm({ state }: OpenAiSettingsFormProps) {
    const { t } = useI18n();
    const { data, setData, put, delete: destroy, processing, errors, reset } = useForm<OpenAiFormData>({
        api_key: '',
        model: state.model,
    });

    const save = (event: FormEvent<HTMLFormElement>) => {
        event.preventDefault();

        put('/admin/settings/openai', {
            preserveScroll: true,
            onSuccess: () => reset('api_key'),
        });
    };

    const clearKey = () => {
        destroy('/admin/settings/openai', {
            preserveScroll: true,
        });
    };

    const formattedUpdatedAt = state.updated_at ? formatDateTimeRo(state.updated_at) : null;
    const canSubmit = state.is_configured || data.api_key.trim() !== '';

    return (
        <Card>
            <CardHeader>
                <CardTitle className="flex items-center gap-2">
                    <PlugZap className="h-5 w-5" />
                    {t('settings.openai.form.card_title')}
                </CardTitle>
                <CardDescription>{t('settings.openai.form.card_description')}</CardDescription>
            </CardHeader>

            <CardContent className="space-y-6">
                <div className="rounded-md border p-4 text-sm">
                    <p className="font-medium">
                        {t('settings.openai.form.status_label')}{' '}
                        {state.is_configured ? (
                            <span className="text-green-600">{t('settings.openai.form.status_configured')}</span>
                        ) : (
                            <span className="text-muted-foreground">{t('settings.openai.form.status_not_configured')}</span>
                        )}
                    </p>
                    <p className="mt-1 text-muted-foreground">
                        {t('settings.openai.form.model_label')}: <span className="font-mono">{state.model}</span>
                    </p>
                    {state.masked_hint ? (
                        <p className="mt-1 text-muted-foreground">
                            {t('settings.openai.form.key_hint', { value: state.masked_hint })}
                        </p>
                    ) : null}
                    {formattedUpdatedAt ? (
                        <p className="mt-1 text-muted-foreground">
                            {t('settings.openai.form.last_updated', { value: formattedUpdatedAt })}
                        </p>
                    ) : null}
                    <p className="mt-2 flex items-center gap-2 text-muted-foreground">
                        <ShieldCheck className="h-4 w-4" />
                        {t('settings.openai.form.encryption_note')}
                    </p>
                </div>

                <form onSubmit={save} className="space-y-4">
                    <div className="grid gap-2">
                        <Label htmlFor="openai-model">{t('settings.openai.form.model_label')}</Label>
                        <p className="text-xs text-muted-foreground">{t('settings.openai.form.model_description')}</p>
                        <Select value={data.model} onValueChange={(value) => setData('model', value)}>
                            <SelectTrigger id="openai-model" className="w-full max-w-md font-mono">
                                <SelectValue placeholder={t('settings.openai.form.model_placeholder')} />
                            </SelectTrigger>
                            <SelectContent>
                                {state.allowed_models.map((item) => (
                                    <SelectItem key={item} value={item} className="font-mono">
                                        {item}
                                    </SelectItem>
                                ))}
                            </SelectContent>
                        </Select>
                        {errors.model ? <p className="text-sm text-destructive">{errors.model}</p> : null}
                    </div>

                    <div className="grid gap-2">
                        <Label htmlFor="openai-api-key">{t('settings.openai.form.api_key_label')}</Label>
                        <Input
                            id="openai-api-key"
                            type="password"
                            value={data.api_key}
                            onChange={(event) => setData('api_key', event.target.value)}
                            placeholder={t('settings.openai.form.api_key_placeholder')}
                            autoComplete="off"
                        />
                        {state.is_configured ? (
                            <p className="text-xs text-muted-foreground">
                                {t('settings.openai.form.api_key_optional_hint')}
                            </p>
                        ) : null}
                        {errors.api_key ? <p className="text-sm text-destructive">{errors.api_key}</p> : null}
                    </div>

                    <div className="flex flex-wrap items-center gap-2">
                        <Button type="submit" disabled={processing || !canSubmit}>
                            {processing ? (
                                <>
                                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                                    {t('settings.openai.form.saving')}
                                </>
                            ) : (
                                t('settings.openai.form.save')
                            )}
                        </Button>

                        {state.is_configured ? (
                            <Button type="button" variant="destructive" onClick={clearKey} disabled={processing}>
                                <Trash2 className="h-4 w-4" />
                                {t('settings.openai.form.delete_key')}
                            </Button>
                        ) : null}
                    </div>
                </form>
            </CardContent>
        </Card>
    );
}