'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 { createClient } from '@/lib/supabase/client'
import { Plus, Pencil, Trash2, Clock, DollarSign } from 'lucide-react'
import { cn, formatPrecio } from '@/lib/utils'
import type { Servicio } from '@/types'

const VACIO = { nombre: '', descripcion: '', duracion_min: 30, precio: '' }

export default function AdminServiciosPage() {
  const supabase = createClient()
  const [servicios, setServicios] = useState<Servicio[]>([])
  const [cargando, setCargando] = useState(true)
  const [guardando, setGuardando] = useState(false)
  const [mostrarForm, setMostrarForm] = useState(false)
  const [editando, setEditando] = useState<Servicio | null>(null)
  const [form, setForm] = useState<typeof VACIO>({ ...VACIO })

  const cargar = async () => {
    setCargando(true)
    const { data } = await supabase.from('servicios').select('*').order('nombre')
    setServicios(data ?? [])
    setCargando(false)
  }

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

  const abrirNuevo = () => { setEditando(null); setForm({ ...VACIO }); setMostrarForm(true) }

  const abrirEditar = (s: Servicio) => {
    setEditando(s)
    setForm({ nombre: s.nombre, descripcion: s.descripcion ?? '', duracion_min: s.duracion_min, precio: s.precio !== null ? String(s.precio) : '' })
    setMostrarForm(true)
  }

  const guardar = async () => {
    if (!form.nombre.trim()) { toast('El nombre es obligatorio', 'error'); return }
    if (!form.duracion_min || form.duracion_min < 5) { toast('Duración mínima 5 min', 'error'); return }
    setGuardando(true)

    const payload = {
      nombre: form.nombre.trim(),
      descripcion: form.descripcion.trim() || null,
      duracion_min: Number(form.duracion_min),
      precio: form.precio !== '' ? Number(form.precio) : null,
    }

    const { error } = editando
      ? await supabase.from('servicios').update(payload).eq('id', editando.id)
      : await supabase.from('servicios').insert({ ...payload, activo: true })

    setGuardando(false)
    if (error) { toast('Error: ' + error.message, 'error'); return }
    toast(editando ? 'Servicio actualizado ✓' : 'Servicio creado ✓', 'success')
    setMostrarForm(false)
    cargar()
  }

  const toggleActivo = async (s: Servicio) => {
    await supabase.from('servicios').update({ activo: !s.activo }).eq('id', s.id)
    toast(s.activo ? 'Desactivado' : 'Activado', 'info')
    cargar()
  }

  const eliminar = async (s: Servicio) => {
    if (!confirm(`¿Eliminar "${s.nombre}"?`)) return
    await supabase.from('servicios').delete().eq('id', s.id)
    toast('Eliminado', 'info')
    cargar()
  }

  const set = (k: string) => (e: React.ChangeEvent<HTMLInputElement>) =>
    setForm(f => ({ ...f, [k]: e.target.value }))

  const inputNum = (k: string) => (e: React.ChangeEvent<HTMLInputElement>) =>
    setForm(f => ({ ...f, [k]: e.target.value }))

  return (
    <>
      <Navbar />
      <main className="min-h-screen bg-[#080808] pt-24 pb-16 px-4">
        <div className="max-w-4xl 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">Servicios</h1>
            </div>
            <Button onClick={abrirNuevo} className="flex items-center gap-2">
              <Plus className="h-4 w-4" /> Nuevo servicio
            </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">
                  {editando ? `Editando: ${editando.nombre}` : 'Nuevo servicio'}
                </h2>
              </div>
              <div className="p-6">
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 mb-6">
                  <Input label="Nombre del servicio *" placeholder="Ej: Corte de cabello" value={form.nombre} onChange={set('nombre')} />
                  <Input label="Descripción (opcional)" placeholder="Breve descripción" value={form.descripcion} onChange={set('descripcion')} />

                  <div className="flex flex-col gap-1.5">
                    <label className="text-[10px] font-medium text-[#888] tracking-[0.2em] uppercase">
                      Duración (minutos) *
                    </label>
                    <input
                      type="number" min={5} step={5}
                      value={form.duracion_min}
                      onChange={e => setForm(f => ({ ...f, duracion_min: Number(e.target.value) }))}
                      className="w-full bg-[#0a0a0a] border-b border-[#333] focus:border-[#C9A84C] px-0 py-3 text-sm text-white focus:outline-none transition-colors"
                    />
                  </div>

                  <div className="flex flex-col gap-1.5">
                    <label className="text-[10px] font-medium text-[#888] tracking-[0.2em] uppercase">
                      Precio MXN (opcional)
                    </label>
                    <input
                      type="number" min={0} step={0.5} placeholder="Ej: 150"
                      value={form.precio}
                      onChange={e => setForm(f => ({ ...f, precio: e.target.value }))}
                      className="w-full bg-[#0a0a0a] border-b border-[#333] focus:border-[#C9A84C] px-0 py-3 text-sm text-white placeholder:text-[#333] focus:outline-none transition-colors"
                    />
                  </div>
                </div>

                <div className="flex gap-3">
                  <Button loading={guardando} onClick={guardar}>
                    {editando ? 'Guardar cambios' : 'Crear servicio'}
                  </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>
          ) : servicios.length === 0 ? (
            <div className="text-center py-20 border border-[#1a1a1a] text-[#333] text-xs tracking-widest uppercase">
              Sin servicios registrados
            </div>
          ) : (
            <div className="flex flex-col gap-2">
              {servicios.map(s => (
                <div
                  key={s.id}
                  className={cn(
                    'border bg-[#0a0a0a] flex items-center gap-4 px-5 py-4 transition-all',
                    s.activo ? 'border-[#1a1a1a] hover:border-[#2a2a2a]' : 'border-[#111] opacity-50'
                  )}
                >
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-2 mb-1">
                      <p className="font-semibold text-white text-sm">{s.nombre}</p>
                      {!s.activo && (
                        <span className="text-[10px] border border-[#333] text-[#444] px-2 py-0.5 tracking-widest uppercase">
                          Inactivo
                        </span>
                      )}
                    </div>
                    {s.descripcion && <p className="text-xs text-[#555] mb-1.5">{s.descripcion}</p>}
                    <div className="flex items-center gap-4">
                      <span className="text-xs text-[#666] flex items-center gap-1">
                        <Clock className="h-3 w-3 text-[#444]" /> {s.duracion_min} min
                      </span>
                      <span className="text-xs font-semibold text-[#C9A84C] flex items-center gap-1">
                        <DollarSign className="h-3 w-3" />
                        {formatPrecio(s.precio)}
                      </span>
                    </div>
                  </div>

                  <div className="flex items-center gap-2 shrink-0">
                    <button
                      onClick={() => toggleActivo(s)}
                      className="text-[10px] tracking-widest uppercase text-[#444] hover:text-[#C9A84C] transition-colors px-2 py-1 border border-transparent hover:border-[#C9A84C]/30"
                    >
                      {s.activo ? 'Desactivar' : 'Activar'}
                    </button>
                    <Button variant="secondary" size="sm" onClick={() => abrirEditar(s)}>
                      <Pencil className="h-3.5 w-3.5" />
                    </Button>
                    <Button variant="danger" size="sm" onClick={() => eliminar(s)}>
                      <Trash2 className="h-3.5 w-3.5" />
                    </Button>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      </main>
    </>
  )
}