import React, { useState, lazy, Suspense } from 'react';
import { UserPlus, Loader2, Download } from 'lucide-react';
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { downloadAprovados } from '../services/driverService';


// Lazy loading the simplified features to improve initial performance
const VehiclesView = lazy(() => import('../components/GrVehiclesSimplified'));
const RegistrationsView = lazy(() => import('../components/GrRegistrationsSimplified'));

const GrOpsCadastrosView = () => {
  const [activeTab, setActiveTab] = useState('veiculos');
  const [isDownloading, setIsDownloading] = useState(false);

  const handleExport = async () => {
    setIsDownloading(true);
    try {
      await downloadAprovados();
    } catch (err) {
      console.error('[GrOpsCadastrosView] Erro ao exportar motoristas aprovados:', err);
    } finally {
      setIsDownloading(false);
    }
  };


  return (
    <div className="flex flex-col gap-8 p-6 md:p-10 animate-in fade-in slide-in-from-bottom-4 duration-700">
      <header className="flex flex-col md:flex-row md:items-end justify-between gap-6">
        <div className="space-y-2">
          <h1 className="text-4xl md:text-6xl font-bold text-slate-800 dark:text-white tracking-tighter leading-none">
            Base de <span className="text-[var(--gr-primary)]">Registros</span>
          </h1>
          <p className="text-slate-400 dark:text-slate-500 text-base md:text-lg font-medium italic opacity-80">
            Gestão unificada de frotas e parceiros logísticos
          </p>
        </div>

        {/* Botão de Exportação de Motoristas Aprovados */}
        <button
          onClick={handleExport}
          disabled={isDownloading}
          className="
            inline-flex items-center gap-2 px-5 py-2.5
            bg-emerald-500 hover:bg-emerald-600 active:bg-emerald-700
            disabled:opacity-60 disabled:cursor-not-allowed
            text-white text-xs font-bold uppercase tracking-widest
            rounded-2xl shadow-md transition-all duration-200
          "
        >
          {isDownloading
            ? <Loader2 size={16} className="animate-spin" />
            : <Download size={16} />}
          {isDownloading ? 'Exportando...' : 'Exportar Aprovados'}
        </button>
      </header>

      <Tabs defaultValue="veiculos" value={activeTab} onValueChange={setActiveTab} className="w-full space-y-8">
        <div className="flex flex-col lg:flex-row gap-6 items-center justify-between bg-white dark:bg-[#1b1b1b] p-4 rounded-[32px] border border-slate-200 dark:border-white/5 shadow-sm">
          <TabsList className="bg-slate-100 dark:bg-[#141414] border-none p-1.5 h-auto rounded-2xl gap-2">
            <TabsTrigger 
              value="veiculos"
              className="px-8 py-2.5 rounded-xl text-[10px] font-bold uppercase tracking-widest data-[state=active]:bg-white dark:data-[state=active]:bg-[#1b1b1b] data-[state=active]:text-[var(--gr-primary)] data-[state=active]:shadow-sm text-slate-400"
            >
              Veículos
            </TabsTrigger>
            <TabsTrigger 
              value="motoristas"
              className="px-8 py-2.5 rounded-xl text-[10px] font-bold uppercase tracking-widest data-[state=active]:bg-white dark:data-[state=active]:bg-[#1b1b1b] data-[state=active]:text-[var(--gr-primary)] data-[state=active]:shadow-sm text-slate-400"
            >
              Motoristas e Parceiros
            </TabsTrigger>
          </TabsList>
        </div>

        <div className="min-h-[600px] relative">
          <Suspense fallback={
            <div className="absolute inset-0 flex items-center justify-center">
              <Loader2 className="animate-spin text-[var(--gr-primary)]" size={48} />
            </div>
          }>
            <TabsContent value="veiculos" className="m-0 focus-visible:outline-none">
              <VehiclesView />
            </TabsContent>
            <TabsContent value="motoristas" className="m-0 focus-visible:outline-none">
              <RegistrationsView />
            </TabsContent>
          </Suspense>
        </div>
      </Tabs>
    </div>
  );
};

export default GrOpsCadastrosView;