"use client";

import React, { useState } from "react";
import PhoneInput from "react-phone-input-2";
import "react-phone-input-2/lib/style.css";

import { useCreatorRegister } from "@/state/auth/auth.action";
import { Button } from "../ui/button";
import { DialogFooter, DialogHeader, DialogTitle } from "../ui/dialog";
import Link from "next/link";

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

type FormDataType = {
  first_name: string;
  last_name: string;
  email: string;
  phone_no: string;
  instagram: string;
  youtube: string;
  twitter: string;
  country: string;
  description: string;
  demo_video_link: string;
};

type FormErrors = Partial<Record<keyof FormDataType, string>>;

const Influencer: React.FC<InfluencerProps> = ({ onModalClose }) => {
  const [formData, setFormData] = useState<FormDataType>({
    first_name: "",
    last_name: "",
    email: "",
    phone_no: "",
    instagram: "",
    youtube: "",
    twitter: "",
    country: "",
    description: "",
    demo_video_link: "",
  });

  const [errors, setErrors] = useState<FormErrors>({});
  const [acceptTerms, setAcceptTerms] = useState(false);
  const [submitted, setSubmitted] = useState(false);
  const [isSubmitting, setIsSubmitting] = useState(false);

  const { mutate: venderRegister } = useCreatorRegister();

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

    if (errors[name as keyof FormDataType]) {
      setErrors((prev) => ({ ...prev, [name]: undefined }));
    }
  };

  const validate = () => {
    const newErrors: FormErrors = {};

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

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

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

    if (!formData.phone_no) newErrors.phone_no = "Phone number is required";

    // if (!formData.instagram.trim())
    //   newErrors.instagram = "Instagram is required";

    // if (!formData.youtube.trim()) newErrors.youtube = "YouTube is required";

    // if (!formData.twitter.trim()) newErrors.twitter = "Twitter is required";

    // if (!formData.country.trim()) newErrors.country = "Country is required";

    // if (!formData.demo_video_link.trim())
    //   newErrors.demo_video_link = "Demo video link is required";

    if (!formData.description.trim())
      newErrors.description = "Description is required";

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

  const handleSubmit = () => {
    setSubmitted(true);

    if (!validate() || !acceptTerms) return;

    setIsSubmitting(true);

    const data = new FormData();
    Object.entries(formData).forEach(([key, value]) => {
      data.append(key, value);
    });

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

  const inputClass = (error?: string) =>
    `p-3 rounded-lg bg-[#0A0A0B] text-white w-full border ${
      error ? "border-red-500" : "border-gray-700"
    }`;

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

      <div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
          <label className="text-gray-300">First Name</label>
          <input
            name="first_name"
            value={formData.first_name}
            onChange={handleChange}
            className={inputClass(errors.first_name)}
          />
          {errors.first_name && (
            <p className="text-red-500 text-sm">{errors.first_name}</p>
          )}
        </div>

        <div>
          <label className="text-gray-300">Last Name</label>
          <input
            name="last_name"
            value={formData.last_name}
            onChange={handleChange}
            className={inputClass(errors.last_name)}
          />
          {errors.last_name && (
            <p className="text-red-500 text-sm">{errors.last_name}</p>
          )}
        </div>

        <div>
          <label className="text-gray-300">Email</label>
          <input
            name="email"
            value={formData.email}
            onChange={handleChange}
            className={inputClass(errors.email)}
          />
          {errors.email && (
            <p className="text-red-500 text-sm">{errors.email}</p>
          )}
        </div>

        <div>
          <label className="text-gray-300 mb-1 block">Phone Number</label>
          <PhoneInput
            country="ae"
            value={formData.phone_no}
            onChange={(value) =>
              setFormData((prev) => ({ ...prev, phone_no: value }))
            }
            inputStyle={{
              width: "100%",
              height: "50px",
              backgroundColor: "#0A0A0B",
              color: "white",
              borderRadius: "8px",
              border: "1px solid #374151",
              paddingLeft: "48px",
            }}
            buttonStyle={{
              backgroundColor: "#0A0A0B",
              border: "none",
            }}
            dropdownStyle={{
              backgroundColor: "#0A0A0B",
              color: "white",
            }}
          />
          {errors.phone_no && (
            <p className="text-red-500 text-sm">{errors.phone_no}</p>
          )}
        </div>
        <div>
          <label className="text-gray-300">Instagram</label>
          <input
            name="instagram"
            value={formData.instagram}
            onChange={handleChange}
            className={inputClass(errors.instagram)}
          />
          {errors.instagram && (
            <p className="text-red-500 text-sm">{errors.instagram}</p>
          )}
        </div>

        <div>
          <label className="text-gray-300">YouTube</label>
          <input
            name="youtube"
            value={formData.youtube}
            onChange={handleChange}
            className={inputClass(errors.youtube)}
          />
          {errors.youtube && (
            <p className="text-red-500 text-sm">{errors.youtube}</p>
          )}
        </div>

        <div>
          <label className="text-gray-300">Twitter</label>
          <input
            name="twitter"
            value={formData.twitter}
            onChange={handleChange}
            className={inputClass(errors.twitter)}
          />
          {errors.twitter && (
            <p className="text-red-500 text-sm">{errors.twitter}</p>
          )}
        </div>

        <div>
          <label className="text-gray-300">Country</label>
          <input
            name="country"
            value={formData.country}
            onChange={handleChange}
            className={inputClass(errors.country)}
          />
          {errors.country && (
            <p className="text-red-500 text-sm">{errors.country}</p>
          )}
        </div>

        <div className="md:col-span-2">
          <label className="text-gray-300">Demo Video Link</label>
          <input
            name="demo_video_link"
            value={formData.demo_video_link}
            onChange={handleChange}
            className={inputClass(errors.demo_video_link)}
          />
        </div>

        <div className="md:col-span-2">
          <label className="text-gray-300">Description</label>
          <textarea
            name="description"
            value={formData.description}
            onChange={handleChange}
            className={inputClass(errors.description) + " h-24"}
          />
        </div>
      </div>

      <label className="flex gap-3 mt-4 text-gray-300">
        <input
          type="checkbox"
          checked={acceptTerms}
          onChange={(e) => setAcceptTerms(e.target.checked)}
          className="mt-1 h-4 w-4 accent-red-500"
        />
        <span>
          I confirm that I am the original creator or legal rights holder of the
          content and agree to the Reelflix Creator Onboarding Terms.{" "}
          <Link
            href={"/creator-onboarding-terms-content-license"}
            className="font-bold text-white"
            onClick={onModalClose}
          >
            Creator Onboarding Terms & Content License
          </Link>
        </span>
      </label>

      {submitted && !acceptTerms && (
        <p className="text-red-500 text-sm mt-1">
          You must accept the terms to continue
        </p>
      )}

      <DialogFooter className="mt-6">
        <Button
          onClick={handleSubmit}
          disabled={isSubmitting}
          className={`w-full ${
            isSubmitting
              ? "bg-gray-600 cursor-not-allowed"
              : "bg-gradient-to-r from-[#ED3A57] to-[#FD521E]"
          }`}
        >
          {isSubmitting ? "Registering..." : "Register"}
        </Button>
      </DialogFooter>
    </div>
  );
};

export default Influencer;