"use client";

import {
  type Column,
  type ColumnDef,
  flexRender,
  getCoreRowModel,
  getSortedRowModel,
  type RowSelectionState,
  type SortingState,
  type Table as ReactTable,
  useReactTable,
} from "@tanstack/react-table";
import {
  ArrowDown,
  ArrowLeft,
  ArrowRight,
  ArrowUp,
  ChevronsUpDown,
  MoreHorizontal,
} from "lucide-react";
import * as React from "react";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import {
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { cn } from "@/lib/utils";

type TransactionStatus =
  | "posted"
  | "pending"
  | "review"
  | "excluded"
  | "completed";

type Transaction = {
  id: string;
  date: string;
  name: string;
  description: string;
  amount: number;
  taxAmount: number;
  category: string;
  counterparty: string;
  tags: string[];
  account: string;
  method: string;
  assigned: string | null;
  status: TransactionStatus;
};

type ColumnMeta = {
  headerClassName?: string;
  cellClassName?: string;
  width?: number | string;
  minWidth?: number | string;
  maxWidth?: number | string;
};

type UseTableScrollOptions = {
  scrollAmount?: number;
  useColumnWidths?: boolean;
  startFromColumn?: number;
};

type UseStickyColumnsOptions<TData> = {
  table?: ReactTable<TData>;
};

type HorizontalPaginationProps = {
  canScrollLeft: boolean;
  canScrollRight: boolean;
  onScrollLeft: () => void;
  onScrollRight: () => void;
  className?: string;
};

const formatCurrency = (value: number) =>
  new Intl.NumberFormat("fa-IR", {
    style: "currency",
    currency: "IRR",
  }).format(value);

const dateFormatter = new Intl.DateTimeFormat("fa-IR", {
  dateStyle: "medium",
});

const formatDate = (value: string) => {
  const date = new Date(value);
  return Number.isNaN(date.getTime()) ? value : dateFormatter.format(date);
};

const statusLabels: Record<TransactionStatus, string> = {
  posted: "ثبت‌شده",
  pending: "در انتظار پیگیری",
  review: "نیاز به بررسی",
  excluded: "مستثنا",
  completed: "تکمیل‌شده",
};

const methodLabels: Record<string, string> = {
  Transfer: "انتقال",
  Card: "کارت",
  Wire: "حواله",
  ACH: "ACH",
  Manual: "دستی",
};

const statusStyles: Record<TransactionStatus, string> = {
  posted:
    "border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-500/40 dark:bg-emerald-500/10",
  pending:
    "border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-500/40 dark:bg-amber-500/10",
  review:
    "border-slate-200 bg-slate-50 text-slate-700 dark:border-slate-500/40 dark:bg-slate-500/10",
  excluded:
    "border-rose-200 bg-rose-50 text-rose-600 dark:border-rose-500/40 dark:bg-rose-500/10",
  completed:
    "border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-500/40 dark:bg-emerald-500/10",
};

const transactions: Transaction[] = [
  {
    id: "txn-2082",
    date: "2024-05-14",
    name: "واریز درگاه پرداخت",
    description: "درآمد اشتراک برای دوره آوریل",
    amount: 14825.32,
    taxAmount: 0,
    category: "درآمد",
    counterparty: "Stripe Payments",
    tags: ["اشتراک", "تکرارشونده"],
    account: "حساب جاری بنیان‌گذاران · ۰۴۲۱",
    method: "Transfer",
    assigned: "حنا لی",
    status: "posted",
  },
  {
    id: "txn-2081",
    date: "2024-05-13",
    name: "Linear",
    description: "اشتراک فضای کاری تیم محصول",
    amount: -320,
    taxAmount: 26.4,
    category: "نرم‌افزار",
    counterparty: "Linear HQ",
    tags: ["محصول", "SaaS"],
    account: "کارت کپیتال وان · ۵۵۲۲",
    method: "Card",
    assigned: "مارکوس لین",
    status: "pending",
  },
  {
    id: "txn-2080",
    date: "2024-05-12",
    name: "ری یو آی FX",
    description: "تبدیل IRR به EUR برای فاکتورهای برلین",
    amount: -184.35,
    taxAmount: 0,
    category: "کارمزد بانکی",
    counterparty: "Mercury Bank",
    tags: ["بین‌المللی"],
    account: "خزانه · ۱۱۸۹",
    method: "Wire",
    assigned: "نوح پاتل",
    status: "review",
  },
  {
    id: "txn-2079",
    date: "2024-05-10",
    name: "حقوق Gusto",
    description: "دوره ۴۲ · مهندسی و بازاریابی",
    amount: -48600,
    taxAmount: 8123.45,
    category: "حقوق و دستمزد",
    counterparty: "Gusto",
    tags: ["حقوق", "آمریکا"],
    account: "عملیاتی · ۷۷۳۰",
    method: "ACH",
    assigned: null,
    status: "completed",
  },
  {
    id: "txn-2078",
    date: "2024-05-09",
    name: "AWS",
    description: "مصرف آوریل در کلاسترهای لبه و استنتاج",
    amount: -9832.11,
    taxAmount: 0,
    category: "زیرساخت",
    counterparty: "Amazon Web Services",
    tags: ["زیرساخت", "مصرف"],
    account: "خزانه · ۱۱۸۹",
    method: "Transfer",
    assigned: "حنا لی",
    status: "posted",
  },
  {
    id: "txn-2077",
    date: "2024-05-08",
    name: "Ramp",
    description: "پرواز و هتل برای اردوی تیم",
    amount: -6120.88,
    taxAmount: 531.83,
    category: "سفر",
    counterparty: "Ramp Corporate",
    tags: ["اردو", "Q2"],
    account: "کارت کپیتال وان · ۵۵۲۲",
    method: "Card",
    assigned: "ایزابلا چو",
    status: "review",
  },
  {
    id: "txn-2076",
    date: "2024-05-07",
    name: "Notion",
    description: "پلن سازمانی برای تیم GTM",
    amount: -850,
    taxAmount: 72.25,
    category: "نرم‌افزار",
    counterparty: "Notion Labs",
    tags: ["GTM", "قرارداد"],
    account: "عملیاتی · ۷۷۳۰",
    method: "Card",
    assigned: null,
    status: "pending",
  },
  {
    id: "txn-2075",
    date: "2024-05-06",
    name: "تعدیل دستی",
    description: "تطبیق تعویض سخت‌افزار",
    amount: 0,
    taxAmount: 0,
    category: "تطبیق",
    counterparty: "داخلی",
    tags: [],
    account: "حساب جاری بنیان‌گذاران · ۰۴۲۱",
    method: "Manual",
    assigned: "مارکوس لین",
    status: "excluded",
  },
];

const columns: ColumnDef<Transaction>[] = [
  {
    id: "select",
    header: ({ table }) => (
      <div className="flex items-center justify-center">
        <Checkbox
          checked={
            table.getIsAllPageRowsSelected() ||
            (table.getIsSomePageRowsSelected() && "indeterminate")
          }
          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
          aria-label="انتخاب همه رکورد‌ها"
        />
      </div>
    ),
    cell: ({ row }) => (
      <div className="flex items-center justify-center">
        <Checkbox
          checked={row.getIsSelected()}
          onCheckedChange={(value) => row.toggleSelected(!!value)}
          aria-label="انتخاب رکورد"
        />
      </div>
    ),
    enableSorting: false,
    enableHiding: false,
    meta: {
      width: 48,
      minWidth: 48,
      headerClassName: "!px-0 !border-r-0",
      cellClassName: "!px-0 !border-r-0",
    } satisfies ColumnMeta,
  },
  {
    accessorKey: "date",
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="تاریخ به‌روزرسانی" />
    ),
    cell: ({ row }) => (
      <div className="flex flex-col">
        <span className="font-medium text-foreground">
          {formatDate(row.original.date)}
        </span>
        <span className="text-xs text-muted-foreground">{row.original.id}</span>
      </div>
    ),
    meta: {
      width: 140,
      minWidth: 140,
      headerClassName:
        "!border-r-0 before:absolute before:left-0 before:top-0 before:bottom-0 before:w-[0.5px] before:bg-border/60",
      cellClassName:
        "!border-r-0 before:absolute before:left-0 before:top-0 before:bottom-0 before:w-[0.5px] before:bg-border/60",
    } satisfies ColumnMeta,
  },
  {
    accessorKey: "description",
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="شرح" />
    ),
    cell: ({ row }) => (
      <div className="relative flex flex-col gap-1">
        <span className="font-medium text-foreground">{row.original.name}</span>
        <span className="text-[0.8125rem] text-muted-foreground">
          {row.original.description}
        </span>
      </div>
    ),
    meta: {
      width: 320,
      minWidth: 320,
      headerClassName:
        "!border-r-0 before:absolute before:left-0 before:top-0 before:bottom-0 before:w-[0.5px] before:bg-border/60 after:absolute after:right-0 after:top-0 after:bottom-0 after:w-[0.5px] after:bg-border/60",
      cellClassName:
        "!border-r-0 before:absolute before:left-0 before:top-0 before:bottom-0 before:w-[0.5px] before:bg-border/60 after:absolute after:right-0 after:top-0 after:bottom-0 after:w-[0.5px] after:bg-border/60",
    } satisfies ColumnMeta,
  },
  {
    accessorKey: "amount",
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="مبلغ معامله" />
    ),
    cell: ({ row }) => (
      <span
        className={cn(
          "font-semibold",
          row.original.amount > 0
            ? "text-emerald-600 dark:text-emerald-400"
            : "text-foreground",
        )}
      >
        {formatCurrency(row.original.amount)}
      </span>
    ),
    meta: {
      width: 150,
      minWidth: 150,
    } satisfies ColumnMeta,
  },
  {
    accessorKey: "taxAmount",
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="مالیات" />
    ),
    cell: ({ row }) => (
      <span className="text-muted-foreground">
        {row.original.taxAmount ? formatCurrency(row.original.taxAmount) : ""}
      </span>
    ),
    meta: {
      width: 130,
      minWidth: 130,
    } satisfies ColumnMeta,
  },
  {
    accessorKey: "category",
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="دسته‌بندی" />
    ),
    cell: ({ row }) => (
      <Badge variant="outline" className="font-medium">
        {row.original.category}
      </Badge>
    ),
    meta: {
      width: 200,
      minWidth: 200,
    } satisfies ColumnMeta,
  },
  {
    accessorKey: "counterparty",
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="از / به" />
    ),
    cell: ({ row }) => (
      <div>
        <p className="text-[0.8125rem] font-medium">
          {row.original.counterparty}
        </p>
        <p className="text-xs text-muted-foreground">
          {methodLabels[row.original.method] ?? row.original.method}
        </p>
      </div>
    ),
    meta: {
      width: 220,
      minWidth: 220,
    } satisfies ColumnMeta,
  },
  {
    accessorKey: "tags",
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="برچسب‌ها" />
    ),
    cell: ({ row }) => (
      <div className="flex flex-wrap gap-2">
        {row.original.tags.length ? (
          row.original.tags.map((tag) => (
            <Badge key={tag} variant="secondary" className="rounded-full">
              {tag}
            </Badge>
          ))
        ) : (
          <span className="text-xs text-muted-foreground">بدون برچسب</span>
        )}
      </div>
    ),
    enableSorting: false,
    meta: {
      width: 260,
      minWidth: 260,
    } satisfies ColumnMeta,
  },
  {
    accessorKey: "account",
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="حساب" />
    ),
    cell: ({ row }) => <span>{row.original.account}</span>,
    meta: {
      width: 220,
      minWidth: 220,
    } satisfies ColumnMeta,
  },
  {
    accessorKey: "method",
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="روش پرداخت" />
    ),
    cell: ({ row }) => (
      <Badge variant="outline">
        {methodLabels[row.original.method] ?? row.original.method}
      </Badge>
    ),
    meta: {
      width: 160,
      minWidth: 160,
    } satisfies ColumnMeta,
  },
  {
    accessorKey: "assigned",
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="مسئول" />
    ),
    cell: ({ row }) =>
      row.original.assigned ? (
        <span className="font-medium">{row.original.assigned}</span>
      ) : (
        <Badge variant="outline" className="text-muted-foreground">
          بدون مسئول
        </Badge>
      ),
    meta: {
      width: 200,
      minWidth: 200,
    } satisfies ColumnMeta,
  },
  {
    accessorKey: "status",
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="وضعیت معامله" />
    ),
    cell: ({ row }) => (
      <Badge variant="outline" className={statusStyles[row.original.status]}>
        {statusLabels[row.original.status]}
      </Badge>
    ),
    meta: {
      width: 160,
      minWidth: 160,
    } satisfies ColumnMeta,
  },
  {
    id: "actions",
    header: () => <span className="sr-only">عملیات</span>,
    cell: () => (
      <div className="flex items-center justify-center">
        <Button variant="ghost" size="icon" className="h-8 w-8">
          <MoreHorizontal className="h-4 w-4" />
          <span className="sr-only">باز کردن منو</span>
        </Button>
      </div>
    ),
    enableSorting: false,
    enableHiding: false,
    meta: {
      width: 48,
      minWidth: 48,
      headerClassName:
        "!px-0 md:sticky md:right-0 z-20 before:absolute before:left-0 before:top-0 before:bottom-0 before:w-[0.5px] before:bg-border/60",
      cellClassName:
        "!px-0 md:sticky md:right-0 z-20 before:absolute before:left-0 before:top-0 before:bottom-0 before:w-[0.5px] before:bg-border/60",
    } satisfies ColumnMeta,
  },
];

