'use client'
export const dynamic = 'force-dynamic'
import { useEffect, useState } from 'react'
import { useRouter } from 'next/navigation'
import { createClient } from '@/lib/supabase/client'
import { Navbar } from '@/components/navbar'
import { Button } from '@/components/ui/button'
import { toast } from '@/components/ui/toaster'
import { format, addDays, startOfToday, parseISO } from 'date-fns'
import { es } from 'date-fns/locale'
import { Clock, User, ChevronRight } from 'lucide-react'
import { cn, formatPrecio } from '@/lib/utils'
import type { Barbero, Servicio, SlotDisponible } from '@/types'

type Paso = 1 | 2 | 3 | 4

export default function AgendarPage() {
  const router = useRouter()
  const supabase = createClient()

  const [paso, setPaso] = useState<Paso>(1)
  const [barberos, setBarberos] = useState<Barbero[]>([])
  const [servicios, setServicios] = useState<Servicio[]>([])
  const [slots, setSlots] = useState<SlotDisponible[]>([])

  const [barberoSel, setBarberoSel] = useState<Barbero | null>(null)
  const [servicioSel, setServicioSel] = useState<Servicio | null>(null)
  const [fechaSel, setFechaSel] = useState<Date>(new Date())
  const [slotSel, setSlotSel] = useState<SlotDisponible | null>(null)
  const [notas, setNotas] = useState('')

  const [cargandoSlots, setCargandoSlots] = useState(false)
  const [enviando, setEnviando] = useState(false)

  const dias = Array.from({ length: 14 }, (_, i) => addDays(startOfToday(), i))

  useEffect(() => {
    Promise.all([
      supabase.from('barberos').select('*, horarios:horarios_barbero(*)').eq('activo', true).order('nombre'),
      supabase.from('servicios').select('*').eq('activo', true).order('nombre'),
    ]).then(([{ data: b }, { data: s }]) => {
      setBarberos(b ?? [])
      setServicios(s ?? [])
    })
  }, [])

  useEffect(() => {
    if (!barberoSel || !servicioSel) return
    setCargandoSlots(true)
    setSlotSel(null)
    fetch(`/api/calendar/slots?barbero_id=${barberoSel.id}&fecha=${format(fechaSel, 'yyyy-MM-dd')}&servicio_id=${servicioSel.id}`)
      .then(r => r.json())
      .then(({ slots }) => setSlots(slots ?? []))
      .finally(() => setCargandoSlots(false))
  }, [barberoSel, servicioSel, fechaSel])

  const confirmarCita = async () => {
    if (!barberoSel || !servicioSel || !slotSel) return
    const { data: { user } } = await supabase.auth.getUser()
    if (!user) { toast('Debes iniciar sesión', 'error'); router.push('/login'); return }

    setEnviando(true)
    const res = await fetch('/api/citas', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ barbero_id: barberoSel.id, servicio_id: servicioSel.id, fecha_inicio: slotSel.inicio, notas }),
    })
    const data = await res.json()
    setEnviando(false)

    if (!res.ok) { toast(data.error ?? 'Error al agendar', 'error'); return }
    toast('¡Cita agendada! Revisa tu correo.', 'success')
    router.push('/mis-citas')
  }

  // ── Stepper ──────────────────────────────────────────────
  const pasos = ['Barbero', 'Servicio', 'Fecha y hora', 'Confirmar']

  return (
    <>
      <Navbar />
      <main className="min-h-screen bg-[#080808] pt-24 pb-16 px-4">
        <div className="max-w-3xl mx-auto">
          <p className="text-[#C9A84C] text-[10px] tracking-[0.4em] uppercase mb-2">Reserva tu lugar</p>
          <h1 className="font-display text-4xl font-bold text-white mb-10">Agendar cita</h1>

          {/* Stepper */}
          <div className="flex items-center gap-0 mb-10">
            {pasos.map((label, i) => (
              <div key={label} className="flex items-center flex-1">
                <div className="flex items-center gap-2">
                  <div className={cn(
                    'flex items-center justify-center w-6 h-6 text-[10px] font-bold shrink-0 transition-all',
                    paso > i + 1  ? 'bg-[#C9A84C] text-black' :
                    paso === i + 1 ? 'bg-[#C9A84C] text-black' :
                    'bg-[#1a1a1a] text-[#444] border border-[#2a2a2a]'
                  )}>
                    {paso > i + 1 ? '✓' : i + 1}
                  </div>
                  <span className={cn(
                    'text-[10px] tracking-[0.15em] uppercase hidden sm:block transition-colors',
                    paso === i + 1 ? 'text-[#C9A84C]' : paso > i + 1 ? 'text-[#555]' : 'text-[#333]'
                  )}>{label}</span>
                </div>
                {i < 3 && <div className="flex-1 h-px bg-[#1a1a1a] mx-2" />}
              </div>
            ))}
          </div>

          {/* ── Paso 1: Barbero ── */}
          {paso === 1 && (
            <div className="border border-[#1a1a1a] bg-[#0a0a0a]">
              <div className="px-6 py-4 border-b border-[#141414]">
                <h2 className="text-[#C9A84C] text-[10px] tracking-[0.3em] uppercase flex items-center gap-2">
                  <User className="h-3.5 w-3.5" /> Elige tu barbero
                </h2>
              </div>
              <div className="p-6 grid grid-cols-1 sm:grid-cols-2 gap-3">
                {barberos.map(b => (
                  <button
                    key={b.id}
                    onClick={() => { setBarberoSel(b); setPaso(2) }}
                    className={cn(
                      'flex items-center gap-4 p-4 border text-left transition-all',
                      barberoSel?.id === b.id
                        ? 'border-[#C9A84C] bg-[#C9A84C]/5'
                        : 'border-[#1a1a1a] hover:border-[#C9A84C]/40 hover:bg-[#111]'
                    )}
                  >
                    <div className="w-12 h-12 bg-[#141414] border border-[#222] flex items-center justify-center shrink-0 overflow-hidden">
                      {b.foto_url
                        ? <img src={b.foto_url} alt={b.nombre} className="w-full h-full object-cover" />
                        : <User className="h-5 w-5 text-[#444]" />}
                    </div>
                    <div>
                      <p className="font-semibold text-white text-sm">{b.nombre}</p>
                      {b.descripcion && <p className="text-xs text-[#555] mt-0.5">{b.descripcion}</p>}
                    </div>
                    <ChevronRight className="h-4 w-4 text-[#333] ml-auto shrink-0" />
                  </button>
                ))}
              </div>
            </div>
          )}

          {/* ── Paso 2: Servicio ── */}
          {paso === 2 && (
            <div className="border border-[#1a1a1a] bg-[#0a0a0a]">
              <div className="px-6 py-4 border-b border-[#141414] flex items-center justify-between">
                <h2 className="text-[#C9A84C] text-[10px] tracking-[0.3em] uppercase">Elige el servicio</h2>
                <button onClick={() => setPaso(1)} className="text-[10px] text-[#444] hover:text-[#C9A84C] tracking-widest uppercase transition-colors">← Volver</button>
              </div>
              <div className="p-6 flex flex-col gap-2">
                {servicios.map(s => (
                  <button
                    key={s.id}
                    onClick={() => { setServicioSel(s); setPaso(3) }}
                    className={cn(
                      'flex items-center justify-between p-4 border text-left transition-all',
                      servicioSel?.id === s.id
                        ? 'border-[#C9A84C] bg-[#C9A84C]/5'
                        : 'border-[#1a1a1a] hover:border-[#C9A84C]/40 hover:bg-[#111]'
                    )}
                  >
                    <div>
                      <p className="font-semibold text-white text-sm">{s.nombre}</p>
                      {s.descripcion && <p className="text-xs text-[#555] mt-0.5">{s.descripcion}</p>}
                      <p className="text-xs text-[#444] mt-1 flex items-center gap-1">
                        <Clock className="h-3 w-3" /> {s.duracion_min} min
                      </p>
                    </div>
                    <span className="font-bold text-[#C9A84C] shrink-0 ml-4 text-sm">{formatPrecio(s.precio)}</span>
                  </button>
                ))}
              </div>
            </div>
          )}

          {/* ── Paso 3: Fecha y hora ── */}
          {paso === 3 && (
            <div className="border border-[#1a1a1a] bg-[#0a0a0a]">
              <div className="px-6 py-4 border-b border-[#141414] flex items-center justify-between">
                <h2 className="text-[#C9A84C] text-[10px] tracking-[0.3em] uppercase flex items-center gap-2">
                  <Clock className="h-3.5 w-3.5" /> Fecha y hora
                </h2>
                <button onClick={() => setPaso(2)} className="text-[10px] text-[#444] hover:text-[#C9A84C] tracking-widest uppercase transition-colors">← Volver</button>
              </div>
              <div className="p-6">
                {/* Selector de fecha */}
                <div className="flex gap-2 overflow-x-auto pb-3 mb-6">
                  {dias.map(dia => (
                    <button
                      key={dia.toISOString()}
                      onClick={() => setFechaSel(dia)}
                      className={cn(
                        'flex flex-col items-center px-3 py-2 border shrink-0 min-w-[56px] transition-all',
                        fechaSel.toDateString() === dia.toDateString()
                          ? 'border-[#C9A84C] bg-[#C9A84C] text-black'
                          : 'border-[#1a1a1a] text-[#555] hover:border-[#C9A84C]/40 hover:text-white'
                      )}
                    >
                      <span className="text-[10px] uppercase tracking-wide">
                        {format(dia, 'EEE', { locale: es })}
                      </span>
                      <span className="text-lg font-bold leading-tight">{format(dia, 'd')}</span>
                      <span className="text-[10px]">{format(dia, 'MMM', { locale: es })}</span>
                    </button>
                  ))}
                </div>

                {/* Slots */}
                <p className="text-[10px] text-[#555] tracking-[0.25em] uppercase mb-3">
                  {format(fechaSel, "EEEE d 'de' MMMM", { locale: es })}
                </p>

                {cargandoSlots ? (
                  <div className="flex justify-center py-10">
                    <div className="w-5 h-5 border border-[#C9A84C] border-t-transparent rounded-full animate-spin" />
                  </div>
                ) : slots.length === 0 ? (
                  <p className="text-[#333] text-xs text-center py-10 tracking-wide">
                    Sin horarios disponibles para este día.
                  </p>
                ) : (
                  <div className="grid grid-cols-4 sm:grid-cols-6 gap-2">
                    {slots.map(slot => (
                      <button
                        key={slot.inicio}
                        disabled={!slot.disponible}
                        onClick={() => { setSlotSel(slot); setPaso(4) }}
                        className={cn(
                          'py-2 text-xs font-medium border transition-all',
                          !slot.disponible
                            ? 'border-[#111] text-[#222] cursor-not-allowed'
                            : slotSel?.inicio === slot.inicio
                            ? 'border-[#C9A84C] bg-[#C9A84C] text-black'
                            : 'border-[#1a1a1a] text-[#888] hover:border-[#C9A84C]/50 hover:text-[#C9A84C]'
                        )}
                      >
                        {format(parseISO(slot.inicio), 'HH:mm')}
                      </button>
                    ))}
                  </div>
                )}
              </div>
            </div>
          )}

          {/* ── Paso 4: Confirmar ── */}
          {paso === 4 && barberoSel && servicioSel && slotSel && (
            <div className="border border-[#1a1a1a] bg-[#0a0a0a]">
              <div className="px-6 py-4 border-b border-[#141414] flex items-center justify-between">
                <h2 className="text-[#C9A84C] text-[10px] tracking-[0.3em] uppercase">Confirmar reserva</h2>
                <button onClick={() => setPaso(3)} className="text-[10px] text-[#444] hover:text-[#C9A84C] tracking-widest uppercase transition-colors">← Volver</button>
              </div>
              <div className="p-6">
                {/* Resumen */}
                <div className="border border-[#C9A84C]/15 bg-[#C9A84C]/3 p-5 mb-5 space-y-3">
                  {[
                    { label: 'Barbero',  value: barberoSel.nombre },
                    { label: 'Servicio', value: servicioSel.nombre },
                    { label: 'Fecha',    value: format(parseISO(slotSel.inicio), "EEEE d 'de' MMMM yyyy", { locale: es }) },
                    { label: 'Hora',     value: `${format(parseISO(slotSel.inicio), 'HH:mm')} – ${format(parseISO(slotSel.fin), 'HH:mm')}` },
                    { label: 'Duración', value: `${servicioSel.duracion_min} min` },
                  ].map(({ label, value }) => (
                    <div key={label} className="flex justify-between text-sm">
                      <span className="text-[#555] text-xs tracking-wide">{label}</span>
                      <span className="text-white font-medium text-xs">{value}</span>
                    </div>
                  ))}
                  <div className="flex justify-between pt-3 border-t border-[#C9A84C]/10">
                    <span className="text-[#555] text-xs tracking-wide">Total</span>
                    <span className="text-[#C9A84C] font-bold">{formatPrecio(servicioSel.precio)}</span>
                  </div>
                </div>

                {/* Notas */}
                <div className="mb-6">
                  <label className="text-[10px] text-[#555] tracking-[0.25em] uppercase block mb-2">
                    Notas (opcional)
                  </label>
                  <textarea
                    className="w-full bg-[#050505] border border-[#1a1a1a] focus:border-[#C9A84C] px-3 py-2 text-sm text-[#ccc] placeholder:text-[#333] focus:outline-none transition-colors resize-none"
                    rows={3}
                    placeholder="Ej: Fade bajo con línea, barba corta..."
                    value={notas}
                    onChange={e => setNotas(e.target.value)}
                  />
                </div>

                <Button size="lg" className="w-full" loading={enviando} onClick={confirmarCita}>
                  Confirmar reserva
                </Button>
                <p className="text-[10px] text-[#333] text-center mt-3 tracking-wide">
                  Recibirás confirmación por correo y el evento en tu Google Calendar.
                </p>
              </div>
            </div>
          )}
        </div>
      </main>
    </>
  )
}