import * as React from 'react';
import AdminLayout from '../layout';
import {
    questionsApi,
    type Question,
} from '@/features/admin/questions/services/api';
import { QuestionForm } from '@/features/admin/questions/components/QuestionForm';
import { useNumericRouteParam } from '@/lib/useRouteParam';
import { Spinner } from '@/components/ui/spinner';
import { toast } from '@/components/ui/sonner';

export default function QuestionsEdit() {
    const questionId = useNumericRouteParam();
    const [question, setQuestion] = React.useState<Question | null>(null);

    React.useEffect(() => {
        if (!questionId) return;
        questionsApi
            .show(questionId)
            .then((question) => setQuestion(question))
            .catch((error) => {
                console.error('Failed to load question:', error);
                toast.error('Failed to load question.');
            });
    }, [questionId]);

    return (
        <AdminLayout title="Edit question">
            {question ? (
                <QuestionForm
                    questionId={questionId ?? undefined}
                    initial={{
                        text: question.text,
                        option_a: question.option_a,
                        option_b: question.option_b,
                        option_c: question.option_c,
                        option_d: question.option_d,
                        correct_option: question.correct_option,
                        active: question.active,
                    }}
                />
            ) : (
                <div className="flex justify-center py-24">
                    <Spinner className="h-6 w-6 text-(--color-accent)" />
                </div>
            )}
        </AdminLayout>
    );
}