function useStickyColumns<TData>({ table }: UseStickyColumnsOptions<TData>) {
  const isVisible = React.useCallback(
    (id: string) =>
      table
        ?.getAllLeafColumns()
        .some((column) => column.id === id && column.getIsVisible()) ?? true,
    [table],
  );

  const stickyPositions = React.useMemo(() => {
    let position = 0;
    const positions: Record<string, number> = {};

    positions.select = position;
    position += 48;

    if (isVisible("date")) {
      positions.date = position;
      position += 140;
    }

    if (isVisible("description")) {
      positions.description = position;
      position += 320;
    }

    return positions;
  }, [isVisible]);

  const getStickyStyle = React.useCallback(
    (columnId: string) => {
      const left = stickyPositions[columnId];
      if (left === undefined) return undefined;
      return {
        "--stick-left": `${left}px`,
      } as React.CSSProperties;
    },
    [stickyPositions],
  );

  const getStickyClassName = React.useCallback(
    (columnId: string, baseClassName?: string, isHeader = false) => {
      const stickyColumns = ["select", "date", "description"];
      const isSticky = stickyColumns.includes(columnId);
      return cn(
        baseClassName,
        isSticky && "md:sticky md:left-[var(--stick-left)]",
        isSticky && "isolate",
        isSticky && (isHeader ? "z-30" : "z-20"),
      );
    },
    [],
  );

  return {
    getStickyStyle,
    getStickyClassName,
  };
}

