import React, { useState } from "react";
import { cn } from "@/lib/utils";

export interface ContactSplitProps {
  tag?: string;
  title: string;
  description: string;
  background?: { variant: string };
  useInvertedBackground?: boolean;
  imageSrc?: string;
  videoSrc?: string;
  imageAlt?: string;
  videoAriaLabel?: string;
  mediaAnimation?: "none" | "opacity" | "slide-up" | "blur-reveal";
  mediaPosition?: "left" | "right";
  inputPlaceholder?: string;
  buttonText?: string;
  termsText?: string;
  onSubmit?: (email: string) => void;
  className?: string;
  containerClassName?: string;
  contentClassName?: string;
  contactFormClassName?: string;
  tagClassName?: string;
  titleClassName?: string;
  descriptionClassName?: string;
  formWrapperClassName?: string;
  formClassName?: string;
  inputClassName?: string;
  buttonClassName?: string;
  buttonTextClassName?: string;
  termsClassName?: string;
  mediaWrapperClassName?: string;
  mediaClassName?: string;
}

export const ContactSplit: React.FC<ContactSplitProps> = ({
  tag,
  title,
  description,
  imageSrc,
  videoSrc,
  imageAlt = "",  mediaPosition = "right",  inputPlaceholder = "Enter your email",  buttonText = "Sign Up",  termsText,
  useInvertedBackground = false,
  className,
  containerClassName,
  contentClassName,
  tagClassName,
  titleClassName,
  descriptionClassName,
  formWrapperClassName,
  formClassName,
  inputClassName,
  buttonClassName,
  buttonTextClassName,
  termsClassName,
  mediaWrapperClassName,
  mediaClassName
}) => {
  const [email, setEmail] = useState("");

  const handleFormSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setEmail("");
  };

  return (
    <div
      className={cn(
        "w-full py-20 px-4",        useInvertedBackground && "bg-accent/10",        containerClassName
      )}
    >
      <div className={cn("max-w-6xl mx-auto", contentClassName)}>
        <div className={cn("grid grid-cols-1 md:grid-cols-2 gap-12 items-center", className)}>
          {mediaPosition === "left" && imageSrc && (
            <div className={cn("order-first", mediaWrapperClassName)}>
              <img src={imageSrc} alt={imageAlt} className={cn("w-full rounded-lg", mediaClassName)} />
            </div>
          )}

          <div className={cn("space-y-6", contactFormClassName)}>
            {tag && <p className={cn("text-sm font-semibold text-accent", tagClassName)}>{tag}</p>}
            <h2 className={cn("text-4xl font-bold", titleClassName)}>{title}</h2>
            <p className={cn("text-lg text-muted-foreground", descriptionClassName)}>{description}</p>

            <form onSubmit={handleFormSubmit} className={cn("space-y-4", formWrapperClassName)}>
              <div className={cn("space-y-2", formClassName)}>
                <input
                  type="email"
                  placeholder={inputPlaceholder}
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  className={cn(
                    "w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary",                    inputClassName
                  )}
                  required
                />
                <button
                  type="submit"
                  className={cn(
                    "w-full px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors",                    buttonClassName
                  )}
                >
                  <span className={buttonTextClassName}>{buttonText}</span>
                </button>
              </div>
            </form>

            {termsText && <p className={cn("text-xs text-muted-foreground", termsClassName)}>{termsText}</p>}
          </div>

          {mediaPosition === "right" && imageSrc && (
            <div className={cn("order-last", mediaWrapperClassName)}>
              <img src={imageSrc} alt={imageAlt} className={cn("w-full rounded-lg", mediaClassName)} />
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default ContactSplit;
