Row Actions Column

"use client";

import type { ReactNode } from "react";
import {
  ArchiveIcon,
  BanIcon,
  CopyIcon,
  DownloadIcon,
  EyeIcon,
  PencilIcon,
  RefreshCwIcon,
  Share2Icon,
  Trash2Icon,
} from "lucide-react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

import { defineDataListSchema } from "@/components/f-ui/data-list-internals/schema/define-data-list-schema";
import type { RowAction } from "@/components/f-ui/data-list-internals/row-actions/row-action-types";
import { useDataList } from "@/components/f-ui/data-list-internals/use-data-list";
import { f } from "@/components/f-ui/field-types/catalog";
import { Table } from "@/components/f-ui/table/table";
import { DesignCompare } from "@/demos/_design/design-compare";

interface OrderRow {
  id: string;
  orderNumber: string;
  status: "confirmed" | "draft";
  syncing?: boolean;
}

const SINGLE_ROW: OrderRow[] = [
  { id: "ord-1001", orderNumber: "ORD-1001", status: "confirmed" },
];

const MIXED_ROWS: OrderRow[] = [
  { id: "ord-1001", orderNumber: "ORD-1001", status: "confirmed" },
  { id: "ord-1002", orderNumber: "ORD-1002", status: "draft", syncing: true },
  { id: "ord-1003", orderNumber: "ORD-1003", status: "draft" },
];

interface DocRow {
  id: string;
  name: string;
  status: "failed" | "indexed";
}

const DOC_ROWS: DocRow[] = [
  { id: "doc-1", name: "install-guide.pdf", status: "failed" },
  { id: "doc-2", name: "architecture.pdf", status: "indexed" },
];

const docSchema = defineDataListSchema<DocRow>({
  name: f.text({ label: "Name" }),
  status: f.enum({
    render: "status",
    label: "Status",
    variants: {
      failed: { label: "Failed", tone: "destructive" },
      indexed: { label: "Indexed", tone: "success" },
    },
  }),
});

const STATUS_VARIANTS = {
  confirmed: { label: "Confirmed", tone: "success" as const },
  draft: { label: "Draft", tone: "neutral" as const },
};

const textIdentitySchema = defineDataListSchema<OrderRow>({
  orderNumber: f.text({ label: "Order #" }),
  status: f.enum({
    render: "status",
    label: "Status",
    variants: STATUS_VARIANTS,
  }),
});

const linkIdentitySchema = defineDataListSchema<OrderRow>({
  orderNumber: f.link({
    label: "Order #",
    href: (row) => `#${row.id}`,
  }),
  status: f.enum({
    render: "status",
    label: "Status",
    variants: STATUS_VARIANTS,
  }),
});

const openOnlyActions: RowAction<OrderRow>[] = [
  {
    id: "open",
    label: "Open",
    icon: <EyeIcon className="size-3.5" />,
    onClick: () => {},
  },
];

const editDeleteActions: RowAction<OrderRow>[] = [
  {
    id: "edit",
    label: "Edit",
    icon: <PencilIcon className="size-3.5" />,
    onClick: () => {},
  },
  {
    id: "delete",
    label: "Delete",
    icon: <Trash2Icon className="size-3.5" />,
    variant: "destructive",
    placement: "trailing",
    onClick: () => {},
  },
];

/** Wrong: gray Delete on every row, including confirmed where Delete never applies. */
const availabilityWrongActions: RowAction<OrderRow>[] = [
  {
    id: "edit",
    label: "Edit",
    icon: <PencilIcon className="size-3.5" />,
    onClick: () => {},
  },
  {
    id: "delete",
    label: "Delete",
    icon: <Trash2Icon className="size-3.5" />,
    variant: "destructive",
    placement: "trailing",
    disabled: (row) => row.status !== "draft",
    onClick: () => {},
  },
];

/** Wrong: gray Retry on Indexed to even the column; Delete declared trailing but never shown. */
const ghostTrailingWrongActions: RowAction<DocRow>[] = [
  {
    id: "download",
    label: "Download",
    icon: <DownloadIcon className="size-3.5" />,
    onClick: () => {},
  },
  {
    id: "retry",
    label: "Retry",
    icon: <RefreshCwIcon className="size-3.5" />,
    disabled: (row) => row.status !== "failed",
    onClick: () => {},
  },
  {
    id: "delete",
    label: "Delete",
    icon: <Trash2Icon className="size-3.5" />,
    variant: "destructive",
    placement: "trailing",
    hidden: true,
    onClick: () => {},
  },
];