function useTableScroll(options: UseTableScrollOptions = {}) {
  const {
    scrollAmount = 120,
    useColumnWidths = false,
    startFromColumn = 0,
  } = options;

  const containerRef = React.useRef<HTMLDivElement | null>(null);
  const [canScrollLeft, setCanScrollLeft] = React.useState(false);
  const [canScrollRight, setCanScrollRight] = React.useState(false);
  const [isScrollable, setIsScrollable] = React.useState(false);
  const currentColumnIndex = React.useRef(startFromColumn);
  const isScrollingProgrammatically = React.useRef(false);
  const scrollTimeoutRef = React.useRef<number | undefined>(undefined);

  const getColumnPositions = React.useCallback(() => {
    const container = containerRef.current;
    if (!container) return [];

    const table = container.querySelector("table");
    if (!table) return [];

    const headerRow = table.querySelector("thead tr");
    if (!headerRow) return [];

    const columns = Array.from(headerRow.querySelectorAll("th"));
    const positions: number[] = [];
    let currentPosition = 0;

    for (const column of columns) {
      positions.push(currentPosition);
      currentPosition += (column as HTMLElement).offsetWidth;
    }

    return positions;
  }, []);

  const syncColumnIndex = React.useCallback(() => {
    const container = containerRef.current;
    if (!container || !useColumnWidths || isScrollingProgrammatically.current)
      return;

    const allColumnPositions = getColumnPositions();
    if (allColumnPositions.length === 0) return;

    const currentScrollLeft = container.scrollLeft;
    const maxScrollLeft = container.scrollWidth - container.clientWidth;

    if (currentScrollLeft <= 10) {
      currentColumnIndex.current = startFromColumn;
      return;
    }
    if (currentScrollLeft >= maxScrollLeft - 10) {
      currentColumnIndex.current = allColumnPositions.length - 1;
      return;
    }

    let accumulatedDistance = 0;
    let detectedColumn = startFromColumn;

    for (let i = startFromColumn; i < allColumnPositions.length - 1; i++) {
      const columnStart = allColumnPositions[i] ?? 0;
      const columnEnd = allColumnPositions[i + 1] ?? 0;
      const columnWidth = columnEnd - columnStart;
      const nextDistance = accumulatedDistance + columnWidth;

      if (
        Math.abs(currentScrollLeft - accumulatedDistance) <=
        Math.abs(currentScrollLeft - nextDistance)
      ) {
        detectedColumn = i;
        break;
      }

      accumulatedDistance = nextDistance;
      detectedColumn = i + 1;
    }

    currentColumnIndex.current = Math.max(
      startFromColumn,
      Math.min(detectedColumn, allColumnPositions.length - 1),
    );
  }, [useColumnWidths, startFromColumn, getColumnPositions]);

  const checkScrollability = React.useCallback(() => {
    const container = containerRef.current;
    if (!container) return;

    const { scrollWidth, clientWidth } = container;
    const isScrollableTable = scrollWidth > clientWidth;

    if (useColumnWidths) {
      syncColumnIndex();

      const allColumnPositions = getColumnPositions();
      const maxColumnIndex = allColumnPositions.length - 1;

      const newCanScrollLeft =
        currentColumnIndex.current > startFromColumn ||
        container.scrollLeft > 10;
      const newCanScrollRight = currentColumnIndex.current < maxColumnIndex;

      setIsScrollable(isScrollableTable);
      setCanScrollLeft(newCanScrollLeft);
      setCanScrollRight(newCanScrollRight);
    } else {
      const { scrollLeft } = container;
      setIsScrollable(isScrollableTable);
      setCanScrollLeft(scrollLeft > 0);
      setCanScrollRight(scrollLeft < scrollWidth - clientWidth - 1);
    }
  }, [useColumnWidths, startFromColumn, getColumnPositions, syncColumnIndex]);

  const scrollLeft = React.useCallback(
    (smooth = true) => {
      const container = containerRef.current;
      if (!container) return;

      if (useColumnWidths) {
        const allColumnPositions = getColumnPositions();
        if (allColumnPositions.length === 0) return;

        if (
          currentColumnIndex.current <= startFromColumn &&
          container.scrollLeft <= 0
        ) {
          return;
        }

        if (
          currentColumnIndex.current <= startFromColumn &&
          container.scrollLeft > 0
        ) {
          isScrollingProgrammatically.current = true;
          container.scrollTo({
            left: 0,
            behavior: "smooth",
          });

          window.setTimeout(() => {
            isScrollingProgrammatically.current = false;
            syncColumnIndex();
            checkScrollability();
          }, 500);
          return;
        }

        const originalColumnIndex = currentColumnIndex.current;
        currentColumnIndex.current = currentColumnIndex.current - 1;

        const currentScrollLeft = container.scrollLeft;
        const maxScrollLeft = container.scrollWidth - container.clientWidth;

        let targetScrollLeft: number;

        if (Math.abs(currentScrollLeft - maxScrollLeft) < 10) {
          const lastColumnStart = allColumnPositions[originalColumnIndex] ?? 0;
          const lastColumnEnd =
            allColumnPositions[originalColumnIndex + 1] ??
            lastColumnStart + 150;
          const lastColumnWidth = lastColumnEnd - lastColumnStart;

          targetScrollLeft = Math.max(0, currentScrollLeft - lastColumnWidth);
        } else {
          targetScrollLeft = 0;
          for (let i = startFromColumn; i < currentColumnIndex.current; i++) {
            const columnStart = allColumnPositions[i] ?? 0;
            const columnEnd = allColumnPositions[i + 1] ?? 0;
            const columnWidth = columnEnd - columnStart;
            targetScrollLeft += columnWidth;
          }
        }

        isScrollingProgrammatically.current = true;

        container.scrollTo({
          left: targetScrollLeft,
          behavior: "smooth",
        });

        window.setTimeout(() => {
          isScrollingProgrammatically.current = false;
          syncColumnIndex();
          checkScrollability();
        }, 500);
      } else {
        container.scrollBy({
          left: -scrollAmount,
          behavior: smooth ? "smooth" : "auto",
        });
      }
    },
    [
      checkScrollability,
      getColumnPositions,
      scrollAmount,
      startFromColumn,
      syncColumnIndex,
      useColumnWidths,
    ],
  );

  const scrollRight = React.useCallback(
    (smooth = true) => {
      const container = containerRef.current;
      if (!container) return;

      if (useColumnWidths) {
        const allColumnPositions = getColumnPositions();
        if (allColumnPositions.length === 0) return;
        const maxColumnIndex = allColumnPositions.length - 1;

        if (currentColumnIndex.current >= maxColumnIndex) {
          return;
        }

        currentColumnIndex.current = currentColumnIndex.current + 1;

        isScrollingProgrammatically.current = true;

        if (currentColumnIndex.current === maxColumnIndex) {
          container.scrollTo({
            left: container.scrollWidth - container.clientWidth,
            behavior: "smooth",
          });
        } else {
          let targetScrollLeft = 0;
          for (let i = startFromColumn; i < currentColumnIndex.current; i++) {
            const columnStart = allColumnPositions[i] ?? 0;
            const columnEnd = allColumnPositions[i + 1] ?? 0;
            targetScrollLeft += columnEnd - columnStart;
          }

          container.scrollTo({
            left: targetScrollLeft,
            behavior: "smooth",
          });
        }

        window.setTimeout(() => {
          isScrollingProgrammatically.current = false;
          syncColumnIndex();
          checkScrollability();
        }, 500);
      } else {
        container.scrollBy({
          left: scrollAmount,
          behavior: smooth ? "smooth" : "auto",
        });
      }
    },
    [
      checkScrollability,
      getColumnPositions,
      scrollAmount,
      startFromColumn,
      syncColumnIndex,
      useColumnWidths,
    ],
  );

  React.useEffect(() => {
    const container = containerRef.current;
    if (!container) return;

    currentColumnIndex.current = startFromColumn;
    checkScrollability();

    const handleScroll = () => {
      if (isScrollingProgrammatically.current) return;

      if (scrollTimeoutRef.current !== undefined) {
        window.clearTimeout(scrollTimeoutRef.current);
      }

      scrollTimeoutRef.current = window.setTimeout(() => {
        checkScrollability();
      }, 100);
    };

    const handleResize = () => {
      currentColumnIndex.current = startFromColumn;
      checkScrollability();
    };

    container.addEventListener("scroll", handleScroll);
    window.addEventListener("resize", handleResize);

    let resizeObserver: ResizeObserver | undefined;
    if (typeof ResizeObserver !== "undefined") {
      resizeObserver = new ResizeObserver(() => {
        currentColumnIndex.current = startFromColumn;
        checkScrollability();
      });

      resizeObserver.observe(container);
    }

    return () => {
      container.removeEventListener("scroll", handleScroll);
      window.removeEventListener("resize", handleResize);
      if (resizeObserver) {
        resizeObserver.disconnect();
      }
      if (scrollTimeoutRef.current !== undefined) {
        window.clearTimeout(scrollTimeoutRef.current);
      }
    };
  }, [checkScrollability, startFromColumn]);

  return {
    containerRef,
    canScrollLeft,
    canScrollRight,
    isScrollable,
    scrollLeft,
    scrollRight,
  };
}

