"use client";

import { Building2, Check, ChevronsUpDown } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { useActiveTenant } from "../context/active-tenant-context";

/**
 * Org switcher for users with multiple business memberships.
 * Wire into the global app shell top bar (Phase 1).
 */
export function OrgSwitcher() {
  const {
    loading,
    memberships,
    organizationKey,
    organizationName,
    setActiveOrganization,
  } = useActiveTenant();

  if (loading) {
    return (
      <Button variant="outline" size="sm" disabled className="gap-2">
        <Building2 className="size-4" />
        Loading…
      </Button>
    );
  }

  if (memberships.length === 0) {
    return null;
  }

  const label = organizationName || "Select business";

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline" size="sm" className="gap-2 max-w-[220px]">
          <Building2 className="size-4 shrink-0" />
          <span className="truncate">{label}</span>
          <ChevronsUpDown className="size-3 shrink-0 opacity-50" />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="start" className="w-64">
        <DropdownMenuLabel>Your businesses</DropdownMenuLabel>
        <DropdownMenuSeparator />
        {memberships.map((m) => {
          const key = m.organization?.clientId;
          if (!key) return null;
          const selected = key === organizationKey;
          return (
            <DropdownMenuItem
              key={m.membershipId}
              onClick={() => setActiveOrganization(key)}
              className="gap-2"
            >
              <span className="flex-1 truncate">{m.organization.name}</span>
              {selected ? <Check className="size-4 text-primary" /> : null}
            </DropdownMenuItem>
          );
        })}
      </DropdownMenuContent>
    </DropdownMenu>
  );
}