import React, { useState } from "react";
import { SimpleCrud } from "./SimpleCrud";
import { PriceTableEditor } from "./PriceTableEditor";
import { Building2, GraduationCap, Calendar, DollarSign, Database, Briefcase } from "lucide-react";

export const SystemSettings: React.FC = () => {
  const [activeTab, setActiveTab] = useState<"empresas" | "cursos" | "tipos_evento" | "anos_formatura" | "precos" | "funcoes">("empresas");

  const tabs = [
    { id: "empresas", label: "Empresas", icon: Building2 },
    { id: "cursos", label: "Cursos", icon: GraduationCap },
    { id: "tipos_evento", label: "Tipos de Evento", icon: Calendar },
    { id: "anos_formatura", label: "Anos de Formatura", icon: Database },
    { id: "funcoes", label: "Funções", icon: Briefcase },
    { id: "precos", label: "Tabela de Preços", icon: DollarSign },
  ];

  return (
    <div className="space-y-6">
      <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-2 overflow-x-auto">
        <nav className="flex space-x-2">
            {tabs.map(tab => {
                const Icon = tab.icon;
                return (
                    <button
                        key={tab.id}
                        onClick={() => setActiveTab(tab.id as any)}
                        className={`
                            flex items-center px-4 py-2 rounded-md text-sm font-medium transition-colors whitespace-nowrap
                            ${activeTab === tab.id 
                                ? "bg-brand-gold text-white" 
                                : "text-gray-600 hover:bg-gray-100 hover:text-gray-900"}
                        `}
                    >
                        <Icon size={18} className="mr-2" />
                        {tab.label}
                    </button>
                )
            })}
        </nav>
      </div>

      <div className="animate-in fade-in duration-300 slide-in-from-bottom-2">
        {activeTab === "empresas" && (
            <SimpleCrud 
                title="Gerenciar Empresas" 
                endpoint="/api/empresas" 
                columns={[{ key: "nome", label: "Nome da Empresa" }]} 
            />
        )}
        {activeTab === "cursos" && (
            <SimpleCrud 
                title="Gerenciar Cursos" 
                endpoint="/api/cursos" 
                columns={[{ key: "nome", label: "Nome do Curso" }]} 
            />
        )}
        {activeTab === "tipos_evento" && (
            <SimpleCrud 
                title="Tipos de Evento" 
                endpoint="/api/tipos-eventos" 
                columns={[{ key: "nome", label: "Tipo de Evento" }]} 
            />
        )}
        {activeTab === "anos_formatura" && (
            <SimpleCrud 
                title="Anos de Formatura" 
                endpoint="/api/anos-formaturas" 
                columns={[{ key: "ano_semestre", label: "Ano/Semestre (Ex: 2024.1)" }]} 
            />
        )}
        {activeTab === "funcoes" && (
            <SimpleCrud 
                title="Gerenciar Funções Profissionais" 
                endpoint="/api/funcoes" 
                columns={[{ key: "nome", label: "Nome da Função" }]} 
            />
        )}
        {activeTab === "precos" && (
            <PriceTableEditor />
        )}
      </div>
    </div>
  );
};