import { useSearchParams } from "react-router-dom";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import BillApprovalsPage from "@/pages/BillApprovalsPage";
import InboundBillsPage from "@/pages/InboundBillsPage";
import AIInvoiceParserPage from "@/pages/AIInvoiceParserPage";
import BillApprovalRulesPage from "@/pages/BillApprovalRulesPage";

export default function BillApprovalsHubPage() {
  const [params, setParams] = useSearchParams();
  const valid = ["approvals", "inbound", "parser", "rules"];
  const initial = params.get("tab") || "";
  const tab = valid.includes(initial) ? initial : "approvals";

  return (
    <div className="space-y-4">
      <div>
        <h1 className="text-2xl font-bold tracking-tight">Bill Approvals</h1>
        <p className="text-sm text-muted-foreground">Approve bills, review inbound bills, and parse invoices with AI.</p>
      </div>
      <Tabs value={tab} onValueChange={(v) => setParams({ tab: v })}>
        <TabsList>
          <TabsTrigger value="approvals">Approvals</TabsTrigger>
          <TabsTrigger value="inbound">Inbound Bills</TabsTrigger>
          <TabsTrigger value="parser">AI Bill Parser</TabsTrigger>
          <TabsTrigger value="rules">Approval Rules</TabsTrigger>
        </TabsList>
        <TabsContent value="approvals" className="mt-4">
          <BillApprovalsPage />
        </TabsContent>
        <TabsContent value="inbound" className="mt-4">
          <InboundBillsPage />
        </TabsContent>
        <TabsContent value="parser" className="mt-4">
          <AIInvoiceParserPage />
        </TabsContent>
        <TabsContent value="rules" className="mt-4">
          <BillApprovalRulesPage />
        </TabsContent>
      </Tabs>
    </div>
  );
}
