'use client'
export const dynamic = 'force-dynamic'
import { useEffect, useRef, 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 { createClient } from '@/lib/supabase/client'
import { cn, DIAS_SEMANA } from '@/lib/utils'
import { User, Plus, Clock, Camera, X } from 'lucide-react'
import type { Barbero } from '@/types'

export default function AdminBarberosPage() {
  const supabase = createClient()
  const [barberos, setBarberos] = useState<Barbero[]>([])
  const [cargando, setCargando] = useState(true)
  const [mostrarForm, setMostrarForm] = useState(false)
  const [guardando, setGuardando] = useState(false)
  const [barberoEdit, setBarberoEdit] = useState<Barbero | null>(null)
  const [form, setForm] = useState({ nombre: '', descripcion: '' })
  const [fotoPreview, setFotoPreview] = useState<string | null>(null)
  const [fotoFile, setFotoFile] = useState<File | null>(null)
  const [subiendoFoto, setSubiendoFoto] = useState(false)
  const inputFotoRef = useRef<HTMLInputElement>(null)

  const horarioDefault = Object.fromEntries(
    Array.from({ length: 7 }, (_, i) => [i, { activo: i >= 1 && i <= 6, hora_inicio: '09:00', hora_fin: '19:00' }])
  )
  const [horarios, setHorarios] = useState<Record<number, { activo: boolean; hora_inicio: string; hora_fin: string }>>(horarioDefault)

  const cargar = () => {
    fetch('/api/barberos').then(r => r.json()).then(({ barberos }) => {
      setBarberos(barberos ?? [])
      setCargando(false)
    })
  }

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

  const abrirEditar = (b: Barbero) => {
    setBarberoEdit(b)
    setForm({ nombre: b.nombre, descripcion: b.descripcion ?? '' })
    setFotoPreview(b.foto_url ?? null)
    setFotoFile(null)
    const h = { ...horarioDefault }
    b.horarios?.forEach(hr => { h[hr.dia_semana] = { activo: hr.activo, hora_inicio: hr.hora_inicio, hora_fin: hr.hora_fin } })
    setHorarios(h)
    setMostrarForm(true)
  }

  const abrirNuevo = () => {
    setBarberoEdit(null)
    setForm({ nombre: '', descripcion: '' })
    setFotoPreview(null)
    setFotoFile(null)
    setHorarios(horarioDefault)
    setMostrarForm(true)
  }

  const handleFotoChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (!file) return
    if (file.size > 5 * 1024 * 1024) { toast('Máximo 5MB', 'error'); return }
    setFotoFile(file)
    setFotoPreview(URL.createObjectURL(file))
  }

  const guardar = async () => {
    if (!form.nombre.trim()) { toast('El nombre es obligatorio', 'error'); return }
    setGuardando(true)

    // 1. Primero guardar/crear el barbero (sin foto)
    let barberoId: string

    if (barberoEdit) {
      const { error } = await supabase.from('barberos').update({
        nombre: form.nombre,
        descripcion: form.descripcion || null,
      }).eq('id', barberoEdit.id)
      if (error) { toast('Error: ' + error.message, 'error'); setGuardando(false); return }
      barberoId = barberoEdit.id
    } else {
      const res = await fetch('/api/barberos', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ nombre: form.nombre, descripcion: form.descripcion || null }),
      })
      const data = await res.json()
      if (!res.ok) { toast(data.error, 'error'); setGuardando(false); return }
      barberoId = data.barbero.id
    }

    // 2. Subir foto vía API server-side (usa service role, bypassa RLS)
    if (fotoFile) {
      setSubiendoFoto(true)
      const fd = new FormData()
      fd.append('file', fotoFile)

      const res = await fetch(`/api/barberos/${barberoId}/foto`, { method: 'POST', body: fd })
      const data = await res.json()
      setSubiendoFoto(false)

      if (!res.ok) {
        toast('Barbero guardado, pero error al subir foto: ' + data.error, 'error')
        // No bloqueamos — el barbero ya fue guardado
      }
    }

    // Guardar horarios
    for (const [dia, h] of Object.entries(horarios)) {
      await supabase.from('horarios_barbero').upsert({
        barbero_id: barberoId,
        dia_semana: Number(dia),
        hora_inicio: h.hora_inicio,
        hora_fin: h.hora_fin,
        activo: h.activo,
      }, { onConflict: 'barbero_id,dia_semana' })
    }

    toast(barberoEdit ? 'Barbero actualizado ✓' : 'Barbero creado ✓', 'success')
    setMostrarForm(false)
    setGuardando(false)
    cargar()
  }

  return (
    <>
      <Navbar />
      <main className="min-h-screen bg-[#080808] pt-24 pb-16 px-4">
        <div className="max-w-5xl mx-auto">
          <div className="flex items-center justify-between mb-10">
            <div>
              <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">Barberos</h1>
            </div>
            <Button onClick={abrirNuevo} className="flex items-center gap-2">
              <Plus className="h-4 w-4" /> Nuevo barbero
            </Button>
          </div>

          {/* Formulario */}
          {mostrarForm && (
            <div className="border border-[#C9A84C]/30 bg-[#0a0a0a] mb-8">
              <div className="px-6 py-4 border-b border-[#C9A84C]/10">
                <h2 className="text-[#C9A84C] text-[10px] tracking-[0.3em] uppercase">
                  {barberoEdit ? `Editando: ${barberoEdit.nombre}` : 'Nuevo barbero'}
                </h2>
              </div>
              <div className="p-6">
                <div className="flex flex-col sm:flex-row gap-6 mb-6">
                  {/* Foto */}
                  <div className="flex flex-col items-center gap-3">
                    <div
                      onClick={() => inputFotoRef.current?.click()}
                      className="w-28 h-28 border border-dashed border-[#333] hover:border-[#C9A84C]/50 bg-[#0d0d0d] flex items-center justify-center cursor-pointer overflow-hidden transition-all group relative"
                    >
                      {fotoPreview ? (
                        <>
                          <img src={fotoPreview} alt="Preview" className="w-full h-full object-cover" />
                          <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                            <Camera className="h-5 w-5 text-[#C9A84C]" />
                          </div>
                        </>
                      ) : (
                        <div className="text-center">
                          <Camera className="h-6 w-6 text-[#333] mx-auto mb-1" />
                          <span className="text-[9px] text-[#333] tracking-widest uppercase">Foto</span>
                        </div>
                      )}
                    </div>
                    {fotoPreview && (
                      <button
                        onClick={() => { setFotoPreview(null); setFotoFile(null) }}
                        className="text-[9px] text-[#444] hover:text-red-500 tracking-widest uppercase flex items-center gap-1 transition-colors"
                      >
                        <X className="h-3 w-3" /> Quitar
                      </button>
                    )}
                    <input ref={inputFotoRef} type="file" accept="image/*" className="hidden" onChange={handleFotoChange} />
                  </div>

                  {/* Datos */}
                  <div className="flex-1 grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <Input label="Nombre *" placeholder="Nombre del barbero" value={form.nombre} onChange={e => setForm(f => ({ ...f, nombre: e.target.value }))} />
                    <Input label="Descripción (opcional)" placeholder="Especialidad..." value={form.descripcion} onChange={e => setForm(f => ({ ...f, descripcion: e.target.value }))} />
                  </div>
                </div>

                {/* Horarios */}
                <div className="border-t border-[#141414] pt-5 mb-6">
                  <p className="text-[10px] text-[#C9A84C] tracking-[0.3em] uppercase mb-4 flex items-center gap-2">
                    <Clock className="h-3.5 w-3.5" /> Horario semanal
                  </p>
                  <div className="flex flex-col gap-2">
                    {Array.from({ length: 7 }, (_, i) => (
                      <div key={i} className="flex items-center gap-4">
                        <div className="flex items-center gap-3 w-32">
                          <input
                            type="checkbox"
                            checked={horarios[i].activo}
                            onChange={e => setHorarios(h => ({ ...h, [i]: { ...h[i], activo: e.target.checked } }))}
                            className="accent-[#C9A84C]"
                          />
                          <span className={cn('text-xs', horarios[i].activo ? 'text-white' : 'text-[#333]')}>
                            {DIAS_SEMANA[i]}
                          </span>
                        </div>
                        <div className="flex items-center gap-2">
                          <input
                            type="time" value={horarios[i].hora_inicio}
                            disabled={!horarios[i].activo}
                            onChange={e => setHorarios(h => ({ ...h, [i]: { ...h[i], hora_inicio: e.target.value } }))}
                            className="bg-[#0d0d0d] border border-[#1a1a1a] text-[#888] px-2 py-1 text-xs focus:border-[#C9A84C] focus:outline-none disabled:opacity-30 disabled:cursor-not-allowed"
                          />
                          <span className="text-[#333] text-xs">—</span>
                          <input
                            type="time" value={horarios[i].hora_fin}
                            disabled={!horarios[i].activo}
                            onChange={e => setHorarios(h => ({ ...h, [i]: { ...h[i], hora_fin: e.target.value } }))}
                            className="bg-[#0d0d0d] border border-[#1a1a1a] text-[#888] px-2 py-1 text-xs focus:border-[#C9A84C] focus:outline-none disabled:opacity-30 disabled:cursor-not-allowed"
                          />
                        </div>
                      </div>
                    ))}
                  </div>
                </div>

                <div className="flex gap-3">
                  <Button loading={guardando || subiendoFoto} onClick={guardar}>
                    {subiendoFoto ? 'Subiendo foto...' : guardando ? 'Guardando...' : 'Guardar'}
                  </Button>
                  <Button variant="ghost" onClick={() => setMostrarForm(false)}>Cancelar</Button>
                </div>
              </div>
            </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>
          ) : (
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
              {barberos.map(b => (
                <div key={b.id} className="border border-[#1a1a1a] bg-[#0a0a0a] hover:border-[#2a2a2a] transition-all">
                  {/* Foto del barbero */}
                  <div className="w-full aspect-[4/3] bg-[#0d0d0d] border-b border-[#141414] overflow-hidden relative">
                    {b.foto_url ? (
                      <img src={b.foto_url} alt={b.nombre} className="w-full h-full object-cover" />
                    ) : (
                      <div className="w-full h-full flex items-center justify-center">
                        <User className="h-12 w-12 text-[#222]" />
                      </div>
                    )}
                  </div>

                  <div className="p-4">
                    <p className="font-semibold text-white text-sm mb-0.5">{b.nombre}</p>
                    {b.descripcion && <p className="text-xs text-[#555] mb-2">{b.descripcion}</p>}
                    <div className="flex flex-wrap gap-1 mb-3">
                      {b.horarios?.filter(h => h.activo).map(h => (
                        <span key={h.dia_semana} className="text-[9px] border border-[#C9A84C]/20 text-[#C9A84C]/60 px-1.5 py-0.5 tracking-wide">
                          {DIAS_SEMANA[h.dia_semana].slice(0, 3)}
                        </span>
                      ))}
                    </div>
                    <Button variant="secondary" size="sm" className="w-full" onClick={() => abrirEditar(b)}>
                      Editar
                    </Button>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      </main>
    </>
  )
}