"use client";

import { Controller, useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { useCallback, useEffect, useState } from "react";
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 { useToastMessage } from "@/src/hooks/admin/useToastMessage";
import { useStateContext } from "@/src/context/admin/StateContext";
import { useUniqueCheck } from "@/src/hooks/admin/useUniqueCheck";
import { useFetchById } from "@/src/hooks/admin/useFetchById";

import {
  getModuleById,
  submitModule,
  uniqueModule,
  getAllModules, // You should create this service
} from "@/src/services/admin/services";
import { ModuleFormData, moduleSchema } from "@/src/validation/admin/validation";
import { useLabeledOptions } from "@/src/hooks/admin/useFetchOptions";

// You should create this schema


export default function AddModuleForm() {
  const { message, setMessage } = useToastMessage();
  const { setIsDrawerOpen, refresh, setRefresh, itemID, setItemID } = useStateContext();

  const {
    register,
    handleSubmit,
    reset,
    watch,
    control,
    formState: { errors, isSubmitting },
  } = useForm<ModuleFormData>({
    resolver: zodResolver(moduleSchema),
    defaultValues: {
      name: "",
      slug: "",
      icon: "",
      display_order: 0,
    },
  });

  // Watch fields
  const nameValue = watch("name");

  // ============================== Unique Check ==============================
  const { isUnique, error: uniqueError, checkUnique } = useUniqueCheck(uniqueModule, 700);

  useEffect(() => {
    if (nameValue?.trim()) {
      checkUnique(nameValue.trim(), itemID);
    }
  }, [nameValue, itemID, checkUnique]);



  // ============================== Edit Mode - Load Data ==============================
  const setFormData = useCallback(
    (data: any) => {
      reset({
        name: data.name || "",
        slug: data.slug || "",
        icon: data.icon || "",
        display_order: data.display_order ?? 0,
       

      });
    },
    [reset]
  );

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

  useFetchById({
    fetchService,
    setFormData,
    onError: (err) => console.error("Failed to load module:", err),
  });

  // ============================== Form Submission ==============================
  const onSubmit = async (formData: ModuleFormData) => {
    if (!itemID && isUnique === false) {
      setMessage({ type: "error", text: "Module name already exists" });
      return;
    }

    setMessage(null);

    try {
      const submitPayload = new FormData();
      Object.entries(formData).forEach(([key, value]) => {
       
      submitPayload.append(key, String(value ?? ""));
     
      });
      const response = await submitModule(itemID, submitPayload);
      const result = response.data;
      if (!result.success) {
        throw new Error(result.message || "Operation failed");
      }
      setMessage({
        type: "success",
        text: itemID ? "Module updated successfully!" : "Module created successfully!",
      });

      reset();
      setTimeout(() => {
        setRefresh(!refresh);
        setIsDrawerOpen(false);
        setItemID(undefined);   
      }, 200);
    } catch (err: any) {
      setMessage({ type: "error", text: err.message || "Something went wrong" });
    }
  };

  return (
    <Form
      onSubmit={handleSubmit(onSubmit)}
      className="space-y-5"
      isSubmitting={isSubmitting}
      message={message || undefined}
      isDisable={Object.keys(errors).length > 0 || isUnique === false}
    >
      {/* MODULE NAME */}
      <FormGroup>
        <Label required>Module Name</Label>
        <Input
          placeholder="Enter Module Name | e.g. Lead Management, Reports, Settings"
          {...register("name")}
          error={!!errors.name || isUnique === false}
          unique={isUnique === true && !errors.name}
          errorMessage={
            errors.name?.message ||
            (isUnique === false ? "Module Name already exists" : undefined) ||
           (uniqueError ? "Error checking uniqueness" : undefined)
          }
          hint="Enter a clear Module Namee.g. Lead Management, Reports, Settings"
        />
      </FormGroup>

      {/* SLUG */}
      <FormGroup>
        <Label required>Slug (URL identifier)</Label>
        <Input
          placeholder="Enter Slug | e.g. lead-management, reports, settings"
          {...register("slug")}
          error={!!errors.slug}
          errorMessage={errors.slug?.message}
          
        />
        <p className="text-xs text-gray-500 mt-1">Used in URLs. Use kebab-case.</p>
      </FormGroup>

      {/* ICON */}
      <FormGroup>
        <Label>Icon (optional)</Label>
        <Input
          placeholder="Enter Icon | e.g. lucide:users, heroicons:chart-bar"
          {...register("icon")}
          error={!!errors.icon}
          errorMessage={errors.icon?.message}
        />
      </FormGroup>
   


      {/* DISPLAY ORDER */}
      <FormGroup>
        <Label>Display Order</Label>
        <Input
          placeholder="Enter Display Order | e.g., 0 "
          type="number"
          min={0}
          {...register("display_order", { valueAsNumber: true })}
          error={!!errors.display_order}
          errorMessage={errors.display_order?.message}
        />
      </FormGroup>



    </Form>
  );
}