import * as React from 'react';
import AdminLayout from '../layout';
import {
    settingsApi,
    type AdminSettings,
} from '@/features/admin/settings/services/api';
import { ApiError } from '@/lib/ApiError';
import {
    Card,
    CardContent,
    CardFooter,
    CardHeader,
    CardTitle,
    CardDescription,
} from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { isoToDateTimeString, dateTimeStringToIso } from '@/lib/utils';
import { FormField } from '@/components/ui/form-field';
import { Spinner } from '@/components/ui/spinner';
import { toast } from '@/components/ui/sonner';

export default function SettingsIndex() {
    const [form, setForm] = React.useState<AdminSettings | null>(null);
    const [numberFields, setNumberFields] = React.useState<{
        questions_per_quiz: string;
        attempts_per_number: string;
        timer_seconds: string;
        timer_grace_seconds: string;
    } | null>(null);
    const [errors, setErrors] = React.useState<Record<string, string>>({});
    const [submitting, setSubmitting] = React.useState(false);

    React.useEffect(() => {
        settingsApi
            .index()
            .then((res) => {
                setForm(res);
                setNumberFields({
                    questions_per_quiz: String(res.questions_per_quiz),
                    attempts_per_number: String(res.attempts_per_number),
                    timer_seconds: String(res.timer_seconds),
                    timer_grace_seconds: String(res.timer_grace_seconds),
                });
            })
            .catch(() => toast.error('Failed to load settings.'));
    }, []);

    async function handleSubmit(e: React.FormEvent) {
        e.preventDefault();
        if (!form || !numberFields) return;
        setSubmitting(true);
        setErrors({});
        try {
            const submitForm: AdminSettings = {
                ...form,
                questions_per_quiz: Number(numberFields.questions_per_quiz),
                attempts_per_number: Number(numberFields.attempts_per_number),
                timer_seconds: Number(numberFields.timer_seconds),
                timer_grace_seconds: Number(numberFields.timer_grace_seconds),
            };
            const res = await settingsApi.update(submitForm);
            setForm(res);
            toast.success('Settings saved.');
        } catch (err) {
            if (err instanceof ApiError && err.isValidationError) {
                const flat: Record<string, string> = {};
                for (const [k, v] of Object.entries(err.errors ?? {}))
                    flat[k] = v[0];
                setErrors(flat);
            } else {
                toast.error('Failed to save settings.');
            }
        } finally {
            setSubmitting(false);
        }
    }

    if (!form) {
        return (
            <AdminLayout title="Settings">
                <div className="flex justify-center py-24">
                    <Spinner className="h-6 w-6 text-(--color-accent)" />
                </div>
            </AdminLayout>
        );
    }

    return (
        <AdminLayout title="Settings">
            <form onSubmit={handleSubmit}>
                <Card className="max-w-2xl">
                    <CardHeader>
                        <div>
                            <CardTitle>Quiz configuration</CardTitle>
                            <CardDescription>
                                Controls that apply to every Quiz & Win session.
                            </CardDescription>
                        </div>
                    </CardHeader>
                    <CardContent className="space-y-4">
                        <div className="grid gap-4 sm:grid-cols-2">
                            <FormField
                                label="Starts at"
                                htmlFor="start_at"
                                error={errors.start_at}
                            >
                                <Input
                                    id="start_at"
                                    type="datetime-local"
                                    value={isoToDateTimeString(form.start_at)}
                                    onChange={(e) =>
                                        setForm({
                                            ...form,
                                            start_at: dateTimeStringToIso(
                                                e.target.value,
                                            ),
                                        })
                                    }
                                />
                            </FormField>
                            <FormField
                                label="Ends at"
                                htmlFor="end_at"
                                error={errors.end_at}
                            >
                                <Input
                                    id="end_at"
                                    type="datetime-local"
                                    value={isoToDateTimeString(form.end_at)}
                                    onChange={(e) =>
                                        setForm({
                                            ...form,
                                            end_at: dateTimeStringToIso(
                                                e.target.value,
                                            ),
                                        })
                                    }
                                />
                            </FormField>
                        </div>

                        <div className="grid gap-4 sm:grid-cols-2">
                            <FormField
                                label="Questions per quiz"
                                htmlFor="questions_per_quiz"
                                required
                                error={errors.questions_per_quiz}
                            >
                                <Input
                                    id="questions_per_quiz"
                                    type="number"
                                    min={1}
                                    required
                                    value={
                                        numberFields?.questions_per_quiz ?? ''
                                    }
                                    onChange={(e) =>
                                        setNumberFields({
                                            ...numberFields!,
                                            questions_per_quiz: e.target.value,
                                        })
                                    }
                                />
                            </FormField>
                            <FormField
                                label="Attempts per number"
                                htmlFor="attempts_per_number"
                                required
                                error={errors.attempts_per_number}
                            >
                                <Input
                                    id="attempts_per_number"
                                    type="number"
                                    min={1}
                                    required
                                    value={
                                        numberFields?.attempts_per_number ?? ''
                                    }
                                    onChange={(e) =>
                                        setNumberFields({
                                            ...numberFields!,
                                            attempts_per_number: e.target.value,
                                        })
                                    }
                                />
                            </FormField>
                        </div>

                        <div className="grid gap-4 sm:grid-cols-2">
                            <FormField
                                label="Timer (seconds)"
                                htmlFor="timer_seconds"
                                required
                                error={errors.timer_seconds}
                            >
                                <Input
                                    id="timer_seconds"
                                    type="number"
                                    min={1}
                                    required
                                    value={numberFields?.timer_seconds ?? ''}
                                    onChange={(e) =>
                                        setNumberFields({
                                            ...numberFields!,
                                            timer_seconds: e.target.value,
                                        })
                                    }
                                />
                            </FormField>
                            <FormField
                                label="Timer grace period (seconds)"
                                htmlFor="timer_grace_seconds"
                                required
                                error={errors.timer_grace_seconds}
                            >
                                <Input
                                    id="timer_grace_seconds"
                                    type="number"
                                    min={0}
                                    required
                                    value={
                                        numberFields?.timer_grace_seconds ?? ''
                                    }
                                    onChange={(e) =>
                                        setNumberFields({
                                            ...numberFields!,
                                            timer_grace_seconds: e.target.value,
                                        })
                                    }
                                />
                            </FormField>
                        </div>

                        <FormField
                            label="App smartlink URL"
                            htmlFor="app_smartlink_url"
                            required
                            error={errors.app_smartlink_url}
                        >
                            <Input
                                id="app_smartlink_url"
                                type="url"
                                required
                                value={form.app_smartlink_url}
                                onChange={(e) =>
                                    setForm({
                                        ...form,
                                        app_smartlink_url: e.target.value,
                                    })
                                }
                            />
                        </FormField>
                    </CardContent>
                    <CardFooter>
                        <Button type="submit" loading={submitting}>
                            Save settings
                        </Button>
                    </CardFooter>
                </Card>
            </form>
        </AdminLayout>
    );
}