"use client";

import { useCallback } from "react";
import { Controller, useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { useRouter } from "next/navigation";

import Form from "@/src/components/admin/form/Form";
import FormGroup from "@/src/components/admin/form/FormGroup";
import Label from "@/src/components/admin/form/Label";
import Input from "@/src/components/admin/form/input/InputField";
import Textarea from "@/src/components/admin/form/input/TextArea";

import { useToastMessage } from "@/src/hooks/admin/useToastMessage";
import { useFetchById } from "@/src/hooks/admin/useFetchById";
import { useStateContext } from "@/src/context/admin/StateContext";

import { submitFaq, getFaqById } from "@/src/services/admin/services";
import { getFaqSchema, FaqFormData } from "@/src/validation/admin/validation";
import Select from "@/src/components/admin/form/Select";

export default function AddFaqForm({
  id
}: {
  id?: number;
}) {
  const { message, setMessage } = useToastMessage();
  const { refresh, setRefresh } = useStateContext();
  const router = useRouter();

  const isEdit = id !== undefined && id !== null;

  const {
    register,
    handleSubmit,
    reset,
    control,
    watch,
    formState: { errors, isSubmitting },
  } = useForm<FaqFormData & { is_draft: boolean }>({
    resolver: zodResolver(getFaqSchema(isEdit)),
    defaultValues: {
      faq_type: undefined,
      question: "",
      answer: "",
      status: 1,
      is_draft: false,
    },
  });

  const isDraft = watch("is_draft");

  const setFormData = useCallback(
    (data: any) => {
      reset({
        faq_type: data?.faq_type || undefined,
        question: data?.question || "",
        answer: data?.answer || "",
        status: data?.status || 1,
        is_draft: data?.status === 0,
      });
    },
    [reset]
  );

  useFetchById({
    fetchService: async (id) => {
      const res = await getFaqById(id);
      return res.data.data;
    },
    setFormData,
  });

  const onSubmit = async (data: FaqFormData & { is_draft: boolean }) => {
    try {
      const payload = {
        question: data.question,
        faq_type: data.faq_type,
        answer: data.answer,
        status: data.is_draft ? 0 : 1,
      };

      const res = await submitFaq(Number(id), payload);
      if (!res.data.success) throw new Error(res.data.message);

      setMessage({ type: "success", text: res.data.message });
      reset();
      setRefresh(!refresh);

      setTimeout(() => {
        router.push("/admin/faq-list");
      }, 800);
    } catch (err: any) {
      setMessage({ type: "error", text: err.message });
    }
  };

  return (
    <Form
      onSubmit={handleSubmit(onSubmit)}
      className="space-y-1 border p-6 rounded-lg bg-white"
      isSubmitting={isSubmitting}
      message={message || undefined}
      submitButtonText={isDraft ? "Save Draft" : "Save FAQ"}
      submitButtonClassName={isDraft ? "btn-secondary" : "btn-primary"}
    >
      <FormGroup>
        <Label required>FAQ Type</Label>
        <Controller
          name="faq_type"
          control={control}
          render={({ field }) => (
            <Select
              options={
                [
                  { label: "General", value: 1 },
                  { label: "Home Improvement Program", value: 2 },
                  { label: "First Time Buyer Program", value: 3 },
                  { label: "Tenant Maintenance Program", value: 4 },
                ]
              }
              placeholder="Choose FAQ Type"
              onChange={(val) => field.onChange(Number(val))}
              value={field.value ? Number(field.value) : undefined}
              error={!!errors.faq_type}
              errorMessage={errors.faq_type?.message}
            />
          )}
        />
      </FormGroup> 

      <FormGroup>
        <Label required>Question </Label>
        <Input
          {...register("question")} 
          error={!!errors.question}
          errorMessage={errors.question?.message}
          placeholder="Enter Question"
        />
      </FormGroup>

      <FormGroup>
        <Label required>Answer </Label>
        <Textarea
          {...register("answer")}
          rows={4}
          error={!!errors.answer}
          errorMessage={errors.answer?.message}
          placeholder="Enter Answer"
        />
      </FormGroup>
    </Form>
  );
}