import { type ReactNode } from 'react';

export interface TableColumn {
  key: string;
  header: string;
  /** end = 数字列：表头与数值一起右对齐（GOV / Polaris 同一条） */
  align?: 'start' | 'end';
  /** 列宽只写 Tailwind 宽度类，不写 px 字面量 */
  width?: string;
}

export interface TableRow {
  id: string;
  cells: Record<string, ReactNode>;
}

interface Props {
  caption: string;
  columns: TableColumn[];
  rows: TableRow[];
  /** false = 只留滚动容器，材质底交给外层面板（嵌在卡片里时不再套一层卡） */
  framed?: boolean;
  className?: string;
}

/** 拟态数据表：材质签名 = 同色挤出、零边框——分层靠凹陷与浮起，不靠线；悬停把整行按下去 */
export function NeumorphicTable({ caption, columns, rows, framed = true, className = '' }: Props) {
  const last = columns.length - 1;

  return (
    <div
      role="region"
      aria-label={caption}
      tabIndex={0}
      className={`
        overflow-x-auto outline-offset-2 rounded-2xl
        ${framed
          ? 'p-2 bg-[var(--neuro-bg)] shadow-[6px_6px_14px_var(--neuro-dark),-6px_-6px_14px_var(--neuro-light)]'
          : ''}
        ${className}
      `}
    >
      <table className="w-full min-w-[34rem] border-separate border-spacing-0 text-sm">
        <caption className="sr-only">{caption}</caption>
        <thead>
          <tr className="bg-[var(--neuro-bg)] shadow-[inset_2px_2px_5px_var(--neuro-dark),inset_-2px_-2px_5px_var(--neuro-light)]">
            {columns.map((c, i) => (
              <th
                key={c.key}
                scope="col"
                className={`
                  px-4 py-2.5 text-xs font-medium text-[var(--color-text-muted)] whitespace-nowrap
                  ${c.align === 'end' ? 'text-right' : 'text-left'}
                  ${i === 0 ? 'rounded-l-xl' : i === last ? 'rounded-r-xl' : ''}
                  ${c.width ?? ''}
                `}
              >
                {c.header}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {rows.map((row) => (
            <tr
              key={row.id}
              className="transition-shadow hover:shadow-[inset_2px_2px_5px_var(--neuro-dark),inset_-2px_-2px_5px_var(--neuro-light)]"
            >
              {columns.map((c, i) =>
                i === 0 ? (
                  <th
                    key={c.key}
                    scope="row"
                    className="px-4 py-3 text-left font-medium text-[var(--color-text)] break-words rounded-l-xl"
                  >
                    {row.cells[c.key]}
                  </th>
                ) : (
                  <td
                    key={c.key}
                    className={`
                      px-4 py-3 text-[var(--color-text-muted)] break-words
                      ${i === last ? 'rounded-r-xl' : ''}
                      ${c.align === 'end' ? 'text-right tabular-nums whitespace-nowrap' : ''}
                    `}
                  >
                    {row.cells[c.key]}
                  </td>
                ),
              )}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}