import React, { useState } from 'react';
import { useAutoLab } from '../hooks/useAutoLab';
import ExcelTable from '../components/ExcelTable';
import { Plus, Users } from 'lucide-react';
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Button } from "@/components/ui/button";
import { toast } from 'sonner';

export const ConfigView = () => {
  const { data: usuarios, loading } = useAutoLab('usuarios');
  const [activeTab, setActiveTab] = useState('usuarios');

  const userColumns = [
    { header: 'Email', field: 'email', width: '250px' },
    { header: 'Grupo', field: 'grupo', width: '100px', className: 'text-center' },
    { header: 'Setor', field: 'setor', width: '100px', className: 'text-center' },
    { header: 'Nome', field: 'nome', width: '250px', className: 'font-bold' },
  ];

  return (
    <div className="flex flex-col h-full bg-gradient-to-br from-slate-50 via-white to-slate-50/50 dark:from-[#0f0f0f] dark:via-[#1b1b1b] dark:to-[#0f0f0f]">
      {/* Premium Header Section */}
      <div className="relative p-6 border-b border-slate-200/80 dark:border-zinc-800/50 bg-gradient-to-r from-white via-slate-50/30 to-white dark:from-[#1b1b1b] dark:via-zinc-900/30 dark:to-[#1b1b1b] backdrop-blur-sm">
        <div className="absolute inset-0 bg-gradient-to-r from-purple-500/5 via-transparent to-emerald-500/5 dark:from-purple-500/10 dark:via-transparent dark:to-emerald-500/10" />
        
        <div className="relative flex items-center justify-between gap-6">
          {/* Tabs Section - Enhanced */}
          <div className="flex items-center gap-4 flex-1">
            <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
              <TabsList className="bg-slate-100/80 dark:bg-zinc-900/80 backdrop-blur-sm p-1.5 rounded-2xl border border-slate-200/50 dark:border-zinc-800/50 shadow-lg shadow-black/5 dark:shadow-black/20 gap-1.5 h-auto">
                <TabsTrigger 
                  value="usuarios" 
                  className="data-[state=active]:bg-gradient-to-r data-[state=active]:from-[#1b4332] data-[state=active]:to-[#2d6a4f] data-[state=active]:text-white data-[state=active]:shadow-lg data-[state=active]:shadow-emerald-900/30 rounded-xl px-5 py-2.5 transition-all duration-300 uppercase text-[11px] font-bold hover:bg-slate-200/50 dark:hover:bg-zinc-800/50"
                >
                  <Users size={18} className="mr-2" /> Usuários
                </TabsTrigger>
              </TabsList>
            </Tabs>
          </div>

          {/* Action Button - Premium Style */}
          <div className="flex items-center gap-3">
            <Button className="bg-gradient-to-r from-[#1b4332] to-[#2d6a4f] hover:from-[#2d6a4f] hover:to-[#40916c] text-white rounded-xl px-6 py-3 font-bold shadow-xl shadow-emerald-900/25 hover:shadow-2xl hover:shadow-emerald-900/40 flex items-center gap-2.5 uppercase text-[11px] transition-all duration-300 hover:scale-[1.02] active:scale-[0.98]">
              <Plus size={20} className="drop-shadow-sm" /> Novo Usuário
            </Button>
          </div>
        </div>
      </div>

      {/* Table Container - Enhanced */}
      <div className="flex-1 overflow-hidden p-6 pt-4">
        <div className="h-full rounded-2xl border border-slate-200/60 dark:border-zinc-800/60 bg-white/80 dark:bg-[#1b1b1b]/80 backdrop-blur-sm shadow-xl shadow-black/5 dark:shadow-black/20 overflow-hidden">
          <ExcelTable 
            data={usuarios} 
            loading={loading}
            columns={userColumns}
            onEdit={(row) => toast.info(`Editar usuário: ${row.nome}`)}
            onDelete={(row) => toast.error(`Excluir usuário: ${row.nome}`)}
          />
        </div>
      </div>
    </div>
  );
};
