"use client";

import { Button } from "@aur-ui/ui/components/button";
import { Table, TableBody } from "@aur-ui/ui/components/table";
import {
  TablePagination,
  TablePaginationSkeleton,
} from "@aur-ui/ui/components/table-pagination";
import {
  TABLE_VIEWPORT_ROWS,
  type TableEmptyCopy,
  TableEmptyRow,
  TableErrorRow,
  TableFillerRows,
  TableLoadingHeader,
  TableLoadingRows,
} from "@aur-ui/ui/components/table-states";
import { Toolbar, ToolbarGroup } from "@aur-ui/ui/components/toolbar";
import { useIsDesktop } from "@aur-ui/ui/hooks/use-media-query";
import type { TableController } from "@aur-ui/ui/hooks/use-table-controller";
import { MobileDataList } from "@aur-ui/ui/patterns/mobile-data-list";
import type * as React from "react";
import { useMemo } from "react";

/**
 * Responsive list shell shared by every list page. Owns the cross-cutting glue
 * that used to be hand-wired in each `*-content.tsx`:
 *  - the desktop `<Table>` / mobile `<MobileDataList>` breakpoint branch;
 *  - loading / error / empty rendering for BOTH views from one copy config
 *    (table `<tr>` states + mobile `<div>` states);
 *  - the pagination footer (desktop) and infinite-scroll wiring (mobile);
 *  - the filter + action toolbar.
 *
 * The page supplies only what genuinely differs: the `<TableHeader>` (with its
 * header filters / column toggle), `renderRow`, `renderCard`, the (pre-gated)
 * filter node, and the toolbar action. Per-row local state (dialogs, mutations)
 * stays inside the row / card components — the shell never owns it. Takes
 * strings / nodes only; no `next-intl`, no hardcoded copy.
 */
export type ResponsiveListViewProps<T, C extends string> = {
  // Data / async state.
  items: readonly T[];
  getKey: (item: T) => string;
  isLoading?: boolean;
  isError?: boolean;

  // Desktop table — page owns the header + row; the shell owns state rows.
  table: TableController<C>;
  tableHeader: React.ReactNode;
  renderRow: (item: T) => React.ReactNode;
  /** Columns beyond `visibleColumns` for colSpan; default 1 (Action column). */
  extraColSpan?: number;

  // Mobile card list (infinite scroll).
  renderCard: (item: T) => React.ReactNode;
  loadingRows?: number;
  infinite?: {
    hasMore: boolean;
    isFetchingMore: boolean;
    onLoadMore: () => void;
  };

  // Toolbar (all optional; nothing rendered when all omitted).
  /** Filter surface, pre-gated by the page (e.g. `!isDesktop ? <FilterDrawer/> : null`). */
  filter?: React.ReactNode;
  /** Right-aligned action, e.g. a "New …" button. */
  toolbarEnd?: React.ReactNode;
  toolbarClassName?: string;

  // Pagination — desktop footer only (mobile uses `infinite`). Omit for none.
  pagination?: {
    page: number;
    maxPage: number;
    pageSize: number;
    pageItemCount: number;
    total: number;
    onPageChange: (next: number) => void;
    rangeLabel: (args: { from: number; to: number; total: number }) => string;
    prevLabel: string;
    nextLabel: string;
  };

  // Empty / error copy, shared by the table <tr> states and mobile <div> states.
  states: {
    hasActiveFilter: boolean;
    onClearFilter: () => void;
    onRetry: () => void;
    empty: TableEmptyCopy;
    /** Defaults to `empty` (pages with no filters). */
    filtered?: TableEmptyCopy;
    error: { title: string; body: string; retry: string };
  };
};

