"use client";

import React, { useState, useEffect, useMemo } from "react";
import { useRouter } from "next/navigation";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import { Checkbox } from "@/components/ui/checkbox";
import { stripHtml } from "@/lib/utils";
import { HtmlDisplay } from "@/components/html-display";
import { FormattedText } from "@/components/formatted-text";
import { Dialog, DialogContent, DialogTrigger, DialogTitle } from "@/components/ui/dialog";
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@/components/ui/alert-dialog";
import { toast } from "sonner";
import { submitForm, deleteOwnSubmission } from "@/app/actions/submissions";
import { signIn } from "next-auth/react";
import Image from "next/image";
import { z } from "zod";
import { useForm, useWatch } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormMessage,
} from "@/components/ui/form";
import { DropdownMenuAvatar, DiscordMemberProfile } from "@/components/dropdown-menu-avatar";
import { getErrorMessage } from "@/lib/errors";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { Badge } from "@/components/ui/badge";
import {
  Field,
  FieldGroup,
  FieldLabel,
  FieldLegend,
  FieldSet,
} from "@/components/ui/field";
import { Spinner } from "@/components/ui/spinner";
import {
  decodeCheckboxAnswer,
  type FormAnswerValue,
} from "@/lib/form-answer-values";

export function FormLayoutClient({
  userName,
  userImage,
  profile,
}: {
  userName: string;
  userImage: string;
  profile?: DiscordMemberProfile | null;
}) {
  return (
    <DropdownMenuAvatar 
      userName={userName} 
      userImage={userImage} 
      profile={profile || null} 
    />
  );
}

export function LoginButton() {
  return (
    <Button variant="outline" size="sm" onClick={() => signIn("discord", { callbackUrl: window.location.href })}>
      เข้าสู่ระบบ
    </Button>
  );
}

interface Question {
  id: string;
  formId: string;
  type: "text" | "textarea" | "radio" | "checkbox";
  label: string;
  imageUrl: string | null;
  displayOrder: number;
  required: boolean;
  options: string[] | null;
  allowOther: boolean;
}

interface FormFillerClientProps {
  form: {
    id: string;
    title: string;
    description: string | null;
    isOpen: boolean;
  };
  questions: Question[];
  initialAnswers?: Record<string, FormAnswerValue>;
  hasSubmission?: boolean;
}

const LS_KEY = (formId: string) => `form-draft-${formId}`;
type FormValues = Record<string, string | string[] | undefined>;
type StoredDraft = {
  version: 1;
  answers: FormValues;
  otherValues: Record<string, string>;
};

const buildSchema = (questions: Question[]) => {
  const shape: Record<string, z.ZodTypeAny> = {};
  questions.forEach(q => {
    if (q.type === "checkbox") {
      shape[q.id] = q.required 
        ? z.array(z.string()).min(1, `จำเป็นต้องตอบข้อนี้`) 
        : z.array(z.string()).optional();
    } else {
      shape[q.id] = q.required 
        ? z.string().trim().min(1, `จำเป็นต้องตอบข้อนี้`)
        : z.string().optional();
    }
  });
  return z.object(shape);
};

function prepareInitialState(
  questions: Question[],
  answers: Record<string, FormAnswerValue | undefined>,
  savedOtherValues: Record<string, string> = {}
) {
  const values: FormValues = {};
  const otherValues = { ...savedOtherValues };

  questions.forEach((question) => {
    const answer = answers[question.id];

    if (question.type === "checkbox") {
      let selected = decodeCheckboxAnswer(answer);
      if (question.allowOther && question.options) {
        const customAnswers = selected.filter(
          (value) => !question.options?.includes(value) && value !== "__OTHER__"
        );
        if (customAnswers.length > 0) {
          otherValues[question.id] = customAnswers.join(", ");
        }
        if (selected.includes("__OTHER__") || customAnswers.length > 0) {
          selected = selected.filter((value) => question.options?.includes(value));
          selected.push("__OTHER__");
        }
      }
      values[question.id] = selected;
      return;
    }

    if (question.type === "radio") {
      let selected = typeof answer === "string" ? answer : "";
      if (
        question.allowOther &&
        question.options &&
        selected &&
        !question.options.includes(selected)
      ) {
        if (selected !== "__OTHER__") {
          otherValues[question.id] = selected;
        }
        selected = "__OTHER__";
      }
      values[question.id] = selected;
      return;
    }

    values[question.id] = typeof answer === "string" ? answer : "";
  });

  return { values, otherValues };
}

