StatementToolbar

"use client";

import { cn } from "@/lib/ledger/cn";
import type { AccountingBasis } from "@/lib/ledger/money.types";
import { Button } from "@/components/ledger/button";
import { CurrencySelect } from "@/components/ledger/currency-select";
import { ExportMenu } from "@/components/ledger/export-menu";
import { ArrowsPointingInIcon, ChevronUpDownIcon } from "@/components/ledger/icons";
import { PeriodPicker, type PeriodSelection } from "@/components/ledger/period-picker";

export interface StatementToolbarProps {
  basis: AccountingBasis;
  className?: string;
  comparison: string;
  consolidation: string;
  currency: string;
  fiscalYearStartMonth?: number;
  onBasisChange: (b: AccountingBasis) => void;
  onCollapseAll?: () => void;
  onComparisonChange: (c: string) => void;
  onConsolidationChange: (c: string) => void;
  onCurrencyChange: (c: string) => void;
  onExpandAll?: () => void;
  onExport?: (format: "csv" | "xlsx" | "pdf") => void;
  onPeriodChange: (p: PeriodSelection) => void;
  period: PeriodSelection;
}

const COMPARISONS = ["Prior period", "Prior year", "Budget", "Forecast", "None"];

/**
 * The basis toggle is prominent and always visible. A P&L on cash basis and
 * the same P&L on accrual basis are different statements, and a user who
 * doesn't know which they're looking at is being misled. This is not a
 * settings-menu item.
 */
export function StatementToolbar({
  basis,
  onBasisChange,
  period,
  onPeriodChange,
  fiscalYearStartMonth = 1,
  comparison,
  onComparisonChange,
  currency,
  onCurrencyChange,
  consolidation,
  onConsolidationChange,
  onExpandAll,
  onCollapseAll,
  onExport,
  className,
}: StatementToolbarProps) {
  return (
    <div
      className={cn(
        "no-print flex flex-wrap items-center gap-2 rounded-md border border-border bg-surface p-3",
        className,
      )}
    >
      <div
        aria-label="Accounting basis"
        className="flex rounded-sm border border-border-strong p-0.5"
        role="radiogroup"
      >
        {(["accrual", "cash"] as const).map((b) => (
          <button
            aria-checked={basis === b}
            className={cn(
              "press h-7 rounded-xs px-3 text-label font-medium capitalize",
              basis === b
                ? "bg-surface-selected text-text-primary"
                : "text-text-secondary hover:bg-surface-hover",
            )}
            key={b}
            onClick={() => onBasisChange(b)}
            role="radio"
            type="button"
          >
            {b}
          </button>
        ))}
      </div>

      <PeriodPicker
        fiscalYearStartMonth={fiscalYearStartMonth}
        onValueChange={onPeriodChange}
        value={period}
      />

      <label className="flex items-center gap-2">
        <span className="sr-only">Comparison</span>
        <select
          className="h-8 rounded-sm border border-border bg-surface px-2 text-label outline-none focus-visible:border-accent focus-visible:ring-2 focus-visible:ring-accent-subtle"
          onChange={(e) => onComparisonChange(e.target.value)}
          value={comparison}
        >
          {COMPARISONS.map((c) => (
            <option key={c}>{c}</option>
          ))}
        </select>
      </label>

      <CurrencySelect
        className="h-8"
        label="Presentation currency"
        onValueChange={onCurrencyChange}
        value={currency}
      />

      <label className="flex items-center gap-2">
        <span className="sr-only">Consolidation scope</span>
        <select
          className="h-8 rounded-sm border border-border bg-surface px-2 text-label outline-none focus-visible:border-accent focus-visible:ring-2 focus-visible:ring-accent-subtle"
          onChange={(e) => onConsolidationChange(e.target.value)}
          value={consolidation}
        >
          <option>Consolidated</option>
          <option>Parent standalone</option>
          <option>Northwind Ltd</option>
          <option>Northwind GmbH</option>
        </select>
      </label>

      <div className="ml-auto flex flex-wrap items-center gap-2">
        <Button aria-label="Expand all rows" onClick={onExpandAll} size="sm" variant="ghost">
          <ChevronUpDownIcon aria-hidden="true" className="size-3.5" />
          Expand all
        </Button>
        <Button aria-label="Collapse all rows" onClick={onCollapseAll} size="sm" variant="ghost">
          <ArrowsPointingInIcon aria-hidden="true" className="size-3.5" />
          Collapse all
        </Button>
        {onExport ? (
          <ExportMenu
            onExport={onExport}
            scopeCount={1}
            scopeDescription="statement with the resolved period and basis"
          />
        ) : null}
      </div>
    </div>
  );
}