import React, {
    forwardRef,
    useMemo,
    useRef,
    useEffect,
    useState,
    useCallback,
} from 'react'
import {
    Edit,
    Save,
    X,
    ChevronRight,
    ChevronDown,
    MoreHorizontal,
} from 'lucide-react'
import { styled, css } from 'styled-components'
import { motion } from 'framer-motion'
import { TableBodyProps } from './types'
import { getFrozenLeftOffset, getFrozenRightOffset } from '../TableHeader/utils'
import TableCell from '../TableCell'
import Block from '../../Primitives/Block/Block'
import { FOUNDATION_THEME } from '../../../tokens'
import Menu from '../../Menu/Menu'
import { MenuAlignment, MenuSide } from '../../Menu/types'
import Skeleton from '../../Skeleton/Skeleton'
import { getSkeletonState } from '../../Skeleton/utils'
import { useRowFlip } from '../hooks/useRowFlip'

import { Button, ButtonType, ButtonSize, ButtonSubType } from '../../Button'
import { Checkbox, CheckboxSize } from '../../Checkbox'
import { Tooltip } from '../../Tooltip'
import type { TableTokenType } from '../dataTable.tokens'
import { useResponsiveTokens } from '../../../hooks/useResponsiveTokens'
import { useTheme } from '../../../context/ThemeContext'
import { TooltipSide, TooltipAlign, TooltipSize } from '../../Tooltip/types'

const TableRow = styled.tr<{
    $tableToken: TableTokenType
    $isClickable?: boolean
    $customBackgroundColor?: string
    $hasCustomBackground?: boolean
    $isSticky?: boolean
    $headerHeight?: string
}>`
    border-bottom: ${({ $tableToken }) =>
        $tableToken.dataTable.table.body.cell.borderTop};
    background-color: ${({ $tableToken }) =>
        $tableToken.dataTable.table.body.row.backgroundColor};

    ${({
        $customBackgroundColor,
        $isClickable,
        $hasCustomBackground,
        $isSticky,
        $headerHeight,
        $tableToken,
    }) => css`
        ${$customBackgroundColor &&
        css`
            background-color: ${$customBackgroundColor} !important;
        `}

        ${$isClickable &&
        css`
            cursor: pointer;
        `}

        ${$isSticky &&
        css`
            position: sticky;
            top: ${$headerHeight || '46px'};
            z-index: 15;
        `}
    
    ${!$hasCustomBackground &&
        css`
            &:hover,
            &[data-focused-row='true'] {
                background-color: ${$tableToken.dataTable.table.body.row[
                    '&:hover'
                ].backgroundColor} !important;

                td {
                    background-color: ${$tableToken.dataTable.table.body.row[
                        '&:hover'
                    ].backgroundColor} !important;
                }
            }
        `}
    `}
`

const StyledTableCell = styled.td<{
    $tableToken: TableTokenType
    $width?: string
    $customBackgroundColor?: string
    $hasCustomBackground?: boolean
    $isFirstRow?: boolean
}>`
    ${({ $tableToken }) => $tableToken.dataTable.table.body.cell}
    padding: ${FOUNDATION_THEME.unit[12]} ${FOUNDATION_THEME.unit[16]};
    text-align: left;
    vertical-align: middle;
    background-color: ${({ $tableToken }) =>
        $tableToken.dataTable.table.body.row.backgroundColor};
    ${({ $isFirstRow, $tableToken }) =>
        !$isFirstRow &&
        css`
            border-top: ${$tableToken.dataTable.table.body.cell.borderTop};
        `}

    ${({
        $width,
        $customBackgroundColor,
        $hasCustomBackground,
        $tableToken,
    }) => css`
        ${$width &&
        css`
            width: ${$width};
            min-width: ${$width};
            max-width: ${$width};
        `}
        ${$customBackgroundColor &&
        css`
            background-color: ${$customBackgroundColor} !important;
        `}
        overflow: hidden;
        box-sizing: border-box;

        ${!$hasCustomBackground &&
        css`
            tr:hover & {
                background-color: ${$tableToken.dataTable.table.body.row[
                    '&:hover'
                ].backgroundColor} !important;
            }
        `}
    `}
`

const ExpandedCell = styled.td<{ $tableToken: TableTokenType }>`
    ${({ $tableToken }) => $tableToken.dataTable.table.body.cell.expandable}
    background-color: ${({ $tableToken }) =>
        $tableToken.dataTable.table.body.row['&:hover']
            .backgroundColor} !important;
    position: relative;
    overflow: hidden;
    z-index: 0;
`

const ExpandedRow = styled(TableRow)`
    background-color: ${({ $tableToken }) =>
        $tableToken.dataTable.table.body.row['&:hover'].backgroundColor};
`

const ExpandButton = styled.button<{ $tableToken: TableTokenType }>`
    display: flex;
    align-items: center;
    justify-content: center;
    padding: ${FOUNDATION_THEME.unit[4]};
    border: ${({ $tableToken }) =>
        $tableToken.dataTable.table.body.cell.expandable.expandButton.border};
    background: ${({ $tableToken }) =>
        $tableToken.dataTable.table.body.cell.expandable.expandButton
            .backgroundColor};
    cursor: ${({ $tableToken }) =>
        $tableToken.dataTable.table.body.cell.expandable.expandButton.cursor};
    border-radius: ${({ $tableToken }) =>
        $tableToken.dataTable.table.body.cell.expandable.expandButton
            .borderRadius};
    color: ${({ $tableToken }) =>
        $tableToken.dataTable.table.body.cell.expandable.expandButton.color};
    transition: ${({ $tableToken }) =>
        $tableToken.dataTable.table.body.cell.expandable.expandButton
            .transition};

    &:hover {
        background-color: ${({ $tableToken }) =>
            $tableToken.dataTable.table.body.cell.expandable.expandButton[
                '&:hover'
            ].backgroundColor};
        color: ${({ $tableToken }) =>
            $tableToken.dataTable.table.body.cell.expandable.expandButton[
                '&:hover'
            ].color};
    }

    visibility: visible;
    opacity: 1;

    &:focus-visible {
        outline: ${({ $tableToken }) =>
            $tableToken.header.actionIcons.columnManagerTrigger?.focusVisible
                .outline};
    }
`

