"use client";

import * as React from "react";
import { cn } from "@/lib/utils";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Mail, Phone, MapPin, Send, Check } from "lucide-react";
import { cva, type VariantProps } from "class-variance-authority";

const contactFormVariants = cva("w-full", {
  variants: {
    variant: {
      default: "max-w-2xl mx-auto",
      "with-info": "grid grid-cols-1 lg:grid-cols-3 gap-8 max-w-5xl mx-auto",
      minimal: "max-w-lg mx-auto bg-transparent border-none shadow-none",
    },
  },
  defaultVariants: {
    variant: "default",
  },
});

export interface ContactInfo {
  email?: string;
  phone?: string;
  address?: string;
}

export interface ContactFormProps extends React.FormHTMLAttributes<HTMLFormElement>, VariantProps<typeof contactFormVariants> {
  onSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;
  contactInfo?: ContactInfo;
}

/**
 * ContactForm — a contact form with a character-counted message field.
 *
 * @example
 * <ContactForm
 *   onSubmit={(e) => {
 *     e.preventDefault();
 *     send(new FormData(e.currentTarget));
 *   }}
 * />
 */
export function ContactForm({
  className,
  variant,
  onSubmit,
  contactInfo = {
    email: "hello@example.com",
    phone: "+1 (555) 123-4567",
    address: "123 Main St, City, Country",
  },
  ...props
}: ContactFormProps) {
  const [name, setName] = React.useState("");
  const [email, setEmail] = React.useState("");
  const [subject, setSubject] = React.useState("");
  const [message, setMessage] = React.useState("");
  const [isSent, setIsSent] = React.useState(false);

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    onSubmit?.(e);
    setIsSent(true);
    setTimeout(() => setIsSent(false), 2000);
  };

  const messageLength = message.length;
  const isMessageNearLimit = messageLength >= 400;
  const isMessageAtLimit = messageLength >= 480;

  const FormContent = (
    <div className="space-y-4">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div className="space-y-2">
          <label className="text-sm font-medium leading-none" htmlFor="contact-name">
            Your Name
          </label>
          <Input
            id="contact-name"
            placeholder="John Doe"
            value={name}
            onChange={(e) => setName(e.target.value)}
            className="transition-all duration-200 focus-visible:ring-2 focus-visible:ring-primary/30"
            required
            disabled={isSent}
          />
        </div>
        <div className="space-y-2">
          <label className="text-sm font-medium leading-none" htmlFor="contact-email">
            Email Address
          </label>
          <Input
            id="contact-email"
            type="email"
            placeholder="john@example.com"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            className="transition-all duration-200 focus-visible:ring-2 focus-visible:ring-primary/30"
            required
            disabled={isSent}
          />
        </div>
      </div>
      <div className="space-y-2">
        <label className="text-sm font-medium leading-none" htmlFor="contact-subject">
          Subject
        </label>
        <Input
          id="contact-subject"
          placeholder="How can we help you?"
          value={subject}
          onChange={(e) => setSubject(e.target.value)}
          className="transition-all duration-200 focus-visible:ring-2 focus-visible:ring-primary/30"
          required
          disabled={isSent}
        />
      </div>
      <div className="space-y-2">
        <label className="text-sm font-medium leading-none" htmlFor="contact-message">
          Message
        </label>
        <textarea
          id="contact-message"
          className="flex min-h-[150px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 transition-all duration-200 disabled:cursor-not-allowed disabled:opacity-50"
          placeholder="Type your message here..."
          value={message}
          onChange={(e) => setMessage(e.target.value.slice(0, 500))}
          required
          disabled={isSent}
        />
        <div className={cn("text-xs text-right mt-1 font-medium transition-colors", {
          "text-muted-foreground": !isMessageNearLimit,
          "text-amber-500": isMessageNearLimit && !isMessageAtLimit,
          "text-red-500": isMessageAtLimit,
        })}>
          {messageLength} / 500
        </div>
      </div>
      <Button 
        type="submit" 
        className={cn("w-full md:w-auto transition-all", isSent && "bg-emerald-500 hover:bg-emerald-600")} 
        disabled={isSent}
      >
        {isSent ? (
          <>
            <Check className="mr-2 h-4 w-4" />
            Sent!
          </>
        ) : (
          <>
            <Send className="mr-2 h-4 w-4" />
            Send Message
          </>
        )}
      </Button>
    </div>
  );

  const containerClass = cn(contactFormVariants({ variant, className }));

  if (variant === "with-info") {
    return (
      <div className={containerClass}>
        <div className="lg:col-span-2">
          <Card>
            <CardHeader>
              <CardTitle className="text-2xl">Get in Touch</CardTitle>
              <CardDescription>
                Fill out the form below and we'll get back to you as soon as possible.
              </CardDescription>
            </CardHeader>
            <CardContent>
              <form onSubmit={handleSubmit} {...props}>
                {FormContent}
              </form>
            </CardContent>
          </Card>
        </div>
        <div className="space-y-6">
          <Card className="h-full bg-primary text-primary-foreground">
            <CardHeader>
              <CardTitle className="text-xl">Contact Information</CardTitle>
            </CardHeader>
            <CardContent className="space-y-6">
              {contactInfo.email && (
                <div className="flex items-start space-x-4 hover:bg-primary-foreground/10 rounded-lg p-3 transition-all group cursor-default -ml-3">
                  <Mail className="h-5 w-5 mt-0.5 opacity-80 group-hover:text-white transition-colors" />
                  <div>
                    <h4 className="font-medium">Email</h4>
                    <p className="text-sm opacity-80">{contactInfo.email}</p>
                  </div>
                </div>
              )}
              {contactInfo.phone && (
                <div className="flex items-start space-x-4 hover:bg-primary-foreground/10 rounded-lg p-3 transition-all group cursor-default -ml-3">
                  <Phone className="h-5 w-5 mt-0.5 opacity-80 group-hover:text-white transition-colors" />
                  <div>
                    <h4 className="font-medium">Phone</h4>
                    <p className="text-sm opacity-80">{contactInfo.phone}</p>
                  </div>
                </div>
              )}
              {contactInfo.address && (
                <div className="flex items-start space-x-4 hover:bg-primary-foreground/10 rounded-lg p-3 transition-all group cursor-default -ml-3">
                  <MapPin className="h-5 w-5 mt-0.5 opacity-80 group-hover:text-white transition-colors" />
                  <div>
                    <h4 className="font-medium">Address</h4>
                    <p className="text-sm opacity-80">{contactInfo.address}</p>
                  </div>
                </div>
              )}
            </CardContent>
          </Card>
        </div>
      </div>
    );
  }

  if (variant === "minimal") {
    return (
      <div className={containerClass}>
        <div className="mb-8 text-center">
          <h2 className="text-3xl font-bold tracking-tight">Contact Us</h2>
          <p className="mt-2 text-muted-foreground">We'd love to hear from you</p>
        </div>
        <form onSubmit={handleSubmit} {...props}>
          {FormContent}
        </form>
      </div>
    );
  }

  return (
    <Card className={containerClass}>
      <CardHeader>
        <CardTitle className="text-2xl">Contact Us</CardTitle>
        <CardDescription>
          Send us a message and we'll reply as soon as possible.
        </CardDescription>
      </CardHeader>
      <CardContent>
        <form onSubmit={handleSubmit} {...props}>
          {FormContent}
        </form>
      </CardContent>
    </Card>
  );
}
Contact Form

Contact Us

Contact Us
