import React, { useState } from 'react';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Card, CardContent } from '@/components/ui/card';
import { Users, FileText, Briefcase, Plus, Search } from 'lucide-react';
import ExcelTable from '@/features/prafrot/components/ExcelTable';
import { DashboardKPICard } from '@/components/shared/DashboardKPICard/DashboardKPICard';

export const IncomesView = () => {
  const [activeTab, setActiveTab] = useState('boletos');

  // Dados Mock para demonstração
  const kpis = [
    { label: 'A Receber', value: 'R$ 13.028,88', trend: '+12%', color: 'var(--workspace-sec-3-light)' },
    { label: 'Em Atraso', value: 'R$ 5.075,20', trend: '-5%', color: '#ef4444' },
    { label: 'Recebido', value: 'R$ 21.925,33', trend: '+8%', color: 'var(--workspace-sec-1-light)' },
    { label: 'Total Faturado', value: 'R$ 40.029,41', trend: '+15%', color: 'var(--workspace-sec-5-light)' },
  ];

  return (
    <div className="workspace-theme space-y-6 p-6">
      <header className="flex justify-between items-center">
        <div>
          <h1 className="text-2xl font-black text-slate-800 dark:text-stone-100 uppercase tracking-tighter">Entradas</h1>
          <p className="text-slate-500 text-sm">Gerenciamento de faturamento e recebíveis</p>
        </div>
        <div className="flex gap-3">
          <button className="flex items-center gap-2 bg-[var(--workspace-sec-5-light)] text-white px-4 py-2 rounded-lg font-bold text-sm shadow-lg hover:brightness-110 transition-all">
            <Plus size={18} />
            NOVA ENTRADA
          </button>
        </div>
      </header>

      {/* KPIs da Feature */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        {kpis.map((kpi, i) => (
          <DashboardKPICard 
            key={i}
            label={kpi.label}
            value={kpi.value}
            trend={kpi.trend}
            color={kpi.color}
          />
        ))}
      </div>

      <Card className="border-none shadow-sm bg-white dark:bg-[#1b1b1b] rounded-xl overflow-hidden">
        <Tabs defaultValue="boletos" className="w-full" onValueChange={setActiveTab}>
          <div className="px-6 pt-4 border-b border-slate-100 dark:border-[#2a2a2a] flex justify-between items-center bg-slate-50/50 dark:bg-[#1e1e1e]">
            <TabsList className="bg-transparent gap-6 h-12">
              <TabsTrigger 
                value="boletos" 
                className="data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:border-b-2 data-[state=active]:border-[var(--workspace-sec-3-light)] rounded-none px-0 font-bold text-xs uppercase tracking-widest text-slate-400 data-[state=active]:text-[var(--workspace-sec-3-light)]"
              >
                <FileText size={16} className="mr-2" />
                Boletos
              </TabsTrigger>
              <TabsTrigger 
                value="clientes" 
                className="data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:border-b-2 data-[state=active]:border-[var(--workspace-sec-3-light)] rounded-none px-0 font-bold text-xs uppercase tracking-widest text-slate-400 data-[state=active]:text-[var(--workspace-sec-3-light)]"
              >
                <Users size={16} className="mr-2" />
                Clientes
              </TabsTrigger>
              <TabsTrigger 
                value="servicos" 
                className="data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:border-b-2 data-[state=active]:border-[var(--workspace-sec-3-light)] rounded-none px-0 font-bold text-xs uppercase tracking-widest text-slate-400 data-[state=active]:text-[var(--workspace-sec-3-light)]"
              >
                <Briefcase size={16} className="mr-2" />
                Serviços
              </TabsTrigger>
            </TabsList>

            <div className="flex items-center gap-2 bg-white dark:bg-[#252525] px-3 py-1.5 rounded-lg border border-slate-200 dark:border-[#333]">
              <Search size={14} className="text-slate-400" />
              <input 
                type="text" 
                placeholder="Pesquisar..." 
                className="bg-transparent border-none text-xs focus:ring-0 w-48 text-slate-600 dark:text-stone-300"
              />
            </div>
          </div>

          <CardContent className="p-0">
            <TabsContent value="boletos" className="m-0 h-[500px]">
               {/* Aqui entra o ExcelTable configurado para Boletos */}
               <div className="p-4 text-center text-slate-400 text-sm italic">
                 Lista de Boletos (ExcelTable em breve...)
               </div>
            </TabsContent>
            
            <TabsContent value="clientes" className="m-0 h-[500px]">
               <div className="p-4 text-center text-slate-400 text-sm italic">
                 Lista de Clientes (ExcelTable em breve...)
               </div>
            </TabsContent>

            <TabsContent value="servicos" className="m-0 h-[500px]">
               <div className="p-4 text-center text-slate-400 text-sm italic">
                 Lista de Serviços (ExcelTable em breve...)
               </div>
            </TabsContent>
          </CardContent>
        </Tabs>
      </Card>
    </div>
  );
};
