'use client'
export const dynamic = 'force-dynamic'
import { useEffect, useState, useMemo } from 'react'
import { Navbar } from '@/components/navbar'
import { Button } from '@/components/ui/button'
import { toast } from '@/components/ui/toaster'
import { format, parseISO } from 'date-fns'
import { es } from 'date-fns/locale'
import { cn, formatPrecio } from '@/lib/utils'
import { TrendingUp, User, Scissors } from 'lucide-react'
import type { Cita, EstadoCita, Barbero } from '@/types'

const ESTADOS: { value: EstadoCita | 'todas'; label: string }[] = [
  { value: 'todas',      label: 'Todas' },
  { value: 'confirmada', label: 'Confirmadas' },
  { value: 'pendiente',  label: 'Pendientes' },
  { value: 'completada', label: 'Completadas' },
  { value: 'cancelada',  label: 'Canceladas' },
]

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-[#2a2a2a] text-[#444]',
}

export default function AdminCitasPage() {
  const [todasLasCitas, setTodasLasCitas] = useState<any[]>([])
  const [barberos, setBarberos] = useState<Barbero[]>([])
  const [filtroEstado, setFiltroEstado] = useState<EstadoCita | 'todas'>('todas')
  const [filtroBarbero, setFiltroBarbero] = useState<string>('todos')
  const [cargando, setCargando] = useState(true)
  const [actualizando, setActualizando] = useState<string | null>(null)

  const cargarDatos = () => {
    setCargando(true)
    Promise.all([
      fetch('/api/citas').then(r => r.json()),
      fetch('/api/barberos').then(r => r.json()),
    ]).then(([{ citas }, { barberos }]) => {
      setTodasLasCitas(citas ?? [])
      setBarberos(barberos ?? [])
    }).finally(() => setCargando(false))
  }

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

  const citasFiltradas = useMemo(() => {
    return todasLasCitas.filter(c => {
      const okEstado  = filtroEstado === 'todas' || c.estado === filtroEstado
      const okBarbero = filtroBarbero === 'todos' || c.barbero_id === filtroBarbero
      return okEstado && okBarbero
    })
  }, [todasLasCitas, filtroEstado, filtroBarbero])

  const ingresosPorBarbero = useMemo(() => {
    const mapa: Record<string, { nombre: string; total: number; citas: number; id: string }> = {}
    todasLasCitas
      .filter(c => c.estado === 'confirmada' || c.estado === 'completada')
      .forEach(c => {
        const id     = c.barbero_id
        const nombre = c.barbero?.nombre ?? 'Desconocido'
        const precio = c.servicio?.precio ?? 0
        if (!mapa[id]) mapa[id] = { id, nombre, total: 0, citas: 0 }
        mapa[id].total += precio
        mapa[id].citas += 1
      })
    return Object.values(mapa).sort((a, b) => b.total - a.total)
  }, [todasLasCitas])

  const totalGeneral = ingresosPorBarbero.reduce((s, b) => s + b.total, 0)

  const cambiarEstado = async (id: string, estado: EstadoCita) => {
    setActualizando(id)
    const res = await fetch(`/api/citas/${id}`, {
      method: 'PATCH',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ estado }),
    })
    setActualizando(null)
    if (res.ok) { toast(`Cita marcada como ${estado}`, 'success'); cargarDatos() }
    else toast('Error al actualizar', 'error')
  }

  return (
    <>
      <Navbar />
      <main className="min-h-screen bg-[#080808] pt-24 pb-16 px-4">
        <div className="max-w-7xl mx-auto">

          {/* Header */}
          <div className="mb-10">
            <p className="text-[#C9A84C] text-[10px] tracking-[0.4em] uppercase mb-2">Administración</p>
            <h1 className="font-display text-4xl font-bold text-white">Gestión de citas</h1>
          </div>

          {/* ── Tarjetas ingresos ── */}
          {!cargando && ingresosPorBarbero.length > 0 && (
            <section className="mb-10">
              <p className="text-[10px] text-[#555] tracking-[0.3em] uppercase mb-3 flex items-center gap-2">
                <TrendingUp className="h-3.5 w-3.5 text-[#C9A84C]" />
                Ingresos por barbero — confirmadas y completadas
              </p>
              <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-2">
                {ingresosPorBarbero.map(b => (
                  <button
                    key={b.id}
                    onClick={() => setFiltroBarbero(filtroBarbero === b.id ? 'todos' : b.id)}
                    className={cn(
                      'border p-4 text-left transition-all',
                      filtroBarbero === b.id
                        ? 'border-[#C9A84C] bg-[#C9A84C]/5'
                        : 'border-[#1a1a1a] bg-[#0a0a0a] hover:border-[#C9A84C]/30 hover:bg-[#0d0d0d]'
                    )}
                  >
                    <div className="flex items-center gap-2 mb-3">
                      <div className="w-6 h-6 bg-[#141414] border border-[#222] flex items-center justify-center">
                        <User className="h-3 w-3 text-[#444]" />
                      </div>
                      <span className="text-xs font-medium text-[#aaa] truncate">{b.nombre}</span>
                    </div>
                    <p className="font-display text-lg font-bold text-[#C9A84C]">{formatPrecio(b.total)}</p>
                    <p className="text-[10px] text-[#444] mt-0.5 tracking-wide">{b.citas} {b.citas === 1 ? 'cita' : 'citas'}</p>
                  </button>
                ))}

                {/* Total general */}
                <div className="border border-[#C9A84C]/20 bg-[#0d0d0d] p-4">
                  <div className="flex items-center gap-2 mb-3">
                    <div className="w-6 h-6 bg-[#C9A84C]/10 border border-[#C9A84C]/20 flex items-center justify-center">
                      <Scissors className="h-3 w-3 text-[#C9A84C]" />
                    </div>
                    <span className="text-xs font-medium text-[#C9A84C]/70 tracking-wide">Total</span>
                  </div>
                  <p className="font-display text-lg font-bold text-[#C9A84C]">{formatPrecio(totalGeneral)}</p>
                  <p className="text-[10px] text-[#444] mt-0.5 tracking-wide">
                    {todasLasCitas.filter(c => c.estado === 'confirmada' || c.estado === 'completada').length} citas
                  </p>
                </div>
              </div>
            </section>
          )}

          {/* ── Filtros ── */}
          <div className="flex flex-col sm:flex-row gap-3 mb-5 items-start sm:items-center">
            {/* Estados */}
            <div className="flex gap-2 flex-wrap">
              {ESTADOS.map(e => (
                <button
                  key={e.value}
                  onClick={() => setFiltroEstado(e.value)}
                  className={cn(
                    'text-[10px] tracking-[0.2em] uppercase px-3 py-1.5 border transition-all',
                    filtroEstado === e.value
                      ? 'bg-[#C9A84C] text-black border-[#C9A84C]'
                      : 'bg-transparent text-[#555] border-[#1a1a1a] hover:border-[#C9A84C]/30 hover:text-[#C9A84C]'
                  )}
                >
                  {e.label}
                </button>
              ))}
            </div>

            {/* Barbero */}
            <select
              value={filtroBarbero}
              onChange={e => setFiltroBarbero(e.target.value)}
              className="bg-[#0a0a0a] border border-[#1a1a1a] text-[#888] text-xs px-3 py-1.5 focus:outline-none focus:border-[#C9A84C] transition-colors"
            >
              <option value="todos">Todos los barberos</option>
              {barberos.map(b => (
                <option key={b.id} value={b.id}>{b.nombre}</option>
              ))}
            </select>

            {(filtroBarbero !== 'todos' || filtroEstado !== 'todas') && (
              <button
                onClick={() => { setFiltroBarbero('todos'); setFiltroEstado('todas') }}
                className="text-[10px] text-[#444] hover:text-[#C9A84C] tracking-widest uppercase transition-colors"
              >
                × Limpiar
              </button>
            )}
          </div>

          {/* Contador */}
          {!cargando && (
            <p className="text-[10px] text-[#333] tracking-widest uppercase mb-4">
              {citasFiltradas.length} resultado{citasFiltradas.length !== 1 ? 's' : ''}
              {filtroBarbero !== 'todos' && (
                <span className="text-[#C9A84C]/60 ml-2">
                  · {barberos.find(b => b.id === filtroBarbero)?.nombre}
                </span>
              )}
            </p>
          )}

          {/* ── Tabla ── */}
          {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>
          ) : citasFiltradas.length === 0 ? (
            <div className="border border-[#1a1a1a] bg-[#0a0a0a] text-center py-16 text-[#333] text-xs tracking-widest uppercase">
              Sin citas con estos filtros
            </div>
          ) : (
            <div className="border border-[#1a1a1a] bg-[#0a0a0a] overflow-x-auto">
              <table className="w-full text-sm">
                <thead>
                  <tr className="border-b border-[#141414]">
                    {['Fecha', 'Hora', 'Cliente', 'Barbero', 'Servicio', 'Estado', 'Precio', 'Acciones'].map(h => (
                      <th key={h} className="px-4 py-3 text-left text-[10px] font-medium text-[#444] tracking-[0.2em] uppercase whitespace-nowrap">
                        {h}
                      </th>
                    ))}
                  </tr>
                </thead>
                <tbody>
                  {citasFiltradas.map((c: any) => (
                    <tr key={c.id} className="border-b border-[#0f0f0f] hover:bg-[#0d0d0d] transition-colors">
                      <td className="px-4 py-3 text-[#888] text-xs whitespace-nowrap">
                        {format(parseISO(c.fecha_inicio), "d MMM yyyy", { locale: es })}
                      </td>
                      <td className="px-4 py-3 text-[#C9A84C] text-xs font-semibold whitespace-nowrap">
                        {format(parseISO(c.fecha_inicio), 'HH:mm')}
                      </td>
                      <td className="px-4 py-3">
                        <p className="text-white text-xs font-medium">{c.perfil?.nombre}</p>
                        {c.perfil?.telefono && (
                          <p className="text-[#444] text-[10px] mt-0.5">{c.perfil.telefono}</p>
                        )}
                      </td>
                      <td className="px-4 py-3 text-[#888] text-xs whitespace-nowrap">{c.barbero?.nombre}</td>
                      <td className="px-4 py-3 text-[#888] text-xs">{c.servicio?.nombre}</td>
                      <td className="px-4 py-3">
                        <span className={cn(
                          'text-[10px] tracking-[0.15em] uppercase border px-2 py-0.5 whitespace-nowrap',
                          ESTADO_BADGE[c.estado]
                        )}>
                          {c.estado}
                        </span>
                      </td>
                      <td className="px-4 py-3 text-[#C9A84C] text-xs font-semibold whitespace-nowrap">
                        {formatPrecio(c.servicio?.precio ?? null)}
                      </td>
                      <td className="px-4 py-3">
                        <div className="flex gap-2">
                          {c.estado === 'confirmada' && (
                            <Button size="sm" variant="secondary"
                              loading={actualizando === c.id}
                              onClick={() => cambiarEstado(c.id, 'completada')}>
                              Completar
                            </Button>
                          )}
                          {c.estado !== 'cancelada' && c.estado !== 'completada' && (
                            <Button size="sm" variant="danger"
                              loading={actualizando === c.id}
                              onClick={() => cambiarEstado(c.id, 'cancelada')}>
                              Cancelar
                            </Button>
                          )}
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>

                {/* Subtotal cuando hay filtro de barbero */}
                {filtroBarbero !== 'todos' && (
                  <tfoot>
                    <tr className="border-t border-[#C9A84C]/20 bg-[#C9A84C]/3">
                      <td colSpan={6} className="px-4 py-3 text-[10px] text-[#C9A84C]/60 tracking-[0.2em] uppercase">
                        Subtotal — {barberos.find(b => b.id === filtroBarbero)?.nombre}
                      </td>
                      <td className="px-4 py-3 text-[#C9A84C] font-bold text-sm">
                        {formatPrecio(
                          citasFiltradas
                            .filter(c => c.estado === 'confirmada' || c.estado === 'completada')
                            .reduce((s, c) => s + (c.servicio?.precio ?? 0), 0)
                        )}
                      </td>
                      <td />
                    </tr>
                  </tfoot>
                )}
              </table>
            </div>
          )}
        </div>
      </main>
    </>
  )
}