import { useState } from 'react'
import { Folder, Users, FileText, Cpu, Tag } from 'lucide-react'
import PastasTab from '@/components/configuracoes/PastasTab'
import CategoriasTab from '@/components/configuracoes/CategoriasTab'
import UsuariosTab from '@/components/configuracoes/UsuariosTab'
import LogsTab from '@/components/configuracoes/LogsTab'
import IntegracaoIATab from '@/components/configuracoes/IntegracaoIATab'

type Tab = 'pastas' | 'categorias' | 'usuarios' | 'logs' | 'ia'

export default function Configuracoes() {
  const [activeTab, setActiveTab] = useState<Tab>('pastas')
  
  const tabs = [
    { id: 'pastas' as Tab, label: 'Pastas e Documentos', icon: Folder },
    { id: 'categorias' as Tab, label: 'Categorias', icon: Tag },
    { id: 'usuarios' as Tab, label: 'Usuários', icon: Users },
    { id: 'logs' as Tab, label: 'Logs', icon: FileText },
    { id: 'ia' as Tab, label: 'Integrações IA', icon: Cpu },
  ]
  
  return (
    <div className="space-y-6">
      <h1 className="text-3xl font-bold text-gray-900 dark:text-gray-100">Configurações</h1>
      
      {/* Tabs */}
      <div className="border-b border-gray-200 dark:border-gray-700">
        <nav className="flex gap-8">
          {tabs.map((tab) => (
            <button
              key={tab.id}
              onClick={() => setActiveTab(tab.id)}
              className={`flex items-center gap-2 pb-4 border-b-2 transition-colors ${
                activeTab === tab.id
                  ? 'border-primary text-primary dark:text-blue-400'
                  : 'border-transparent text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200'
              }`}
            >
              <tab.icon size={20} />
              <span className="font-medium">{tab.label}</span>
            </button>
          ))}
        </nav>
      </div>
      
      {/* Tab Content */}
      <div>
        {activeTab === 'pastas' && <PastasTab />}
        {activeTab === 'categorias' && <CategoriasTab />}
        {activeTab === 'usuarios' && <UsuariosTab />}
        {activeTab === 'logs' && <LogsTab />}
        {activeTab === 'ia' && <IntegracaoIATab />}
      </div>
    </div>
  )
}
