"use client";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import { Loader2 } from "lucide-react";

import { Navbar } from "@/components/Navbar";
import { api } from "@/lib/api";
import { useAuth } from "@/lib/auth";
import type { Country } from "@/lib/types";
import { cn } from "@/lib/utils";

const ROLES = [
  { value: "cliente", label: "Quiero contratar músicos", emoji: "🎉" },
  { value: "musico", label: "Soy músico y ofrezco servicios", emoji: "🎸" },
  { value: "ambos", label: "Ambas cosas", emoji: "🎯" },
];

export default function RegistroPage() {
  const router = useRouter();
  const { register } = useAuth();
  const [form, setForm] = useState({
    full_name: "",
    email: "",
    password: "",
    role: "cliente",
    country: "VE",
  });
  const [countries, setCountries] = useState<Country[]>([]);
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    api.countries().then(setCountries).catch(() => {});
  }, []);

  function set<K extends keyof typeof form>(key: K, value: (typeof form)[K]) {
    setForm((f) => ({ ...f, [key]: value }));
  }

  async function onSubmit(e: React.FormEvent) {
    e.preventDefault();
    setError(null);
    setLoading(true);
    try {
      await register(form);
      router.push(form.role === "cliente" ? "/buscar" : "/mi-perfil");
    } catch (err) {
      setError(err instanceof Error ? err.message : "Error al crear la cuenta");
    } finally {
      setLoading(false);
    }
  }

  const input =
    "w-full rounded-xl border border-line bg-bg-card px-3 py-2.5 text-sm outline-none focus:border-accent";

  return (
    <div className="min-h-screen">
      <Navbar />
      <div className="relative overflow-hidden">
        <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(50%_40%_at_50%_-10%,rgba(6,182,212,0.12),transparent)]" />
        <div className="mx-auto max-w-sm animate-fade-in px-4 py-14">
          <div className="rounded-2xl border border-line bg-bg-card p-6 shadow-soft">
            <span className="font-music text-3xl text-accent">𝄞𝄢</span>
            <h1 className="mt-3 text-2xl font-bold tracking-tight">Crear cuenta</h1>
            <p className="mt-1 text-sm text-ink-soft">Empezá en menos de un minuto.</p>

            <form onSubmit={onSubmit} className="mt-6 space-y-3">
              <input required placeholder="Nombre completo" value={form.full_name}
                onChange={(e) => set("full_name", e.target.value)} className={input} />
              <input type="email" required placeholder="Email" value={form.email}
                onChange={(e) => set("email", e.target.value)} className={input} />
              <input type="password" required minLength={6} placeholder="Contraseña (mín. 6)"
                value={form.password} onChange={(e) => set("password", e.target.value)} className={input} />

              <div className="space-y-2 pt-1">
                {ROLES.map((r) => (
                  <button type="button" key={r.value} onClick={() => set("role", r.value)}
                    className={cn(
                      "flex w-full items-center gap-2.5 rounded-xl border px-3 py-2.5 text-left text-sm transition-colors",
                      form.role === r.value
                        ? "border-accent bg-accent/10 text-ink"
                        : "border-line bg-bg-card text-ink-soft hover:border-accent/50",
                    )}>
                    <span className="text-lg">{r.emoji}</span> {r.label}
                  </button>
                ))}
              </div>

              <select value={form.country} onChange={(e) => set("country", e.target.value)} className={input}>
                {countries.map((c) => (
                  <option key={c.code} value={c.code}>{c.name}</option>
                ))}
              </select>

              {error && <p className="text-sm text-red-500">{error}</p>}

              <button type="submit" disabled={loading}
                className="flex w-full items-center justify-center gap-2 rounded-xl bg-accent py-2.5 font-semibold text-white hover:bg-accent-deep disabled:opacity-60">
                {loading && <Loader2 size={16} className="animate-spin" />}
                Crear cuenta
              </button>
            </form>

            <p className="mt-4 text-center text-sm text-ink-soft">
              ¿Ya tenés cuenta?{" "}
              <Link href="/login" className="font-semibold text-accent-deep hover:underline">
                Entrar
              </Link>
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}