const HorizontalPagination = ({
  canScrollLeft,
  canScrollRight,
  onScrollLeft,
  onScrollRight,
  className,
}: HorizontalPaginationProps) => {
  return (
    <div className={cn("flex items-center gap-2", className)}>
      <Button
        variant="outline"
        size="icon"
        disabled={!canScrollLeft}
        className="h-7 w-7"
        onClick={onScrollLeft}
        aria-label="پیمایش به ستون‌های قبلی"
      >
        <ArrowLeft
          className={cn(
            "h-3.5 w-3.5",
            canScrollLeft ? "text-primary" : "text-muted-foreground",
          )}
        />
      </Button>
      <Button
        variant="outline"
        size="icon"
        disabled={!canScrollRight}
        className="h-7 w-7"
        onClick={onScrollRight}
        aria-label="پیمایش به ستون‌های بعدی"
      >
        <ArrowRight
          className={cn(
            "h-3.5 w-3.5",
            canScrollRight ? "text-primary" : "text-muted-foreground",
          )}
        />
      </Button>
    </div>
  );
};

type DataTableColumnHeaderProps<TData, TValue> = {
  column: Column<TData, TValue>;
  title: string;
};

const DataTableColumnHeader = <TData, TValue>({
  column,
  title,
}: DataTableColumnHeaderProps<TData, TValue>) => {
  const canSort = column.getCanSort();
  const sorted = column.getIsSorted();

  if (!canSort) {
    return (
      <div className="flex items-center gap-1.5 text-[0.8125rem] text-muted-foreground">
        <span>{title}</span>
      </div>
    );
  }

  return (
    <button
      type="button"
      className={cn(
        "flex w-full items-center justify-between gap-1.5",
        "py-2 text-[0.8125rem]",
        "text-muted-foreground hover:text-foreground",
        "cursor-pointer transition-colors outline-none",
      )}
      onClick={() => column.toggleSorting(sorted === "asc")}
    >
      <span>{title}</span>
      <span className="ms-2 flex h-3.5 w-3.5 items-center justify-center">
        {sorted === "desc" ? (
          <ArrowDown className="h-3 w-3" />
        ) : sorted === "asc" ? (
          <ArrowUp className="h-3 w-3" />
        ) : (
          <ChevronsUpDown className="h-3 w-3 opacity-70" />
        )}
      </span>
    </button>
  );
};

