'use client'
import { useEffect, useState } from 'react'
import { AppShell } from '@/components/layout/AppShell'
import { InmobiliariaForm } from '@/components/configuracion/InmobiliariaForm'
import { LogoUpload } from '@/components/configuracion/LogoUpload'
import { UsuariosConfig } from '@/components/configuracion/UsuariosConfig'
import { ChecklistConfig } from '@/components/configuracion/ChecklistConfig'
import { NotificacionesConfig } from '@/components/configuracion/NotificacionesConfig'
import { Building2, Users, CheckSquare, Bell } from 'lucide-react'
import { cn } from '@/lib/utils'

type Tab = 'inmobiliaria' | 'usuarios' | 'checklist' | 'notificaciones'

const TABS: { id: Tab; label: string; icon: React.ElementType }[] = [
  { id: 'inmobiliaria', label: 'Inmobiliaria', icon: Building2 },
  { id: 'usuarios', label: 'Usuarios', icon: Users },
  { id: 'checklist', label: 'Checklist', icon: CheckSquare },
  { id: 'notificaciones', label: 'Notificaciones', icon: Bell },
]

export default function ConfiguracionPage() {
  const [activeTab, setActiveTab] = useState<Tab>('inmobiliaria')
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    // Simulates fetching config data from the server
    const t = setTimeout(() => setLoading(false), 1200)
    return () => clearTimeout(t)
  }, [])

  return (
    <AppShell>
      <div className="max-w-4xl mx-auto space-y-5">
        {/* Header */}
        <div>
          <h2 className="text-lg font-semibold">Configuración</h2>
          <p className="text-sm text-muted-foreground">Gestioná los parámetros generales del sistema</p>
        </div>

        {/* Tab Nav */}
        <div className="flex gap-1 bg-muted/40 rounded-xl p-1 w-fit flex-wrap">
          {TABS.map(({ id, label, icon: Icon }) => (
            <button
              key={id}
              onClick={() => setActiveTab(id)}
              className={cn(
                'flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all',
                activeTab === id
                  ? 'bg-card text-foreground shadow-sm border border-border'
                  : 'text-muted-foreground hover:text-foreground'
              )}
            >
              <Icon size={14} />
              {label}
            </button>
          ))}
        </div>

        {/* Content */}
        {activeTab === 'inmobiliaria' && (
          <div className="space-y-4">
            <LogoUpload loading={loading} />
            <InmobiliariaForm loading={loading} />
          </div>
        )}
        {activeTab === 'usuarios' && <UsuariosConfig loading={loading} />}
        {activeTab === 'checklist' && <ChecklistConfig loading={loading} />}
        {activeTab === 'notificaciones' && <NotificacionesConfig loading={loading} />}
      </div>
    </AppShell>
  )
}