import Link from "next/link";
import type { HTMLAttributes, ReactNode, TdHTMLAttributes, ThHTMLAttributes } from "react";
import { cn } from "./cn";
import { CollapsibleRows } from "./collapsible-rows";

/**
 * Dense data table. Sticky header (via .dci-table th), hairline rows, tabular numerics.
 * `responsive` turns rows into compact two-line rows under 640 px — the first line is the
 * <Td primary> cell with the optional <Td lead> figure on the right, the other cells wrap under it
 * as "LABEL value" pairs (every <Td> must carry `label`). Cells hidden with `hidden sm:table-cell`
 * stay hidden on phones.
 * `mobileCollapse` shows only the first 10 rows under 640 px with a "Show all N" toggle.
 */
export function Table({ className, responsive = true, children, dense, mobileCollapse, ...rest }: HTMLAttributes<HTMLTableElement> & { responsive?: boolean; dense?: boolean; mobileCollapse?: { total: number; label?: string } }) {
  const table = (
    <div className={cn("w-full", !responsive && "overflow-x-auto")}>
      <table className={cn("dci-table text-[13px]", responsive && "responsive", dense && "dense", className)} {...rest}>
        {children}
      </table>
    </div>
  );
  if (mobileCollapse && responsive) {
    return (
      <CollapsibleRows total={mobileCollapse.total} label={mobileCollapse.label}>
        {table}
      </CollapsibleRows>
    );
  }
  return table;
}

export function THead({ children, className }: { children: ReactNode; className?: string }) {
  return <thead className={cn("text-left", className)}>{children}</thead>;
}
export function TBody({ children, className }: { children: ReactNode; className?: string }) {
  return <tbody className={cn("divide-y divide-hair", className)}>{children}</tbody>;
}
export function Tr({ children, className, href, ...rest }: HTMLAttributes<HTMLTableRowElement> & { href?: string }) {
  return (
    <tr className={cn("group align-top transition-colors sm:hover:bg-surface-2/60", href && "cursor-pointer", className)} {...rest}>
      {children}
    </tr>
  );
}

export interface ThProps extends ThHTMLAttributes<HTMLTableCellElement> {
  numeric?: boolean;
  /** sort state */
  sort?: "asc" | "desc" | null;
  sortHref?: string;
}
export function Th({ children, className, numeric, sort, sortHref, ...rest }: ThProps) {
  const inner = (
    <span className={cn("inline-flex items-center gap-1", numeric && "flex-row-reverse")}>
      {children}
      {sort !== undefined && (
        <span aria-hidden className={cn("text-[9px]", sort ? "text-ink" : "text-ink-4")}>
          {sort === "asc" ? "▲" : sort === "desc" ? "▼" : "◆"}
        </span>
      )}
    </span>
  );
  return (
    <th
      scope="col"
      aria-sort={sort === "asc" ? "ascending" : sort === "desc" ? "descending" : undefined}
      className={cn("label-caps whitespace-nowrap border-b border-hair px-2 py-2 font-medium first:pl-0 last:pr-0", numeric && "text-right", className)}
      {...rest}
    >
      {sortHref ? (
        <Link href={sortHref} className="hover:text-ink" scroll={false}>
          {inner}
        </Link>
      ) : (
        inner
      )}
    </th>
  );
}

export interface TdProps extends TdHTMLAttributes<HTMLTableCellElement> {
  label?: string;
  numeric?: boolean;
  primary?: boolean;
  muted?: boolean;
  /** key figure of the row: sits right of the primary cell on the first line under 640 px */
  lead?: boolean;
}
export function Td({ children, className, label, numeric, primary, muted, lead, ...rest }: TdProps) {
  return (
    <td
      data-label={label}
      data-primary={primary ? "" : undefined}
      data-lead={lead ? "" : undefined}
      className={cn("px-2 py-2 first:pl-0 last:pr-0", numeric && "figure text-right", muted && "text-ink-3", className)}
      {...rest}
    >
      {children}
    </td>
  );
}

/** Row link (keeps the table semantic). Under 640 px, inside a <Td primary>, it stretches over the whole row (`.dci-rowlink`). */
export function RowLink({ href, children, className }: { href: string; children: ReactNode; className?: string }) {
  return (
    <Link href={href} className={cn("dci-rowlink font-medium text-ink hover:text-accent hover:underline", className)}>
      {children}
    </Link>
  );
}