ColumnHeader

"use client";

import * as React from "react";
import { cn } from "@/lib/ledger/cn";
import type { SortDirection } from "@/lib/ledger/table-sort";
import { ChevronDownIcon, ChevronUpDownIcon, ChevronUpIcon } from "@/components/ledger/icons";

export interface ColumnResizerProps {
  active?: boolean;
  className?: string;
  /** Named in the handle's accessible label — "Resize Account column". */
  label: string;
  max?: number;
  min?: number;
  onKeyDown: (event: React.KeyboardEvent) => void;
  onPointerDown: (event: React.PointerEvent) => void;
  onReset: () => void;
  width?: number;
}

/**
 * The 8px seam between two columns.
 *
 * It is a real `separator` with `aria-valuenow`, not a decorative div: a
 * column width that can only be changed by dragging is a feature that does not
 * exist for anyone driving the table from the keyboard. Arrows move it 16px,
 * `Alt`+arrows 1px, `Home` restores the shipped width — and so does a
 * double-click, which is the gesture every spreadsheet has trained for it.
 *
 * The hit area is 9px wide and centred on the seam; the line inside it is 1px
 * and only paints on hover, focus or during the drag. A permanently visible
 * grabber on every column boundary turns a ledger into a grid of handles.
 */
export const ColumnResizer = React.forwardRef<HTMLDivElement, ColumnResizerProps>(
  ({ label, width, min, max, active, onPointerDown, onKeyDown, onReset, className }, ref) => (
    <div
      aria-label={`Resize ${label} column`}
      aria-orientation="vertical"
      aria-valuemax={max}
      aria-valuemin={min}
      aria-valuenow={width}
      className={cn("ledger-col-resizer", className)}
      data-resizing={active || undefined}
      /* The header itself may be a sort button; a drag that starts on the seam
         must not also register as a click on it. */
      onClick={(e) => e.stopPropagation()}
      onDoubleClick={(e) => {
        e.preventDefault();
        onReset();
      }}
      onKeyDown={onKeyDown}
      onPointerDown={onPointerDown}
      ref={ref}
      role="separator"
      tabIndex={0}
    />
  ),
);
ColumnResizer.displayName = "ColumnResizer";

export interface ColumnHeaderProps extends Omit<React.ComponentPropsWithoutRef<"th">, "onSelect"> {
  /** Right for figures, left for everything else. */
  align?: "left" | "right";
  /** The column id the sort and width state is keyed by. */
  column: string;
  /** Set when this column is the sorted one. */
  direction?: SortDirection;
  onSort?: (column: string) => void;
  /** Omit to render a header that cannot be dragged. */
  resizer?: Omit<ColumnResizerProps, "label">;
  sortable?: boolean;
}

/**
 * A `<th>` that sorts and resizes, for the tables that render their own rows.
 *
 * Server-rendered tables get the same two behaviours from `TableColumns`,
 * which reads the DOM instead — the split exists because a 400-row statement
 * should not ship 400 rows of JavaScript to be rendered twice.
 *
 * The sort control is a real `<button>` inside the cell rather than a click
 * handler on the `<th>`: the header has to be reachable and operable by
 * keyboard, and the resize handle beside it needs its own separate focus stop.
 * `aria-sort` lives on the `<th>`, where a screen reader looks for it.
 *
 * The direction indicator is always occupying its space — a chevron that
 * appears on sort would shift the label sideways on every click, and the
 * neutral state earns its glyph anyway by saying "this column sorts".
 */
export const ColumnHeader = React.forwardRef<HTMLTableCellElement, ColumnHeaderProps>(
  (
    {
      column,
      align = "left",
      sortable = false,
      direction,
      onSort,
      resizer,
      className,
      children,
      style,
      ...props
    },
    ref,
  ) => {
    const label = typeof children === "string" ? children : column;
    const Indicator =
      direction === "asc" ? ChevronUpIcon : direction === "desc" ? ChevronDownIcon : ChevronUpDownIcon;

    return (
      <th
        aria-sort={
          sortable
            ? direction === "asc"
              ? "ascending"
              : direction === "desc"
                ? "descending"
                : "none"
            : undefined
        }
        className={cn(
          "relative px-3 py-2 text-label font-medium text-text-secondary",
          align === "right" ? "text-right" : "text-left",
          className,
        )}
        data-sorted={direction ?? undefined}
        ref={ref}
        scope="col"
        style={style}
        {...props}
      >
        {sortable && onSort ? (
          <button
            className={cn(
              "group inline-flex max-w-full items-center gap-1 rounded-xs text-label font-medium",
              "transition-colors duration-1 ease-standard hover:text-text-primary",
              "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--accent)]",
              direction && "text-text-primary",
              align === "right" && "flex-row-reverse",
            )}
            onClick={() => onSort(column)}
            type="button"
          >
            <span className="truncate">{children}</span>
            <Indicator
              aria-hidden="true"
              className={cn(
                "size-3.5 shrink-0",
                direction
                  ? "text-accent"
                  : "text-text-tertiary opacity-0 group-hover:opacity-100 group-focus-visible:opacity-100",
              )}
            />
          </button>
        ) : (
          <span className="block truncate">{children}</span>
        )}
        {resizer ? <ColumnResizer label={label} {...resizer} /> : null}
      </th>
    );
  },
);
ColumnHeader.displayName = "ColumnHeader";