"use client";

import { useState } from "react";
import { Button } from "./ui/button";
import { Input } from "./ui/input";

export default function LeadForm() {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    whatsapp: "",
  });
  const [status, setStatus] = useState<"idle" | "loading" | "success" | "error">("idle");

  const formatWhatsApp = (value: string) => {
    const cleaned = ("" + value).replace(/\D/g, "");
    const match = cleaned.match(/^(\d{0,2})(\d{0,5})(\d{0,4})$/);
    if (!match) return value;
    
    const parts = [];
    if (match[1]) parts.push(`(${match[1]}`);
    if (match[2]) parts.push(`) ${match[2]}`);
    if (match[3]) parts.push(`-${match[3]}`);
    
    return parts.join("");
  };

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    if (name === "whatsapp") {
      setFormData({ ...formData, [name]: formatWhatsApp(value) });
    } else {
      setFormData({ ...formData, [name]: value });
    }
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setStatus("loading");

    try {
      const response = await fetch("/api/leads", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(formData),
      });

      if (!response.ok) throw new Error("Erro ao enviar dados");
      
      setStatus("success");
      setFormData({ name: "", email: "", whatsapp: "" });
    } catch (error) {
      console.error(error);
      setStatus("error");
    }
  };

  if (status === "success") {
    return (
      <div className="bg-brand-gray p-8 rounded-lg text-center border border-brand-gold/30">
        <h3 className="text-2xl font-bold text-brand-gold mb-2">Presença Confirmada VIP!</h3>
        <p className="text-gray-300">
          Obrigado por se cadastrar. Em breve você receberá seu voucher de desconto exclusivo no WhatsApp com a data da nossa inauguração.
        </p>
      </div>
    );
  }

  return (
    <form onSubmit={handleSubmit} className="bg-brand-gray p-6 sm:p-8 rounded-lg border border-brand-gold/20 shadow-2xl">
      <div className="mb-6 text-center">
        <h3 className="text-xl font-bold text-white mb-2">Garanta seu Desconto de Inauguração</h3>
        <p className="text-sm text-gray-400">Preencha os dados abaixo para receber um voucher exclusivo no WhatsApp.</p>
      </div>
      
      <div className="space-y-4">
        <div>
          <Input
            name="name"
            placeholder="Seu nome completo"
            required
            value={formData.name}
            onChange={handleChange}
          />
        </div>
        <div>
          <Input
            name="email"
            type="email"
            placeholder="Seu melhor e-mail"
            required
            value={formData.email}
            onChange={handleChange}
          />
        </div>
        <div>
          <Input
            name="whatsapp"
            type="tel"
            placeholder="(XX) XXXXX-XXXX"
            required
            maxLength={15}
            value={formData.whatsapp}
            onChange={handleChange}
          />
        </div>
        
        {status === "error" && (
          <p className="text-red-400 text-sm text-center">Ocorreu um erro. Tente novamente.</p>
        )}

        <Button 
          type="submit" 
          className="w-full"
          disabled={status === "loading"}
        >
          {status === "loading" ? "Processando..." : "QUERO MEU VOUCHER VIP"}
        </Button>
      </div>
    </form>
  );
}