function parseStoredDraft(raw: string): {
  answers: FormValues;
  otherValues: Record<string, string>;
} {
  const parsed: unknown = JSON.parse(raw);
  if (
    parsed &&
    typeof parsed === "object" &&
    "version" in parsed &&
    parsed.version === 1 &&
    "answers" in parsed
  ) {
    const draft = parsed as StoredDraft;
    return {
      answers: draft.answers ?? {},
      otherValues: draft.otherValues ?? {},
    };
  }

  return {
    answers: (parsed as FormValues) ?? {},
    otherValues: {},
  };
}

export function FormFillerClient({
  form,
  questions,
  initialAnswers = {},
  hasSubmission = false,
}: FormFillerClientProps) {
  const router = useRouter();
  const isUpdating = hasSubmission;

  const formSchema = useMemo(() => buildSchema(questions), [questions]);
  const serverInitialState = useMemo(
    () => prepareInitialState(questions, initialAnswers),
    [initialAnswers, questions]
  );

  const [otherValues, setOtherValues] = useState<Record<string, string>>(
    serverInitialState.otherValues
  );
  const [draftReady, setDraftReady] = useState(false);
  const [draftSaved, setDraftSaved] = useState(false);
  const [showSuccessDialog, setShowSuccessDialog] = useState(false);
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
  const [isDeleting, setIsDeleting] = useState(false);

  const methods = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: serverInitialState.values,
    mode: "onTouched",
  });

  const {
    clearErrors,
    getValues,
    handleSubmit,
    control,
    formState: { isSubmitting },
    reset,
    setError,
  } = methods;
  const watchedValues = useWatch({ control });

  useEffect(() => {
    const frame = requestAnimationFrame(() => {
      if (isUpdating) {
        setDraftReady(true);
        return;
      }

      try {
        const raw = localStorage.getItem(LS_KEY(form.id));
        if (raw) {
          const draft = parseStoredDraft(raw);
          const restored = prepareInitialState(
            questions,
            draft.answers,
            draft.otherValues
          );
          reset(restored.values);
          setOtherValues(restored.otherValues);
          setDraftSaved(true);
        }
      } catch {
        localStorage.removeItem(LS_KEY(form.id));
      } finally {
        setDraftReady(true);
      }
    });

    return () => cancelAnimationFrame(frame);
  }, [form.id, isUpdating, questions, reset]);

  useEffect(() => {
    if (!draftReady || !form.isOpen) {
      return;
    }

    try {
      const draft: StoredDraft = {
        version: 1,
        answers: getValues() as FormValues,
        otherValues,
      };
      localStorage.setItem(LS_KEY(form.id), JSON.stringify(draft));
      queueMicrotask(() => setDraftSaved(true));
    } catch {
      queueMicrotask(() => setDraftSaved(false));
    }
  }, [draftReady, form.id, form.isOpen, getValues, otherValues, watchedValues]);

  const onSubmit = async (values: z.infer<typeof formSchema>) => {
    if (!form.isOpen) return;

    for (const question of questions) {
      const value = values[question.id] as FormAnswerValue | undefined;
      const usesOther = Array.isArray(value)
        ? value.includes("__OTHER__")
        : value === "__OTHER__";

      if (usesOther && !otherValues[question.id]?.trim()) {
        setError(
          question.id,
          {
            type: "required",
            message: "โปรดระบุคำตอบสำหรับตัวเลือก “อื่นๆ”",
          },
          { shouldFocus: true }
        );
        return;
      }
    }

    try {
      const formattedAnswers = questions.map((q) => {
        let val = values[q.id] as FormAnswerValue | undefined;
        if (q.allowOther) {
          const customText = otherValues[q.id]?.trim() || "";
          if (Array.isArray(val)) {
            val = val.map(v => v === "__OTHER__" ? customText : v);
          } else if (val === "__OTHER__") {
            val = customText;
          }
        }
        return {
          questionId: q.id,
          value: val ?? (q.type === "checkbox" ? [] : ""),
        };
      });

      const res = await submitForm(form.id, formattedAnswers);
      if (res.ok) {
        if (isUpdating) {
          toast.success("บันทึกการแก้ไขแล้ว");
        } else {
          setShowSuccessDialog(true);
          router.refresh();
        }
      }
    } catch (err: unknown) {
      console.error(err);
      toast.error(getErrorMessage(err, "ไม่สามารถส่งฟอร์มได้"));
    }
  };

  const handleDelete = async () => {
    setIsDeleting(true);
    try {
      const res = await deleteOwnSubmission(form.id);
      if (res.ok) {
        toast.success("ลบคำตอบแล้ว");
        localStorage.removeItem(LS_KEY(form.id));
        reset({});
        setOtherValues({});
        setDraftSaved(false);
        setDeleteDialogOpen(false);
        router.refresh();
      }
    } catch (err: unknown) {
      console.error(err);
      toast.error(getErrorMessage(err, "ไม่สามารถลบข้อมูลได้"));
    } finally {
      setIsDeleting(false);
    }
  };

  if (!form.isOpen && !isUpdating) {
    return (
      <Card className="mx-auto max-w-md">
        <CardHeader>
          <CardTitle className="text-xl">ปิดรับคำตอบแล้ว</CardTitle>
          <CardDescription>
            แบบฟอร์ม “{form.title}” ไม่รับคำตอบใหม่ในขณะนี้
          </CardDescription>
        </CardHeader>
      </Card>
    );
  }

  return (
    <div className="flex flex-col gap-6 pb-12">
      <Card className="border-t-8 border-t-primary shadow-md">
        <CardHeader>
          <CardTitle className="text-3xl font-bold">{form.title}</CardTitle>
          <CardDescription className="flex flex-wrap items-center gap-2">
            <Badge variant={form.isOpen ? "secondary" : "outline"}>
              {form.isOpen
                ? isUpdating
                  ? "กำลังแก้ไขคำตอบ"
                  : "คำตอบใหม่"
                : "ปิดรับคำตอบแล้ว"}
            </Badge>
            <span>{questions.length} คำถาม</span>
          </CardDescription>
        </CardHeader>
        {form.description && (
          <CardContent>
            {stripHtml(form.description).length > 280 ? (
              <Accordion type="single" collapsible>
                <AccordionItem value="rules">
                  <AccordionTrigger>ดูรายละเอียดและเงื่อนไขทั้งหมด</AccordionTrigger>
                  <AccordionContent>
                    <HtmlDisplay html={form.description} />
                  </AccordionContent>
                </AccordionItem>
              </Accordion>
            ) : (
              <HtmlDisplay html={form.description} />
            )}
          </CardContent>
        )}
        <CardFooter className="flex-wrap gap-2 border-t">
          {questions.some((question) => question.required) && (
            <span className="text-sm text-muted-foreground">
              ช่องที่มีป้าย “จำเป็น” ต้องตอบให้ครบ
            </span>
          )}
          {!form.isOpen && (
            <span className="text-sm text-muted-foreground">
              คุณยังดูหรือลบคำตอบเดิมได้ แต่บันทึกการแก้ไขไม่ได้
            </span>
          )}
        </CardFooter>
      </Card>

      <Form {...methods}>
        <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-6">
          {questions.length === 0 ? (
            <Card>
              <CardHeader>
                <CardTitle>ยังไม่มีคำถาม</CardTitle>
                <CardDescription>
                  แบบฟอร์มนี้ยังไม่พร้อมรับคำตอบ
                </CardDescription>
              </CardHeader>
            </Card>
          ) : (
            <FieldGroup className="gap-4">
              {questions.map((q, questionIndex) => {
                const questionLabelId = `question-${q.id}`;
                const questionErrorId = `question-error-${q.id}`;
                const plainQuestionLabel = stripHtml(q.label);

                return (
                  <FormField
                    key={q.id}
                    control={control}
                    name={q.id}
                    render={({ field, fieldState }) => (
                      <Card className="shadow-sm">
                        <CardHeader>
                          <CardDescription>
                            ข้อ {questionIndex + 1} จาก {questions.length}
                          </CardDescription>
                          <div className="flex items-start justify-between gap-4">
                            <CardTitle
                              id={questionLabelId}
                              className="min-w-0 flex-1 text-base leading-normal"
                            >
                              <HtmlDisplay html={q.label} />
                            </CardTitle>
                            <div className="flex shrink-0 items-start gap-2">
                              {q.required && (
                                <Badge variant="destructive">จำเป็น</Badge>
                              )}
                              {q.imageUrl && (
                                <Dialog>
                                  <DialogTrigger asChild>
                                    <Button
                                      type="button"
                                      variant="outline"
                                      className="relative size-24 overflow-hidden p-0"
                                      aria-label={`ขยายรูปประกอบคำถาม ${plainQuestionLabel}`}
                                    >
                                      <Image
                                        width={96}
                                        height={96}
                                        src={q.imageUrl}
                                        alt=""
                                        className="size-full object-contain"
                                      />
                                    </Button>
                                  </DialogTrigger>
                                  <DialogContent className="flex h-[80vh] w-[90vw] max-w-4xl items-center justify-center border-0 bg-transparent p-0 shadow-none">
                                    <DialogTitle className="sr-only">
                                      รูปประกอบคำถาม {plainQuestionLabel}
                                    </DialogTitle>
                                    <div className="relative size-full">
                                      <Image
                                        src={q.imageUrl}
                                        alt={`รูปประกอบคำถาม ${plainQuestionLabel}`}
                                        fill
                                        unoptimized
                                        className="rounded-md object-contain"
                                        sizes="(max-width: 768px) 100vw, (max-width: 1200px) 75vw, 60vw"
                                      />
                                    </div>
                                  </DialogContent>
                                </Dialog>
                              )}
                            </div>
                          </div>
                        </CardHeader>
                        <CardContent>
                          <FormItem>
                            {q.type === "text" && (
                              <Field data-invalid={fieldState.invalid || undefined}>
                                <FormControl
                                  aria-describedby={
                                    fieldState.invalid ? questionErrorId : undefined
                                  }
                                >
                                  <Input
                                    placeholder="พิมพ์คำตอบ"
                                    {...field}
                                    value={(field.value as string) || ""}
                                    aria-labelledby={questionLabelId}
                                    aria-required={q.required}
                                    disabled={!form.isOpen || isSubmitting}
                                  />
                                </FormControl>
                                <FormMessage id={questionErrorId} />
                              </Field>
                            )}

                            {q.type === "textarea" && (
                              <Field data-invalid={fieldState.invalid || undefined}>
                                <FormControl
                                  aria-describedby={
                                    fieldState.invalid ? questionErrorId : undefined
                                  }
                                >
                                  <Textarea
                                    placeholder="พิมพ์คำตอบ"
                                    {...field}
                                    value={(field.value as string) || ""}
                                    aria-labelledby={questionLabelId}
                                    aria-required={q.required}
                                    className="min-h-32 resize-y"
                                    disabled={!form.isOpen || isSubmitting}
                                  />
                                </FormControl>
                                <FormMessage id={questionErrorId} />
                              </Field>
                            )}

                            {q.type === "radio" && q.options && (
                              <FieldSet data-invalid={fieldState.invalid || undefined}>
                                <FieldLegend className="sr-only">
                                  {plainQuestionLabel}
                                </FieldLegend>
                                <FormControl
                                  aria-describedby={
                                    fieldState.invalid ? questionErrorId : undefined
                                  }
                                >
                                  <RadioGroup
                                    onValueChange={field.onChange}
                                    value={(field.value as string) || ""}
                                    aria-labelledby={questionLabelId}
                                    aria-required={q.required}
                                    className="flex flex-col gap-3"
                                    disabled={!form.isOpen || isSubmitting}
                                  >
                                    {q.options.map((option, optionIndex) => (
                                      <Field
                                        key={`${q.id}-${optionIndex}`}
                                        orientation="horizontal"
                                      >
                                        <RadioGroupItem
                                          value={option}
                                          id={`${q.id}-${optionIndex}`}
                                        />
                                        <FieldLabel
                                          htmlFor={`${q.id}-${optionIndex}`}
                                          className="cursor-pointer font-normal"
                                        >
                                          <FormattedText text={option} />
                                        </FieldLabel>
                                      </Field>
                                    ))}
                                    {q.allowOther && (
                                      <FieldGroup className="gap-2">
                                        <Field orientation="horizontal">
                                          <RadioGroupItem
                                            value="__OTHER__"
                                            id={`${q.id}-other`}
                                          />
                                          <FieldLabel
                                            htmlFor={`${q.id}-other`}
                                            className="cursor-pointer font-normal"
                                          >
                                            อื่นๆ
                                          </FieldLabel>
                                        </Field>
                                        {field.value === "__OTHER__" && (
                                          <Input
                                            value={otherValues[q.id] || ""}
                                            onChange={(event) => {
                                              setOtherValues((current) => ({
                                                ...current,
                                                [q.id]: event.target.value,
                                              }));
                                              if (event.target.value.trim()) {
                                                clearErrors(q.id);
                                              }
                                            }}
                                            aria-label={`ระบุคำตอบอื่นสำหรับ ${plainQuestionLabel}`}
                                            aria-invalid={fieldState.invalid}
                                            aria-describedby={
                                              fieldState.invalid
                                                ? questionErrorId
                                                : undefined
                                            }
                                            className="w-full max-w-xs sm:ml-6"
                                            placeholder="โปรดระบุ"
                                            disabled={!form.isOpen || isSubmitting}
                                          />
                                        )}
                                      </FieldGroup>
                                    )}
                                  </RadioGroup>
                                </FormControl>
                                <FormMessage id={questionErrorId} />
                              </FieldSet>
                            )}

                            {q.type === "checkbox" && q.options && (
                              <FieldSet data-invalid={fieldState.invalid || undefined}>
                                <FieldLegend className="sr-only">
                                  {plainQuestionLabel}
                                </FieldLegend>
                                <FormControl
                                  aria-describedby={
                                    fieldState.invalid ? questionErrorId : undefined
                                  }
                                >
                                  <FieldGroup
                                    data-slot="checkbox-group"
                                    role="group"
                                    aria-labelledby={questionLabelId}
                                  >
                                    {q.options.map((option, optionIndex) => {
                                      const isChecked =
                                        Array.isArray(field.value) &&
                                        field.value.includes(option);
                                      return (
                                        <Field
                                          key={`${q.id}-${optionIndex}`}
                                          orientation="horizontal"
                                        >
                                          <Checkbox
                                            id={`${q.id}-${optionIndex}`}
                                            checked={isChecked}
                                            disabled={!form.isOpen || isSubmitting}
                                            onCheckedChange={(checked) => {
                                              const current = Array.isArray(field.value)
                                                ? field.value
                                                : [];
                                              field.onChange(
                                                checked
                                                  ? [...current, option]
                                                  : current.filter(
                                                      (item) => item !== option
                                                    )
                                              );
                                            }}
                                          />
                                          <FieldLabel
                                            htmlFor={`${q.id}-${optionIndex}`}
                                            className="cursor-pointer font-normal"
                                          >
                                            <FormattedText text={option} />
                                          </FieldLabel>
                                        </Field>
                                      );
                                    })}
                                    {q.allowOther && (
                                      <FieldGroup className="gap-2">
                                        <Field orientation="horizontal">
                                          <Checkbox
                                            id={`${q.id}-other`}
                                            checked={
                                              Array.isArray(field.value) &&
                                              field.value.includes("__OTHER__")
                                            }
                                            disabled={!form.isOpen || isSubmitting}
                                            onCheckedChange={(checked) => {
                                              const current = Array.isArray(field.value)
                                                ? field.value
                                                : [];
                                              field.onChange(
                                                checked
                                                  ? [...current, "__OTHER__"]
                                                  : current.filter(
                                                      (item) => item !== "__OTHER__"
                                                    )
                                              );
                                            }}
                                          />
                                          <FieldLabel
                                            htmlFor={`${q.id}-other`}
                                            className="cursor-pointer font-normal"
                                          >
                                            อื่นๆ
                                          </FieldLabel>
                                        </Field>
                                        {Array.isArray(field.value) &&
                                          field.value.includes("__OTHER__") && (
                                            <Input
                                              value={otherValues[q.id] || ""}
                                              onChange={(event) => {
                                                setOtherValues((current) => ({
                                                  ...current,
                                                  [q.id]: event.target.value,
                                                }));
                                                if (event.target.value.trim()) {
                                                  clearErrors(q.id);
                                                }
                                              }}
                                              aria-label={`ระบุคำตอบอื่นสำหรับ ${plainQuestionLabel}`}
                                              aria-invalid={fieldState.invalid}
                                              aria-describedby={
                                                fieldState.invalid
                                                  ? questionErrorId
                                                  : undefined
                                              }
                                              className="w-full max-w-xs sm:ml-6"
                                              placeholder="โปรดระบุ"
                                              disabled={!form.isOpen || isSubmitting}
                                            />
                                          )}
                                      </FieldGroup>
                                    )}
                                  </FieldGroup>
                                </FormControl>
                                <FormMessage id={questionErrorId} />
                              </FieldSet>
                            )}
                          </FormItem>
                        </CardContent>
                      </Card>
                    )}
                  />
                );
              })}
            </FieldGroup>
          )}

          <Card size="sm" className="sticky bottom-3 shadow-md">
            <CardContent className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
              <p className="text-sm text-muted-foreground" aria-live="polite">
                {!form.isOpen
                  ? "ปิดรับคำตอบแล้ว"
                  : draftSaved
                    ? "บันทึกฉบับร่างไว้ในอุปกรณ์นี้แล้ว"
                    : "กำลังเตรียมฉบับร่างในอุปกรณ์นี้"}
              </p>
              <div className="flex flex-col-reverse gap-2 sm:flex-row">
                {isUpdating && (
                  <AlertDialog
                    open={deleteDialogOpen}
                    onOpenChange={setDeleteDialogOpen}
                  >
                    <AlertDialogTrigger asChild>
                      <Button
                        type="button"
                        variant="destructive"
                        disabled={isSubmitting || isDeleting}
                      >
                        ลบคำตอบ
                      </Button>
                    </AlertDialogTrigger>
                    <AlertDialogContent>
                      <AlertDialogHeader>
                        <AlertDialogTitle>ลบคำตอบของคุณ?</AlertDialogTitle>
                        <AlertDialogDescription>
                          คำตอบและประวัติการแก้ไขจะถูกลบถาวร และไม่สามารถย้อนกลับได้
                        </AlertDialogDescription>
                      </AlertDialogHeader>
                      <AlertDialogFooter>
                        <AlertDialogCancel disabled={isDeleting}>
                          เก็บคำตอบไว้
                        </AlertDialogCancel>
                        <AlertDialogAction
                          variant="destructive"
                          onClick={(event) => {
                            event.preventDefault();
                            void handleDelete();
                          }}
                          disabled={isDeleting}
                        >
                          {isDeleting && <Spinner data-icon="inline-start" />}
                          {isDeleting ? "กำลังลบ" : "ลบคำตอบถาวร"}
                        </AlertDialogAction>
                      </AlertDialogFooter>
                    </AlertDialogContent>
                  </AlertDialog>
                )}
                {form.isOpen && (
                  <Button
                    type="submit"
                    disabled={isSubmitting || questions.length === 0}
                    className="min-w-32"
                  >
                    {isSubmitting && <Spinner data-icon="inline-start" />}
                    {isSubmitting
                      ? isUpdating
                        ? "กำลังบันทึก"
                        : "กำลังส่ง"
                      : isUpdating
                        ? "บันทึกการแก้ไข"
                        : "ส่งคำตอบ"}
                  </Button>
                )}
              </div>
            </CardContent>
          </Card>
        </form>
      </Form>

      <AlertDialog open={showSuccessDialog} onOpenChange={setShowSuccessDialog}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle className="text-center text-2xl font-bold">
              ส่งคำตอบแล้ว
            </AlertDialogTitle>
            <AlertDialogDescription>
              บันทึกคำตอบของคุณเรียบร้อย คุณกลับมาแก้ไขได้ตราบใดที่แบบฟอร์มยังเปิดอยู่
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogAction
              onClick={() => setShowSuccessDialog(false)}
              className="w-full"
            >
              ดูคำตอบที่ส่ง
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  );
}