'use client';

import { useState } from 'react';
import { Settings, Clock, Calendar, MapPin, Users, Mail } from 'lucide-react';
import { motion } from 'framer-motion';
import GeneralTab from './general-tab';
import HorariosTab from './horarios-tab';
import FestivosTab from './festivos-tab';
import AusenciasTab from './ausencias-tab';
import InformesFichajeTab from './informes-fichaje-tab';
import SmtpContent from '../../smtp/_components/smtp-content';
import UsersContent from '../../users/_components/users-content';
import { CalendarOff, FileSpreadsheet } from 'lucide-react';

const TABS = [
  { id: 'general', label: 'General', icon: MapPin },
  { id: 'horarios', label: 'Horarios Laborales', icon: Clock },
  { id: 'festivos', label: 'Festivos', icon: Calendar },
  { id: 'ausencias', label: 'Vacaciones y Bajas', icon: CalendarOff },
  { id: 'informes-fichaje', label: 'Informes Control Horario', icon: FileSpreadsheet },
  { id: 'usuarios', label: 'Usuarios', icon: Users },
  { id: 'smtp', label: 'Config. SMTP', icon: Mail },
] as const;

type TabId = typeof TABS[number]['id'];

export default function ConfiguracionContent() {
  const [activeTab, setActiveTab] = useState<TabId>('general');

  return (
    <div className="space-y-6">
      <div className="flex items-center gap-3">
        <div className="bg-[#1a365d]/10 p-2.5 rounded-xl">
          <Settings className="w-6 h-6 text-[#1a365d]" />
        </div>
        <div>
          <h1 className="text-2xl font-bold text-gray-900">Configuración</h1>
          <p className="text-sm text-gray-500">Horarios, festivos, usuarios, SMTP y parámetros del sistema</p>
        </div>
      </div>

      {/* Tabs */}
      <div className="flex flex-wrap gap-1 bg-gray-100 p-1 rounded-xl">
        {TABS.map((tab) => {
          const Icon = tab.icon;
          return (
            <button
              key={tab.id}
              onClick={() => setActiveTab(tab.id)}
              className={`flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg text-sm font-medium transition-all ${activeTab === tab.id
                ? 'bg-white text-[#1a365d] shadow-sm'
                : 'text-gray-500 hover:text-gray-700'
                }`}
            >
              <Icon className="w-4 h-4" />
              {tab.label}
            </button>
          );
        })}
      </div>

      <motion.div
        key={activeTab}
        initial={{ opacity: 0, y: 10 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.2 }}
      >
        {activeTab === 'general' && <GeneralTab />}
        {activeTab === 'horarios' && <HorariosTab />}
        {activeTab === 'festivos' && <FestivosTab />}
        {activeTab === 'ausencias' && <AusenciasTab />}
        {activeTab === 'informes-fichaje' && <InformesFichajeTab />}
        {activeTab === 'usuarios' && <UsersContent />}
        {activeTab === 'smtp' && <SmtpContent />}
      </motion.div>
    </div>
  );
}