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';
import { MOCK_EXPENSES_COMPARISON, MOCK_EXPENSES_CATEGORIES } from '../mockData';

export const ExpensesView = () => {
  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 / 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 shadow-sm">
            <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="orange"
         />
         <DashboardKPICard 
            label="Total Executado"
            value="R$ 60.120,45"
            trend="+2.8%"
            trendDirection="down"
            color="red"
         />
         <DashboardKPICard 
            label="Diferença"
            value="R$ -1.670,45"
            color="blue"
            icon={TrendingDown}
         />
      </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 (Financeiro)</p>
            </div>
            <ArrowRightLeft size={18} className="text-slate-300" />
          </CardHeader>
          <CardContent className="pt-6">
            <FineCard 
              title=""
              height={300}
              type="bar"
              data={MOCK_EXPENSES_COMPARISON}
              dataKey="executado"
              colors={['#003153', '#22bb6c']} 
            />
          </CardContent>
        </Card>

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

      {/* Tabela de Lançamentos (Mock) */}
      <Card className="border-none shadow-sm bg-white dark:bg-[#1b1b1b] rounded-xl overflow-hidden">
        <div className="p-12 text-center">
            <div className="inline-flex items-center justify-center w-16 h-16 bg-slate-50 dark:bg-white/5 rounded-full mb-4">
               <ArrowRightLeft size={32} className="text-slate-300" />
            </div>
            <h3 className="text-lg font-bold text-slate-700 dark:text-stone-200">Lançamentos Financeiros</h3>
            <p className="text-slate-400 text-sm max-w-md mx-auto mt-2">
              A integração completa com o ExcelTable permitirá visualizar cada nota fiscal, boleto e pix de saída individualmente.
            </p>
        </div>
      </Card>
    </div>
  );
};
