export const dynamic = 'force-dynamic'
import { createClient } from '@/lib/supabase/server'
import { redirect } from 'next/navigation'
import { Navbar } from '@/components/navbar'
import { format, startOfDay, endOfDay, startOfMonth, endOfMonth } from 'date-fns'
import { es } from 'date-fns/locale'
import { Calendar, Users, Scissors, TrendingUp } from 'lucide-react'
import Link from 'next/link'

export default async function DashboardPage() {
  const supabase = await createClient()
  const { data: { user } } = await supabase.auth.getUser()
  if (!user) redirect('/login')

  const { data: perfil } = await supabase.from('perfiles').select('rol').eq('id', user.id).single()
  if (perfil?.rol !== 'admin') redirect('/')

  const hoy = new Date()
  const [
    { count: citasHoy },
    { count: citasMes },
    { count: totalClientes },
    { count: totalBarberos },
    { data: proximasCitas },
  ] = await Promise.all([
    supabase.from('citas').select('*', { count: 'exact', head: true }).neq('estado', 'cancelada').gte('fecha_inicio', startOfDay(hoy).toISOString()).lte('fecha_inicio', endOfDay(hoy).toISOString()),
    supabase.from('citas').select('*', { count: 'exact', head: true }).neq('estado', 'cancelada').gte('fecha_inicio', startOfMonth(hoy).toISOString()).lte('fecha_inicio', endOfMonth(hoy).toISOString()),
    supabase.from('perfiles').select('*', { count: 'exact', head: true }).eq('rol', 'cliente'),
    supabase.from('barberos').select('*', { count: 'exact', head: true }).eq('activo', true),
    supabase.from('citas').select('*, perfil:perfiles(nombre), barbero:barberos(nombre), servicio:servicios(nombre)')
      .neq('estado', 'cancelada').gte('fecha_inicio', startOfDay(hoy).toISOString()).order('fecha_inicio', { ascending: true }).limit(10),
  ])

  const stats = [
    { label: 'Citas hoy',           value: citasHoy ?? 0,       icon: <Calendar    className="h-5 w-5 text-[#C9A84C]" />,  href: '/citas' },
    { label: 'Citas este mes',       value: citasMes ?? 0,       icon: <TrendingUp  className="h-5 w-5 text-[#C9A84C]" />,  href: '/citas' },
    { label: 'Clientes',             value: totalClientes ?? 0,  icon: <Users       className="h-5 w-5 text-[#C9A84C]" />,  href: '/citas' },
    { label: 'Barberos activos',     value: totalBarberos ?? 0,  icon: <Scissors    className="h-5 w-5 text-[#C9A84C]" />,  href: '/barberos' },
  ]

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

          {/* Header */}
          <div className="flex items-start justify-between mb-10 flex-wrap gap-4">
            <div>
              <p className="text-[#C9A84C] text-[10px] tracking-[0.4em] uppercase mb-2">Panel de control</p>
              <h1 className="font-display text-4xl font-bold text-white">Dashboard</h1>
              <p className="text-[#444] text-sm mt-1 capitalize">
                {format(hoy, "EEEE, d 'de' MMMM yyyy", { locale: es })}
              </p>
            </div>
            <div className="flex gap-2 flex-wrap">
              {[
                { href: '/servicios', label: 'Servicios' },
                { href: '/barberos',  label: 'Barberos' },
                { href: '/usuarios',  label: 'Usuarios' },
                { href: '/citas',     label: 'Ver citas', gold: true },
              ].map(l => (
                <Link key={l.href} href={l.href}
                  className={l.gold
                    ? 'text-[10px] tracking-[0.2em] uppercase bg-[#C9A84C] hover:bg-[#E8C97A] text-black font-semibold px-4 py-2 transition-all'
                    : 'text-[10px] tracking-[0.2em] uppercase border border-[#1a1a1a] hover:border-[#C9A84C]/30 text-[#666] hover:text-[#C9A84C] px-4 py-2 transition-all'
                  }>
                  {l.label}
                </Link>
              ))}
            </div>
          </div>

          {/* Stats */}
          <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 mb-10">
            {stats.map(s => (
              <Link key={s.label} href={s.href}
                className="border border-[#1a1a1a] bg-[#0a0a0a] hover:border-[#C9A84C]/20 transition-all p-5 group">
                <div className="mb-4">{s.icon}</div>
                <p className="font-display text-3xl font-bold text-white">{s.value}</p>
                <p className="text-[10px] text-[#444] mt-1 tracking-[0.15em] uppercase">{s.label}</p>
              </Link>
            ))}
          </div>

          {/* Citas de hoy */}
          <div className="border border-[#1a1a1a] bg-[#0a0a0a]">
            <div className="px-6 py-4 border-b border-[#141414] flex items-center justify-between">
              <p className="text-[#C9A84C] text-[10px] tracking-[0.3em] uppercase">Agenda de hoy</p>
              <Link href="/citas" className="text-[10px] text-[#444] hover:text-[#C9A84C] tracking-widest uppercase transition-colors">
                Ver todas →
              </Link>
            </div>

            {!proximasCitas || proximasCitas.length === 0 ? (
              <p className="text-[#333] text-xs py-10 text-center tracking-widest uppercase">
                Sin citas para hoy
              </p>
            ) : (
              <div className="divide-y divide-[#0f0f0f]">
                {proximasCitas.map((c: any) => (
                  <div key={c.id} className="flex items-center justify-between px-6 py-3 hover:bg-[#0d0d0d] transition-colors">
                    <div className="flex items-center gap-4">
                      <p className="text-[#C9A84C] font-bold text-sm w-12 shrink-0">
                        {format(new Date(c.fecha_inicio), 'HH:mm')}
                      </p>
                      <div>
                        <p className="text-white text-sm font-medium">{c.perfil?.nombre}</p>
                        <p className="text-[#444] text-xs">{c.servicio?.nombre} · {c.barbero?.nombre}</p>
                      </div>
                    </div>
                    <span className={`text-[10px] tracking-[0.15em] uppercase border px-2 py-0.5
                      ${c.estado === 'confirmada' ? 'border-[#C9A84C]/30 text-[#C9A84C]' : 'border-yellow-700/30 text-yellow-600'}`}>
                      {c.estado}
                    </span>
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>
      </main>
    </>
  )
}