'use client'
export const dynamic = 'force-dynamic'
import { useEffect, useState } from 'react'
import { Navbar } from '@/components/navbar'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { toast } from '@/components/ui/toaster'
import { format, parseISO } from 'date-fns'
import { es } from 'date-fns/locale'
import { cn } from '@/lib/utils'
import { Users, Search, KeyRound, ChevronDown, ChevronUp, Eye, EyeOff, Shield, User } from 'lucide-react'

type Rol = 'cliente' | 'barbero' | 'admin'

interface Usuario {
  id: string
  nombre: string
  email: string
  telefono: string | null
  rol: Rol
  total_citas: number
  ultimo_acceso: string | null
  creado_en: string
}

const ROL_BADGE: Record<Rol, string> = {
  cliente: 'border-[#1a1a1a] text-[#555]',
  barbero: 'border-[#C9A84C]/30 text-[#C9A84C]/70',
  admin:   'border-[#C9A84C] text-[#C9A84C]',
}

const ROL_ICON: Record<Rol, React.ReactNode> = {
  cliente: <User className="h-3 w-3" />,
  barbero: <User className="h-3 w-3" />,
  admin:   <Shield className="h-3 w-3" />,
}

export default function AdminUsuariosPage() {
  const [usuarios, setUsuarios]   = useState<Usuario[]>([])
  const [cargando, setCargando]   = useState(true)
  const [busqueda, setBusqueda]   = useState('')
  const [expandido, setExpandido] = useState<string | null>(null)
  const [editando, setEditando]   = useState<string | null>(null)
  const [guardando, setGuardando] = useState(false)

  // Formulario de edición
  const [form, setForm] = useState({
    nombre: '', telefono: '', rol: 'cliente' as Rol,
    password: '', confirmar: '', mostrarPass: false,
  })

  const cargar = async () => {
    setCargando(true)
    const res = await fetch('/api/admin/usuarios')
    const { usuarios, error } = await res.json()
    if (error) toast(error, 'error')
    else setUsuarios(usuarios ?? [])
    setCargando(false)
  }

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

  const filtrados = usuarios.filter(u =>
    u.nombre.toLowerCase().includes(busqueda.toLowerCase()) ||
    u.email.toLowerCase().includes(busqueda.toLowerCase()) ||
    (u.telefono ?? '').includes(busqueda)
  )

  const abrirEdicion = (u: Usuario) => {
    setEditando(u.id)
    setForm({ nombre: u.nombre, telefono: u.telefono ?? '', rol: u.rol, password: '', confirmar: '', mostrarPass: false })
  }

  const cerrarEdicion = () => { setEditando(null) }

  const guardar = async (userId: string) => {
    if (form.password && form.password !== form.confirmar) {
      toast('Las contraseñas no coinciden', 'error'); return
    }
    if (form.password && form.password.length < 6) {
      toast('Mínimo 6 caracteres', 'error'); return
    }
    setGuardando(true)

    const body: Record<string, any> = { userId, nombre: form.nombre, telefono: form.telefono, rol: form.rol }
    if (form.password) body.password = form.password

    const res = await fetch('/api/admin/usuarios', {
      method: 'PATCH',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(body),
    })
    const data = await res.json()
    setGuardando(false)

    if (!res.ok) { toast(data.error, 'error'); return }
    toast('Usuario actualizado ✓', 'success')
    setEditando(null)
    cargar()
  }

  // Stats rápidas
  const totalClientes = usuarios.filter(u => u.rol === 'cliente').length
  const totalAdmins   = usuarios.filter(u => u.rol === 'admin').length
  const totalBarberos = usuarios.filter(u => u.rol === 'barbero').length

  return (
    <>
      <Navbar />
      <main className="min-h-screen bg-[#080808] pt-24 pb-16 px-4">
        <div className="max-w-5xl 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">Usuarios</h1>
          </div>

          {/* Stats */}
          {!cargando && (
            <div className="grid grid-cols-3 gap-2 mb-8">
              {[
                { label: 'Clientes', value: totalClientes, color: 'text-white' },
                { label: 'Barberos', value: totalBarberos, color: 'text-[#C9A84C]/70' },
                { label: 'Admins',   value: totalAdmins,   color: 'text-[#C9A84C]' },
              ].map(s => (
                <div key={s.label} className="border border-[#1a1a1a] bg-[#0a0a0a] px-5 py-4">
                  <p className={`font-display text-3xl font-bold ${s.color}`}>{s.value}</p>
                  <p className="text-[10px] text-[#444] uppercase tracking-[0.2em] mt-1">{s.label}</p>
                </div>
              ))}
            </div>
          )}

          {/* Buscador */}
          <div className="relative mb-5">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[#333]" />
            <input
              type="text"
              placeholder="Buscar por nombre, email o teléfono..."
              value={busqueda}
              onChange={e => setBusqueda(e.target.value)}
              className="w-full bg-[#0a0a0a] border border-[#1a1a1a] focus:border-[#C9A84C] pl-10 pr-4 py-3 text-sm text-white placeholder:text-[#333] focus:outline-none transition-colors"
            />
          </div>

          {/* Lista */}
          {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>
          ) : filtrados.length === 0 ? (
            <div className="text-center py-16 border border-[#1a1a1a] text-[#333] text-xs tracking-widest uppercase">
              {busqueda ? 'Sin resultados' : 'Sin usuarios'}
            </div>
          ) : (
            <div className="flex flex-col gap-1.5">
              {filtrados.map(u => (
                <div key={u.id} className={cn(
                  'border bg-[#0a0a0a] transition-all',
                  expandido === u.id ? 'border-[#C9A84C]/20' : 'border-[#1a1a1a] hover:border-[#2a2a2a]'
                )}>
                  {/* Fila principal */}
                  <button
                    className="w-full flex items-center gap-4 px-5 py-3.5 text-left"
                    onClick={() => setExpandido(expandido === u.id ? null : u.id)}
                  >
                    {/* Avatar */}
                    <div className="w-9 h-9 bg-[#141414] border border-[#222] flex items-center justify-center shrink-0">
                      <span className="text-[#555] text-xs font-bold uppercase">
                        {u.nombre.charAt(0)}
                      </span>
                    </div>

                    {/* Info */}
                    <div className="flex-1 min-w-0">
                      <div className="flex items-center gap-2">
                        <p className="text-white text-sm font-medium truncate">{u.nombre}</p>
                        <span className={cn(
                          'text-[9px] tracking-[0.15em] uppercase border px-1.5 py-0.5 flex items-center gap-1 shrink-0',
                          ROL_BADGE[u.rol]
                        )}>
                          {ROL_ICON[u.rol]} {u.rol}
                        </span>
                      </div>
                      <p className="text-[#444] text-xs mt-0.5 truncate">{u.email}</p>
                    </div>

                    {/* Meta */}
                    <div className="hidden sm:flex flex-col items-end gap-0.5 shrink-0">
                      <span className="text-[10px] text-[#555]">
                        {u.total_citas} {u.total_citas === 1 ? 'cita' : 'citas'}
                      </span>
                      {u.ultimo_acceso && (
                        <span className="text-[10px] text-[#333]">
                          Acceso: {format(parseISO(u.ultimo_acceso), "d MMM yyyy", { locale: es })}
                        </span>
                      )}
                    </div>

                    {expandido === u.id
                      ? <ChevronUp className="h-4 w-4 text-[#333] shrink-0" />
                      : <ChevronDown className="h-4 w-4 text-[#333] shrink-0" />
                    }
                  </button>

                  {/* Panel expandido */}
                  {expandido === u.id && (
                    <div className="border-t border-[#111] px-5 py-5">

                      {editando === u.id ? (
                        /* ── Formulario de edición ── */
                        <div className="flex flex-col gap-5">
                          <p className="text-[#C9A84C] text-[10px] tracking-[0.3em] uppercase">
                            Editando usuario
                          </p>

                          <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
                            <Input
                              label="Nombre"
                              value={form.nombre}
                              onChange={e => setForm(f => ({ ...f, nombre: e.target.value }))}
                            />
                            <Input
                              label="Teléfono"
                              value={form.telefono}
                              onChange={e => setForm(f => ({ ...f, telefono: e.target.value }))}
                            />
                          </div>

                          {/* Rol */}
                          <div className="flex flex-col gap-1.5">
                            <label className="text-[10px] font-medium text-[#888] tracking-[0.2em] uppercase">
                              Rol
                            </label>
                            <div className="flex gap-2">
                              {(['cliente', 'barbero', 'admin'] as Rol[]).map(r => (
                                <button
                                  key={r}
                                  onClick={() => setForm(f => ({ ...f, rol: r }))}
                                  className={cn(
                                    'text-[10px] tracking-[0.2em] uppercase px-4 py-2 border transition-all flex items-center gap-1.5',
                                    form.rol === r
                                      ? 'bg-[#C9A84C] text-black border-[#C9A84C]'
                                      : 'border-[#1a1a1a] text-[#555] hover:border-[#C9A84C]/30'
                                  )}
                                >
                                  {ROL_ICON[r]} {r}
                                </button>
                              ))}
                            </div>
                          </div>

                          {/* Contraseña */}
                          <div className="border-t border-[#111] pt-5">
                            <p className="text-[10px] text-[#555] tracking-[0.2em] uppercase mb-4 flex items-center gap-2">
                              <KeyRound className="h-3.5 w-3.5 text-[#C9A84C]" />
                              Cambiar contraseña (opcional)
                            </p>
                            <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
                              <div className="relative">
                                <Input
                                  label="Nueva contraseña"
                                  type={form.mostrarPass ? 'text' : 'password'}
                                  placeholder="Mínimo 6 caracteres"
                                  value={form.password}
                                  onChange={e => setForm(f => ({ ...f, password: e.target.value }))}
                                />
                                <button
                                  type="button"
                                  onClick={() => setForm(f => ({ ...f, mostrarPass: !f.mostrarPass }))}
                                  className="absolute right-0 bottom-2.5 text-[#444] hover:text-[#C9A84C] transition-colors"
                                >
                                  {form.mostrarPass ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                                </button>
                              </div>
                              <Input
                                label="Confirmar contraseña"
                                type={form.mostrarPass ? 'text' : 'password'}
                                placeholder="Repite la contraseña"
                                value={form.confirmar}
                                onChange={e => setForm(f => ({ ...f, confirmar: e.target.value }))}
                              />
                            </div>
                            {form.password && form.password !== form.confirmar && (
                              <p className="text-xs text-red-500 mt-2 border-l-2 border-red-800 pl-2">
                                Las contraseñas no coinciden
                              </p>
                            )}
                          </div>

                          <div className="flex gap-3">
                            <Button loading={guardando} onClick={() => guardar(u.id)}>
                              Guardar cambios
                            </Button>
                            <Button variant="ghost" onClick={cerrarEdicion}>Cancelar</Button>
                          </div>
                        </div>

                      ) : (
                        /* ── Vista de detalle ── */
                        <div>
                          <div className="grid grid-cols-2 sm:grid-cols-3 gap-4 text-xs mb-5">
                            <div>
                              <p className="text-[10px] text-[#444] tracking-[0.2em] uppercase mb-1">Email</p>
                              <p className="text-[#888]">{u.email}</p>
                            </div>
                            <div>
                              <p className="text-[10px] text-[#444] tracking-[0.2em] uppercase mb-1">Teléfono</p>
                              <p className="text-[#888]">{u.telefono ?? '—'}</p>
                            </div>
                            <div>
                              <p className="text-[10px] text-[#444] tracking-[0.2em] uppercase mb-1">Citas totales</p>
                              <p className="text-[#C9A84C] font-semibold">{u.total_citas}</p>
                            </div>
                            <div>
                              <p className="text-[10px] text-[#444] tracking-[0.2em] uppercase mb-1">Registrado</p>
                              <p className="text-[#888]">
                                {format(parseISO(u.creado_en), "d 'de' MMMM yyyy", { locale: es })}
                              </p>
                            </div>
                            <div>
                              <p className="text-[10px] text-[#444] tracking-[0.2em] uppercase mb-1">Último acceso</p>
                              <p className="text-[#888]">
                                {u.ultimo_acceso
                                  ? format(parseISO(u.ultimo_acceso), "d MMM yyyy, HH:mm", { locale: es })
                                  : 'Nunca'}
                              </p>
                            </div>
                            <div>
                              <p className="text-[10px] text-[#444] tracking-[0.2em] uppercase mb-1">ID</p>
                              <p className="text-[#333] text-[10px] font-mono truncate">{u.id}</p>
                            </div>
                          </div>

                          <Button variant="secondary" size="sm" onClick={() => abrirEdicion(u)}
                            className="flex items-center gap-2">
                            <KeyRound className="h-3.5 w-3.5" />
                            Editar / Cambiar contraseña
                          </Button>
                        </div>
                      )}
                    </div>
                  )}
                </div>
              ))}
            </div>
          )}
        </div>
      </main>
    </>
  )
}