'use client'
import { useState } from 'react'
import { useRouter } from 'next/navigation'
import Link from 'next/link'
import Image from 'next/image'
import { createClient } from '@/lib/supabase/client'
import { Input } from '@/components/ui/input'
import { toast } from '@/components/ui/toaster'

export default function RegistroPage() {
  const router = useRouter()
  const supabase = createClient()
  const [form, setForm] = useState({ nombre: '', email: '', telefono: '', password: '', confirmar: '' })
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState('')

  const set = (k: string) => (e: React.ChangeEvent<HTMLInputElement>) =>
    setForm((f) => ({ ...f, [k]: e.target.value }))

  const handleRegistro = async (e: React.FormEvent) => {
    e.preventDefault()
    setError('')

    if (form.password !== form.confirmar) { setError('Las contraseñas no coinciden.'); return }
    if (form.password.length < 6) { setError('La contraseña debe tener al menos 6 caracteres.'); return }

    setLoading(true)

    const { error } = await supabase.auth.signUp({
      email: form.email,
      password: form.password,
      options: { data: { nombre: form.nombre, telefono: form.telefono } },
    })

    if (error) { setError(error.message); setLoading(false); return }

    const { data: { user } } = await supabase.auth.getUser()
    if (user) {
      await supabase.from('perfiles').update({ telefono: form.telefono }).eq('id', user.id)
    }

    toast('Cuenta creada exitosamente', 'success')
    router.push('/')
    router.refresh()
  }

  return (
    <div className="min-h-screen bg-[#080808] flex">
      {/* Panel izquierdo decorativo */}
      <div className="hidden lg:flex w-1/2 flex-col items-center justify-center bg-[#050505] border-r border-[#C9A84C]/10 relative overflow-hidden">
        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_#1a1508_0%,_#050505_70%)]" />
        <div className="relative z-10 text-center px-12">
          <Image src="/logo.png" alt="Barbería Lukakin" width={200} height={112} style={{ width: 200, height: 200, objectFit: 'cover' }} className="rounded-full ring-2 ring-[#C9A84C]/30 mx-auto mb-8" />
          <p className="text-[#C9A84C] text-xs tracking-[0.4em] uppercase mb-3">Premium Barbershop</p>
          <h2 className="font-display text-4xl font-bold text-white mb-4">Barbería Lukakin</h2>
          <div className="gold-divider mb-6" />
          <p className="text-[#444] text-sm font-light leading-relaxed max-w-xs">
            Únete y reserva con los mejores barberos en segundos.
          </p>
        </div>
      </div>

      {/* Panel derecho — formulario */}
      <div className="w-full lg:w-1/2 flex items-center justify-center px-8 py-16">
        <div className="w-full max-w-sm">
          <div className="lg:hidden flex justify-center mb-10">
            <Image src="/logo.png" alt="Barbería Lukakin" width={90} height={51} style={{ width: 90, height: 90, objectFit: 'cover' }} className="rounded-full ring-1 ring-[#C9A84C]/30" />
          </div>

          <p className="text-[#C9A84C] text-[10px] tracking-[0.4em] uppercase mb-2">Nuevo miembro</p>
          <h1 className="font-display text-3xl font-bold text-white mb-1">Crear cuenta</h1>
          <p className="text-[#444] text-sm mb-10 font-light">Regístrate para agendar tus citas.</p>

          <form onSubmit={handleRegistro} className="flex flex-col gap-6">
            <Input id="nombre" label="Nombre completo" placeholder="Juan Pérez" value={form.nombre} onChange={set('nombre')} required />
            <Input id="telefono" type="tel" label="Teléfono" placeholder="+52 55 1234 5678" value={form.telefono} onChange={set('telefono')} />
            <Input id="email" type="email" label="Correo electrónico" placeholder="tu@email.com" value={form.email} onChange={set('email')} required />
            <Input id="password" type="password" label="Contraseña" placeholder="Mínimo 6 caracteres" value={form.password} onChange={set('password')} required />
            <Input id="confirmar" type="password" label="Confirmar contraseña" placeholder="Repite tu contraseña" value={form.confirmar} onChange={set('confirmar')} required />

            {error && (
              <p className="text-xs text-red-500 border-l-2 border-red-700 pl-3 py-1">{error}</p>
            )}

            <button
              type="submit"
              disabled={loading}
              className="w-full bg-[#C9A84C] hover:bg-[#E8C97A] text-black font-semibold py-4 text-xs tracking-[0.3em] uppercase transition-all duration-200 hover:shadow-[0_0_30px_rgba(201,168,76,0.3)] disabled:opacity-40 mt-2 flex items-center justify-center gap-2"
            >
              {loading && (
                <svg className="h-3.5 w-3.5 animate-spin" fill="none" viewBox="0 0 24 24">
                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
                </svg>
              )}
              Crear mi cuenta
            </button>
          </form>

          <p className="text-center text-xs text-[#444] mt-8">
            ¿Ya tienes cuenta?{' '}
            <Link href="/login" className="text-[#C9A84C] hover:text-[#E8C97A] transition-colors">
              Inicia sesión
            </Link>
          </p>
        </div>
      </div>
    </div>
  )
}