/**
 * Table — WealthX DS overrides (shadcn base)
 *
 * Changes from shadcn default:
 *   - TableHead:    `text-foreground` -- `text-muted-foreground` — header labels are secondary text
 *   - TableHead:    `px-2` -- `px-4` — wider horizontal padding per Figma spacing
 *   - TableCell:    `p-2` -- `px-4 py-3` — consistent cell padding per Figma
 *   - TableRow:     `transition-colors` -- `transition-[background-color,opacity]` — scoped animation
 *   - TableRow:     `data-[state=selected]:bg-muted` -- `data-[state=selected]:bg-primary/10` — selected tint matches Figma (primary + 10% opacity)
 *   - TableFooter:  inherits same cell padding via className
 */
import { type ReactElement } from "react";
import * as React from "react";
import { cn } from "@/lib/utils";

export type TableProps = React.ComponentProps<"table">;

function Table({ className, ...props }: TableProps): ReactElement {
  return (
    <div
      className="relative w-full overflow-x-auto"
      data-slot="table-container"
    >
      <table
        className={cn("w-full caption-bottom text-body-small", className)}
        data-slot="table"
        {...props}
      />
    </div>
  );
}

export type TableHeaderProps = React.ComponentProps<"thead">;

function TableHeader({ className, ...props }: TableHeaderProps): ReactElement {
  return (
    <thead
      className={cn("[&_tr]:border-b", className)}
      data-slot="table-header"
      {...props}
    />
  );
}

export type TableBodyProps = React.ComponentProps<"tbody">;

function TableBody({ className, ...props }: TableBodyProps): ReactElement {
  return (
    <tbody
      className={cn("[&_tr:last-child]:border-0", className)}
      data-slot="table-body"
      {...props}
    />
  );
}

export type TableFooterProps = React.ComponentProps<"tfoot">;

function TableFooter({ className, ...props }: TableFooterProps): ReactElement {
  return (
    <tfoot
      className={cn(
        "border-t bg-muted/50 text-label-medium [&>tr]:last:border-b-0",
        className,
      )}
      data-slot="table-footer"
      {...props}
    />
  );
}

export type TableRowProps = React.ComponentProps<"tr">;

function TableRow({ className, ...props }: TableRowProps): ReactElement {
  return (
    <tr
      className={cn(
        "border-b transition-[background-color,opacity] hover:bg-muted/50 data-[state=selected]:bg-primary/10",
        className,
      )}
      data-slot="table-row"
      {...props}
    />
  );
}

export type TableHeadProps = React.ComponentProps<"th">;

function TableHead({ className, ...props }: TableHeadProps): ReactElement {
  return (
    <th
      className={cn(
        "h-10 px-4 text-left align-middle text-label-medium whitespace-nowrap text-muted-foreground",
        "[&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
        className,
      )}
      data-slot="table-head"
      {...props}
    />
  );
}

export type TableCellProps = React.ComponentProps<"td">;

function TableCell({ className, ...props }: TableCellProps): ReactElement {
  return (
    <td
      className={cn(
        "px-4 py-3 align-middle whitespace-nowrap",
        "[&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
        className,
      )}
      data-slot="table-cell"
      {...props}
    />
  );
}

export type TableCaptionProps = React.ComponentProps<"caption">;

function TableCaption({
  className,
  ...props
}: TableCaptionProps): ReactElement {
  return (
    <caption
      className={cn("mt-4 text-body-small text-muted-foreground", className)}
      data-slot="table-caption"
      {...props}
    />
  );
}

export {
  Table,
  TableHeader,
  TableBody,
  TableFooter,
  TableHead,
  TableRow,
  TableCell,
  TableCaption,
};