/* eslint-disable jsx-a11y/no-static-element-interactions */
import { flexRender, type Header } from '@tanstack/react-table';
import type { FooterMeta } from '../types';
import { useTableContext } from '../table-context/table-context-provider';
import { useFocusHandler } from '../focus-handler/focus-handler-provider';
import { CellTypes } from '../constants';
import { useEffect, useRef } from 'react';

interface EditableTableFooterCellProps<TData> {
  header: Header<TData, unknown>;
}

export default function EditableTableFooterCell<TData>({
  header,
}: EditableTableFooterCellProps<TData>) {
  const cellRef = useRef<HTMLDivElement>(null);
  const { table } = useTableContext();

  const { isCurrentCellFocused, focusCurrentCell } = useFocusHandler({
    cellType: CellTypes.footerCell,
    columnIndex: header.column.getIndex(),
    groupId: null,
    rowId: null,
    rowIndex: -1,
  });

  const colId = header.column.id;
  const colDef = header.column.columnDef;
  const colMeta = (header.column.columnDef.meta ?? {}) as FooterMeta;

  useEffect(() => {
    if (isCurrentCellFocused) {
      cellRef.current?.focus();
    }
  }, [isCurrentCellFocused]);

  function getCellValue() {
    // if column defines a custom footer
    if (colDef.footer) {
      return flexRender(colDef.footer, header.getContext());
    }

    // addition fields (sum totals)
    if (colMeta.footerType === 'addition') {
      const total = table
        .getFilteredRowModel()
        .rows.reduce((sum: number, row) => {
          const value = Number.parseFloat(row.getValue(colId));
          // biome-ignore lint/suspicious/noGlobalIsNan: <explanation>
          return isNaN(value) ? sum : sum + value;
        }, 0)
        ?.toFixed(2);

      return (
        <>
          {total.toString()}
          {colId === 'sum' ? '%' : ''}
        </>
      );
    }

    // average fields
    if (colMeta.footerType === 'average') {
      const { total, count } = table.getFilteredRowModel().rows.reduce(
        (acc: { total: number; count: number }, row) => {
          const value = Number.parseFloat(row.getValue(colId));
          if (!Number.isNaN(value)) {
            acc.total += value;
            acc.count += 1;
          }
          return acc;
        },
        { total: 0, count: 0 },
      );

      const average = count > 0 ? (total / count).toFixed(2) : '0.00';

      return (
        <>
          {average}
          {colId === 'sum' ? '%' : ''}
        </>
      );
    }

    // total label column
    if (colMeta.footerType === 'isTotalField') {
      return 'Total';
    }
  }

  const Element = colMeta.footerType === 'isTotalField' ? 'th' : 'td';

  return (
    <Element
      key={colId}
      {...(Element === 'th' ? { scope: 'row' } : {})}
      className="border-r border-neutral-200 p-2"
      style={{
        minWidth: header.column.columnDef.size === 100 ? 'auto' : header.column.columnDef.size,
        maxWidth: header.column.columnDef.size === 100 ? 'auto' : header.column.columnDef.size,
        width: header.column.columnDef.size === 100 ? 'auto' : header.column.columnDef.size,
      }}
    >
      <div
        ref={cellRef}
        // biome-ignore lint/style/noUnusedTemplateLiteral: <explanation>
        className={`th-content flex min-h-5 items-center justify-between rounded px-2 text-sm font-semibold outline-purple-600 focus:outline focus:outline-2`}
        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
        tabIndex={isCurrentCellFocused ? 0 : -1}
        onClick={() => {
          focusCurrentCell();
        }}
        onKeyDown={() => {}}
      >
        {getCellValue()}
      </div>
    </Element>
  );
}