"use client";

import React, { useState, useEffect, useMemo } from "react";
import { useRouter } from "next/navigation";
import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } 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 { Label } from "@/components/ui/label";
import { cn, 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 { Loader2, LogOut, ChevronRight, ChevronLeft } from "lucide-react";
import { signOut } from "next-auth/react";
import Image from "next/image";
import { z } from "zod";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";



export function FormLayoutClient({
  userName,
  userImage,
}: {
  userName: string;
  userImage: string;
}) {
  return (
    <div className="flex items-center gap-3">
      {userImage && (
        <Image
          src={userImage}
          alt={userName}
          width={28}
          height={28}
          className="rounded-full "
        />
      )}
      <span className="text-sm text-muted-foreground">{userName}</span>
      <Button
        variant="ghost"
        size="sm"
        onClick={() => signOut()}
      >
        <LogOut className="w-4 h-4" />
      </Button>
    </div>
  );
}

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, string>;
}

const LS_KEY = (formId: string) => `form-draft-${formId}`;
const QUESTIONS_PER_STEP = 3;

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

export function FormFillerClient({ form, questions, initialAnswers = {} }: FormFillerClientProps) {
  const router = useRouter();
  const isUpdating = Object.keys(initialAnswers).length > 0;

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

  const { defaultValues, initialOtherValues } = useMemo(() => {
    const serverAnswers = { ...initialAnswers };
    let draft: Record<string, any> = {};
    try {
      const raw = localStorage.getItem(LS_KEY(form.id));
      if (raw) draft = JSON.parse(raw);
    } catch {}
    
    const merged = { ...draft, ...serverAnswers };
    
    const vals: Record<string, any> = {};
    const others: Record<string, string> = {};

    questions.forEach(q => {
      const ans = merged[q.id];
      if (q.type === "checkbox") {
        let arr = ans ? (Array.isArray(ans) ? ans : ans.split(", ").filter(Boolean)) : [];
        if (q.allowOther && q.options) {
          const standardOptions = q.options;
          const customAnswers = arr.filter((x: string) => !standardOptions.includes(x) && x !== "__OTHER__");
          if (customAnswers.length > 0) {
            others[q.id] = customAnswers.join(", ");
          }
          // If the draft had __OTHER__ or if there's a custom answer from server, ensure __OTHER__ is selected
          if (arr.includes("__OTHER__") || customAnswers.length > 0) {
            arr = arr.filter((x: string) => standardOptions.includes(x));
            arr.push("__OTHER__");
          }
        }
        vals[q.id] = arr;
      } else if (q.type === "radio") {
        let val = ans || "";
        if (q.allowOther && q.options && val !== "" && !q.options.includes(val)) {
          if (val !== "__OTHER__") {
            others[q.id] = val;
          }
          val = "__OTHER__";
        }
        vals[q.id] = val;
      } else {
        vals[q.id] = ans || "";
      }
    });
    return { defaultValues: vals, initialOtherValues: others };
  }, [form.id, initialAnswers, questions]);

  const [otherValues, setOtherValues] = useState<Record<string, string>>(initialOtherValues);

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

  const { handleSubmit, control, watch, formState: { isSubmitting }, trigger, reset } = methods;

  useEffect(() => {
    const subscription = watch((value) => {
      try {
        localStorage.setItem(LS_KEY(form.id), JSON.stringify(value));
      } catch {}
    });
    return () => subscription.unsubscribe();
  }, [watch, form.id]);

  const [currentStep, setCurrentStep] = useState(0);
  const totalSteps = Math.ceil(questions.length / QUESTIONS_PER_STEP);
  
  const currentQuestions = questions.slice(
    currentStep * QUESTIONS_PER_STEP,
    (currentStep + 1) * QUESTIONS_PER_STEP
  );

  const nextStep = async () => {
    const fieldsToValidate = currentQuestions.map(q => q.id);
    const isStepValid = await trigger(fieldsToValidate);
    if (isStepValid) {
      setCurrentStep(prev => Math.min(prev + 1, totalSteps - 1));
      window.scrollTo(0, 0);
    }
  };

  const prevStep = () => {
    setCurrentStep(prev => Math.max(prev - 1, 0));
    window.scrollTo(0, 0);
  };

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

    try {
      const formattedAnswers = questions.map((q) => {
        let val = values[q.id] as string | string[] | undefined;
        if (q.allowOther) {
          const customText = otherValues[q.id] || "";
          if (Array.isArray(val)) {
            val = val.map(v => v === "__OTHER__" ? customText : v);
          } else if (val === "__OTHER__") {
            val = customText;
          }
        }
        const finalString = Array.isArray(val) ? val.join(", ") : (val || "");
        if (q.required && !finalString.trim()) {
          throw new Error(`จำเป็นต้องตอบ "${stripHtml(q.label)}" (สำหรับตัวเลือก 'อื่นๆ')`);
        }
        return {
          questionId: q.id,
          value: finalString,
        };
      });

      const res = await submitForm(form.id, formattedAnswers);
      if (res.ok) {
        toast.success(isUpdating ? "อัปเดตฟอร์มสำเร็จ!" : "ส่งฟอร์มสำเร็จ!");
      }
    } catch (err: any) {
      console.error(err);
      toast.error(err.message || "ไม่สามารถส่งฟอร์มได้");
    }
  };

  const handleDelete = async () => {
    try {
      const res = await deleteOwnSubmission(form.id);
      if (res.ok) {
        toast.success("ลบข้อมูลสำเร็จ!");
        localStorage.removeItem(LS_KEY(form.id));
        reset({});
        router.refresh();
      }
    } catch (err: any) {
      console.error(err);
      toast.error(err.message || "ไม่สามารถลบข้อมูลได้");
    }
  };

  return (
    <div className="relative pb-16">
      {!form.isOpen && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/50 backdrop-blur-sm p-4">
          <Card className="w-full max-w-sm">
            <CardHeader>
              <CardTitle className="text-center text-xl">
                ฟอร์มนี้ถูกปิดใช้งานชั่วคราว
              </CardTitle>
            </CardHeader>
          </Card>
        </div>
      )}
      
      <Card className="border-t-8 border-t-primary shadow-md mb-6">
        <CardHeader>
          <CardTitle className="text-3xl font-bold">{form.title}</CardTitle>
          {form.description && (
            <CardDescription className="text-base mt-2 whitespace-pre-wrap">
              {form.description}
            </CardDescription>
          )}
        </CardHeader>
      </Card>

      <Form {...methods}>
        <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
          <div className="space-y-4">
            {currentQuestions.map((q) => (
              <Card key={q.id} className="shadow-sm">
                <CardHeader className="pb-3">
                  <div className="flex items-start justify-between gap-4">
                    <div className="text-base leading-normal mt-1 flex-1">
                      <HtmlDisplay html={q.label} />
                    </div>
                    <div className="flex items-start gap-4 shrink-0">
                      {q.imageUrl && (
                      <Dialog>
                        <DialogTrigger asChild>
                          <div className="relative max-w-full h-auto overflow-hidden rounded-md border inline-block shrink-0 cursor-pointer hover:opacity-80 transition-opacity">
                            <Image
                              width={100}
                              height={100}
                              src={q.imageUrl}
                              alt={q.label}
                              className="object-contain w-auto"
                            />
                          </div>
                        </DialogTrigger>
                        <DialogContent className="max-w-4xl w-[90vw] h-[80vh] border-0 bg-transparent p-0 shadow-none flex justify-center items-center">
                          <DialogTitle className="sr-only">Enlarged image for {q.label}</DialogTitle>
                          <div className="relative w-full h-full">
                            <Image
                              src={q.imageUrl}
                              alt={q.label}
                              fill
                              unoptimized
                              className="object-contain rounded-md"
                              sizes="(max-width: 768px) 100vw, (max-width: 1200px) 75vw, 60vw"
                            />
                          </div>
                        </DialogContent>
                      </Dialog>
                    )}
                    {q.required && <span className="text-destructive mt-1">*</span>}
                  </div>
                  </div>
                </CardHeader>
                <CardContent>
                  <FormField
                    control={control}
                    name={q.id}
                    render={({ field }) => (
                      <FormItem>
                            {q.type === "text" && (
                              <FormControl>
                                <Input
                                  placeholder="คำตอบของคุณ"
                                  {...field}
                                  value={(field.value as string) || ""}
                                  className="w-full"
                                  disabled={!form.isOpen || isSubmitting}
                                />
                              </FormControl>
                            )}

                            {q.type === "textarea" && (
                              <FormControl>
                                <Textarea
                                  placeholder="คำตอบของคุณ"
                                  {...field}
                                  value={(field.value as string) || ""}
                                  className="w-full min-h-24 resize-y"
                                  disabled={!form.isOpen || isSubmitting}
                                />
                              </FormControl>
                            )}

                            {q.type === "radio" && q.options && (
                              <FormControl>
                                <RadioGroup
                                  onValueChange={field.onChange}
                                  defaultValue={field.value as string}
                                  value={field.value as string}
                                  className="space-y-2"
                                  disabled={!form.isOpen || isSubmitting}
                                >
                                  {q.options.map((opt, idx) => (
                                    <div key={idx} className="flex items-center space-x-2">
                                      <RadioGroupItem value={opt} id={`${q.id}-${idx}`} />
                                      <Label htmlFor={`${q.id}-${idx}`} className="font-normal cursor-pointer">
                                        <FormattedText text={opt} />
                                      </Label>
                                    </div>
                                  ))}
                                  {q.allowOther && (
                                    <div className="flex flex-col space-y-2">
                                      <div className="flex items-center space-x-2">
                                        <RadioGroupItem value="__OTHER__" id={`${q.id}-other`} />
                                        <Label htmlFor={`${q.id}-other`} className="font-normal cursor-pointer">
                                          อื่นๆ
                                        </Label>
                                      </div>
                                      {field.value === "__OTHER__" && (
                                        <Input 
                                          className="ml-6 w-full max-w-xs" 
                                          value={otherValues[q.id] || ""}
                                          onChange={(e) => setOtherValues(prev => ({...prev, [q.id]: e.target.value}))}
                                          placeholder="โปรดระบุ"
                                          disabled={!form.isOpen || isSubmitting}
                                        />
                                      )}
                                    </div>
                                  )}
                                </RadioGroup>
                              </FormControl>
                            )}

                            {q.type === "checkbox" && q.options && (
                              <FormControl>
                                <div className="space-y-2">
                                  {q.options.map((opt, idx) => {
                                    const isChecked = Array.isArray(field.value) && field.value.includes(opt);
                                    return (
                                      <div key={idx} className="flex items-center space-x-2">
                                        <Checkbox
                                          id={`${q.id}-${idx}`}
                                          checked={isChecked}
                                          disabled={!form.isOpen || isSubmitting}
                                          onCheckedChange={(checked) => {
                                            const current = Array.isArray(field.value) ? field.value : [];
                                            const updated = checked
                                              ? [...current, opt]
                                              : current.filter((item) => item !== opt);
                                            field.onChange(updated);
                                          }}
                                        />
                                        <Label htmlFor={`${q.id}-${idx}`} className="font-normal cursor-pointer">
                                          <FormattedText text={opt} />
                                        </Label>
                                      </div>
                                    );
                                  })}
                                  {q.allowOther && (
                                    <div className="flex flex-col space-y-2">
                                      <div className="flex items-center space-x-2">
                                        <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 : [];
                                            const updated = checked 
                                              ? [...current, "__OTHER__"] 
                                              : current.filter(x => x !== "__OTHER__");
                                            field.onChange(updated);
                                          }}
                                        />
                                        <Label htmlFor={`${q.id}-other`} className="font-normal cursor-pointer">
                                          อื่นๆ
                                        </Label>
                                      </div>
                                      {Array.isArray(field.value) && field.value.includes("__OTHER__") && (
                                        <Input 
                                          className="ml-6 w-full max-w-xs" 
                                          value={otherValues[q.id] || ""}
                                          onChange={(e) => setOtherValues(prev => ({...prev, [q.id]: e.target.value}))}
                                          placeholder="โปรดระบุ"
                                          disabled={!form.isOpen || isSubmitting}
                                        />
                                      )}
                                    </div>
                                  )}
                                </div>
                              </FormControl>
                            )}
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                </CardContent>
              </Card>
            ))}
          </div>

          <div className="flex flex-col sm:flex-row items-center justify-between gap-4 pt-4">
            <div className="flex items-center gap-2 text-sm text-muted-foreground font-medium w-full sm:w-auto justify-center sm:justify-start">
              หน้า {currentStep + 1} จาก {totalSteps || 1}
            </div>
            
            <div className="flex justify-between sm:justify-end items-center gap-3 w-full sm:w-auto">
              {currentStep > 0 && (
                <Button 
                  type="button" 
                  variant="outline" 
                  onClick={prevStep}
                  disabled={isSubmitting || !form.isOpen}
                >
                  <ChevronLeft className="w-4 h-4 mr-1" /> ย้อนกลับ
                </Button>
              )}

              {currentStep < totalSteps - 1 ? (
                <Button 
                  type="button" 
                  onClick={nextStep}
                  disabled={isSubmitting || !form.isOpen}
                >
                  ถัดไป <ChevronRight className="w-4 h-4 ml-1" />
                </Button>
              ) : (
                <div className="flex gap-3">
                  {isUpdating && (
                    <AlertDialog>
                      <AlertDialogTrigger asChild>
                        <Button
                          type="button"
                          variant="destructive"
                          disabled={isSubmitting || !form.isOpen}
                        >
                          ลบ
                        </Button>
                      </AlertDialogTrigger>
                      <AlertDialogContent>
                        <AlertDialogHeader>
                          <AlertDialogTitle>ยืนยันการลบข้อมูล?</AlertDialogTitle>
                          <AlertDialogDescription>
                            คุณแน่ใจหรือไม่ว่าต้องการลบข้อมูลที่ส่งไปแล้ว? การกระทำนี้ไม่สามารถย้อนกลับได้
                          </AlertDialogDescription>
                        </AlertDialogHeader>
                        <AlertDialogFooter>
                          <AlertDialogCancel disabled={isSubmitting}>ยกเลิก</AlertDialogCancel>
                          <AlertDialogAction
                            variant="destructive"
                            onClick={handleDelete}
                            disabled={isSubmitting}
                          >
                            ยืนยันการลบ
                          </AlertDialogAction>
                        </AlertDialogFooter>
                      </AlertDialogContent>
                    </AlertDialog>
                  )}
                  <Button type="submit" disabled={isSubmitting || !form.isOpen} className="min-w-28">
                    {isSubmitting ? (
                      <>
                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                        กำลังส่ง
                      </>
                    ) : isUpdating ? (
                      "อัปเดตข้อมูล"
                    ) : (
                      "ส่ง"
                    )}
                  </Button>
                </div>
              )}
            </div>
          </div>
        </form>
      </Form>
    </div>
  );
}