export const DataTable26 = ({ className }: { className?: string }) => {
  const [sorting, setSorting] = React.useState<SortingState>([
    { id: "date", desc: true },
  ]);
  const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({});

  const table = useReactTable({
    data: transactions,
    columns,
    state: {
      sorting,
      rowSelection,
    },
    onSortingChange: setSorting,
    onRowSelectionChange: setRowSelection,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
    getRowId: (row) => row.id,
  });

  const { getStickyStyle, getStickyClassName } = useStickyColumns({ table });

  const tableScroll = useTableScroll({
    useColumnWidths: true,
    startFromColumn: 3,
  });

  const visibleColumnCount = table.getVisibleLeafColumns().length;
  const visibleColumnIds = table
    .getVisibleLeafColumns()
    .map((column) => column.id);
  const actionsColumnIndex = visibleColumnIds.indexOf("actions");
  const rightStickyDividerTargetId =
    actionsColumnIndex > 0 ? visibleColumnIds[actionsColumnIndex - 1] : null;

  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="mb-8 text-start">
          <h2 className="text-xl font-bold tracking-tight">
            جدول تراکنش‌ها با کنترل‌های افقی
          </h2>
          <p className="mt-2 max-w-2xl text-muted-foreground">
            ستون‌های اول چسبان، کنترل‌های پیمایش و نوار عملیات واکنش‌گرا، مرور
            داده‌های مالی متراکم را آسان می‌کنند.
          </p>
        </div>

        <div className="overflow-hidden rounded-lg border border-border/60 bg-card [--dt-cell-bg:var(--background)] [--dt-header-bg:var(--muted)] [--dt-row-hover-bg:color-mix(in_oklab,var(--background)_98%,var(--foreground)_2%)] [--dt-row-selected-bg:color-mix(in_oklab,var(--background)_98%,var(--foreground)_2%)] [--dt-row-selected-hover-bg:color-mix(in_oklab,var(--background)_96%,var(--foreground)_4%)] dark:[--dt-header-bg:var(--card)] dark:[--dt-row-hover-bg:var(--muted)] dark:[--dt-row-selected-bg:var(--muted)] dark:[--dt-row-selected-hover-bg:color-mix(in_oklab,var(--muted)_80%,var(--foreground)_20%)]">
          <div
            ref={tableScroll.containerRef}
            className="overflow-x-auto overscroll-x-none"
          >
            <table className="w-full min-w-[1200px] caption-bottom text-[0.8125rem]">
              <TableHeader className="sticky top-0 z-10 border-b-[0.5px] border-border/60 bg-[var(--dt-header-bg)]">
                {table.getHeaderGroups().map((headerGroup) => (
                  <TableRow
                    key={headerGroup.id}
                    className="!border-0 hover:bg-transparent"
                  >
                    {headerGroup.headers.map((header) => {
                      const meta =
                        (header.column.columnDef.meta as ColumnMeta) ?? {};
                      const sizeStyle: React.CSSProperties = {};
                      if (meta.width !== undefined) {
                        sizeStyle.width =
                          typeof meta.width === "number"
                            ? `${meta.width}px`
                            : meta.width;
                      }
                      if (meta.minWidth !== undefined) {
                        sizeStyle.minWidth =
                          typeof meta.minWidth === "number"
                            ? `${meta.minWidth}px`
                            : meta.minWidth;
                      }
                      if (meta.maxWidth !== undefined) {
                        sizeStyle.maxWidth =
                          typeof meta.maxWidth === "number"
                            ? `${meta.maxWidth}px`
                            : meta.maxWidth;
                      }
                      const baseClassName = cn(
                        "relative !h-11 border-r-[0.5px] border-border/60 bg-[var(--dt-header-bg)] !px-3 text-start align-middle !text-[0.8125rem] font-medium !text-muted-foreground whitespace-nowrap last:border-r-0",
                        header.column.id === rightStickyDividerTargetId &&
                        "!border-r-0",
                        meta.headerClassName,
                      );

                      const stickyStyle =
                        header.column.id === "actions"
                          ? undefined
                          : getStickyStyle(header.column.id);

                      return (
                        <TableHead
                          key={header.id}
                          colSpan={header.colSpan}
                          className={getStickyClassName(
                            header.column.id,
                            baseClassName,
                            true,
                          )}
                          style={{ ...sizeStyle, ...(stickyStyle ?? {}) }}
                        >
                          {header.isPlaceholder ? null : header.column.id ===
                            "description" ? (
                            <div className="flex items-center justify-between gap-2">
                              {flexRender(
                                header.column.columnDef.header,
                                header.getContext(),
                              )}
                              <HorizontalPagination
                                canScrollLeft={tableScroll.canScrollLeft}
                                canScrollRight={tableScroll.canScrollRight}
                                onScrollLeft={tableScroll.scrollLeft}
                                onScrollRight={tableScroll.scrollRight}
                                className="hidden md:flex"
                              />
                            </div>
                          ) : (
                            flexRender(
                              header.column.columnDef.header,
                              header.getContext(),
                            )
                          )}
                        </TableHead>
                      );
                    })}
                  </TableRow>
                ))}
              </TableHeader>
              <TableBody>
                {table.getRowModel().rows?.length ? (
                  table.getRowModel().rows.map((row) => (
                    <TableRow
                      key={row.id}
                      data-state={row.getIsSelected() && "selected"}
                      className="group h-11 !border-b-[0.5px] border-border/60 bg-[var(--dt-row-bg)] transition-colors [--dt-row-bg:var(--dt-cell-bg)] last:border-b-0 hover:[--dt-row-bg:var(--dt-row-hover-bg)] data-[state=selected]:[--dt-row-bg:var(--dt-row-selected-bg)] data-[state=selected]:hover:[--dt-row-bg:var(--dt-row-selected-hover-bg)]"
                    >
                      {row.getVisibleCells().map((cell) => {
                        const meta =
                          (cell.column.columnDef.meta as ColumnMeta) ?? {};
                        const sizeStyle: React.CSSProperties = {};
                        if (meta.width !== undefined) {
                          sizeStyle.width =
                            typeof meta.width === "number"
                              ? `${meta.width}px`
                              : meta.width;
                        }
                        if (meta.minWidth !== undefined) {
                          sizeStyle.minWidth =
                            typeof meta.minWidth === "number"
                              ? `${meta.minWidth}px`
                              : meta.minWidth;
                        }
                        if (meta.maxWidth !== undefined) {
                          sizeStyle.maxWidth =
                            typeof meta.maxWidth === "number"
                              ? `${meta.maxWidth}px`
                              : meta.maxWidth;
                        }
                        const baseClassName = cn(
                          "relative h-11 border-r-[0.5px] border-border/60 bg-[var(--dt-row-bg)] !px-3 !py-2 align-middle !text-[0.8125rem] text-foreground whitespace-nowrap last:border-r-0",
                          cell.column.id === rightStickyDividerTargetId &&
                          "!border-r-0",
                          meta.cellClassName,
                        );

                        const stickyStyle =
                          cell.column.id === "actions"
                            ? undefined
                            : getStickyStyle(cell.column.id);

                        return (
                          <TableCell
                            key={cell.id}
                            className={getStickyClassName(
                              cell.column.id,
                              baseClassName,
                              false,
                            )}
                            style={{ ...sizeStyle, ...(stickyStyle ?? {}) }}
                          >
                            {flexRender(
                              cell.column.columnDef.cell,
                              cell.getContext(),
                            )}
                          </TableCell>
                        );
                      })}
                    </TableRow>
                  ))
                ) : (
                  <TableRow>
                    <TableCell
                      colSpan={visibleColumnCount}
                      className="h-24 text-center text-[0.8125rem] text-muted-foreground"
                    >
                      تراکنشی یافت نشد.
                    </TableCell>
                  </TableRow>
                )}
              </TableBody>
            </table>
          </div>
        </div>
      </div>
    </section>
  );
};