'use client'
export const dynamic = 'force-dynamic'
import { useEffect, useState } from 'react'
import { Navbar } from '@/components/navbar'
import { Button } from '@/components/ui/button'
import { toast } from '@/components/ui/toaster'
import { FotosCita } from '@/components/fotos/FotosCita'
import { format, parseISO, isPast } from 'date-fns'
import { es } from 'date-fns/locale'
import { Calendar, Clock, ChevronDown, ChevronUp, Camera } from 'lucide-react'
import { cn, formatPrecio } from '@/lib/utils'
import type { Cita } from '@/types'

const ESTADO_BADGE: Record<string, string> = {
  pendiente:  'border-yellow-700/40 text-yellow-500',
  confirmada: 'border-[#C9A84C]/40 text-[#C9A84C]',
  cancelada:  'border-red-900/40 text-red-500',
  completada: 'border-[#333] text-[#555]',
}

export default function MisCitasPage() {
  const [citas, setCitas] = useState<Cita[]>([])
  const [cargando, setCargando] = useState(true)
  const [cancelando, setCancelando] = useState<string | null>(null)
  const [expandida, setExpandida] = useState<string | null>(null)

  const cargarCitas = () => {
    setCargando(true)
    fetch('/api/citas')
      .then(r => r.json())
      .then(({ citas }) => setCitas(citas ?? []))
      .finally(() => setCargando(false))
  }

  useEffect(() => { cargarCitas() }, [])

  const cancelarCita = async (id: string) => {
    if (!confirm('¿Cancelar esta cita?')) return
    setCancelando(id)
    const res = await fetch(`/api/citas/${id}`, {
      method: 'PATCH',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ estado: 'cancelada' }),
    })
    setCancelando(null)
    if (res.ok) { toast('Cita cancelada', 'info'); cargarCitas() }
    else toast('Error al cancelar', 'error')
  }

  const proximas = citas.filter(c => !isPast(parseISO(c.fecha_inicio)) && c.estado !== 'cancelada')
  const pasadas  = citas.filter(c =>  isPast(parseISO(c.fecha_inicio)) || c.estado === 'cancelada')

  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">Tu historial</p>
          <h1 className="font-display text-4xl font-bold text-white mb-10">Mis citas</h1>

          {cargando ? (
            <div className="flex justify-center py-20">
              <div className="w-6 h-6 border border-[#C9A84C] border-t-transparent rounded-full animate-spin" />
            </div>
          ) : citas.length === 0 ? (
            <div className="text-center py-20 border border-[#C9A84C]/10 bg-[#0a0a0a]">
              <Camera className="h-10 w-10 text-[#222] mx-auto mb-4" />
              <p className="text-[#444] text-sm tracking-wide">No tienes citas agendadas aún.</p>
              <a href="/agendar">
                <button className="mt-6 bg-[#C9A84C] hover:bg-[#E8C97A] text-black text-xs tracking-widest uppercase font-semibold px-6 py-3 transition-all">
                  Reservar cita
                </button>
              </a>
            </div>
          ) : (
            <div className="flex flex-col gap-10">

              {/* Próximas */}
              {proximas.length > 0 && (
                <section>
                  <h2 className="text-[10px] text-[#C9A84C] tracking-[0.35em] uppercase mb-4">
                    Próximas citas
                  </h2>
                  <div className="flex flex-col gap-3">
                    {proximas.map(c => (
                      <CitaCard
                        key={c.id}
                        cita={c}
                        expandida={expandida === c.id}
                        onToggle={() => setExpandida(expandida === c.id ? null : c.id)}
                        onCancelar={cancelarCita}
                        cancelando={cancelando}
                      />
                    ))}
                  </div>
                </section>
              )}

              {/* Historial */}
              {pasadas.length > 0 && (
                <section>
                  <h2 className="text-[10px] text-[#555] tracking-[0.35em] uppercase mb-4">
                    Historial
                  </h2>
                  <div className="flex flex-col gap-3">
                    {pasadas.map(c => (
                      <CitaCard
                        key={c.id}
                        cita={c}
                        pasada
                        expandida={expandida === c.id}
                        onToggle={() => setExpandida(expandida === c.id ? null : c.id)}
                        onCancelar={cancelarCita}
                        cancelando={cancelando}
                      />
                    ))}
                  </div>
                </section>
              )}
            </div>
          )}
        </div>
      </main>
    </>
  )
}

