"use client";
import { useState } from "react";
import { useRouter } from "next/navigation";
import Link from "next/link";
import Button from "@/components/ui/Button";
import Input from "@/components/ui/Input";
import Card from "@/components/ui/Card";
import { esLocalArgentinoValido } from "@/lib/telefono";

export default function RegistroPage() {
  const router = useRouter();
  const [form, setForm] = useState({ email: "", nombre: "", apellido: "", telefono: "" });
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");
  const [telefonoError, setTelefonoError] = useState("");

  function set(field: string) {
    return (e: React.ChangeEvent<HTMLInputElement>) => setForm((f) => ({ ...f, [field]: e.target.value }));
  }

  // El teléfono se guarda como lo espera WhatsApp: solo característica + abonado,
  // sin el 0 ni el 15 (el +54 9 lo pone el prefijo fijo del campo).
  function handleTelefono(e: React.ChangeEvent<HTMLInputElement>) {
    const soloDigitos = e.target.value.replace(/\D/g, "").slice(0, 10);
    setForm((f) => ({ ...f, telefono: soloDigitos }));
    // Mientras tipea sólo se avisa lo que ya es un error seguro; lo de "faltan
    // dígitos" espera a que salga del campo, para no retarlo por la mitad.
    if (soloDigitos.startsWith("0")) setTelefonoError("Sin el 0 de la característica");
    else if (soloDigitos.startsWith("15")) setTelefonoError("Sin el 15, poné la característica");
    else setTelefonoError("");
  }

  function handleTelefonoBlur() {
    if (form.telefono && !esLocalArgentinoValido(form.telefono))
      setTelefonoError("Son 10 dígitos: característica sin el 0 y número sin el 15");
  }

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    if (!esLocalArgentinoValido(form.telefono)) {
      setTelefonoError("Revisá el número: son 10 dígitos, sin el 0 y sin el 15");
      return;
    }
    setLoading(true);
    setError("");
    const res = await fetch("/api/cliente/registro", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(form),
    });
    const data = await res.json();
    setLoading(false);
    if (!res.ok) {
      setError(data.error || "Error al registrarse");
    } else {
      router.push(`/cliente?registered=1`);
    }
  }

  return (
    <div className="flex flex-col items-center justify-center min-h-[60vh]">
      <Card className="w-full max-w-sm">
        <div className="text-center mb-6">
          <div className="text-4xl mb-2">👤</div>
          <h1 className="text-xl font-bold text-gray-800">Crear cuenta</h1>
          <p className="text-sm text-gray-500 mt-1">Completá tus datos para registrarte</p>
        </div>

        <form onSubmit={handleSubmit} className="flex flex-col gap-4">
          <Input id="nombre" label="Nombre" placeholder="Juan" value={form.nombre} onChange={set("nombre")} required />
          <Input id="apellido" label="Apellido" placeholder="Pérez" value={form.apellido} onChange={set("apellido")} required />
          <Input id="email" type="email" label="Email" placeholder="juan@email.com" value={form.email} onChange={set("email")} required />
          <Input
            id="telefono"
            type="tel"
            inputMode="numeric"
            label="Teléfono (celular)"
            prefijo="+54 9"
            placeholder="1141984844"
            maxLength={10}
            ayuda="Característica sin el 0 y número sin el 15. Es el celular con el que vas a poder sacar turnos por WhatsApp."
            error={telefonoError}
            value={form.telefono}
            onChange={handleTelefono}
            onBlur={handleTelefonoBlur}
            required
          />
          {error && <p className="text-sm text-red-500 text-center">{error}</p>}
          <Button type="submit" loading={loading} className="w-full">
            Crear cuenta
          </Button>
        </form>

        <p className="text-center text-sm text-gray-500 mt-4">
          ¿Ya tenés cuenta?{" "}
          <Link href="/cliente" className="text-blue-600 hover:underline font-medium">
            Ingresar
          </Link>
        </p>
      </Card>
    </div>
  );
}