import { useState } from "react";
import { Route } from "@/routes/_authenticated/expenses";
import { ExpensesTabContent } from "./components/ExpensesTabContent";
import { PeriodicExpensesTabContent } from "./components/PeriodicExpensesTabContent";
import { ExpensesProvider } from "./ExpensesProvider";

const tabs = [
  { id: "expenses", label: "Gastos" },
  { id: "periodic", label: "Gastos Periódicos" },
] as const;

type TabId = (typeof tabs)[number]["id"];

function ExpensesPageInner() {
  const [activeTab, setActiveTab] = useState<TabId>("expenses");

  return (
    <div className="space-y-4">
      <h1 className="text-2xl font-semibold text-balance">Gastos</h1>

      <div className="scrollbar-none flex gap-1 overflow-x-auto border-b">
        {tabs.map((tab) => (
          <button
            key={tab.id}
            type="button"
            onClick={() => setActiveTab(tab.id)}
            className={
              activeTab === tab.id
                ? "-mb-px shrink-0 border-b-2 border-primary px-3 pb-2 text-sm font-medium text-foreground"
                : "shrink-0 px-3 pb-2 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
            }
          >
            {tab.label}
          </button>
        ))}
      </div>

      {activeTab === "expenses" && <ExpensesTabContent />}
      {activeTab === "periodic" && <PeriodicExpensesTabContent />}
    </div>
  );
}

export function ExpensesPage() {
  const { periodicExpenseId } = Route.useSearch();
  return (
    <ExpensesProvider initialPeriodicExpenseId={periodicExpenseId}>
      <ExpensesPageInner />
    </ExpensesProvider>
  );
}