"use client";

import { useVenderRegister } from "@/state/auth/auth.action";
import React, { useState } from "react";
import PhoneInput from "react-phone-input-2";
import "react-phone-input-2/lib/style.css"; // Ensure CSS is imported for PhoneInput
import { Button } from "../ui/button";
import { DialogFooter, DialogHeader, DialogTitle } from "../ui/dialog";
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from "../ui/select";
import Link from "next/link";

interface VendorRegisterProps {
  onModalClose: () => void;
}

const VendorRegister: React.FC<VendorRegisterProps> = ({ onModalClose }) => {
  const [formData, setFormData] = useState({
    first_name: "",
    last_name: "",
    email: "",
    phone_no: "",
    company_name: "",
    company_phone: "",
    company_address: "",
    company_type: "",
    licensed: true,
    termsAccepted: false, // Added state for checkbox
    licence_image: null as File | null,
  });

  // Define error state structure
  const [errors, setErrors] = useState<{
    first_name?: string;
    last_name?: string;
    email?: string;
    phone_no?: string;
    company_name?: string;
    company_phone?: string;
    company_address?: string;
    company_type?: string;
    termsAccepted?: string;
  }>({});

  const handleChange = (
    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>
  ) => {
    const { name, value } = e.target;
    setFormData({ ...formData, [name]: value });

    // Clear error when user types
    if (errors[name as keyof typeof errors]) {
      setErrors({ ...errors, [name]: undefined });
    }
  };

  const validate = () => {
    const newErrors: typeof errors = {};

    // First Name
    if (!formData.first_name.trim())
      newErrors.first_name = "First Name is required";

    // Last Name
    if (!formData.last_name.trim())
      newErrors.last_name = "Last Name is required";

    // Email
    if (!formData.email.trim()) {
      newErrors.email = "Email is required";
    } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
      newErrors.email = "Invalid email format";
    }

    // Phone Number (React-phone-input-2 usually returns at least the dial code, check length)
    if (!formData.phone_no || formData.phone_no.length < 5) {
      newErrors.phone_no = "Phone Number is required";
    }

    // Company Fields
    if (!formData.company_name.trim())
      newErrors.company_name = "Company Name is required";
    if (!formData.company_phone.trim())
      newErrors.company_phone = "Country Name is required"; // Label says Country Name in your code
    if (!formData.company_address.trim())
      newErrors.company_address = "Address is required";
    if (!formData.company_type)
      newErrors.company_type = "Company Type is required";

    // Checkbox Validation
    if (!formData.termsAccepted) {
      newErrors.termsAccepted = "You must agree to the Terms & Content License";
    }

    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const { mutate: venderRegister } = useVenderRegister();

  const handleSubmit = async () => {
    if (!validate()) return;

    const data = new FormData();
    Object.entries(formData).forEach(([key, value]) => {
      // Don't append the termsAccepted boolean to FormData if backend doesn't need it
      if (key === "termsAccepted") return;

      if (value !== null && value !== undefined) {
        if (value instanceof File) {
          data.append(key, value);
        } else {
          data.append(key, String(value));
        }
      }
    });

    venderRegister(data, {
      onSuccess: () => {
        onModalClose();
      },
    });
  };

  return (
    <div>
      <DialogHeader className="items-center">
        <DialogTitle className="text-[24px] text-white font-normal text-center mt-5">
          Create Your Account as a Vendor
        </DialogTitle>
      </DialogHeader>

      <div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4">
        {/* First Name */}
        <div>
          <label htmlFor="first_name" className="text-gray-300 mb-1 block">
            First Name
          </label>
          <input
            id="first_name"
            type="text"
            name="first_name"
            placeholder="Enter first name"
            value={formData.first_name}
            onChange={handleChange}
            className={`p-3 rounded-lg bg-[#0A0A0B] border-none ${
              errors.first_name ? "border-red-500 ring-1 ring-red-500" : ""
            } text-white w-full`}
          />
          {errors.first_name && (
            <p className="text-red-500 text-sm mt-1">{errors.first_name}</p>
          )}
        </div>

        {/* Last Name */}
        <div>
          <label htmlFor="last_name" className="text-gray-300 mb-1 block">
            Last Name
          </label>
          <input
            id="last_name"
            type="text"
            name="last_name"
            placeholder="Enter last name"
            value={formData.last_name}
            onChange={handleChange}
            className={`p-3 rounded-lg bg-[#0A0A0B] border-none ${
              errors.last_name ? "border-red-500 ring-1 ring-red-500" : ""
            } text-white w-full`}
          />
          {errors.last_name && (
            <p className="text-red-500 text-sm mt-1">{errors.last_name}</p>
          )}
        </div>

        {/* Email */}
        <div>
          <label htmlFor="email" className="text-gray-300 mb-1 block">
            Email
          </label>
          <input
            id="email"
            type="email"
            name="email"
            placeholder="Enter email"
            value={formData.email}
            onChange={handleChange}
            className={`p-3 rounded-lg bg-[#0A0A0B] border-none ${
              errors.email ? "border-red-500 ring-1 ring-red-500" : ""
            } text-white w-full`}
          />
          {errors.email && (
            <p className="text-red-500 text-sm mt-1">{errors.email}</p>
          )}
        </div>

        {/* Phone Number */}
        <div>
          <label htmlFor="phone_no" className="text-gray-300 mb-1 block">
            Phone Number
          </label>
          <div
            className={`${errors.phone_no ? "border border-red-500 rounded-md" : ""}`}
          >
            <PhoneInput
              country={"ae"}
              enableSearch
              value={formData.phone_no}
              onChange={(value) => {
                setFormData({ ...formData, phone_no: value });
                if (value) setErrors({ ...errors, phone_no: undefined });
              }}
              inputStyle={{
                width: "100%",
                height: "50px",
                backgroundColor: "#0A0A0B",
                color: "white",
                borderRadius: "2px",
                paddingLeft: "48px",
                border: "none",
              }}
              buttonStyle={{
                backgroundColor: "#0A0A0B",
                border: "none",
              }}
              dropdownStyle={{
                backgroundColor: "#0A0A0B",
                color: "white",
              }}
            />
          </div>
          {errors.phone_no && (
            <p className="text-red-500 text-sm mt-1">{errors.phone_no}</p>
          )}
        </div>

        {/* Company Name */}
        <div>
          <label htmlFor="company_name" className="text-gray-300 mb-1 block">
            Company Name
          </label>
          <input
            id="company_name"
            type="text"
            name="company_name"
            placeholder="Enter company name"
            value={formData.company_name}
            onChange={handleChange}
            className={`p-3 rounded-lg bg-[#0A0A0B] border-none ${
              errors.company_name ? "border-red-500 ring-1 ring-red-500" : ""
            } text-white w-full`}
          />
          {errors.company_name && (
            <p className="text-red-500 text-sm mt-1">{errors.company_name}</p>
          )}
        </div>

        {/* Company Phone / Country Name */}
        <div>
          <label htmlFor="company_phone" className="text-gray-300 mb-1 block">
            Country Name
          </label>
          <input
            id="company_phone"
            type="text"
            name="company_phone"
            placeholder="Enter country name"
            value={formData.company_phone}
            onChange={handleChange}
            className={`p-3 rounded-lg bg-[#0A0A0B] border-none ${
              errors.company_phone ? "border-red-500 ring-1 ring-red-500" : ""
            } text-white w-full`}
          />
          {errors.company_phone && (
            <p className="text-red-500 text-sm mt-1">{errors.company_phone}</p>
          )}
        </div>

        {/* Company Address */}
        <div>
          <label htmlFor="company_address" className="text-gray-300 mb-1 block">
            Company Address
          </label>
          <input
            id="company_address"
            type="text"
            name="company_address"
            placeholder="Enter company address"
            value={formData.company_address}
            onChange={handleChange}
            className={`p-3 rounded-lg bg-[#0A0A0B] border-none ${
              errors.company_address ? "border-red-500 ring-1 ring-red-500" : ""
            } text-white w-full`}
          />
          {errors.company_address && (
            <p className="text-red-500 text-sm mt-1">
              {errors.company_address}
            </p>
          )}
        </div>

        {/* Company Type */}
        <div>
          <label htmlFor="company_type" className="text-gray-300 mb-1 block">
            Company Type
          </label>
          <div
            className={
              errors.company_type ? "rounded-lg ring-1 ring-red-500" : ""
            }
          >
            <Select
              value={formData.company_type}
              onValueChange={(value) => {
                setFormData({ ...formData, company_type: value });
                setErrors({ ...errors, company_type: undefined });
              }}
            >
              <SelectTrigger className="rounded-lg bg-[#0A0A0B] border-none text-white w-full p-6">
                <SelectValue placeholder="Select a Company" />
              </SelectTrigger>
              <SelectContent>
                <SelectGroup>
                  <SelectLabel>Company Types</SelectLabel>
                  <SelectItem value="sole_proprietorship">
                    Sole Proprietorship
                  </SelectItem>
                  <SelectItem value="partnership">Partnership</SelectItem>
                  <SelectItem value="private_limited">
                    Private Limited
                  </SelectItem>
                  <SelectItem value="public_limited">Public Limited</SelectItem>
                  <SelectItem value="llp">
                    Limited Liability Partnership (LLP)
                  </SelectItem>
                  <SelectItem value="one_person_company">
                    One Person Company
                  </SelectItem>
                  <SelectItem value="government">Government</SelectItem>
                  <SelectItem value="ngo">NGO</SelectItem>
                  <SelectItem value="other">Other</SelectItem>
                </SelectGroup>
              </SelectContent>
            </Select>
          </div>
          {errors.company_type && (
            <p className="text-red-500 text-sm mt-1">{errors.company_type}</p>
          )}
        </div>

        {/* Checkbox */}
        <div className="md:col-span-2 mt-4">
          <label className="flex gap-3 text-gray-300 cursor-pointer">
            <input
              type="checkbox"
              className="mt-1 h-4 w-4 accent-red-500"
              checked={formData.termsAccepted}
              onChange={(e) => {
                setFormData({ ...formData, termsAccepted: e.target.checked });
                if (e.target.checked)
                  setErrors({ ...errors, termsAccepted: undefined });
              }}
            />
            <span>
              I confirm that I am the original creator or legal rights holder of
              the content and agree to the{" "}
              <Link
                href="/studio-vendor-distribution-terms-content-license"
                className="font-bold text-white"
                onClick={onModalClose}
              >
                Studio, Vendor & Distribution Partner Terms
              </Link>
            </span>
          </label>
          {errors.termsAccepted && (
            <p className="text-red-500 text-sm mt-1 ml-7">
              {errors.termsAccepted}
            </p>
          )}
        </div>
      </div>

      <DialogFooter className="mt-6">
        <Button
          onClick={handleSubmit}
          className="w-full bg-gradient-to-r from-[#ED3A57] via-[#ED3A57] to-[#FD521E] text-white cursor-pointer"
        >
          Register
        </Button>
      </DialogFooter>
    </div>
  );
};

export default VendorRegister;