import React, { useState } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { format } from "date-fns";

type MovimentoFinanceiro = {
  id: string;
  tipo: "receita" | "despesa";
  descricao: string;
  valor: number;
  data: string;
};

const FluxoDeCaixa = () => {
  const [dataInicio, setDataInicio] = useState("");
  const [dataFim, setDataFim] = useState("");
  const [movimentos, setMovimentos] = useState<MovimentoFinanceiro[]>([]);

  const buscarMovimentos = () => {
    // Simulação de dados
    setMovimentos([
      { id: "1", tipo: "receita", descricao: "Locação de caçamba", valor: 1200, data: "2025-04-01" },
      { id: "2", tipo: "despesa", descricao: "Combustível", valor: 300, data: "2025-04-02" },
      { id: "3", tipo: "despesa", descricao: "Salário motorista", valor: 2200, data: "2025-04-05" },
      { id: "4", tipo: "receita", descricao: "Venda de recicláveis", valor: 800, data: "2025-04-08" },
    ]);
  };

  const receitas = movimentos.filter((m) => m.tipo === "receita");
  const despesas = movimentos.filter((m) => m.tipo === "despesa");
  const totalReceitas = receitas.reduce((acc, cur) => acc + cur.valor, 0);
  const totalDespesas = despesas.reduce((acc, cur) => acc + cur.valor, 0);
  const saldo = totalReceitas - totalDespesas;

  return (
    <div className="p-6 space-y-6">
      <h1 className="text-2xl font-bold">Fluxo de Caixa</h1>

      <Card>
        <CardContent className="grid grid-cols-1 md:grid-cols-4 gap-4 py-4">
          <div>
            <Label>Data Início</Label>
            <Input type="date" value={dataInicio} onChange={(e) => setDataInicio(e.target.value)} />
          </div>
          <div>
            <Label>Data Fim</Label>
            <Input type="date" value={dataFim} onChange={(e) => setDataFim(e.target.value)} />
          </div>
          <div className="flex items-end">
            <Button onClick={buscarMovimentos}>Buscar</Button>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardContent className="py-6">
          <div className="grid grid-cols-3 text-center font-semibold text-lg">
            <div className="text-green-600">Receitas: R$ {totalReceitas.toFixed(2)}</div>
            <div className="text-red-600">Despesas: R$ {totalDespesas.toFixed(2)}</div>
            <div className={`font-bold ${saldo >= 0 ? "text-green-700" : "text-red-700"}`}>
              Saldo: R$ {saldo.toFixed(2)}
            </div>
          </div>

          <div className="mt-6 space-y-4">
            {movimentos.map((m) => (
              <div
                key={m.id}
                className={`border p-4 rounded-xl flex justify-between items-center ${
                  m.tipo === "receita" ? "bg-green-50" : "bg-red-50"
                }`}
              >
                <div>
                  <div className="font-medium">{m.descricao}</div>
                  <div className="text-sm text-muted-foreground">
                    {format(new Date(m.data), "dd/MM/yyyy")}
                  </div>
                </div>
                <div className="font-bold text-lg">
                  R$ {m.valor.toFixed(2)}
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>
    </div>
  );
};

export default FluxoDeCaixa;
