import * as React from 'react'
import { cn } from '../../internal/utils'

type TableSize = 'sm' | 'md' | 'lg'
type TableBorderStyle = 'solid' | 'dashed' | 'none'

const sizeOuter: Record<TableSize, string> = {
  sm: 'p-1 rounded-md text-xs',
  md: 'p-1.25 rounded-lg text-sm',
  lg: 'p-1.5 rounded-xl text-base',
}

const sizeCellPad: Record<TableSize, string> = {
  sm: '[&_th]:p-3 [&_td]:p-3',
  md: '[&_th]:p-3.5 [&_td]:p-3.5',
  lg: '[&_th]:p-4 [&_td]:p-4',
}

const sizeHeaderCorners: Record<TableSize, string> = {
  sm: '[&>thead>tr:first-child>th:first-child]:rounded-ss-sm [&>thead>tr:first-child>th:last-child]:rounded-se-sm [&>thead>tr:last-child>th:first-child]:rounded-es-sm [&>thead>tr:last-child>th:last-child]:rounded-ee-sm',
  md: '[&>thead>tr:first-child>th:first-child]:rounded-ss-md [&>thead>tr:first-child>th:last-child]:rounded-se-md [&>thead>tr:last-child>th:first-child]:rounded-es-md [&>thead>tr:last-child>th:last-child]:rounded-ee-md',
  lg: '[&>thead>tr:first-child>th:first-child]:rounded-ss-lg [&>thead>tr:first-child>th:last-child]:rounded-se-lg [&>thead>tr:last-child>th:first-child]:rounded-es-lg [&>thead>tr:last-child>th:last-child]:rounded-ee-lg',
}

const sizeBodyBottomCorners: Record<TableSize, string> = {
  sm: '[&>tbody:last-of-type>tr:last-child>:first-child]:rounded-es-sm [&>tbody:last-of-type>tr:last-child>:last-child]:rounded-ee-sm',
  md: '[&>tbody:last-of-type>tr:last-child>:first-child]:rounded-es-md [&>tbody:last-of-type>tr:last-child>:last-child]:rounded-ee-md',
  lg: '[&>tbody:last-of-type>tr:last-child>:first-child]:rounded-es-lg [&>tbody:last-of-type>tr:last-child>:last-child]:rounded-ee-lg',
}

const sizeBodyTopCornersNoHeader: Record<TableSize, string> = {
  sm: '[&:not(:has(thead))>tbody:first-of-type>tr:first-child>:first-child]:rounded-ss-sm [&:not(:has(thead))>tbody:first-of-type>tr:first-child>:last-child]:rounded-se-sm',
  md: '[&:not(:has(thead))>tbody:first-of-type>tr:first-child>:first-child]:rounded-ss-md [&:not(:has(thead))>tbody:first-of-type>tr:first-child>:last-child]:rounded-se-md',
  lg: '[&:not(:has(thead))>tbody:first-of-type>tr:first-child>:first-child]:rounded-ss-lg [&:not(:has(thead))>tbody:first-of-type>tr:first-child>:last-child]:rounded-se-lg',
}

const borderStyleClasses: Record<TableBorderStyle, string> = {
  solid: '[&_td]:border-border [&>tbody_th]:border-border',
  dashed:
    '[&_td]:border-border-strong [&_td]:border-dashed [&>tbody_th]:border-border-strong [&>tbody_th]:border-dashed',
  none: '[&_td]:border-b-0 [&>tbody_th]:border-b-0',
}

const tableBaseClasses = cn(
  'w-full border-separate border-spacing-0 bg-background text-foreground border border-border-muted align-middle',
  '[&>thead>tr>th]:bg-background-muted',
  '[&>thead>tr>th]:text-foreground-intense [&>thead>tr>th]:font-medium',
  '[&>tbody_th]:text-foreground-intense [&>tbody_th]:font-medium [&>tbody_th]:border-b',
  '[&_td]:align-middle [&_td]:border-b',
  '[&>tbody:last-of-type>tr:last-child>td]:border-b-0',
  '[&>tbody:last-of-type>tr:last-child>th]:border-b-0',
  '[&>tbody>tr[data-highlighted]]:bg-background-subtle',
)

