"use client";
import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { raiseTicketSchema, raiseTicketFormData } from "@/src/validation/web/validation";
import { createTicket, getCurrentCustomer, uploadTicketDocuments } from "@/src/services/web/services";
import RaiseATicket from "./RaiseATicket";

export default function RaiseTicketForm() {
  const router = useRouter();
  const [loading, setLoading] = useState(false);
  const [customerId, setCustomerId] = useState<number | null>(null);

  useEffect(() => {
    const fetchCustomer = async () => {
      try {
        const response = await getCurrentCustomer();
        const customer = response.data.user;
       
        setCustomerId(customer.id);
      } catch (error) {
        console.error("Error fetching customer:", error);
        // Fallback to 1 if not authenticated
        setCustomerId(1);
      }
    };
    fetchCustomer();
  }, []);

  const {
    control,
    handleSubmit,
    formState: { errors },
    reset,
  } = useForm<raiseTicketFormData>({
    resolver: zodResolver(raiseTicketSchema),
    mode: "onChange",
    defaultValues: {
      questionType: "",
      applicationName: "",
      ticketTitle: "",
      ticketDescription: "",
      documents: [],
    },
  });

  const onSubmit = async (data: raiseTicketFormData) => {
    try {
      setLoading(true);
      const payload = {
        customer_id: customerId,
        question_type: data.questionType,
        application_name: data.applicationName,
        title: data.ticketTitle,
        description: data.ticketDescription || "", // Allow empty description
      };

      const ticketResponse = await createTicket(payload);
      const ticketId = ticketResponse.data.data.id;

      // Upload documents if any
      if (data.documents && data.documents.length > 0) {
        const formData = new FormData();
        data.documents.forEach((file: File) => {
          formData.append("documents", file);
        });

        await uploadTicketDocuments(ticketId, formData);
      }

      router.push("/ticket/ticket-list");
    } catch (error: any) {
      alert(error.response?.data?.message || "Failed to create ticket");
    } finally {
      setLoading(false);
    }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <RaiseATicket
        control={control}
        errors={errors}
        isReadOnly={loading}
      />
    </form>
  );
}