const downloadRetryActions: RowAction<DocRow>[] = [
  {
    id: "download",
    label: "Download",
    icon: <DownloadIcon className="size-3.5" />,
    onClick: () => {},
  },
  {
    id: "retry",
    label: "Retry",
    icon: <RefreshCwIcon className="size-3.5" />,
    hidden: (row) => row.status !== "failed",
    onClick: () => {},
  },
];

/** Right: hide Delete when not applicable; disable Edit only when teachable (syncing). */
const availabilityRightActions: RowAction<OrderRow>[] = [
  {
    id: "edit",
    label: "Edit",
    icon: <PencilIcon className="size-3.5" />,
    disabled: (row) => Boolean(row.syncing),
    disabledReason: "Wait until sync finishes",
    onClick: () => {},
  },
  {
    id: "delete",
    label: "Delete",
    icon: <Trash2Icon className="size-3.5" />,
    variant: "destructive",
    placement: "trailing",
    hidden: (row) => row.status !== "draft",
    onClick: () => {},
  },
];

/** Hairline only while trailing Delete is visible (drafts); confirmed has no pipe. */
const trailingMixedActions: RowAction<OrderRow>[] = [
  {
    id: "edit",
    label: "Edit",
    icon: <PencilIcon className="size-3.5" />,
    onClick: () => {},
  },
  {
    id: "delete",
    label: "Delete",
    icon: <Trash2Icon className="size-3.5" />,
    variant: "destructive",
    placement: "trailing",
    hidden: (row) => row.status !== "draft",
    onClick: () => {},
  },
];

/** Wrong: Delete sits in the primary cluster — no trailing hairline. */
const noTrailingSeparatorActions: RowAction<OrderRow>[] = [
  {
    id: "edit",
    label: "Edit",
    icon: <PencilIcon className="size-3.5" />,
    onClick: () => {},
  },
  {
    id: "delete",
    label: "Delete",
    icon: <Trash2Icon className="size-3.5" />,
    variant: "destructive",
    onClick: () => {},
  },
];

/** Danger-only — sole Delete stays inline (do not bury in More alone). */
const dangerOnlyActions: RowAction<OrderRow>[] = [
  {
    id: "delete",
    label: "Delete",
    icon: <Trash2Icon className="size-3.5" />,
    variant: "destructive",
    onClick: () => {},
  },
];

/**
 * Wrong danger-only: force menu display so the only op is behind ⋮.
 * (Kit default inline would keep Delete visible — this is the anti-pattern.)
 */
const dangerOnlyBuriedActions = dangerOnlyActions;

/** Multi-danger primaries — Delete + Void both inline when ≤ maxInline. */
const multiDangerInlineActions: RowAction<OrderRow>[] = [
  {
    id: "delete",
    label: "Delete",
    icon: <Trash2Icon className="size-3.5" />,
    variant: "destructive",
    onClick: () => {},
  },
  {
    id: "void",
    label: "Void",
    icon: <BanIcon className="size-3.5" />,
    variant: "destructive",
    onClick: () => {},
  },
];

/**
 * Author lists Delete first — kit reorders safes before danger; overflow
 * inserts a divider before the first destructive (open ⋮ to see).
 */
const safeThenDangerOverflowActions: RowAction<OrderRow>[] = [
  {
    id: "delete",
    label: "Delete",
    icon: <Trash2Icon className="size-3.5" />,
    variant: "destructive",
    onClick: () => {},
  },
  {
    id: "void",
    label: "Void",
    icon: <BanIcon className="size-3.5" />,
    variant: "destructive",
    onClick: () => {},
  },
  {
    id: "edit",
    label: "Edit",
    icon: <PencilIcon className="size-3.5" />,
    onClick: () => {},
  },
  {
    id: "duplicate",
    label: "Duplicate",
    icon: <CopyIcon className="size-3.5" />,
    onClick: () => {},
  },
];

