import type { KeyboardEvent, ReactNode } from "react";

/** Minimal data table shell: consumer renders <thead>/<tbody> inside. */
export function DataTable({ children }: { children: ReactNode }) {
  return (
    <div className="overflow-x-auto">
      <table className="w-full text-sm">{children}</table>
    </div>
  );
}

export function Th({
  children,
  numeric,
  onClick,
  sorted,
  title,
}: {
  children: ReactNode;
  numeric?: boolean;
  onClick?: () => void;
  sorted?: "asc" | "desc" | false;
  /** Hover text for headers whose label needs the precise definition. */
  title?: string;
}) {
  const interactive = onClick !== undefined;
  // Sortable headers are focusable and fire onClick on Enter/Space (the
  // shared rowKeyActivate contract), with aria-sort telling screen readers
  // which column orders the table.
  return (
    <th
      onClick={onClick}
      onKeyDown={interactive ? rowKeyActivate(() => onClick()) : undefined}
      tabIndex={interactive ? 0 : undefined}
      aria-sort={
        interactive
          ? sorted === "asc"
            ? "ascending"
            : sorted === "desc"
              ? "descending"
              : "none"
          : undefined
      }
      title={title}
      className={`border-b border-surface-2 px-3 py-2.5 text-left text-xs font-semibold uppercase tracking-wider text-text-muted ${numeric ? "num" : ""} ${interactive ? "cursor-pointer select-none hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40" : ""}`}
    >
      {children}
      {sorted === "asc" ? " ▲" : sorted === "desc" ? " ▼" : ""}
    </th>
  );
}

/** Keyboard activation for click-to-act elements: pair with tabIndex={0}
 *  so Enter/Space fires what a click would (rows and sortable headers). */
export function rowKeyActivate<T extends HTMLElement>(activate: () => void) {
  return (e: KeyboardEvent<T>): void => {
    if (e.key === "Enter" || e.key === " ") {
      e.preventDefault();
      activate();
    }
  };
}

export function Td({
  children,
  numeric,
  className,
}: {
  children: ReactNode;
  numeric?: boolean;
  className?: string;
}) {
  return (
    <td className={`border-b border-surface-2/50 px-3 py-2.5 last:border-0 ${numeric ? "num" : ""} ${className ?? ""}`}>
      {children}
    </td>
  );
}