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, TrendingUp } from 'lucide-react';
import ExcelTable from '@/features/prafrot/components/ExcelTable';
import { DashboardKPICard } from '@/components/shared/DashboardKPICard/DashboardKPICard';
import { MOCK_CLIENTS, MOCK_BOLETOS, MOCK_SERVICES } from '../mockData';

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

  const kpis = [
    { label: 'A Receber', value: 'R$ 38.028,88', trend: '+12%', color: 'blue', icon: FileText },
    { label: 'Em Atraso', value: 'R$ 8.900,20', trend: '-5%', color: 'red', icon: TrendingUp },
    { label: 'Recebido', value: 'R$ 12.300,00', trend: '+8%', color: 'green', icon: Users },
    { label: 'Total Faturado', value: 'R$ 59.229,08', trend: '+15%', color: 'orange', icon: Briefcase },
  ];

  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">Financeiro / Entradas</h1>
          <p className="text-slate-500 text-sm">Gerenciamento de faturamento e recebíveis (Dados de Teste)</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-xl font-bold text-sm shadow-lg hover:brightness-110 transition-all hover:scale-105 active:scale-95">
            <Plus size={18} />
            NOVA RECEITA
          </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}
            icon={kpi.icon}
          />
        ))}
      </div>

      <Card className="border-none shadow-sm bg-white dark:bg-[#1b1b1b] rounded-2xl overflow-hidden border border-slate-100 dark:border-white/5">
        <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]/50">
            <TabsList className="bg-transparent gap-8 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-[0.2em] text-slate-400 data-[state=active]:text-[var(--workspace-sec-3-light)] transition-all"
              >
                <div className="flex items-center gap-2">
                  <FileText size={16} />
                  Boletos
                </div>
              </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-[0.2em] text-slate-400 data-[state=active]:text-[var(--workspace-sec-3-light)] transition-all"
              >
                <div className="flex items-center gap-2">
                  <Users size={16} />
                  Clientes
                </div>
              </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-[0.2em] text-slate-400 data-[state=active]:text-[var(--workspace-sec-3-light)] transition-all"
              >
                <div className="flex items-center gap-2">
                  <Briefcase size={16} />
                  Serviços
                </div>
              </TabsTrigger>
            </TabsList>

            <div className="flex items-center gap-2 bg-white dark:bg-[#252525] px-3 py-1.5 rounded-xl border border-slate-200 dark:border-white/10 shadow-sm focus-within:ring-2 focus-within:ring-[var(--workspace-sec-3-light)] transition-all">
              <Search size={14} className="text-slate-400" />
              <input 
                type="text" 
                placeholder="Pesquisar registro..." 
                className="bg-transparent border-none text-xs focus:ring-0 w-48 text-slate-600 dark:text-stone-300 placeholder:text-slate-400"
              />
            </div>
          </div>

          <CardContent className="p-0">
            <TabsContent value="boletos" className="m-0 min-h-[400px]">
               <div className="p-4">
                  <ExcelTable 
                    columns={[
                      { field: 'id', header: 'ID', width: '80px' },
                      { field: 'cliente', header: 'Cliente', width: '250px' },
                      { field: 'vencimento', header: 'Vencimento', width: '120px' },
                      { field: 'valor', header: 'Valor', width: '120px', type: 'currency' },
                      { field: 'status', header: 'Status', width: '120px' },
                    ]}
                    data={MOCK_BOLETOS}
                  />
               </div>
            </TabsContent>
            
            <TabsContent value="clientes" className="m-0 min-h-[400px]">
               <div className="p-4">
                  <ExcelTable 
                    columns={[
                      { field: 'id', header: 'ID', width: '80px' },
                      { field: 'nome', header: 'Nome Fantasia', width: '300px' },
                      { field: 'cnpj', header: 'CNPJ', width: '180px' },
                      { field: 'status', header: 'Status Contrato', width: '150px' },
                      { field: 'total_faturado', header: 'Faturamento Total', width: '180px', type: 'currency' },
                    ]}
                    data={MOCK_CLIENTS}
                  />
               </div>
            </TabsContent>

            <TabsContent value="servicos" className="m-0 min-h-[400px]">
               <div className="p-4">
                  <ExcelTable 
                    columns={[
                      { field: 'id', header: 'ID', width: '80px' },
                      { field: 'descricao', header: 'Descrição do Serviço', width: '400px' },
                      { field: 'categoria', header: 'Categoria', width: '200px' },
                      { field: 'preco_base', header: 'Preço Base', width: '150px', type: 'currency' },
                    ]}
                    data={MOCK_SERVICES}
                  />
               </div>
            </TabsContent>
          </CardContent>
        </Tabs>
      </Card>
    </div>
  );
};