/** Many ops — Edit + secondary cluster + trailing Delete. */
const manyOpsActions: RowAction<OrderRow>[] = [
  {
    id: "edit",
    label: "Edit",
    icon: <PencilIcon className="size-3.5" />,
    onClick: () => {},
  },
  {
    id: "duplicate",
    label: "Duplicate",
    icon: <CopyIcon className="size-3.5" />,
    group: "secondary",
    onClick: () => {},
  },
  {
    id: "download",
    label: "Download",
    icon: <DownloadIcon className="size-3.5" />,
    group: "secondary",
    onClick: () => {},
  },
  {
    id: "share",
    label: "Share",
    icon: <Share2Icon className="size-3.5" />,
    group: "secondary",
    onClick: () => {},
  },
  {
    id: "archive",
    label: "Archive",
    icon: <ArchiveIcon className="size-3.5" />,
    group: "lifecycle",
    onClick: () => {},
  },
  {
    id: "delete",
    label: "Delete",
    icon: <Trash2Icon className="size-3.5" />,
    variant: "destructive",
    placement: "trailing",
    onClick: () => {},
  },
];

const queryClient = new QueryClient({
  defaultOptions: { queries: { retry: false } },
});

function DemoPanel({
  children,
  caption,
}: {
  children: ReactNode;
  caption: string;
}) {
  return (
    <div className="space-y-3">
      <div className="overflow-hidden rounded-md border bg-card">{children}</div>
      <p className="text-xs text-muted-foreground">{caption}</p>
    </div>
  );
}

function OpenOnlyEyeTable() {
  const dataList = useDataList({
    schema: textIdentitySchema,
    listCode: "design-row-actions-open-only",
    data: SINGLE_ROW,
    getRowId: (row) => row.id,
  });
  return (
    <Table
      dataList={dataList}
      rowActions={openOnlyActions}
      rowActionsPresentation="icon"
      rowActionsDisplay="inline"
    />
  );
}

function IdentityLinkTable() {
  const dataList = useDataList({
    schema: linkIdentitySchema,
    listCode: "design-row-actions-identity-link",
    data: SINGLE_ROW,
    getRowId: (row) => row.id,
  });
  return <Table dataList={dataList} />;
}

function TextActionsTable() {
  const dataList = useDataList({
    schema: linkIdentitySchema,
    listCode: "design-row-actions-text",
    data: SINGLE_ROW,
    getRowId: (row) => row.id,
  });
  return (
    <Table
      dataList={dataList}
      rowActions={editDeleteActions}
      rowActionsPresentation="text"
      rowActionsDisplay="inline"
    />
  );
}

function IconActionsTable() {
  const dataList = useDataList({
    schema: linkIdentitySchema,
    listCode: "design-row-actions-icon",
    data: SINGLE_ROW,
    getRowId: (row) => row.id,
  });
  return (
    <Table
      dataList={dataList}
      rowActions={editDeleteActions}
      rowActionsPresentation="icon"
      rowActionsDisplay="inline"
    />
  );
}

function AvailabilityWrongTable() {
  const dataList = useDataList({
    schema: linkIdentitySchema,
    listCode: "design-row-actions-availability-wrong",
    data: MIXED_ROWS,
    getRowId: (row) => row.id,
  });
  return (
    <Table
      dataList={dataList}
      rowActions={availabilityWrongActions}
      rowActionsPresentation="icon"
      rowActionsDisplay="inline"
    />
  );
}

function AvailabilityRightTable() {
  const dataList = useDataList({
    schema: linkIdentitySchema,
    listCode: "design-row-actions-availability-right",
    data: MIXED_ROWS,
    getRowId: (row) => row.id,
  });
  return (
    <Table
      dataList={dataList}
      rowActions={availabilityRightActions}
      rowActionsPresentation="icon"
      rowActionsDisplay="inline"
    />
  );
}

function GhostTrailingWrongTable() {
  const dataList = useDataList({
    schema: docSchema,
    listCode: "design-row-actions-ghost-trailing-wrong",
    data: DOC_ROWS,
    getRowId: (row) => row.id,
  });
  return (
    <Table
      dataList={dataList}
      rowActions={ghostTrailingWrongActions}
      rowActionsPresentation="icon"
      rowActionsDisplay="inline"
    />
  );
}

