import { useState } from "react";
import { useExpensesContext } from "../ExpensesProvider";
import { ExpensesTable } from "./ExpensesTable";
import { PayExpenseDialog } from "./PayExpenseDialog";
import { NewExpenseDialog } from "./NewExpenseDialog";
import { Button } from "@/components/ui/button";
import { Plus } from "lucide-react";
import type { Expense } from "@/lib/api";

const priceFormatter = new Intl.NumberFormat("es-AR", {
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
});

export function ExpensesTabContent() {
  const {
    expenses,
    isLoadingExpenses,
    statusFilter,
    setStatusFilter,
    page,
    setPage,
    pageSize,
    monthlyTotals,
    isLoadingTotals,
  } = useExpensesContext();

  const [payDialogExpense, setPayDialogExpense] = useState<Expense | null>(null);
  const [newExpenseOpen, setNewExpenseOpen] = useState(false);

  const filters = [
    { value: "PENDING", label: "Pendientes" },
    { value: "PAYED", label: "Pagados" },
    { value: "all", label: "Todos" },
  ] as const;

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between gap-2 flex-wrap">
        <div className="flex gap-1">
          {filters.map((f) => (
            <Button
              key={f.value}
              variant={statusFilter === f.value ? "default" : "outline"}
              size="xs"
              onClick={() => { setStatusFilter(f.value); setPage(1); }}
            >
              {f.label}
            </Button>
          ))}
        </div>
        <Button onClick={() => setNewExpenseOpen(true)} size="sm">
          <Plus className="size-4" />
          Nuevo gasto
        </Button>
      </div>

      {isLoadingExpenses ? (
        <p className="text-sm text-muted-foreground">Cargando...</p>
      ) : (
        <ExpensesTable
          data={expenses.data}
          onPay={setPayDialogExpense}
          page={expenses.page}
          total={expenses.total}
          pageSize={expenses.pageSize}
          onPageChange={setPage}
        />
      )}

      <div className="grid gap-4 sm:grid-cols-2">
        <div className="rounded-lg border p-4">
          <p className="text-sm text-muted-foreground">Total Pagado</p>
          <p className="text-2xl font-bold tabular-nums">
            {isLoadingTotals
              ? "..."
              : `$${priceFormatter.format(monthlyTotals?.payed ?? 0)}`}
          </p>
        </div>
        <div className="rounded-lg border p-4">
          <p className="text-sm text-muted-foreground">Total Pendiente</p>
          <p className="text-2xl font-bold tabular-nums">
            {isLoadingTotals
              ? "..."
              : `$${priceFormatter.format(monthlyTotals?.pending ?? 0)}`}
          </p>
        </div>
      </div>

      <PayExpenseDialog
        expense={payDialogExpense}
        open={payDialogExpense !== null}
        onOpenChange={(open) => {
          if (!open) setPayDialogExpense(null);
        }}
      />

      <NewExpenseDialog open={newExpenseOpen} onOpenChange={setNewExpenseOpen} />
    </div>
  );
}
