"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 { useToastMessage } from "@/src/hooks/admin/useToastMessage";
import { useStateContext } from "@/src/context/admin/StateContext";
import { useUniqueCheck } from "@/src/hooks/admin/useUniqueCheck";

import {
  submitState,
  uniqueState,
  getStateById,
} from "@/src/services/admin/services";

import { getAllCountries } from "@/src/services/admin/services";

import {
  stateSchema,
  StateFormData,
} from "@/src/validation/admin/validation";
import { useFetchById } from "@/src/hooks/admin/useFetchById";

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

export default function AddStateForm({
  onFormSubmit,
}: AddStateFormProps) {
  const router = useRouter();
  const { itemID, setItemID , setRefresh , setIsDrawerOpen, refresh , isDrawerOpen } = useStateContext();
  const { message, setMessage } = useToastMessage();

  const [countries, setCountries] = useState<any[]>([]);

  const {
    register,
    handleSubmit,
    reset,
    watch,
    setValue,
    control,
    formState: { errors, isSubmitting },
  } = useForm<StateFormData>({
    resolver: zodResolver(stateSchema),
    defaultValues: {
      name: "",
      country_id: 0,
    },
  });

  /* =======================
     Load Countries
  ======================= */
  useEffect(() => {
    getAllCountries().then((res) => {
      if (res.data.success) {
        const formatted = res.data.data.map((c: any) => ({
          label: c.name,
          value: c.id,
        }));
        setCountries(formatted);
      }
    });
  }, []);

  /* =======================
     Unique Check
  ======================= */
  // Adapter to match expected signature for useUniqueCheck
  const uniqueStateAdapter = (name: string, country_id?: number) => {
    // If country_id is undefined, pass 0 or handle as needed
    return uniqueState(name, country_id ?? 0);
  };

  const { isUnique, error, checkUnique } = useUniqueCheck(
    uniqueStateAdapter,
    800
  );

  const stateName = watch("name");
  const countryId = watch("country_id");

  useEffect(() => {
    if (!stateName?.trim() || !countryId || itemID) return;
    checkUnique(stateName.trim(), countryId);
  }, [stateName, countryId, itemID, checkUnique]);

  /* =======================
     Fetch (Edit Mode)
  ======================= */
  const setFormData = useCallback((data: any) => {
    reset({
      name: data?.name || "",
      country_id: data?.country_id || undefined,
    });
  }, [reset]);

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

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

  /* =======================
     Submit
  ======================= */
  const onSubmit = async (data: StateFormData) => {
    if (isUnique === false) {
      setMessage({
        type: "error",
        text: "State already exists.",
      });
      return;
    }

    setMessage(null);

    try {
      const res = await submitState(itemID, {
        name: data.name.trim(),
        country_id: Number(data.country_id),
      });

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

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

      reset({ name: "", country_id: undefined });
      setTimeout(() => {
        setRefresh(!refresh);
        setIsDrawerOpen(false);
        setItemID(undefined);   
      }, 200);
      
      onFormSubmit?.();
    } catch (err: any) {
      setMessage({
        type: "error",
        text: err?.response?.data?.message || err.message,
      });
    }
  };

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

    {/* Country */}
    <div className="flex gap-4">
      <FormGroup className="flex-1">
        <Label required>Country </Label>
        <Controller
          name="country_id"
          control={control}
          render={({ field }) => (
            <Select
              options={countries}
              placeholder="Select country"
              value={field.value}
              onChange={(val) => field.onChange(Number(val))}
              error={!!errors.country_id}
              errorMessage={errors.country_id?.message?.toString()}
            />
          )}
        />
      </FormGroup>


      {/* State Name */}
      <FormGroup className="flex-1">
        <Label required>State Name</Label>
        <Input
          placeholder="Enter state name"
          {...register("name")}
          error={!!errors.name || isUnique === false}
          errorMessage={
            errors.name?.message ||
            (isUnique === false
              ? "State already exists"
              : undefined) ||
            (error ? "Error checking uniqueness" : undefined)
          }
          hint="e.g., New York, California"
        />
      </FormGroup>
      </div>

      
    </Form>
  );
}