type ActionsCellProps = {
    row: Record<string, unknown>
    index: number
    isEditing: boolean
    enableInlineEdit?: boolean
    rowActions?: {
        showEditAction?: boolean
        slot1?: {
            id: string
            text?: string
            buttonType?: ButtonType
            size?: ButtonSize
            subType?: ButtonSubType
            leadingIcon?: React.ReactNode
            trailingIcon?: React.ReactNode
            disabled?:
                | boolean
                | ((row: Record<string, unknown>, index: number) => boolean)
            hidden?:
                | boolean
                | ((row: Record<string, unknown>, index: number) => boolean)
            onClick: (row: Record<string, unknown>, index: number) => void
        }
        slot2?: {
            id: string
            text?: string
            buttonType?: ButtonType
            size?: ButtonSize
            subType?: ButtonSubType
            leadingIcon?: React.ReactNode
            trailingIcon?: React.ReactNode
            disabled?:
                | boolean
                | ((row: Record<string, unknown>, index: number) => boolean)
            hidden?:
                | boolean
                | ((row: Record<string, unknown>, index: number) => boolean)
            onClick: (row: Record<string, unknown>, index: number) => void
        }
    }
    onEditRow: (rowId: unknown) => void
    onSaveRow: (rowId: unknown) => void
    onCancelEdit: (rowId: unknown) => void
    idField: string
}

const ActionsCell: React.FC<ActionsCellProps> = ({
    row,
    index,
    isEditing,
    enableInlineEdit,
    rowActions,
    onEditRow,
    onSaveRow,
    onCancelEdit,
    idField,
}) => {
    const containerRef = useRef<HTMLDivElement>(null)
    const [visibleButtons, setVisibleButtons] = useState<number>(0)
    const [shouldShowMenu, setShouldShowMenu] = useState(false)

    // Build all available buttons
    const allButtons = useMemo(() => {
        const buttons: Array<{
            id: string
            type: 'edit' | 'save' | 'cancel' | 'slot1' | 'slot2'
            element: React.ReactNode
            menuItem?: {
                label: string
                onClick: () => void
                disabled?: boolean
                leadingSlot?: React.ReactNode
            }
        }> = []

        // Edit actions
        if (enableInlineEdit && rowActions?.showEditAction !== false) {
            if (isEditing) {
                buttons.push({
                    id: 'save',
                    type: 'save',
                    element: (
                        <Button
                            key="save"
                            onClick={() => onSaveRow(row[idField])}
                            aria-label="Save row"
                            title="Save"
                            buttonType={ButtonType.SECONDARY}
                            leadingIcon={<Save size={16} />}
                            size={ButtonSize.SMALL}
                        />
                    ),
                    menuItem: {
                        label: 'Save',
                        onClick: () => onSaveRow(row[idField]),
                        leadingSlot: <Save size={16} />,
                    },
                })
                buttons.push({
                    id: 'cancel',
                    type: 'cancel',
                    element: (
                        <Button
                            key="cancel"
                            onClick={() => onCancelEdit(row[idField])}
                            aria-label="Cancel editing row"
                            title="Cancel"
                            buttonType={ButtonType.SECONDARY}
                            leadingIcon={<X size={16} />}
                            size={ButtonSize.SMALL}
                        />
                    ),
                    menuItem: {
                        label: 'Cancel',
                        onClick: () => onCancelEdit(row[idField]),
                        leadingSlot: <X size={16} />,
                    },
                })
            } else {
                buttons.push({
                    id: 'edit',
                    type: 'edit',
                    element: (
                        <Button
                            key="edit"
                            onClick={() => onEditRow(row[idField])}
                            aria-label="Edit row"
                            title="Edit"
                            buttonType={ButtonType.SECONDARY}
                            leadingIcon={<Edit size={16} />}
                            size={ButtonSize.SMALL}
                        />
                    ),
                    menuItem: {
                        label: 'Edit',
                        onClick: () => onEditRow(row[idField]),
                        leadingSlot: <Edit size={16} />,
                    },
                })
            }
        }

        // Custom slot 1
        if (
            rowActions?.slot1 &&
            !(
                (typeof rowActions.slot1.hidden === 'function'
                    ? rowActions.slot1.hidden(row, index)
                    : rowActions.slot1.hidden) ?? false
            )
        ) {
            const slot1 = rowActions.slot1
            const isDisabled =
                typeof slot1.disabled === 'function'
                    ? slot1.disabled(row, index)
                    : (slot1.disabled ?? false)

            buttons.push({
                id: slot1.id,
                type: 'slot1',
                element: (
                    <Button
                        key="slot1"
                        buttonType={slot1.buttonType ?? ButtonType.SECONDARY}
                        size={slot1.size ?? ButtonSize.SMALL}
                        subType={slot1.subType ?? ButtonSubType.DEFAULT}
                        text={slot1.text}
                        leadingIcon={slot1.leadingIcon}
                        trailingIcon={slot1.trailingIcon}
                        disabled={isDisabled}
                        onClick={() => slot1.onClick(row, index)}
                    />
                ),
                menuItem: {
                    label: slot1.text || 'Action',
                    onClick: () => slot1.onClick(row, index),
                    disabled: isDisabled,
                    leadingSlot: slot1.leadingIcon,
                },
            })
        }

        // Custom slot 2
        if (
            rowActions?.slot2 &&
            !(
                (typeof rowActions.slot2.hidden === 'function'
                    ? rowActions.slot2.hidden(row, index)
                    : rowActions.slot2.hidden) ?? false
            )
        ) {
            const slot2 = rowActions.slot2
            const isDisabled =
                typeof slot2.disabled === 'function'
                    ? slot2.disabled(row, index)
                    : (slot2.disabled ?? false)

            buttons.push({
                id: slot2.id,
                type: 'slot2',
                element: (
                    <Button
                        key="slot2"
                        buttonType={slot2.buttonType ?? ButtonType.SECONDARY}
                        size={slot2.size ?? ButtonSize.SMALL}
                        subType={slot2.subType ?? ButtonSubType.DEFAULT}
                        text={slot2.text}
                        leadingIcon={slot2.leadingIcon}
                        trailingIcon={slot2.trailingIcon}
                        disabled={isDisabled}
                        onClick={() => slot2.onClick(row, index)}
                    />
                ),
                menuItem: {
                    label: slot2.text || 'Action',
                    onClick: () => slot2.onClick(row, index),
                    disabled: isDisabled,
                    leadingSlot: slot2.leadingIcon,
                },
            })
        }

        return buttons
    }, [
        row,
        index,
        isEditing,
        enableInlineEdit,
        rowActions,
        onEditRow,
        onSaveRow,
        onCancelEdit,
        idField,
    ])

    // Calculate how many buttons can fit
    useEffect(() => {
        if (!containerRef.current || allButtons.length === 0) {
            setVisibleButtons(allButtons.length)
            setShouldShowMenu(false)
            return
        }

        const container = containerRef.current
        const containerWidth = container.offsetWidth
        const gap = 4 // gap between buttons
        const menuButtonWidth = 32 // approximate width of three dots button

        // Approximate button widths (can be more precise by measuring)
        const estimateButtonWidth = (button: (typeof allButtons)[0]) => {
            if (
                button.type === 'save' ||
                button.type === 'cancel' ||
                button.type === 'edit'
            ) {
                return 70 // Edit buttons are icon + text
            }
            // For custom buttons, estimate based on text length
            const textLength = button.menuItem?.label?.length || 0
            return Math.max(60, textLength * 8 + 40) // rough estimation
        }

        let totalWidth = 0
        let fitsCount = 0

        // First, try to fit all buttons without menu
        for (let i = 0; i < allButtons.length; i++) {
            const buttonWidth = estimateButtonWidth(allButtons[i])
            const widthWithGap = totalWidth + (i > 0 ? gap : 0) + buttonWidth

            if (widthWithGap <= containerWidth) {
                totalWidth = widthWithGap
                fitsCount = i + 1
            } else {
                break
            }
        }

        // If all buttons fit, no need for menu
        if (fitsCount === allButtons.length) {
            setVisibleButtons(allButtons.length)
            setShouldShowMenu(false)
            return
        }

        // If not all buttons fit, recalculate with menu button space
        totalWidth = 0
        fitsCount = 0

        for (let i = 0; i < allButtons.length; i++) {
            const buttonWidth = estimateButtonWidth(allButtons[i])
            const widthWithGap = totalWidth + (i > 0 ? gap : 0) + buttonWidth
            const totalWithMenu = widthWithGap + gap + menuButtonWidth

            if (totalWithMenu <= containerWidth) {
                totalWidth = widthWithGap
                fitsCount = i + 1
            } else {
                break
            }
        }

        // Ensure we have at least 1 button visible if possible, rest go to menu
        if (fitsCount === 0 && allButtons.length > 0) {
            const firstButtonWidth = estimateButtonWidth(allButtons[0])
            if (firstButtonWidth + gap + menuButtonWidth <= containerWidth) {
                fitsCount = 1
            }
        }

        setVisibleButtons(Math.max(0, fitsCount))
        setShouldShowMenu(
            fitsCount < allButtons.length && allButtons.length > 0
        )
    }, [allButtons])

    const visibleButtonElements = allButtons
        .slice(0, visibleButtons)
        .map((b) => b.element)
    const menuItems = allButtons.slice(visibleButtons).map((button) => ({
        label: button.menuItem?.label || '',
        onClick: button.menuItem?.onClick || (() => {}),
        disabled: button.menuItem?.disabled || false,
        slot1: button.menuItem?.leadingSlot,
    }))

    return (
        <Block
            ref={containerRef}
            display="flex"
            alignItems="center"
            justifyContent="flex-start"
            gap={FOUNDATION_THEME.unit[4]}
            width="100%"
            onClick={(e) => e.stopPropagation()}
            style={{
                fontSize: 'inherit',
                fontFamily: 'inherit',
                fontWeight: 'inherit',
                lineHeight: 'inherit',
            }}
        >
            {visibleButtonElements}

            {shouldShowMenu && menuItems.length > 0 && (
                <Menu
                    trigger={
                        <Button
                            buttonType={ButtonType.SECONDARY}
                            size={ButtonSize.SMALL}
                            subType={ButtonSubType.ICON_ONLY}
                            leadingIcon={<MoreHorizontal size={16} />}
                            aria-label="More actions"
                            title="More actions"
                        />
                    }
                    items={[
                        {
                            items: menuItems,
                        },
                    ]}
                    alignment={MenuAlignment.END}
                    side={MenuSide.BOTTOM}
                />
            )}
        </Block>
    )
}