export function ResponsiveListView<T, C extends string>({
  items,
  getKey,
  isLoading = false,
  isError = false,
  table,
  tableHeader,
  renderRow,
  extraColSpan = 1,
  renderCard,
  loadingRows,
  infinite,
  filter,
  toolbarEnd,
  toolbarClassName,
  pagination,
  states,
}: ResponsiveListViewProps<T, C>) {
  const isDesktop = useIsDesktop();
  const colSpan = table.visibleColumns.size + extraColSpan;
  const filtered = states.filtered ?? states.empty;

  const footer = !pagination ? null : isLoading ? (
    <div className="px-4 py-3">
      <TablePaginationSkeleton />
    </div>
  ) : !isError && items.length > 0 ? (
    <div className="px-4 py-3">
      <TablePagination
        page={pagination.page}
        maxPage={pagination.maxPage}
        pageSize={pagination.pageSize}
        pageItemCount={pagination.pageItemCount}
        total={pagination.total}
        onPageChange={pagination.onPageChange}
        rangeLabel={pagination.rangeLabel}
        prevLabel={pagination.prevLabel}
        nextLabel={pagination.nextLabel}
      />
    </div>
  ) : null;

  const emptyNode = useMemo(
    () => (
      <div className="mx-auto flex max-w-prose-narrow flex-col items-center gap-2 text-center">
        <p className="text-lg font-semibold text-ink-900">
          {states.hasActiveFilter ? filtered.title : states.empty.title}
        </p>
        <p className="text-md text-ink-500">
          {states.hasActiveFilter ? filtered.body : states.empty.body}
        </p>
        {states.hasActiveFilter ? (
          <Button
            type="button"
            variant="neutral"
            onClick={states.onClearFilter}
            className="mt-2"
          >
            {filtered.cta}
          </Button>
        ) : null}
      </div>
    ),
    [filtered, states],
  );

  const errorNode = useMemo(
    () => (
      <div
        role="alert"
        className="mx-auto flex max-w-prose-narrow flex-col items-center gap-2 text-center"
      >
        <p className="text-lg font-semibold text-ink-900">
          {states.error.title}
        </p>
        <p className="text-md text-ink-500">{states.error.body}</p>
        <Button
          type="button"
          variant="secondary"
          onClick={states.onRetry}
          className="mt-2"
        >
          {states.error.retry}
        </Button>
      </div>
    ),
    [states],
  );

  const showToolbar = filter || toolbarEnd;

  return (
    <div className="flex flex-col gap-3">
      {showToolbar ? (
        <Toolbar className={toolbarClassName}>
          <ToolbarGroup>{filter}</ToolbarGroup>
          {toolbarEnd ? <ToolbarGroup>{toolbarEnd}</ToolbarGroup> : null}
        </Toolbar>
      ) : null}

      {isDesktop ? (
        <Table footer={footer}>
          {isLoading ? <TableLoadingHeader colSpan={colSpan} /> : tableHeader}
          <TableBody>
            {isLoading ? (
              <TableLoadingRows
                colSpan={colSpan}
                rows={loadingRows ?? TABLE_VIEWPORT_ROWS}
              />
            ) : null}
            {!isLoading && isError ? (
              <TableErrorRow
                colSpan={colSpan}
                title={states.error.title}
                body={states.error.body}
                retry={states.error.retry}
                onRetry={states.onRetry}
              />
            ) : null}
            {!isLoading && !isError && items.length === 0 ? (
              <TableEmptyRow
                colSpan={colSpan}
                hasFilter={states.hasActiveFilter}
                empty={states.empty}
                filtered={filtered}
                onClear={states.onClearFilter}
              />
            ) : null}
            {!isLoading && !isError && items.length > 0 ? (
              <>
                {items.map(renderRow)}
                <TableFillerRows
                  count={TABLE_VIEWPORT_ROWS - items.length}
                  colSpan={colSpan}
                />
              </>
            ) : null}
          </TableBody>
        </Table>
      ) : (
        <MobileDataList
          items={items}
          getKey={getKey}
          isLoading={isLoading}
          isError={isError}
          empty={emptyNode}
          error={errorNode}
          loadingRows={loadingRows}
          infinite={infinite}
          renderCard={renderCard}
        />
      )}
    </div>
  );
}