'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 LoginPage() {
  const router = useRouter()
  const supabase = createClient()
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState('')

  const handleLogin = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)
    setError('')

    const { error } = await supabase.auth.signInWithPassword({ email, password })

    if (error) {
      setError('Credenciales incorrectas. Verifica tu email y contraseña.')
      setLoading(false)
      return
    }

    toast('Bienvenido de vuelta', '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">
            El arte del corte perfecto, a tu disposición.
          </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">
          {/* Logo móvil */}
          <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">Bienvenido</p>
          <h1 className="font-display text-3xl font-bold text-white mb-1">Iniciar sesión</h1>
          <p className="text-[#444] text-sm mb-10 font-light">Accede a tu cuenta para gestionar tus citas.</p>

          <form onSubmit={handleLogin} className="flex flex-col gap-7">
            <Input
              id="email"
              type="email"
              label="Correo electrónico"
              placeholder="tu@email.com"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              required
            />
            <Input
              id="password"
              type="password"
              label="Contraseña"
              placeholder="••••••••"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              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>
              )}
              Ingresar
            </button>
          </form>

          <p className="text-center text-xs text-[#444] mt-8">
            ¿Sin cuenta?{' '}
            <Link href="/registro" className="text-[#C9A84C] hover:text-[#E8C97A] transition-colors">
              Regístrate aquí
            </Link>
          </p>
        </div>
      </div>
    </div>
  )
}