'use client';
import React, { useState, useRef } from 'react';
import {
  Table,
  TableHeader,
  TableRow,
  TableHead,
  TableBody,
  TableCell,
} from '@/components/ui/table';
import { Checkbox } from '@/components/ui/checkbox';
import { UnknownRecord, IColumnConfig } from '@/types';
import DataNotFound from '@/components/errors/DataNotFound';
import { enquiryCaseColumns } from './operations';
import CaseInfoLink from '../../enquiry/form-components/CaseInfoLink';
import { formatDate } from '@/utils/decorators';

const EligibleCasesList = ({
  tableData,
  selectedRows,
  setSelectedRows,
  filterEligibleCases,
  setFilterEligibleCases,
}: {
  tableData: UnknownRecord[];
  selectedRows: number[];
  setSelectedRows: any;
  filterEligibleCases?: any;
  setFilterEligibleCases?: any;
}) => {
  const [activeRow, setActiveRow] = useState<any | null>(null);
  const [expandedCells, setExpandedCells] = useState<Record<string, boolean>>(
    {},
  );
  const tableWrapperRef = useRef<HTMLTableSectionElement>(null);
  const columns: IColumnConfig[] = enquiryCaseColumns;

  const records = tableData ?? [];

  const handleSelectAll = (checked: boolean) => {
    setActiveRow(null);
    const ids = records.map((item: UnknownRecord) => item.id);

    setSelectedRows((prev: any) => {
      const updated = checked
        ? Array.from(new Set([...prev, ...ids]))
        : prev.filter((sr: any) => !ids.includes(sr));
      setFilterEligibleCases(
        records.filter((record) => updated.includes(record.id)),
      );
      return updated;
    });
  };

  const handleRowSelect = (sr: number, checked: boolean) => {
    setActiveRow(null);

    setSelectedRows((prev: any) => {
      const updated = checked
        ? [...prev, sr]
        : prev.filter((id: any) => id !== sr);
      setFilterEligibleCases(
        records.filter((record) => updated.includes(record.id)),
      );
      return updated;
    });
  };

  const allChecked =
    records.length > 0 &&
    records.every((item: UnknownRecord) => selectedRows.includes(item.id));

  const recordsLength = records.length;

  return (
    <div>
      {recordsLength > 0 ? (
        <Table className="table">
          <TableHeader>
            <TableRow>
              <TableHead key={0}>
                <Checkbox
                  className="table-row-check"
                  checked={allChecked}
                  onCheckedChange={(checked) => handleSelectAll(!!checked)}
                />
              </TableHead>
              {columns?.map((column: IColumnConfig) =>
                column.is_checked === true || column.is_checked === 'true' ? (
                  <TableHead key={column.key}>
                    {column.title as string}
                  </TableHead>
                ) : null,
              )}
            </TableRow>
          </TableHeader>
          <TableBody ref={tableWrapperRef}>
            {recordsLength > 0 ? (
              records.map((row: UnknownRecord, index: number) => {
                return (
                  <TableRow
                    key={row.release_id ?? row.id}
                    className={`cursor-pointer transition-colors ${activeRow === row.release_id ? 'bg-muted' : ''}`}
                  >
                    <TableCell>
                      <Checkbox
                        className="table-row-check"
                        checked={selectedRows.includes(row.id)}
                        onCheckedChange={(checked) =>
                          handleRowSelect(row.id, !!checked)
                        }
                      />
                    </TableCell>
                    {columns?.map((column: UnknownRecord) =>
                      column.is_checked === true ||
                      column.is_checked === 'true' ? (
                        <TableCell key={column.key}>
                          {(() => {
                            const decoratedRow = row[column.key];
                            let value;
                            if (column.key === 'visa_result_on') {
                              value = formatDate(
                                decoratedRow,
                                'DD-MM-YYYY hh:mm A',
                              );
                            } else if (
                              column.key === 'course_start_date' ||
                              column.key === 'course_end_date'
                            ) {
                              value = formatDate(decoratedRow, 'DD-MM-YYYY');
                            } else {
                              value = String(decoratedRow ?? '');
                            }
                            const cellKey = `${row.id}-${column.key}`;
                            const isExpanded = expandedCells[cellKey];
                            const isTruncated = value.length > 40;
                            return (
                              <span
                                className={`tablelisting-data addwidth ${isExpanded ? 'width-auto' : ''}`}
                              >
                                {column.key === 'visa_status' ? (
                                  <CaseInfoLink visa_case_id={row['id']} />
                                ) : (
                                  <>
                                    {isTruncated && !isExpanded
                                      ? value.slice(0, 40) + '...'
                                      : value}
                                    {isTruncated && (
                                      <button
                                        onClick={(e) => {
                                          e.stopPropagation();
                                          setExpandedCells((prev) => ({
                                            ...prev,
                                            [cellKey]: !prev[cellKey],
                                          }));
                                        }}
                                        className="ml-1 text-blue-600 hover:underline text-sm underline"
                                      >
                                        {isExpanded ? 'Less' : 'More'}
                                      </button>
                                    )}
                                  </>
                                )}
                              </span>
                            );
                          })()}
                        </TableCell>
                      ) : null,
                    )}
                  </TableRow>
                );
              })
            ) : (
              <TableRow>
                <TableCell colSpan={2} align="center">
                  No data found
                </TableCell>
              </TableRow>
            )}
          </TableBody>
        </Table>
      ) : (
        <div className="flex justify-center items-center">
          <DataNotFound />
        </div>
      )}
    </div>
  );
};

export default EligibleCasesList;