import { cn } from "@/lib/utils"
import i18n from "@/lib/i18n";

export type Column<T> = {
  key: string
  header: React.ReactNode
  cell: (row: T, index: number) => React.ReactNode
  className?: string
  headerClassName?: string
  align?: "start" | "center" | "end"
}

type Props<T> = {
  columns: Column<T>[]
  data: T[]
  rowKey: (row: T, index: number) => string
  activeRowKey?: string
  onRowClick?: (row: T, index: number) => void
  className?: string
  empty?: React.ReactNode
  compact?: boolean
  ariaLabel?: string
}

export function DataTable<T>({
  columns,
  data,
  rowKey,
  activeRowKey,
  onRowClick,
  className,
  empty,
  compact,
  ariaLabel,
}: Props<T>) {
  const align = (a?: "start" | "center" | "end") =>
    a === "center" ? "text-center" : a === "end" ? "text-left" : "text-right"

  return (
    <div className={cn("w-full overflow-x-auto", className)}>
      <table className="w-full text-right border-collapse" aria-label={ariaLabel}>
        <thead className="sticky top-0 z-10">
          <tr className="bg-muted/50 border-b border-border">
            {columns.map((col) => (
              <th
                key={col.key}
                className={cn(
                  "px-4 font-semibold text-[11.5px] uppercase tracking-wider text-muted-foreground whitespace-nowrap",
                  compact ? "py-2.5" : "py-3",
                  align(col.align),
                  col.headerClassName,
                )}
              >
                {col.header}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {data.length === 0 && (
            <tr>
              <td colSpan={columns.length} className="py-16">
                {empty ?? (
                  <div className="flex flex-col items-center gap-2 text-muted-foreground">
                    <span className="text-[13px]">{i18n.t('components.ui.data-table.text_1')}</span>
                  </div>
                )}
              </td>
            </tr>
          )}
          {data.map((row, i) => {
            const key = rowKey(row, i)
            const active = activeRowKey === key
            return (
              <tr
                key={key}
                onClick={() => onRowClick?.(row, i)}
                className={cn(
                  "border-b border-border/70 transition-colors",
                  onRowClick && "cursor-pointer",
                  active ? "bg-gold-50/50" : "hover:bg-muted/40",
                )}
              >
                {columns.map((col) => (
                  <td
                    key={col.key}
                    className={cn(
                      "px-4 text-[13px] text-foreground",
                      compact ? "py-2.5" : "py-3.5",
                      align(col.align),
                      col.className,
                    )}
                  >
                    {col.cell(row, i)}
                  </td>
                ))}
              </tr>
            )
          })}
        </tbody>
      </table>
    </div>
  )
}
