import { useMemo, useState, type ReactNode } from "react";
import { cn } from "../../lib/cn";
import { EmptyState, Skeleton } from "../feedback";
import { Pagination } from "../navigation";
import { RowActions, type DataRowAction } from "./row-actions";
import {
  cellAlignmentClass,
  MobileDataGridCard,
  nextSortState,
  resolveCellContent,
  resolveSortValue,
  type DataGridSortState,
  type TableColumn,
} from "./shared";

export function DataGrid<T extends Record<string, ReactNode>>({
  columns,
  currentPage,
  data,
  action,
  emptyAction,
  emptyDescription = "No records are available for the current view.",
  emptyTitle = "No results",
  isLoading = false,
  itemCount,
  leadingIcon,
  mobileExpandedByDefault = false,
  mobilePrimaryKey,
  mobileView = "table",
  onPageChange,
  onPageSizeChange,
  onSortChange,
  pageSize = 10,
  pageSizeOptions,
  showPagination = true,
  sortState,
  subtitle,
  title,
}: {
  action?: DataRowAction<T>[];
  columns: TableColumn<T>[];
  currentPage: number;
  data: T[];
  emptyAction?: ReactNode;
  emptyDescription?: string;
  emptyTitle?: string;
  isLoading?: boolean;
  itemCount: number;
  leadingIcon?: ReactNode;
  mobileExpandedByDefault?: boolean;
  mobilePrimaryKey?: keyof T;
  mobileView?: "cards" | "table";
  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);
  const sortableColumns = columns.filter((column) => column.sortable);
  const [internalSortState, setInternalSortState] = useState<
    DataGridSortState<T> | undefined
  >(
    sortableColumns[0]
      ? { direction: "asc", key: sortableColumns[0].key }
      : undefined,
  );
  const resolvedSortState = sortState ?? internalSortState;
  const sortedData = useMemo(() => {
    if (!resolvedSortState) {
      return data;
    }

    const column = columns.find((entry) => entry.key === resolvedSortState.key);
    if (!column) {
      return data;
    }

    return [...data].sort((left, right) => {
      const leftValue = resolveSortValue(left, column);
      const rightValue = resolveSortValue(right, column);

      if (leftValue < rightValue) {
        return resolvedSortState.direction === "asc" ? -1 : 1;
      }

      if (leftValue > rightValue) {
        return resolvedSortState.direction === "asc" ? 1 : -1;
      }

      return 0;
    });
  }, [columns, data, resolvedSortState]);

  function handleSortChange(nextSort: DataGridSortState<T>) {
    if (sortState === undefined) {
      setInternalSortState(nextSort);
    }

    onSortChange?.(nextSort);
  }

  const resolvedMobilePrimaryKey = mobilePrimaryKey ?? columns[0]?.key;
  const hasHeading = Boolean(leadingIcon || title || subtitle);

  const heading = hasHeading ? (
    <div className="flex min-w-0 flex-wrap items-center justify-between gap-3 border-b border-[var(--uhuru-border-subtle)] px-4 py-4 sm:px-5">
      <div className="flex min-w-0 items-start gap-3">
        {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>
      <p className="m-0 shrink-0 text-sm text-[var(--uhuru-text-secondary)]">
        {itemCount} items
      </p>
    </div>
  ) : null;

  return (
    <div className="grid gap-4">
      {isLoading ? (
        <div className="grid gap-3 rounded-[var(--uhuru-radius-lg)] border border-[var(--uhuru-border-default)] bg-[var(--uhuru-surface-default)] p-4">
          {heading}
          <Skeleton className="h-10 w-full" />
          <Skeleton className="h-10 w-full" />
          <Skeleton className="h-10 w-full" />
        </div>
      ) : data.length === 0 ? (
        <EmptyState
          action={emptyAction}
          description={emptyDescription}
          title={emptyTitle}
        />
      ) : (
        <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)]">
          {heading}
          <div className="min-w-0 max-w-full overflow-hidden">
            {mobileView === "cards" && resolvedMobilePrimaryKey ? (
              <div className="grid gap-3 border-b border-[var(--uhuru-border-subtle)] p-3 sm:hidden">
                {sortedData.map((row, rowIndex) => (
                  <MobileDataGridCard
                    columns={columns}
                    expandedByDefault={mobileExpandedByDefault}
                    key={rowIndex}
                    primaryKey={resolvedMobilePrimaryKey}
                    row={row}
                    actions={action}
                  />
                ))}
              </div>
            ) : (
              <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={cn(
                "min-w-0 max-w-full overflow-x-auto overscroll-x-contain",
                mobileView === "cards" ? "hidden sm:block" : "",
              )}
            >
              <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={() =>
                              handleSortChange(
                                nextSortState(column.key, resolvedSortState),
                              )
                            }
                            type="button"
                          >
                            <span>{column.label}</span>
                            <span className="text-[10px] uppercase tracking-[0.16em]">
                              {resolvedSortState?.key === column.key
                                ? resolvedSortState.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>
                  {sortedData.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>
          </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>
      )}
    </div>
  );
}