import React from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { FineCard } from '../components/FineCard';
import { DashboardKPICard } from '@/components/shared/DashboardKPICard/DashboardKPICard';
import { TrendingDown, Calendar, ArrowRightLeft } from 'lucide-react';

export const ExpensesView = () => {
  // Dados Mock para os gráficos
  const comparisonData = [
    { name: 'Jan', planejado: 4500, executado: 4800 },
    { name: 'Fev', planejado: 5200, executado: 5100 },
    { name: 'Mar', planejado: 4800, executado: 5500 },
    { name: 'Abr', planejado: 6100, executado: 5900 },
    { name: 'Mai', planejado: 5500, executado: 6200 },
    { name: 'Jun', planejado: 5800, executado: 5800 },
  ];

  const expensesByCat = [
    { name: 'Infraestrutura', value: 12500 },
    { name: 'Marketing', value: 8700 },
    { name: 'RH / Salários', value: 45000 },
    { name: 'Softwares', value: 3200 },
    { name: 'Outros', value: 1500 },
  ];

  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">Saídas</h1>
          <p className="text-slate-500 text-sm">Planejamento e controle de fluxo de caixa negativo</p>
        </div>
        <div className="flex gap-3">
          <div className="flex items-center gap-2 bg-white dark:bg-[#1b1b1b] px-4 py-2 rounded-lg border border-slate-200 dark:border-[#333] text-sm font-bold text-slate-600 dark:text-stone-300">
            <Calendar size={18} className="text-[var(--workspace-sec-1-light)]" />
            JUNHO / 2026
          </div>
        </div>
      </header>

      {/* Resumo de Saídas */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
         <DashboardKPICard 
            label="Total Planejado"
            value="R$ 58.450,00"
            color="var(--workspace-sec-5-light)"
         />
         <DashboardKPICard 
            label="Total Executado"
            value="R$ 60.120,45"
            trend="+2.8%"
            color="#ef4444"
         />
         <DashboardKPICard 
            label="Diferença (Variação)"
            value="R$ -1.670,45"
            color="var(--workspace-sec-3-light)"
            icon={<TrendingDown size={20} />}
         />
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Gráfico de Comparação */}
        <Card className="border-none shadow-sm bg-white dark:bg-[#1b1b1b] rounded-xl overflow-hidden">
          <CardHeader className="flex flex-row items-center justify-between pb-2 border-b border-slate-50 dark:border-[#2a2a2a]">
            <div>
              <CardTitle className="text-sm font-bold text-slate-600 dark:text-stone-300 uppercase tracking-widest">Planejado vs Executado</CardTitle>
              <p className="text-[10px] text-slate-400">Histórico de variação mensal</p>
            </div>
            <ArrowRightLeft size={18} className="text-slate-300" />
          </CardHeader>
          <CardContent className="pt-6">
            <FineCard 
              title=""
              height={300}
              type="bar"
              data={comparisonData.map(d => ({ name: d.name, planejado: d.planejado, executado: d.executado }))}
              dataKey="executado"
              colors={['#22bb6c', '#003153']}
            />
          </CardContent>
        </Card>

        {/* Gráfico de Categorias */}
        <FineCard 
           title="Saídas por Categoria"
           data={expensesByCat}
           height={380}
           colors={['#003153', '#22bb6c', '#22c0a3', '#26b1c7', '#285d2a']}
        />
      </div>

      {/* Tabela de Lançamentos (Futuro) */}
      <Card className="border-none shadow-sm bg-white dark:bg-[#1b1b1b] rounded-xl overflow-hidden">
        <div className="p-6 text-center text-slate-400 text-sm italic">
          O detalhamento completo dos lançamentos financeiros via ExcelTable será integrado nesta seção.
        </div>
      </Card>
    </div>
  );
};