function DownloadRetryTable() {
  const dataList = useDataList({
    schema: docSchema,
    listCode: "design-row-actions-download-retry-right",
    data: DOC_ROWS,
    getRowId: (row) => row.id,
  });
  return (
    <Table
      dataList={dataList}
      rowActions={downloadRetryActions}
      rowActionsPresentation="icon"
      rowActionsDisplay="inline"
    />
  );
}

function TrailingWrongTable() {
  const dataList = useDataList({
    schema: linkIdentitySchema,
    listCode: "design-row-actions-trailing-wrong",
    data: SINGLE_ROW,
    getRowId: (row) => row.id,
  });
  return (
    <Table
      dataList={dataList}
      rowActions={noTrailingSeparatorActions}
      rowActionsPresentation="icon"
      rowActionsDisplay="inline"
    />
  );
}

function TrailingRightTable() {
  const dataList = useDataList({
    schema: linkIdentitySchema,
    listCode: "design-row-actions-trailing-right",
    data: MIXED_ROWS,
    getRowId: (row) => row.id,
  });
  return (
    <Table
      dataList={dataList}
      rowActions={trailingMixedActions}
      rowActionsPresentation="icon"
      rowActionsDisplay="inline"
    />
  );
}

function ManyOpsWallTable() {
  const dataList = useDataList({
    schema: linkIdentitySchema,
    listCode: "design-row-actions-many-wall",
    data: SINGLE_ROW,
    getRowId: (row) => row.id,
  });
  return (
    <Table
      dataList={dataList}
      rowActions={manyOpsActions}
      rowActionsPresentation="icon"
      rowActionsDisplay="inline"
      maxInlineRowActions={6}
    />
  );
}

function ManyOpsOverflowTable() {
  const dataList = useDataList({
    schema: linkIdentitySchema,
    listCode: "design-row-actions-many-overflow",
    data: SINGLE_ROW,
    getRowId: (row) => row.id,
  });
  return (
    <Table
      dataList={dataList}
      rowActions={manyOpsActions}
      rowActionsPresentation="icon"
      rowActionsDisplay="inline"
      maxInlineRowActions={2}
    />
  );
}

function DangerOnlyBuriedTable() {
  const dataList = useDataList({
    schema: linkIdentitySchema,
    listCode: "design-row-actions-danger-only-buried",
    data: SINGLE_ROW,
    getRowId: (row) => row.id,
  });
  return (
    <Table
      dataList={dataList}
      rowActions={dangerOnlyBuriedActions}
      rowActionsPresentation="icon"
      rowActionsDisplay="menu"
    />
  );
}

function DangerOnlyInlineTable() {
  const dataList = useDataList({
    schema: linkIdentitySchema,
    listCode: "design-row-actions-danger-only-inline",
    data: SINGLE_ROW,
    getRowId: (row) => row.id,
  });
  return (
    <Table
      dataList={dataList}
      rowActions={dangerOnlyActions}
      rowActionsPresentation="icon"
      rowActionsDisplay="inline"
      maxInlineRowActions={2}
    />
  );
}

function MultiDangerInlineTable() {
  const dataList = useDataList({
    schema: linkIdentitySchema,
    listCode: "design-row-actions-multi-danger-inline",
    data: SINGLE_ROW,
    getRowId: (row) => row.id,
  });
  return (
    <Table
      dataList={dataList}
      rowActions={multiDangerInlineActions}
      rowActionsPresentation="icon"
      rowActionsDisplay="inline"
      maxInlineRowActions={2}
    />
  );
}

function SafeThenDangerOverflowTable() {
  const dataList = useDataList({
    schema: linkIdentitySchema,
    listCode: "design-row-actions-safe-then-danger",
    data: SINGLE_ROW,
    getRowId: (row) => row.id,
  });
  return (
    <Table
      dataList={dataList}
      rowActions={safeThenDangerOverflowActions}
      rowActionsPresentation="icon"
      rowActionsDisplay="inline"
      maxInlineRowActions={1}
    />
  );
}

