import { FolderOpen } from "@phosphor-icons/react";
import type { ReactNode } from "react";
import { cn } from "../../lib/cn";
import { Pagination } from "../navigation";
import { RowActions, type DataRowAction } from "./row-actions";
import {
  cellAlignmentClass,
  nextSortState,
  resolveCellContent,
  type DataGridSortState,
  type TableColumn,
} from "./shared";

export { type DataGridSortDirection, type DataGridSortState, type TableColumn } from "./shared";

export function Table<T extends Record<string, ReactNode>>({
  columns,
  data,
  action,
  emptyIcon = <FolderOpen aria-hidden="true" weight="duotone" />,
  emptyMessage = "No records found.",
  leadingIcon,
  currentPage = 1,
  itemCount = data.length,
  onSortChange,
  onPageChange,
  onPageSizeChange,
  pageSize = 10,
  pageSizeOptions,
  showPagination = false,
  sortState,
  subtitle,
  title,
}: {
  action?: DataRowAction<T>[];
  columns: TableColumn<T>[];
  currentPage?: number;
  data: T[];
  emptyIcon?: ReactNode;
  emptyMessage?: ReactNode;
  itemCount?: number;
  leadingIcon?: ReactNode;
  onPageChange?: (page: number) => void;
  onPageSizeChange?: (pageSize: number) => void;
  onSortChange?: (sort: DataGridSortState<T>) => void;
  pageSize?: number;
  pageSizeOptions?: number[];
  showPagination?: boolean;
  sortState?: DataGridSortState<T>;
  subtitle?: ReactNode;
  title?: ReactNode;
}) {
  const hasActions = Boolean(action?.length);

  return (
    <div className="min-w-0 max-w-full overflow-visible rounded-[var(--uhuru-radius-lg)] border border-[var(--uhuru-border-default)] bg-[var(--uhuru-surface-default)]">
      {leadingIcon || title || subtitle ? (
        <div className="flex items-start gap-3 border-b border-[var(--uhuru-border-subtle)] px-4 py-4 sm:px-5">
          {leadingIcon ? (
            <span className="grid h-8 w-8 shrink-0 place-items-center text-[var(--uhuru-accent-strong)] [&_svg]:h-5 [&_svg]:w-5">
              {leadingIcon}
            </span>
          ) : null}
          <div className="min-w-0">
            {title ? <h3 className="m-0 text-base font-medium text-[var(--uhuru-text-primary)]">{title}</h3> : null}
            {subtitle ? <p className="m-0 mt-1 text-sm text-[var(--uhuru-text-secondary)]">{subtitle}</p> : null}
          </div>
        </div>
      ) : null}
      <div className="flex items-center justify-end border-b border-[var(--uhuru-border-subtle)] px-3 py-2 sm:hidden">
        <span className="text-[0.6875rem] uppercase tracking-[0.16em] text-[var(--uhuru-text-secondary)]">
          Swipe for more columns
        </span>
      </div>
      <div className="min-w-0 max-w-full overflow-x-auto overscroll-x-contain">
        <table className="w-full min-w-[560px] border-separate border-spacing-0 text-left text-sm">
          <thead className="bg-[var(--uhuru-surface-muted)] text-[var(--uhuru-text-secondary)]">
            <tr>
              {columns.map((column) => (
                <th
                  className={cn("whitespace-nowrap px-4 py-3 align-middle font-medium", cellAlignmentClass(column.align))}
                  key={String(column.key)}
                >
                  {column.sortable ? (
                    <button
                      className={cn(
                        "inline-flex items-center gap-2 border-0 bg-transparent p-0 text-inherit transition hover:text-[var(--uhuru-text-primary)]",
                        column.align === "right" ? "ml-auto" : "",
                      )}
                      onClick={() => onSortChange?.(nextSortState(column.key, sortState))}
                      type="button"
                    >
                      <span>{column.label}</span>
                      <span className="text-[10px] uppercase tracking-[0.16em]">
                        {sortState?.key === column.key
                          ? sortState.direction === "asc"
                            ? "Asc"
                            : "Desc"
                          : "Sort"}
                      </span>
                    </button>
                  ) : (
                    column.label
                  )}
                </th>
              ))}
              {hasActions ? <th aria-label="Actions" className="w-px px-2 py-3" /> : null}
            </tr>
          </thead>
          <tbody>
            {data.length === 0 ? (
              <tr>
                <td className="px-4 py-12 text-center sm:px-5" colSpan={columns.length + (hasActions ? 1 : 0)}>
                  <div className="mx-auto flex max-w-sm flex-col items-center gap-3 text-[var(--uhuru-text-secondary)]">
                    <span className="grid h-10 w-10 place-items-center rounded-[var(--uhuru-radius-md)] border border-[var(--uhuru-border-subtle)] bg-[var(--uhuru-surface-muted)] text-[var(--uhuru-accent-strong)] [&_svg]:h-5 [&_svg]:w-5">
                      {emptyIcon}
                    </span>
                    <p className="m-0 text-sm leading-6">{emptyMessage}</p>
                  </div>
                </td>
              </tr>
            ) : (
              data.map((row, rowIndex) => (
                <tr className="border-t border-[var(--uhuru-border-subtle)]" key={rowIndex}>
                  {columns.map((column) => (
                    <td
                      className={cn(
                        "px-4 py-3 align-middle text-[var(--uhuru-text-primary)]",
                        !column.render && "whitespace-nowrap",
                        cellAlignmentClass(column.align),
                      )}
                      key={String(column.key)}
                    >
                      {resolveCellContent(row, column)}
                    </td>
                  ))}
                  {hasActions ? (
                    <td className="whitespace-nowrap px-2 py-2 text-right align-middle">
                      <RowActions actions={action ?? []} row={row} />
                    </td>
                  ) : null}
                </tr>
              ))
            )}
          </tbody>
        </table>
      </div>
      {showPagination ? (
        <Pagination
          className="rounded-none border-0 border-t border-[var(--uhuru-border-subtle)]"
          currentPage={currentPage}
          itemCount={itemCount}
          onPageChange={onPageChange}
          onPageSizeChange={onPageSizeChange}
          pageSize={pageSize}
          pageSizeOptions={pageSizeOptions}
        />
      ) : null}
    </div>
  );
}