"use client";

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

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

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

import {
  submitDocument,
  uniqueDocument,
  getDocumentById,
} from "@/src/services/admin/services";

import {
  
  DocumentFormData,
  getDocumentSchema,
} from "@/src/validation/admin/validation";
import { useFetchById } from "@/src/hooks/admin/useFetchById";
import FileInput from "@/src/components/admin/form/input/FileInput";

interface AddDocumentFormProps {
  onFormSubmit?: () => void;
}

export default function AddDocumentForm({
  onFormSubmit,
}: AddDocumentFormProps) {
  const router = useRouter();
  const { itemID, setItemID, setRefresh, setIsDrawerOpen, refresh, isDrawerOpen } = useStateContext();
  const { message, setMessage } = useToastMessage();
  const [imagePreview, setImagePreview] = useState<string | null>(null);
  const isEdit = itemID !== undefined && itemID !== null;

  const {
    register,
    handleSubmit,
    reset,
    watch,
    setValue,
    control,
    formState: { errors, isSubmitting },
  } = useForm<DocumentFormData>({
    resolver: zodResolver(getDocumentSchema(isEdit)),
    defaultValues: {
      document_icon: "",
      service_name: "",
      document_name: "",
      is_required: 0,
      info: "",
      upload_type: "single",
    },
  });

  /* =======================
     Unique Check
  ======================= */
  const { isUnique, error, checkUnique } =
    useMultiUnique(uniqueDocument, 800);

  const serviceName = watch("service_name");
  const documentName = watch("document_name");

  useEffect(() => {
    if (!serviceName || !documentName) return;

    checkUnique({
      payload: {
        service_name: serviceName.trim(),
        document_name: documentName.trim(),
      },
      currentId: itemID,
    });
  }, [serviceName, documentName, itemID, checkUnique]);

  /* =======================
     Fetch (Edit Mode)
  ======================= */
  const setFormData = useCallback((data: any) => {
    setImagePreview(data?.document_icon || null);
    reset({
      document_icon: data?.document_icon || "",
      document_name: data?.document_name || "",
      service_name: data?.service_name || "",
      is_required: data?.is_required || 0,
      info: data?.info || "",
      upload_type: data?.upload_type || "single",
    });
  }, [reset]);

  const fetchService = useCallback(async (itemID: number) => {
    const res = await getDocumentById(itemID);
    return res.data.data;
  }, []);

  useFetchById({
    fetchService,
    setFormData,
    onError: (err) => console.error(err),
  });

  /* =======================
     Submit
  ======================= */
  const onSubmit = async (data: DocumentFormData) => {


    if (isUnique === false) {
      setMessage({
        type: "error",
        text: "Document already exists.",
      });
      return;
    }

    setMessage(null);

    try {

      const res = await submitDocument(itemID, {
        service_name: data.service_name.trim(),
        document_name: data.document_name.trim(),
        is_required: data.is_required,
        info: data.info?.trim() || "",
        upload_type: data.upload_type || "single",
        document_icon: data.document_icon[0],
      });

      if (!res.data.success) {
        throw new Error(res.data.message);
      }

      setMessage({
        type: "success",
        text: itemID
          ? "Document updated successfully!"
          : "Document added successfully!",
      });

      reset({
        service_name: "",
        document_name: "",
        is_required: 0,
        info: "",
        upload_type: "single",
      });

      setTimeout(() => {
        setRefresh(!refresh);
        setIsDrawerOpen(false);
        setItemID(undefined);
      }, 200);




      onFormSubmit?.();
    } catch (err: any) {
      setMessage({
        type: "error",
        text: err?.response?.data?.message || err.message,
      });
    }
  };

  /* =======================
     Static Service Options
  ======================= */
  const serviceOptions = [
    { label: "Home Improvement Program", value: "Home Improvement Program" },
    {
      label: "First-Time Home Buyer Assistance",
      value: "First Time Home Buyer Program",
    },
    {
      label: "Tenant Maintenance Requests",
      value: "Tenant Maintenance Requests",
    },
  ];

  /* =======================
     Render
  ======================= */
  return (
    <Form
      onSubmit={handleSubmit(onSubmit)}
      className="space-y-1"
      message={message || undefined}
      isSubmitting={isSubmitting}
    >

      {/* Service Dropdown */}
      <FormGroup className="flex-1">
        <Label required>Upload Icon Image</Label>
        <Controller
          name="document_icon"
          control={control}
          rules={{
            validate: (files) =>
              isEdit || (files && files.length > 0) ? true : "Document icon is required",
          }}
          render={({ field }) => (
            <FileInput
              accept=".png,.jpg,.jpeg,.svg"
              onChange={(e) => {
                field.onChange(e.target.files);
                if (e.target.files?.[0])
                  setImagePreview(URL.createObjectURL(e.target.files[0]));
              }}
              error={!!errors.document_icon}
              errorMessage={errors.document_icon?.message?.toString()}
            />
          )}
        />
        {imagePreview && (
          <img
            src={imagePreview}
            alt="Preview"
            className="max-h-64 rounded-lg border mt-2"
          />
        )}

      </FormGroup>
      <div className="flex gap-4 mb-0">
        {/* Service Dropdown */}

        <FormGroup className="flex-1">
          <Label required>Service Name </Label>
          <Controller
            name="service_name"
            control={control}
            render={({ field }) => (
              <Select
                options={serviceOptions}
                placeholder="Select service"
                value={field.value}
                onChange={(val) => field.onChange(val)}
                error={!!errors.service_name}
                errorMessage={errors.service_name?.message?.toString()}
              />
            )}
          />
        </FormGroup>

        {/* Document Name */}
        <FormGroup className="flex-1">
          <Label required>Document Name </Label>
          <Input
            placeholder="Enter document name"
            {...register("document_name")}
            error={!!errors.document_name || isUnique === false}
            errorMessage={
              errors.document_name?.message ||
              (isUnique === false
                ? "Document already exists"
                : undefined) ||
              (error ? "Error checking uniqueness" : undefined)
            }
            hint="e.g., Bank statements, Employment verification letter"
          />
        </FormGroup>
      </div>

      {/* Is Required Toggle */}
      <FormGroup>
        <Label>Document Requirement</Label>
        <Controller
          name="is_required"
          control={control}

          render={({ field }) => (
            <Select
              options={[
                { label: "Optional", value: 0 },
                { label: "Required", value: 1 },
              ]}
              placeholder="Select requirement status"
              showPlaceholder={false}
              value={field.value}
              onChange={(val) => field.onChange(val)}
              error={!!errors.is_required}
              errorMessage={errors.is_required?.message?.toString()}
            />
          )}
        />
      </FormGroup>

      {/* Upload Type */}
      <FormGroup>
        <Label>Upload Type</Label>
        <Controller
          name="upload_type"
          control={control}
          render={({ field }) => (
            <Select
              options={[
                { label: "Single File", value: "single" },
                { label: "Multiple Files", value: "multiple" },
              ]}
              placeholder="Select upload type"
              showPlaceholder={false}
              value={field.value}
              onChange={(val) => field.onChange(val)}
              error={!!errors.upload_type}
              errorMessage={errors.upload_type?.message?.toString()}
            />
          )}
        />
      </FormGroup>

      {/* Info Textarea */}
      <FormGroup>
        <Label>Additional Information</Label>
        <TextArea
          placeholder="Enter additional information or instructions..."
          rows={4}
          {...register("info")}
          error={!!errors.info}
          errorMessage={errors.info?.message?.toString()}
        />
      </FormGroup>
    </Form>
  );
}