export function RowActionsIdentityLinkDemo() {
  return (
    <QueryClientProvider client={queryClient}>
      <DesignCompare
        wrong={
          <DemoPanel caption="Open-only Actions column — eye far from identity">
            <OpenOnlyEyeTable />
          </DemoPanel>
        }
        right={
          <DemoPanel caption="Identity link opens the row — no Actions column for Open alone">
            <IdentityLinkTable />
          </DemoPanel>
        }
      />
    </QueryClientProvider>
  );
}

export function RowActionsIconChromeDemo() {
  return (
    <QueryClientProvider client={queryClient}>
      <DesignCompare
        wrong={
          <DemoPanel caption="Text links in the Actions column — wider trailing chrome">
            <TextActionsTable />
          </DemoPanel>
        }
        right={
          <DemoPanel caption="Icon + tooltip; blank header (sr-only Actions); narrow width">
            <IconActionsTable />
          </DemoPanel>
        }
      />
    </QueryClientProvider>
  );
}

export function RowActionsGhostTrailingDemo() {
  return (
    <QueryClientProvider client={queryClient}>
      <DesignCompare
        wrong={
          <DemoPanel caption="Gray Retry on Indexed to even the column; Delete declared trailing but never shown">
            <GhostTrailingWrongTable />
          </DemoPanel>
        }
        right={
          <DemoPanel caption="Download every row; hide Retry on Indexed; do not declare Delete">
            <DownloadRetryTable />
          </DemoPanel>
        }
      />
    </QueryClientProvider>
  );
}

export function RowActionsAvailabilityDemo() {
  return (
    <QueryClientProvider client={queryClient}>
      <DesignCompare
        wrong={
          <DemoPanel caption="Gray Delete on confirmed rows — silent disabled forest">
            <AvailabilityWrongTable />
          </DemoPanel>
        }
        right={
          <DemoPanel caption="Hide Delete on confirmed (no leftover pipe); disable Edit only while syncing">
            <AvailabilityRightTable />
          </DemoPanel>
        }
      />
    </QueryClientProvider>
  );
}

export function RowActionsTrailingSeparatorDemo() {
  return (
    <QueryClientProvider client={queryClient}>
      <DesignCompare
        wrong={
          <DemoPanel caption="Delete mixed into the primary cluster — no group boundary">
            <TrailingWrongTable />
          </DemoPanel>
        }
        right={
          <DemoPanel caption="Hairline only on rows where Delete is visible; confirmed has no pipe">
            <TrailingRightTable />
          </DemoPanel>
        }
      />
    </QueryClientProvider>
  );
}

export function RowActionsManyOpsOverflowDemo() {
  return (
    <QueryClientProvider client={queryClient}>
      <DesignCompare
        wrong={
          <DemoPanel caption="Icon wall — every op forced inline (crowded, hard to scan)">
            <ManyOpsWallTable />
          </DemoPanel>
        }
        right={
          <DemoPanel caption="Keep Edit inline; rest in ⋮; Delete stays trailing after the hairline">
            <ManyOpsOverflowTable />
          </DemoPanel>
        }
      />
    </QueryClientProvider>
  );
}

/** Danger-only: wrong buries sole Delete in ⋮; right keeps it inline. */
export function RowActionsDangerOnlyDemo() {
  return (
    <QueryClientProvider client={queryClient}>
      <DesignCompare
        wrong={
          <DemoPanel caption="Wrong — sole Delete behind ⋮ (extra click, easy to miss)">
            <DangerOnlyBuriedTable />
          </DemoPanel>
        }
        right={
          <DemoPanel caption="Right — danger-only stays inline when count ≤ maxInline">
            <DangerOnlyInlineTable />
          </DemoPanel>
        }
      />
    </QueryClientProvider>
  );
}

/** Multi-danger inline + safe-then-danger overflow with menu divider. */
export function RowActionsDangerSurfaceDemo() {
  return (
    <QueryClientProvider client={queryClient}>
      <div className="space-y-6">
        <DemoPanel caption="Multi-danger — Delete + Void both inline (≤ maxInline); both marked destructive">
          <MultiDangerInlineTable />
        </DemoPanel>
        <DemoPanel caption="Author listed Delete first — kit shows Edit inline; open ⋮ for Duplicate then divider then Delete / Void">
          <SafeThenDangerOverflowTable />
        </DemoPanel>
      </div>
    </QueryClientProvider>
  );
}