import { useState, type ReactNode } from "react";
import { cn } from "../../lib/cn";
import { RowActions, type DataRowAction } from "./row-actions";

export type TableColumn<T> = {
  align?: "center" | "left" | "right";
  key: keyof T;
  label: string;
  render?: (row: T) => ReactNode;
  sortValue?: (row: T) => number | string;
  sortable?: boolean;
};

export type DataGridSortDirection = "asc" | "desc";

export type DataGridSortState<T> = {
  direction: DataGridSortDirection;
  key: keyof T;
};

export function cellAlignmentClass(alignment?: TableColumn<Record<string, ReactNode>>["align"]) {
  return alignment === "right"
    ? "text-right"
    : alignment === "center"
      ? "text-center"
      : "text-left";
}

export function resolveCellContent<T extends Record<string, ReactNode>>(
  row: T,
  column: TableColumn<T>,
): ReactNode {
  return column.render ? column.render(row) : row[column.key];
}

export function resolveSortValue<T extends Record<string, ReactNode>>(row: T, column: TableColumn<T>) {
  if (column.sortValue) {
    return column.sortValue(row);
  }

  const value = row[column.key];
  return typeof value === "number" || typeof value === "string"
    ? value
    : String(value ?? "");
}

export function nextSortState<T extends Record<string, ReactNode>>(
  columnKey: keyof T,
  currentSort?: DataGridSortState<T>,
): DataGridSortState<T> {
  return {
    direction:
      currentSort?.key === columnKey && currentSort.direction === "asc"
        ? "desc"
        : "asc",
    key: columnKey,
  };
}

export function MobileDataGridCard<T extends Record<string, ReactNode>>({
  columns,
  expandedByDefault = false,
  primaryKey,
  row,
  actions,
}: {
  actions?: DataRowAction<T>[];
  columns: TableColumn<T>[];
  expandedByDefault?: boolean;
  primaryKey: keyof T;
  row: T;
}) {
  const [expanded, setExpanded] = useState(expandedByDefault);
  const primaryColumn =
    columns.find((column) => column.key === primaryKey) ?? columns[0];
  const detailColumns = columns.filter((column) => column.key !== primaryColumn?.key);

  return (
    <div className="rounded-[min(var(--uhuru-radius-lg),1rem)] border border-[var(--uhuru-border-subtle)] bg-[var(--uhuru-surface-default)]">
      <div className="flex items-center justify-between gap-3 px-4 py-3">
        <button
          className="min-w-0 flex-1 text-left"
          onClick={() => setExpanded((current) => !current)}
          type="button"
        >
          <div className="grid gap-1">
            <span className="text-[0.6875rem] font-medium uppercase tracking-[0.16em] text-[var(--uhuru-text-secondary)]">
              {primaryColumn?.label}
            </span>
            <div className="text-sm text-[var(--uhuru-text-primary)]">
              {primaryColumn ? resolveCellContent(row, primaryColumn) : null}
            </div>
          </div>
        </button>
        <div className="flex shrink-0 items-center gap-2">
          <button
            aria-label={expanded ? "Hide details" : "Show details"}
            className="inline-flex items-center gap-2 text-[0.6875rem] font-medium uppercase tracking-[0.14em] text-[var(--uhuru-text-secondary)]"
            onClick={() => setExpanded((current) => !current)}
            type="button"
          >
            Details
            <svg
              aria-hidden="true"
              className={cn("h-4 w-4 transition", expanded ? "rotate-180" : "")}
              fill="none"
              viewBox="0 0 20 20"
            >
              <path d="M5.25 7.5L10 12.25L14.75 7.5" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.8" />
            </svg>
          </button>
          {actions?.length ? <RowActions actions={actions} row={row} /> : null}
        </div>
      </div>
      {expanded ? (
        <div className="grid gap-3 border-t border-[var(--uhuru-border-subtle)] px-4 py-3">
          {detailColumns.map((column) => (
            <div className="grid gap-1" key={String(column.key)}>
              <span className="text-[0.6875rem] font-medium uppercase tracking-[0.16em] text-[var(--uhuru-text-secondary)]">
                {column.label}
              </span>
              <div className={cn("text-sm text-[var(--uhuru-text-primary)]", cellAlignmentClass(column.align))}>
                {resolveCellContent(row, column)}
              </div>
            </div>
          ))}
        </div>
      ) : null}
    </div>
  );
}