const TableBody = forwardRef<
    HTMLTableSectionElement,
    TableBodyProps<Record<string, unknown>>
>(
    (
        {
            currentData,
            dataVersion,
            visibleColumns,
            idField,
            tableTitle,
            selectedRows,
            editingRows,
            editValues,
            expandedRows,
            enableInlineEdit = false,
            showActionsColumn = true,
            enableColumnManager = true,
            enableRowExpansion = false,
            enableRowSelection = true,
            rowSelectionConfig,
            rowActions,
            columnFreeze = 0,
            columnFreezeRight = 0,
            measuredFrozenWidths,
            mobileConfig,
            mobileOverflowColumns = [],
            onMobileOverflowClick,
            renderExpandedRow,
            isRowExpandable,
            onRowSelect,
            onEditRow,
            onSaveRow,
            onCancelEdit,
            onRowExpand,
            onFieldChange,
            onRowClick,
            getColumnWidth,
            getRowStyle,
            getDisplayValue,
            dateLabel,
            isLoading = false,
            showSkeleton = false,
            skeletonVariant = 'pulse',
            isRowLoading,
            focusedCell,
            onCellFocus,
            enableRowAnimation = false,
            rowAnimationConfig,
        },
        ref
    ) => {
        const colSpan = useMemo(() => {
            let span = visibleColumns.length
            if (enableRowSelection) span += 1
            if (enableRowExpansion) span += 1
            // Actions column - only on desktop or when not using mobile column overflow
            if (
                showActionsColumn &&
                (enableInlineEdit || rowActions) &&
                !(mobileConfig?.isMobile && mobileConfig?.enableColumnOverflow)
            ) {
                span += 1
            }
            if (enableColumnManager) span += 1
            return span
        }, [
            visibleColumns.length,
            enableRowSelection,
            enableRowExpansion,
            showActionsColumn,
            enableInlineEdit,
            enableColumnManager,
            rowActions,
            mobileConfig,
        ])

        const tableToken = useResponsiveTokens('TABLE') as TableTokenType
        const { theme } = useTheme()
        const skeletonBackgroundColor =
            theme === 'dark'
                ? tableToken.dataTable.table.body.row['&:hover'].backgroundColor
                : undefined

        const hasAnySubtext = visibleColumns.some(
            (col) => col.headerSubtext && col.headerSubtext.trim() !== ''
        )
        const headerHeight = hasAnySubtext ? '56px' : '46px'

        const globalLoadingState = isLoading || showSkeleton
        const { shouldShowSkeleton: globalShouldShowSkeleton } =
            getSkeletonState(globalLoadingState)

        const getCellSkeletonState = (
            row: Record<string, unknown>,
            rowIndex: number,
            column: (typeof visibleColumns)[0]
        ) => {
            const rowIsLoading = isRowLoading
                ? isRowLoading(row, rowIndex)
                : false
            const columnShowSkeleton =
                column.showSkeleton !== undefined
                    ? column.showSkeleton
                    : undefined

            let shouldShow = false
            if (columnShowSkeleton !== undefined) {
                shouldShow = columnShowSkeleton
            } else if (rowIsLoading) {
                shouldShow = true
            } else {
                shouldShow = globalShouldShowSkeleton
            }

            const variant = column.skeletonVariant || skeletonVariant

            return {
                shouldShowSkeleton: shouldShow,
                skeletonVariant: variant,
            }
        }
        const tbodyKey = useMemo(() => {
            if (dataVersion !== undefined) return `tbody-${String(dataVersion)}`

            const len = currentData.length
            if (len === 0) return 'tbody-empty'

            const firstId = String(currentData[0][idField])
            const lastId = String(currentData[len - 1][idField])
            return `tbody-${len}-${firstId}-${lastId}`
        }, [currentData, dataVersion, idField])

        const orderedRowIds = useMemo(
            () => currentData.map((row) => String(row[idField])),
            [currentData, idField]
        )

        const { register } = useRowFlip(
            enableRowAnimation ? orderedRowIds : [],
            enableRowAnimation ? rowAnimationConfig : undefined
        )

        const getFlipRefCallback = useCallback(
            (rowId: string) => (el: HTMLTableRowElement | null) => {
                if (!enableRowAnimation) return
                register(rowId, el)
            },
            [enableRowAnimation, register]
        )

        const isPageTransition = !enableRowAnimation

        return (
            <motion.tbody
                key={isPageTransition ? tbodyKey : undefined}
                ref={ref}
                initial={isPageTransition ? { opacity: 0 } : undefined}
                animate={isPageTransition ? { opacity: 1 } : undefined}
                transition={isPageTransition ? { duration: 0.3 } : undefined}
                style={{
                    backgroundColor:
                        tableToken.dataTable.table.body.backgroundColor,
                }}
            >
                {currentData.length > 0
                    ? currentData.map((row, index) => {
                          const rowId = String(row[idField])
                          const isEditing = editingRows[rowId]
                          const isExpanded = expandedRows[rowId]
                          const canExpand = isRowExpandable
                              ? isRowExpandable(row, index)
                              : true

                          const rowStyling = getRowStyle
                              ? getRowStyle(row, index)
                              : {}
                          const hasCustomBackground =
                              !!rowStyling.backgroundColor

                          const rowIsLoading = isRowLoading
                              ? isRowLoading(row, index)
                              : false
                          const rowShouldShowSkeleton =
                              rowIsLoading || globalShouldShowSkeleton

                          const isSelected = selectedRows[rowId] || false
                          const rowAriaLabel = `Row ${index + 1}${isSelected ? ', selected' : ''}${isExpanded ? ', expanded' : ''}`

                          const getAbsoluteColIndex = (
                              relativeColIndex: number
                          ) => {
                              let colIndex = relativeColIndex
                              if (enableRowExpansion) colIndex++
                              if (enableRowSelection) colIndex++
                              return colIndex
                          }

                          const rowKey = enableRowAnimation
                              ? rowId
                              : `${rowId}-${index}`

                          return (
                              <React.Fragment key={rowKey}>
                                  <TableRow
                                      $tableToken={tableToken}
                                      ref={
                                          enableRowAnimation
                                              ? getFlipRefCallback(rowId)
                                              : undefined
                                      }
                                      $isClickable={!!onRowClick}
                                      $customBackgroundColor={
                                          rowStyling.backgroundColor
                                      }
                                      $hasCustomBackground={hasCustomBackground}
                                      $isSticky={isExpanded}
                                      $headerHeight={headerHeight}
                                      role="row"
                                      aria-rowindex={index + 1}
                                      aria-selected={
                                          enableRowSelection
                                              ? isSelected
                                              : undefined
                                      }
                                      aria-expanded={
                                          enableRowExpansion && canExpand
                                              ? isExpanded
                                              : undefined
                                      }
                                      aria-label={rowAriaLabel}
                                      data-focused-row={
                                          enableRowSelection
                                              ? isSelected
                                              : undefined
                                      }
                                      data-row-id={rowId}
                                      data-row-index={index}
                                      onClick={() =>
                                          onRowClick && onRowClick(row, index)
                                      }
                                      style={{
                                          ...Object.fromEntries(
                                              Object.entries(rowStyling).filter(
                                                  ([key]) =>
                                                      key !== 'backgroundColor'
                                              )
                                          ),
                                      }}
                                  >
                                      {enableRowExpansion && (
                                          <StyledTableCell
                                              $tableToken={tableToken}
                                              $width="50px"
                                              $customBackgroundColor={
                                                  rowStyling.backgroundColor
                                              }
                                              $hasCustomBackground={
                                                  hasCustomBackground
                                              }
                                              $isFirstRow={index === 0}
                                              data-row-index={index}
                                              data-col-index={0}
                                              tabIndex={
                                                  focusedCell?.rowIndex ===
                                                      index &&
                                                  focusedCell?.colIndex === 0
                                                      ? 0
                                                      : -1
                                              }
                                              onFocus={() =>
                                                  onCellFocus?.(index, 0)
                                              }
                                              onClick={() =>
                                                  onCellFocus?.(index, 0)
                                              }
                                              role="gridcell"
                                              style={{
                                                  minWidth: `${FOUNDATION_THEME.unit[52]}`,
                                                  maxWidth: `${FOUNDATION_THEME.unit[52]}`,
                                                  ...(columnFreeze > 0 && {
                                                      position: 'sticky',
                                                      left: '0px',
                                                      zIndex: 9,
                                                      backgroundColor:
                                                          rowStyling.backgroundColor ||
                                                          tableToken.dataTable
                                                              .table.body.row
                                                              .backgroundColor,
                                                      fontSize:
                                                          tableToken.dataTable
                                                              .table.body.cell
                                                              .fontSize,
                                                  }),
                                                  outline: 'none',
                                              }}
                                          >
                                              {rowShouldShowSkeleton ? (
                                                  <Skeleton
                                                      variant={skeletonVariant}
                                                      loading
                                                      backgroundColor={
                                                          skeletonBackgroundColor
                                                      }
                                                      width="20px"
                                                      height="28px"
                                                      borderRadius="4px"
                                                      style={{
                                                          margin: 'auto',
                                                          display: 'block',
                                                      }}
                                                  />
                                              ) : (
                                                  <Block
                                                      display="flex"
                                                      alignItems="center"
                                                      justifyContent="center"
                                                      onClick={(e) =>
                                                          e.stopPropagation()
                                                      }
                                                  >
                                                      {canExpand ? (
                                                          <ExpandButton
                                                              $tableToken={
                                                                  tableToken
                                                              }
                                                              type="button"
                                                              aria-label={
                                                                  isExpanded
                                                                      ? 'Collapse row'
                                                                      : 'Expand row'
                                                              }
                                                              aria-expanded={
                                                                  isExpanded
                                                                      ? 'true'
                                                                      : 'false'
                                                              }
                                                              onClick={() =>
                                                                  onRowExpand(
                                                                      row[
                                                                          idField
                                                                      ]
                                                                  )
                                                              }
                                                              title={
                                                                  isExpanded
                                                                      ? 'Collapse row'
                                                                      : 'Expand row'
                                                              }
                                                              style={{
                                                                  display:
                                                                      'flex',
                                                              }}
                                                          >
                                                              {isExpanded ? (
                                                                  <ChevronDown
                                                                      size={16}
                                                                  />
                                                              ) : (
                                                                  <ChevronRight
                                                                      size={16}
                                                                  />
                                                              )}
                                                          </ExpandButton>
                                                      ) : (
                                                          <></>
                                                      )}
                                                  </Block>
                                              )}
                                          </StyledTableCell>
                                      )}

                                      {enableRowSelection && (
                                          <StyledTableCell
                                              $tableToken={tableToken}
                                              $width="50px"
                                              $customBackgroundColor={
                                                  rowStyling.backgroundColor
                                              }
                                              $hasCustomBackground={
                                                  hasCustomBackground
                                              }
                                              $isFirstRow={index === 0}
                                              data-row-index={index}
                                              data-col-index={
                                                  enableRowExpansion ? 1 : 0
                                              }
                                              tabIndex={
                                                  focusedCell?.rowIndex ===
                                                      index &&
                                                  focusedCell?.colIndex ===
                                                      (enableRowExpansion
                                                          ? 1
                                                          : 0)
                                                      ? 0
                                                      : -1
                                              }
                                              onFocus={() =>
                                                  onCellFocus?.(
                                                      index,
                                                      enableRowExpansion ? 1 : 0
                                                  )
                                              }
                                              onClick={() =>
                                                  onCellFocus?.(
                                                      index,
                                                      enableRowExpansion ? 1 : 0
                                                  )
                                              }
                                              role="gridcell"
                                              style={{
                                                  minWidth: `${FOUNDATION_THEME.unit[52]}`,
                                                  maxWidth: `${FOUNDATION_THEME.unit[52]}`,
                                                  ...(columnFreeze > 0 && {
                                                      position: 'sticky',
                                                      left: enableRowExpansion
                                                          ? '50px'
                                                          : '0px',
                                                      zIndex: 9,
                                                      backgroundColor:
                                                          rowStyling.backgroundColor ||
                                                          tableToken.dataTable
                                                              .table.body.row
                                                              .backgroundColor,
                                                      fontSize:
                                                          tableToken.dataTable
                                                              .table.body.cell
                                                              .fontSize,
                                                  }),
                                                  outline: 'none',
                                              }}
                                          >
                                              <Block
                                                  display="flex"
                                                  alignItems="center"
                                                  justifyContent="center"
                                                  width={
                                                      FOUNDATION_THEME.unit[40]
                                                  }
                                                  onClick={(e) =>
                                                      e.stopPropagation()
                                                  }
                                              >
                                                  {(() => {
                                                      const isDisabledByConfig =
                                                          rowSelectionConfig?.isDisabled
                                                              ? rowSelectionConfig.isDisabled(
                                                                    row,
                                                                    index
                                                                )
                                                              : false

                                                      const isRowDisabled =
                                                          isEditing ||
                                                          rowShouldShowSkeleton ||
                                                          isDisabledByConfig

                                                      const tooltipText =
                                                          isDisabledByConfig &&
                                                          rowSelectionConfig?.disabledText
                                                              ? rowSelectionConfig.disabledText(
                                                                    row,
                                                                    index
                                                                )
                                                              : null

                                                      const checkboxElement = (
                                                          <Checkbox
                                                              checked={
                                                                  !!selectedRows[
                                                                      rowId
                                                                  ]
                                                              }
                                                              onCheckedChange={() =>
                                                                  onRowSelect(
                                                                      row[
                                                                          idField
                                                                      ],
                                                                      index
                                                                  )
                                                              }
                                                              size={
                                                                  CheckboxSize.MEDIUM
                                                              }
                                                              disabled={
                                                                  isRowDisabled
                                                              }
                                                              aria-label={`Select row ${index + 1}${tableTitle ? ` in ${tableTitle}` : ''}`}
                                                          />
                                                      )

                                                      return tooltipText ? (
                                                          <Tooltip
                                                              content={
                                                                  tooltipText
                                                              }
                                                              side={
                                                                  TooltipSide.TOP
                                                              }
                                                              align={
                                                                  TooltipAlign.CENTER
                                                              }
                                                              size={
                                                                  TooltipSize.SMALL
                                                              }
                                                          >
                                                              <div
                                                                  style={{
                                                                      display:
                                                                          'inline-block',
                                                                  }}
                                                              >
                                                                  {
                                                                      checkboxElement
                                                                  }
                                                              </div>
                                                          </Tooltip>
                                                      ) : (
                                                          checkboxElement
                                                      )
                                                  })()}
                                              </Block>
                                          </StyledTableCell>
                                      )}

                                      {visibleColumns.map(
                                          (column, colIndex) => {
                                              const columnStyles =
                                                  getColumnWidth(
                                                      column,
                                                      colIndex
                                                  )
                                              const currentValue = isEditing
                                                  ? editValues[rowId]?.[
                                                        column.field
                                                    ]
                                                  : row[column.field]

                                              const getFrozenBodyStyles =
                                                  (): React.CSSProperties => {
                                                      const rightStickyOffsetPx =
                                                          enableColumnManager
                                                              ? parseInt(
                                                                    String(
                                                                        FOUNDATION_THEME
                                                                            .unit[48]
                                                                    ).replace(
                                                                        'px',
                                                                        ''
                                                                    ) || '48',
                                                                    10
                                                                )
                                                              : 0
                                                      const rightFreezeStartIndex =
                                                          Math.max(
                                                              visibleColumns.length -
                                                                  columnFreezeRight,
                                                              0
                                                          )

                                                      if (
                                                          columnFreezeRight >
                                                              0 &&
                                                          colIndex >=
                                                              rightFreezeStartIndex
                                                      ) {
                                                          return {
                                                              position:
                                                                  'sticky' as const,
                                                              right: `${getFrozenRightOffset(
                                                                  colIndex,
                                                                  columnFreezeRight,
                                                                  visibleColumns,
                                                                  getColumnWidth,
                                                                  rightStickyOffsetPx
                                                              )}px`,
                                                              zIndex: 8,
                                                              backgroundColor:
                                                                  rowStyling.backgroundColor ||
                                                                  tableToken
                                                                      .dataTable
                                                                      .table
                                                                      .body.row
                                                                      .backgroundColor,
                                                              ...(colIndex ===
                                                                  rightFreezeStartIndex && {
                                                                  borderLeft:
                                                                      tableToken
                                                                          .dataTable
                                                                          .table
                                                                          .body
                                                                          .cell
                                                                          .borderTop,
                                                              }),
                                                          }
                                                      }

                                                      if (
                                                          colIndex >=
                                                          columnFreeze
                                                      )
                                                          return {
                                                              padding: '0 16px',
                                                          }

                                                      const currentColumnStyles =
                                                          getColumnWidth(
                                                              column,
                                                              colIndex
                                                          )
                                                      const cellMinWidth =
                                                          column.minWidth ||
                                                          String(
                                                              currentColumnStyles.minWidth ??
                                                                  '140px'
                                                          )
                                                      const cellMaxWidth =
                                                          column.maxWidth ||
                                                          String(
                                                              currentColumnStyles.maxWidth ??
                                                                  '200px'
                                                          )
                                                      const leftOffset =
                                                          getFrozenLeftOffset(
                                                              colIndex,
                                                              columnFreeze,
                                                              enableRowExpansion ??
                                                                  false,
                                                              enableRowSelection ??
                                                                  true,
                                                              visibleColumns,
                                                              getColumnWidth,
                                                              measuredFrozenWidths
                                                          )
                                                      const isLastFrozenColumn =
                                                          colIndex ===
                                                          columnFreeze - 1

                                                      return {
                                                          position:
                                                              'sticky' as const,
                                                          left: `${leftOffset}px`,
                                                          zIndex: 8,
                                                          backgroundColor:
                                                              rowStyling.backgroundColor ||
                                                              tableToken
                                                                  .dataTable
                                                                  .table.body
                                                                  .row
                                                                  .backgroundColor,
                                                          minWidth:
                                                              cellMinWidth,
                                                          maxWidth:
                                                              cellMaxWidth,
                                                          width: 'auto',
                                                          boxSizing:
                                                              'border-box' as const,
                                                          overflow: 'hidden',
                                                          ...(isLastFrozenColumn && {
                                                              borderRight:
                                                                  tableToken
                                                                      .dataTable
                                                                      .table
                                                                      .body.cell
                                                                      .borderTop,
                                                          }),
                                                      }
                                                  }

                                              const cellSkeleton =
                                                  getCellSkeletonState(
                                                      row,
                                                      index,
                                                      column
                                                  )

                                              if (
                                                  cellSkeleton.shouldShowSkeleton
                                              ) {
                                                  const absoluteColIndex =
                                                      getAbsoluteColIndex(
                                                          colIndex
                                                      )
                                                  return (
                                                      <StyledTableCell
                                                          $tableToken={
                                                              tableToken
                                                          }
                                                          key={`${rowKey}-${String(column.field)}`}
                                                          $customBackgroundColor={
                                                              rowStyling.backgroundColor
                                                          }
                                                          $hasCustomBackground={
                                                              hasCustomBackground
                                                          }
                                                          $isFirstRow={
                                                              index === 0
                                                          }
                                                          data-row-index={index}
                                                          data-col-index={
                                                              absoluteColIndex
                                                          }
                                                          tabIndex={
                                                              focusedCell?.rowIndex ===
                                                                  index &&
                                                              focusedCell?.colIndex ===
                                                                  absoluteColIndex
                                                                  ? 0
                                                                  : -1
                                                          }
                                                          onFocus={() =>
                                                              onCellFocus?.(
                                                                  index,
                                                                  absoluteColIndex
                                                              )
                                                          }
                                                          onClick={() =>
                                                              onCellFocus?.(
                                                                  index,
                                                                  absoluteColIndex
                                                              )
                                                          }
                                                          role="gridcell"
                                                          style={{
                                                              ...columnStyles,
                                                              ...(colIndex <
                                                                  columnFreeze &&
                                                                  getFrozenBodyStyles()),
                                                              outline: 'none',
                                                          }}
                                                      >
                                                          <Skeleton
                                                              variant={
                                                                  cellSkeleton.skeletonVariant
                                                              }
                                                              loading
                                                              backgroundColor={
                                                                  skeletonBackgroundColor
                                                              }
                                                              width="90%"
                                                              height="28px"
                                                              borderRadius="4px"
                                                              style={{
                                                                  display:
                                                                      'block',
                                                              }}
                                                          />
                                                      </StyledTableCell>
                                                  )
                                              }

                                              const frozenBodyStyles =
                                                  getFrozenBodyStyles()
                                              const frozenStylesWithoutBg =
                                                  frozenBodyStyles &&
                                                  'backgroundColor' in
                                                      frozenBodyStyles
                                                      ? (() => {
                                                            const { ...rest } =
                                                                frozenBodyStyles
                                                            return rest
                                                        })()
                                                      : frozenBodyStyles

                                              // Calculate absolute column index for keyboard navigation
                                              const absoluteColIndex =
                                                  getAbsoluteColIndex(colIndex)

                                              return (
                                                  <TableCell
                                                      key={`${rowKey}-${String(column.field)}`}
                                                      column={column}
                                                      row={
                                                          isEditing
                                                              ? editValues[
                                                                    rowId
                                                                ]
                                                              : row
                                                      }
                                                      rowIndex={index}
                                                      colIndex={colIndex}
                                                      tableTitle={tableTitle}
                                                      isEditing={isEditing}
                                                      currentValue={
                                                          currentValue
                                                      }
                                                      width={columnStyles}
                                                      frozenStyles={
                                                          frozenStylesWithoutBg
                                                      }
                                                      isFirstRow={index === 0}
                                                      customBackgroundColor={
                                                          rowStyling.backgroundColor
                                                      }
                                                      hasCustomBackground={
                                                          hasCustomBackground
                                                      }
                                                      data-row-index={index}
                                                      data-col-index={
                                                          absoluteColIndex
                                                      }
                                                      tabIndex={
                                                          focusedCell?.rowIndex ===
                                                              index &&
                                                          focusedCell?.colIndex ===
                                                              absoluteColIndex
                                                              ? 0
                                                              : -1
                                                      }
                                                      onFocus={() =>
                                                          onCellFocus?.(
                                                              index,
                                                              absoluteColIndex
                                                          )
                                                      }
                                                      onClick={() =>
                                                          onCellFocus?.(
                                                              index,
                                                              absoluteColIndex
                                                          )
                                                      }
                                                      role="gridcell"
                                                      onFieldChange={(value) =>
                                                          onFieldChange(
                                                              row[idField],
                                                              column.field,
                                                              value
                                                          )
                                                      }
                                                      getDisplayValue={
                                                          getDisplayValue
                                                      }
                                                      dateLabel={dateLabel}
                                                  />
                                              )
                                          }
                                      )}

                                      {showActionsColumn &&
                                          (enableInlineEdit || rowActions) &&
                                          !(
                                              mobileConfig?.isMobile &&
                                              mobileConfig?.enableColumnOverflow
                                          ) &&
                                          (() => {
                                              const actionsColIndex =
                                                  getAbsoluteColIndex(
                                                      visibleColumns.length
                                                  )
                                              return (
                                                  <StyledTableCell
                                                      $tableToken={tableToken}
                                                      $customBackgroundColor={
                                                          hasCustomBackground
                                                              ? rowStyling.backgroundColor
                                                              : tableToken
                                                                    .dataTable
                                                                    .table.body
                                                                    .row
                                                                    .backgroundColor
                                                      }
                                                      $hasCustomBackground={
                                                          true
                                                      }
                                                      $width="200px"
                                                      $isFirstRow={index === 0}
                                                      data-row-index={index}
                                                      data-col-index={
                                                          actionsColIndex
                                                      }
                                                      tabIndex={
                                                          focusedCell?.rowIndex ===
                                                              index &&
                                                          focusedCell?.colIndex ===
                                                              actionsColIndex
                                                              ? 0
                                                              : -1
                                                      }
                                                      onFocus={() =>
                                                          onCellFocus?.(
                                                              index,
                                                              actionsColIndex
                                                          )
                                                      }
                                                      onClick={() =>
                                                          onCellFocus?.(
                                                              index,
                                                              actionsColIndex
                                                          )
                                                      }
                                                      role="gridcell"
                                                      style={{
                                                          maxWidth: '200px',
                                                          overflow: 'hidden',
                                                          textOverflow:
                                                              'ellipsis',
                                                          whiteSpace: 'nowrap',
                                                          fontSize:
                                                              tableToken
                                                                  .dataTable
                                                                  .table.body
                                                                  .cell
                                                                  .fontSize,
                                                          fontWeight:
                                                              tableToken
                                                                  .dataTable
                                                                  .table.body
                                                                  .cell
                                                                  .fontWeight,
                                                          outline: 'none',
                                                      }}
                                                  >
                                                      {rowShouldShowSkeleton ? (
                                                          <Skeleton
                                                              variant={
                                                                  skeletonVariant
                                                              }
                                                              loading
                                                              backgroundColor={
                                                                  skeletonBackgroundColor
                                                              }
                                                              width="80px"
                                                              height="32px"
                                                              borderRadius="4px"
                                                              style={{
                                                                  display:
                                                                      'block',
                                                              }}
                                                          />
                                                      ) : (
                                                          <ActionsCell
                                                              row={row}
                                                              index={index}
                                                              isEditing={
                                                                  isEditing
                                                              }
                                                              enableInlineEdit={
                                                                  enableInlineEdit
                                                              }
                                                              rowActions={
                                                                  rowActions
                                                              }
                                                              onEditRow={
                                                                  onEditRow
                                                              }
                                                              onSaveRow={
                                                                  onSaveRow
                                                              }
                                                              onCancelEdit={
                                                                  onCancelEdit
                                                              }
                                                              idField={idField}
                                                          />
                                                      )}
                                                  </StyledTableCell>
                                              )
                                          })()}

                                      {mobileConfig?.enableColumnOverflow &&
                                          mobileOverflowColumns.length > 0 &&
                                          onMobileOverflowClick &&
                                          (() => {
                                              const overflowColIndex =
                                                  getAbsoluteColIndex(
                                                      visibleColumns.length +
                                                          ((enableInlineEdit ||
                                                              rowActions) &&
                                                          !(
                                                              mobileConfig?.isMobile &&
                                                              mobileConfig?.enableColumnOverflow
                                                          )
                                                              ? 1
                                                              : 0)
                                                  )
                                              return (
                                                  <StyledTableCell
                                                      $tableToken={tableToken}
                                                      $width="40px"
                                                      $customBackgroundColor={
                                                          rowStyling.backgroundColor
                                                      }
                                                      $hasCustomBackground={
                                                          hasCustomBackground
                                                      }
                                                      $isFirstRow={index === 0}
                                                      data-row-index={index}
                                                      data-col-index={
                                                          overflowColIndex
                                                      }
                                                      tabIndex={
                                                          focusedCell?.rowIndex ===
                                                              index &&
                                                          focusedCell?.colIndex ===
                                                              overflowColIndex
                                                              ? 0
                                                              : -1
                                                      }
                                                      onFocus={() =>
                                                          onCellFocus?.(
                                                              index,
                                                              overflowColIndex
                                                          )
                                                      }
                                                      onClick={() =>
                                                          onCellFocus?.(
                                                              index,
                                                              overflowColIndex
                                                          )
                                                      }
                                                      role="gridcell"
                                                      style={{
                                                          minWidth: '40px',
                                                          maxWidth: '40px',
                                                          fontSize:
                                                              tableToken
                                                                  .dataTable
                                                                  .table.body
                                                                  .cell
                                                                  .fontSize,
                                                          outline: 'none',
                                                      }}
                                                  >
                                                      <Block
                                                          display="flex"
                                                          alignItems="center"
                                                          justifyContent="center"
                                                          onClick={(e) => {
                                                              e.stopPropagation()
                                                              onMobileOverflowClick(
                                                                  row
                                                              )
                                                          }}
                                                      >
                                                          <ExpandButton
                                                              $tableToken={
                                                                  tableToken
                                                              }
                                                              type="button"
                                                              aria-label="View more details"
                                                              title="View more details"
                                                              onClick={() =>
                                                                  onMobileOverflowClick(
                                                                      row
                                                                  )
                                                              }
                                                              style={{
                                                                  color: tableToken
                                                                      .dataTable
                                                                      .table
                                                                      .body.cell
                                                                      .color,
                                                              }}
                                                          >
                                                              <ChevronRight
                                                                  size={16}
                                                              />
                                                          </ExpandButton>
                                                      </Block>
                                                  </StyledTableCell>
                                              )
                                          })()}

                                      {/* Column Manager - Always rightmost (empty cell in body, actual manager in header) */}
                                      {enableColumnManager &&
                                          (() => {
                                              const columnManagerColIndex =
                                                  getAbsoluteColIndex(
                                                      visibleColumns.length +
                                                          ((enableInlineEdit ||
                                                              rowActions) &&
                                                          !(
                                                              mobileConfig?.isMobile &&
                                                              mobileConfig?.enableColumnOverflow
                                                          )
                                                              ? 1
                                                              : 0) +
                                                          (mobileConfig?.enableColumnOverflow &&
                                                          mobileOverflowColumns.length >
                                                              0
                                                              ? 1
                                                              : 0)
                                                  )
                                              return (
                                                  <StyledTableCell
                                                      $tableToken={tableToken}
                                                      $width="48px"
                                                      $customBackgroundColor={
                                                          rowStyling.backgroundColor
                                                      }
                                                      $hasCustomBackground={
                                                          hasCustomBackground
                                                      }
                                                      $isFirstRow={index === 0}
                                                      data-row-index={index}
                                                      data-col-index={
                                                          columnManagerColIndex
                                                      }
                                                      tabIndex={
                                                          focusedCell?.rowIndex ===
                                                              index &&
                                                          focusedCell?.colIndex ===
                                                              columnManagerColIndex
                                                              ? 0
                                                              : -1
                                                      }
                                                      onFocus={() =>
                                                          onCellFocus?.(
                                                              index,
                                                              columnManagerColIndex
                                                          )
                                                      }
                                                      onClick={() =>
                                                          onCellFocus?.(
                                                              index,
                                                              columnManagerColIndex
                                                          )
                                                      }
                                                      role="gridcell"
                                                      style={{
                                                          minWidth:
                                                              FOUNDATION_THEME
                                                                  .unit[48],
                                                          maxWidth:
                                                              FOUNDATION_THEME
                                                                  .unit[48],
                                                          fontSize:
                                                              tableToken
                                                                  .dataTable
                                                                  .table.body
                                                                  .cell
                                                                  .fontSize,
                                                          position: 'sticky',
                                                          right: 0,
                                                          backgroundColor:
                                                              hasCustomBackground
                                                                  ? rowStyling.backgroundColor
                                                                  : tableToken
                                                                        .dataTable
                                                                        .table
                                                                        .body
                                                                        .row
                                                                        .backgroundColor,
                                                          outline: 'none',
                                                      }}
                                                  />
                                              )
                                          })()}
                                  </TableRow>

                                  {enableRowExpansion &&
                                      isExpanded &&
                                      renderExpandedRow &&
                                      canExpand && (
                                          <ExpandedRow
                                              key={`${rowKey}-expanded`}
                                              $tableToken={tableToken}
                                              $isClickable={false}
                                          >
                                              <ExpandedCell
                                                  $tableToken={tableToken}
                                                  colSpan={colSpan}
                                              >
                                                  {renderExpandedRow({
                                                      row,
                                                      index,
                                                      isExpanded,
                                                      toggleExpansion: () =>
                                                          onRowExpand(
                                                              row[idField]
                                                          ),
                                                  })}
                                              </ExpandedCell>
                                          </ExpandedRow>
                                      )}
                              </React.Fragment>
                          )
                      })
                    : null}
            </motion.tbody>
        )
    }
)

TableBody.displayName = 'TableBody'

export default TableBody