function CitaCard({ cita, pasada, expandida, onToggle, onCancelar, cancelando }: {
  cita: any
  pasada?: boolean
  expandida: boolean
  onToggle: () => void
  onCancelar: (id: string) => void
  cancelando: string | null
}) {
  const puedeSubirFotos = pasada && cita.estado !== 'cancelada'

  return (
    <div className={cn(
      'border bg-[#0a0a0a] transition-all',
      expandida ? 'border-[#C9A84C]/30' : 'border-[#1a1a1a] hover:border-[#2a2a2a]',
      pasada && cita.estado === 'cancelada' && 'opacity-50'
    )}>
      {/* Cabecera siempre visible */}
      <button
        onClick={onToggle}
        className="w-full flex items-center justify-between px-5 py-4 text-left"
      >
        <div className="flex items-center gap-5">
          {/* Fecha */}
          <div className="text-center min-w-[40px]">
            <p className="text-[#C9A84C] text-lg font-bold leading-none">
              {format(parseISO(cita.fecha_inicio), 'd')}
            </p>
            <p className="text-[#555] text-[10px] uppercase tracking-wide">
              {format(parseISO(cita.fecha_inicio), 'MMM', { locale: es })}
            </p>
          </div>

          <div className="w-px h-8 bg-[#1a1a1a]" />

          <div>
            <p className="text-white text-sm font-medium">{cita.servicio?.nombre}</p>
            <p className="text-[#555] text-xs mt-0.5">{cita.barbero?.nombre}</p>
          </div>
        </div>

        <div className="flex items-center gap-4">
          <span className={cn(
            'text-[10px] tracking-[0.2em] uppercase border px-2 py-0.5 hidden sm:block',
            ESTADO_BADGE[cita.estado]
          )}>
            {cita.estado}
          </span>
          <span className="text-[#C9A84C] font-semibold text-sm">
            {formatPrecio(cita.servicio?.precio ?? null)}
          </span>
          {expandida
            ? <ChevronUp className="h-4 w-4 text-[#444]" />
            : <ChevronDown className="h-4 w-4 text-[#444]" />
          }
        </div>
      </button>

      {/* Detalle expandible */}
      {expandida && (
        <div className="border-t border-[#141414] px-5 py-5">
          {/* Info de la cita */}
          <div className="grid grid-cols-2 gap-3 mb-5 text-xs">
            <div className="flex items-center gap-2 text-[#555]">
              <Calendar className="h-3.5 w-3.5 text-[#333]" />
              {format(parseISO(cita.fecha_inicio), "EEEE d 'de' MMMM yyyy", { locale: es })}
            </div>
            <div className="flex items-center gap-2 text-[#555]">
              <Clock className="h-3.5 w-3.5 text-[#333]" />
              {format(parseISO(cita.fecha_inicio), 'HH:mm')} – {format(parseISO(cita.fecha_fin), 'HH:mm')}
            </div>
            {cita.notas && (
              <div className="col-span-2 text-[#444] italic border-l border-[#222] pl-3">
                "{cita.notas}"
              </div>
            )}
          </div>

          {/* Sección fotos */}
          {puedeSubirFotos && (
            <div className="border-t border-[#141414] pt-5">
              <div className="flex items-center gap-2 mb-4">
                <Camera className="h-4 w-4 text-[#C9A84C]" />
                <span className="text-[10px] text-[#C9A84C] tracking-[0.3em] uppercase">
                  Tu transformación
                </span>
              </div>
              <FotosCita
                citaId={cita.id}
                servicio={cita.servicio?.nombre ?? ''}
                fechaCita={cita.fecha_inicio}
              />
            </div>
          )}

          {/* Botón cancelar para citas próximas */}
          {!pasada && cita.estado !== 'cancelada' && (
            <div className="border-t border-[#141414] pt-4 mt-4 flex justify-end">
              <Button
                variant="danger"
                size="sm"
                loading={cancelando === cita.id}
                onClick={() => onCancelar(cita.id)}
              >
                Cancelar cita
              </Button>
            </div>
          )}
        </div>
      )}
    </div>
  )
}