const stripedRowsClasses = '[&>tbody>tr:nth-child(2n)]:bg-background-subtle'
const stripedColumnsClasses = '[&>tbody>tr>:nth-child(2n)]:bg-background-subtle'
const rowHoverClasses =
  '[&>tbody>tr]:transition-colors [&>tbody>tr]:duration-200 motion-reduce:[&>tbody>tr]:transition-none [&>tbody>tr:hover]:bg-background-subtle'

interface TableProps extends React.ComponentPropsWithoutRef<'table'> {
  /**
   * Cell padding, corner radius, and text scale.
   * @default 'md'
   */
  size?: TableSize
  /**
   * Style of the cell separators.
   * @default 'solid'
   */
  borderStyle?: TableBorderStyle
  /**
   * Tint alternating rows.
   * @default false
   */
  stripedRows?: boolean
  /**
   * Tint alternating columns.
   * @default false
   */
  stripedColumns?: boolean
  /**
   * Tint a row on pointer hover.
   * @default false
   */
  hoverableRows?: boolean
}

function Table({
  size = 'md',
  borderStyle = 'solid',
  stripedRows = false,
  stripedColumns = false,
  hoverableRows = false,
  className,
  ...props
}: TableProps) {
  return (
    <table
      data-slot="table"
      className={cn(
        tableBaseClasses,
        sizeOuter[size],
        sizeCellPad[size],
        sizeHeaderCorners[size],
        sizeBodyBottomCorners[size],
        sizeBodyTopCornersNoHeader[size],
        borderStyleClasses[borderStyle],
        stripedRows && stripedRowsClasses,
        stripedColumns && stripedColumnsClasses,
        hoverableRows && rowHoverClasses,
        className,
      )}
      {...props}
    />
  )
}

interface TableCaptionProps extends React.ComponentPropsWithoutRef<'caption'> {
  /**
   * Render the caption above or below the table.
   * @default 'bottom'
   */
  position?: 'top' | 'bottom'
}

function TableCaption({ position = 'bottom', className, ...props }: TableCaptionProps) {
  return (
    <caption
      data-slot="table-caption"
      className={cn(
        'text-foreground-muted',
        position === 'top' ? 'caption-top pb-4' : 'caption-bottom pt-4',
        className,
      )}
      {...props}
    />
  )
}

interface TableHeaderProps extends React.ComponentPropsWithoutRef<'thead'> {}

function TableHeader({ className, ...props }: TableHeaderProps) {
  return <thead data-slot="table-header" className={className} {...props} />
}

interface TableBodyProps extends React.ComponentPropsWithoutRef<'tbody'> {}

function TableBody({ className, ...props }: TableBodyProps) {
  return <tbody data-slot="table-body" className={className} {...props} />
}

interface TableRowProps extends React.ComponentPropsWithoutRef<'tr'> {
  /**
   * Apply the persistent highlight background (`data-highlighted`).
   * @default false
   */
  highlighted?: boolean
}

function TableRow({ highlighted, className, ...props }: TableRowProps) {
  return <tr data-slot="table-row" data-highlighted={highlighted ? '' : undefined} className={className} {...props} />
}

interface TableHeadProps extends React.ComponentPropsWithoutRef<'th'> {}

function TableHead({ className, ...props }: TableHeadProps) {
  return <th data-slot="table-head" className={cn('text-start', className)} {...props} />
}

interface TableCellProps extends React.ComponentPropsWithoutRef<'td'> {}

function TableCell({ className, ...props }: TableCellProps) {
  return <td data-slot="table-cell" className={className} {...props} />
}

export { Table, TableCaption, TableHeader, TableBody, TableRow, TableHead, TableCell }
export type {
  TableProps,
  TableCaptionProps,
  TableHeaderProps,
  TableBodyProps,
  TableRowProps,
  TableHeadProps,
  TableCellProps,
}