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

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

  const estoqueColumns = [
    { header: 'Categoria', field: 'categoria', width: '120px' },
    { header: 'Cód. Barras', field: 'cod_barras', width: '120px', className: 'font-mono' },
    { header: 'Fornecedor', field: 'fornecedor', width: '150px' },
    { header: 'Item', field: 'item_estoque', width: '250px', className: 'font-bold' },
    { header: 'Marca', field: 'marca', width: '120px' },
    { header: 'Modelo', field: 'modelo', width: '120px' },
    { 
      header: 'Pç Azul', 
      field: 'preco_azul', 
      width: '100px',
      render: (row) => (
        <div className="bg-blue-500/10 text-blue-600 font-bold px-2 py-1 rounded text-center border border-blue-500/20">
          {row.preco_azul}
        </div>
      )
    },
    { 
      header: 'Pç Laranja', 
      field: 'preco_laranja', 
      width: '100px',
      render: (row) => (
        <div className="bg-orange-500/10 text-orange-600 font-bold px-2 py-1 rounded text-center border border-orange-500/20">
          {row.preco_laranja}
        </div>
      )
    },
    { 
      header: 'Pç Verde', 
      field: 'preco_verde', 
      width: '100px',
      render: (row) => (
        <div className="bg-emerald-500/10 text-emerald-600 font-bold px-2 py-1 rounded text-center border border-emerald-500/20">
          {row.preco_verde}
        </div>
      )
    },
    { 
      header: 'Pç Vermelho', 
      field: 'preco_vermelho', 
      width: '100px',
      render: (row) => (
        <div className="bg-red-500/10 text-red-600 font-bold px-2 py-1 rounded text-center border border-red-500/20">
          {row.preco_vermelho}
        </div>
      )
    },
    { 
      header: 'Qtd.', 
      field: 'quantidade', 
      width: '80px',
      render: (row) => (
        <div className={cn(
          "font-bold text-center px-2 py-1 rounded text-white",
          row.quantidade > 0 ? "bg-blue-600" : "bg-red-600"
        )}>
          {row.quantidade}
        </div>
      )
    },
    { header: 'Unid', field: 'unid', width: '80px' },
  ];

  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-blue-500/5 via-transparent to-emerald-500/5 dark:from-blue-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="itens" 
                  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"
                >
                  <Box size={18} className="mr-2" /> Itens
                </TabsTrigger>
                <TabsTrigger 
                  value="categorias" 
                  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"
                >
                  <Tags size={18} className="mr-2" /> Categorias
                </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 Item
            </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={estoque} 
            loading={loading}
            columns={estoqueColumns}
            onEdit={(row) => toast.info(`Editar item: ${row.item_estoque}`)}
            onDelete={(row) => toast.error(`Excluir item: ${row.item_estoque}`)}
          />
        </div>
      </div>
    </div>
  );
};
