import { useNavigate, useSearchParams } from "react-router-dom";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import UnitsPage from "@/pages/UnitsPage";
import OwnersPage from "@/pages/OwnersPage";
import CommitteesPage from "@/pages/CommitteesPage";

export default function DirectoryPage() {
  const [params, setParams] = useSearchParams();
  const raw = params.get("tab");
  const tab = raw === "owners" || raw === "committees" ? raw : "units";

  return (
    <div className="space-y-4">
      <div>
        <h1 className="text-2xl font-bold tracking-tight">Directory</h1>
        <p className="text-sm text-muted-foreground">Browse units, owners, and committees across all associations.</p>
      </div>
      <Tabs value={tab} onValueChange={(v) => setParams({ tab: v })}>
        <TabsList>
          <TabsTrigger value="units">Unit Directory</TabsTrigger>
          <TabsTrigger value="owners">Owner Roster</TabsTrigger>
          <TabsTrigger value="committees">Committees</TabsTrigger>
        </TabsList>
        <TabsContent value="units" className="mt-4">
          <UnitsPage />
        </TabsContent>
        <TabsContent value="owners" className="mt-4">
          <OwnersPage />
        </TabsContent>
        <TabsContent value="committees" className="mt-4">
          <CommitteesPage />
        </TabsContent>
      </Tabs>
    </div>
  );
}
