"use client";

import { useState } from "react";

type FieldErrors = Partial<Record<"nome" | "empresa" | "whatsapp" | "email" | "_form", string>>;
type Status = "idle" | "sending" | "success" | "error";

// Máscara WhatsApp BR: (00) 00000-0000
function maskWhatsapp(v: string) {
  const d = v.replace(/\D/g, "").slice(0, 11);
  if (d.length <= 2) return d.length ? `(${d}` : "";
  if (d.length <= 7) return `(${d.slice(0, 2)}) ${d.slice(2)}`;
  return `(${d.slice(0, 2)}) ${d.slice(2, 7)}-${d.slice(7)}`;
}

export default function LeadForm({
  consultorSlug,
  waLink,
}: {
  consultorSlug: string;
  waLink: string;
}) {
  const [form, setForm] = useState({ nome: "", empresa: "", whatsapp: "", email: "" });
  const [errors, setErrors] = useState<FieldErrors>({});
  const [status, setStatus] = useState<Status>("idle");

  function update<K extends keyof typeof form>(k: K, v: string) {
    setForm((p) => ({ ...p, [k]: k === "whatsapp" ? maskWhatsapp(v) : v }));
    if (errors[k]) setErrors((p) => ({ ...p, [k]: undefined }));
  }

  async function onSubmit(e: React.FormEvent) {
    e.preventDefault();
    setStatus("sending");
    setErrors({});

    try {
      const res = await fetch("/api/lead", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ ...form, consultor: consultorSlug }),
      });

      const data = await res.json();

      if (!res.ok) {
        if (data?.errors) {
          setErrors(data.errors);
          setStatus("idle");
          return;
        }
        setErrors({ _form: "Algo deu errado no envio. Tente novamente ou fale direto com o consultor no estande." });
        setStatus("error");
        return;
      }

      setStatus("success");
      // Redireciona pro WhatsApp após 1.2s
      setTimeout(() => {
        window.location.href = waLink;
      }, 1200);
    } catch {
      setErrors({ _form: "Algo deu errado no envio. Tente novamente ou fale direto com o consultor no estande." });
      setStatus("error");
    }
  }

  if (status === "success") {
    return (
      <div className="bracket-frame relative p-8 md:p-12 bg-ink-700/50 text-center">
        <span className="bl" />
        <span className="br" />
        <div className="inline-flex items-center justify-center h-16 w-16 rounded-full bg-neon mb-6">
          <svg viewBox="0 0 24 24" className="h-8 w-8" fill="none" stroke="#0f0518" strokeWidth="3">
            <path d="M5 13l4 4L19 7" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </div>
        <h3 className="font-display font-black uppercase text-3xl md:text-4xl leading-tight">
          Recebido.
        </h3>
        <p className="mt-4 text-white/80 text-lg">
          O consultor vai entrar em contato pelo WhatsApp em breve.
          <br />
          <span className="text-neon">Abrindo WhatsApp agora...</span>
        </p>
        <a
          href={waLink}
          className="mt-8 inline-flex items-center gap-2 text-sm font-mono uppercase tracking-widest text-white/60 hover:text-neon transition-colors"
        >
          Não abriu? Clique aqui →
        </a>
      </div>
    );
  }

  return (
    <form onSubmit={onSubmit} noValidate className="space-y-6">
      <Field
        label="Nome completo"
        placeholder="Seu nome"
        value={form.nome}
        onChange={(v) => update("nome", v)}
        error={errors.nome}
        autoComplete="name"
        required
      />
      <Field
        label="Empresa"
        placeholder="Nome do estúdio ou empresa"
        value={form.empresa}
        onChange={(v) => update("empresa", v)}
        error={errors.empresa}
        autoComplete="organization"
        required
      />
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
        <Field
          label="WhatsApp"
          placeholder="(00) 00000-0000"
          value={form.whatsapp}
          onChange={(v) => update("whatsapp", v)}
          error={errors.whatsapp}
          autoComplete="tel"
          inputMode="tel"
          required
        />
        <Field
          label="E-mail"
          placeholder="seuemail@empresa.com.br"
          value={form.email}
          onChange={(v) => update("email", v)}
          error={errors.email}
          type="email"
          autoComplete="email"
          inputMode="email"
          required
        />
      </div>

      {errors._form && (
        <div
          className="border border-red-500/40 bg-red-950/30 px-4 py-3 text-sm text-red-200"
          role="alert"
        >
          {errors._form}
        </div>
      )}

      <button
        type="submit"
        disabled={status === "sending"}
        className="group relative w-full bg-neon text-ink-900 font-display font-black uppercase text-lg md:text-2xl tracking-wide py-5 md:py-6 hover:bg-neon-bright transition-colors disabled:opacity-60 disabled:cursor-not-allowed shadow-neon"
      >
        <span className="relative z-10 flex items-center justify-center gap-3">
          {status === "sending" ? (
            <>
              <span className="h-5 w-5 border-2 border-ink-900 border-t-transparent rounded-full animate-spin" />
              Enviando...
            </>
          ) : (
            <>
              <WhatsIcon />
              Falar com o consultor no WhatsApp
            </>
          )}
        </span>
        {/* Brackets do botão */}
        <span className="absolute top-1 left-1 w-4 h-4 border-t-2 border-l-2 border-ink-900" aria-hidden />
        <span className="absolute top-1 right-1 w-4 h-4 border-t-2 border-r-2 border-ink-900" aria-hidden />
        <span className="absolute bottom-1 left-1 w-4 h-4 border-b-2 border-l-2 border-ink-900" aria-hidden />
        <span className="absolute bottom-1 right-1 w-4 h-4 border-b-2 border-r-2 border-ink-900" aria-hidden />
      </button>

      <p className="text-center text-xs font-mono uppercase tracking-widest text-white/40">
        Ao enviar, você abre o WhatsApp com a mensagem pronta
      </p>
    </form>
  );
}

function Field({
  label,
  placeholder,
  value,
  onChange,
  error,
  type = "text",
  autoComplete,
  inputMode,
  required = false,
}: {
  label: string;
  placeholder: string;
  value: string;
  onChange: (v: string) => void;
  error?: string;
  type?: string;
  autoComplete?: string;
  inputMode?: "text" | "tel" | "email" | "numeric";
  required?: boolean;
}) {
  const id = `f_${label.toLowerCase().replace(/\W/g, "")}`;
  return (
    <div>
      <label
        htmlFor={id}
        className="block font-mono text-[11px] uppercase tracking-[0.25em] text-neon mb-2"
      >
        {label} {required && <span className="text-white/40">*</span>}
      </label>
      <input
        id={id}
        type={type}
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder={placeholder}
        autoComplete={autoComplete}
        inputMode={inputMode}
        required={required}
        aria-invalid={!!error}
        aria-describedby={error ? `${id}_err` : undefined}
        className={`w-full bg-ink-700/50 border-2 ${
          error ? "border-red-500/60" : "border-white/10 focus:border-neon"
        } text-white placeholder:text-white/30 px-4 py-4 md:py-5 text-base md:text-lg transition-colors focus:outline-none focus:bg-ink-700`}
      />
      {error && (
        <p id={`${id}_err`} className="mt-2 text-xs text-red-300 font-mono uppercase tracking-wider" role="alert">
          {error}
        </p>
      )}
    </div>
  );
}

function WhatsIcon() {
  return (
    <svg viewBox="0 0 24 24" className="h-6 w-6 md:h-7 md:w-7" fill="currentColor" aria-hidden>
      <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413" />
    </svg>
  );
}