import React from "react";
import {
  Card,
  CardContent,
  CardTitle,
} from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import {
  BarChart,
  Bar,
  LineChart,
  Line,
  PieChart,
  Pie,
  Tooltip,
  XAxis,
  YAxis,
  CartesianGrid,
  Legend,
  ResponsiveContainer,
  Cell,
} from "recharts";

const resumoData = [
  { title: "Saldo Total", value: "R$ 52.430,00" },
  { title: "Receitas no Mês", value: "R$ 21.000,00" },
  { title: "Despesas no Mês", value: "R$ 18.400,00" },
  { title: "Resultado", value: "R$ 2.600,00" },
  { title: "A Receber", value: "R$ 9.300,00" },
  { title: "Despesas Vencidas", value: "R$ 2.100,00" },
];

const pizzaData = [
  { name: "Folha", value: 8000 },
  { name: "Combustível", value: 3000 },
  { name: "Manutenção", value: 2500 },
  { name: "Outros", value: 900 },
];

const barrasData = [
  { mes: "Jan", receita: 18000, despesa: 15000 },
  { mes: "Fev", receita: 21000, despesa: 19000 },
  { mes: "Mar", receita: 23000, despesa: 20000 },
];

const FinDashboard = () => {
  return (
    <div className="p-4 space-y-6">
      <h1 className="text-2xl font-bold">Dashboard Financeiro</h1>

      <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
        {resumoData.map((item, i) => (
          <Card key={i} className="bg-white shadow-md rounded-2xl p-4">
            <CardTitle className="text-sm text-gray-500">{item.title}</CardTitle>
            <CardContent className="text-xl font-semibold">{item.value}</CardContent>
          </Card>
        ))}
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <Card className="p-4">
          <h2 className="text-lg font-bold mb-2">Despesas por Categoria</h2>
          <ResponsiveContainer width="100%" height={250}>
            <PieChart>
              <Pie data={pizzaData} dataKey="value" nameKey="name" cx="50%" cy="50%" outerRadius={80}>
                {pizzaData.map((entry, index) => (
                  <Cell key={`cell-${index}`} fill={["#0ea5e9", "#22c55e", "#f97316", "#e11d48"][index % 4]} />
                ))}
              </Pie>
              <Tooltip />
              <Legend />
            </PieChart>
          </ResponsiveContainer>
        </Card>

        <Card className="p-4">
          <h2 className="text-lg font-bold mb-2">Fluxo de Caixa</h2>
          <ResponsiveContainer width="100%" height={250}>
            <BarChart data={barrasData}>
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="mes" />
              <YAxis />
              <Tooltip />
              <Legend />
              <Bar dataKey="receita" fill="#22c55e" name="Receita" />
              <Bar dataKey="despesa" fill="#ef4444" name="Despesa" />
            </BarChart>
          </ResponsiveContainer>
        </Card>
      </div>

      <div className="flex flex-wrap gap-4 mt-6">
        <Button>➕ Lançar Receita</Button>
        <Button variant="outline">➖ Lançar Despesa</Button>
        <Button variant="secondary">📄 Fluxo de Caixa</Button>
        <Button variant="ghost">📊 Balanço Patrimonial</Button>
      </div>
    </div>
  );
};

export default FinDashboard;
