import { useMemo } from "react";
import { Building2 } from "lucide-react";
import { useAssociation } from "@/contexts/AssociationContext";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import AccountingReportsPage from "@/pages/accounting/AccountingReportsPage";

/**
 * Financial Reports now renders the same reporting suite used inside the
 * Accounting module, scoped to a single association. Staff pick the association
 * from the selector below (synced with the global association picker); board
 * members are routed through their own scoped wrapper.
 */
export default function FinancialReportsPage() {
  const { associations, selectedAssociation, setSelectedAssociation, loadingAssociations } =
    useAssociation() as {
      associations: { id: string; name: string }[];
      selectedAssociation: { id: string; name: string } | null;
      setSelectedAssociation: (a: { id: string; name: string } | null) => void;
      loadingAssociations: boolean;
    };

  const sorted = useMemo(
    () => [...(associations ?? [])].sort((a, b) => a.name.localeCompare(b.name)),
    [associations],
  );

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-end">
        <Select
          value={selectedAssociation?.id ?? ""}
          onValueChange={(id) => {
            const next = sorted.find((a) => a.id === id) ?? null;
            setSelectedAssociation(next);
          }}
        >
          <SelectTrigger className="w-[240px]">
            <Building2 className="h-4 w-4 mr-2 text-muted-foreground" />
            <SelectValue placeholder={loadingAssociations ? "Loading…" : "Select association"} />
          </SelectTrigger>
          <SelectContent>
            {sorted.map((a) => (
              <SelectItem key={a.id} value={a.id}>{a.name}</SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>

      <AccountingReportsPage association={selectedAssociation} />
    </div>
  );
}