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

/**
 * Board Financial Reports mirror the staff Accounting Reports (P&L, Balance Sheet,
 * Cash Flow, Movement of Equity, Trial Balance, General Ledger, Reserve Fund,
 * AR/AP Aging, Budget vs Actuals, Reconciliation), scoped to the board's selected
 * association. Board members have read-only access to the accounting ledger via RLS.
 */
export default function BoardFinancialReportsPage() {
  const { associations, selectedAssociationId, setSelectedAssociationId, loading } = useBoardAssociations();

  if (loading) {
    return (
      <div className="flex justify-center py-12">
        <div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" />
      </div>
    );
  }

  const selected = associations.find((a) => a.id === selectedAssociationId) ?? null;

  return (
    <div className="space-y-4">
      {associations.length > 1 && (
        <div className="flex items-center justify-end">
          <Select value={selectedAssociationId ?? ""} onValueChange={setSelectedAssociationId}>
            <SelectTrigger className="w-[240px]">
              <Building2 className="h-4 w-4 mr-2 text-muted-foreground" />
              <SelectValue placeholder="Select association" />
            </SelectTrigger>
            <SelectContent>
              {associations.map((a) => (
                <SelectItem key={a.id} value={a.id}>{a.name}</SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
      )}

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