import {
  useReactTable,
  getCoreRowModel,
  flexRender,
} from '@tanstack/react-table';
import { MoreHorizontal } from 'lucide-react';

export interface TableProps<T> {
  data: T[];
  columns: any[];
  getRowId?: (row: T, index?: number) => string;
  emptyMessage?: string;
}

export const Table = <T,>({ data, columns, getRowId, emptyMessage = 'No data available' }: TableProps<T>) => {
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getRowId: (row: any, index: number) => {
      let customId = getRowId ? getRowId(row) : null;
      if (customId !== undefined && customId !== null && customId !== '') {
        return `${customId}_${index}`;
      }
      return row.id || row.batch_no || row.product_id || row.dispensing_id || `row-${index}`;
    },
  });

  return (
    <div className="flex flex-col w-full">
      <div className="overflow-x-auto overflow-y-auto">
        <table className="w-full text-left border-collapse min-w-[800px] table-auto">
          <thead className="bg-slate-50 border-b border-slate-200/80">
            {table.getHeaderGroups().map(headerGroup => (
              <tr key={headerGroup.id}>
                {headerGroup.headers.map(header => (
                  <th 
                    key={header.id} 
                    className="py-4 px-6 text-[11px] font-bold text-slate-500 uppercase tracking-widest whitespace-nowrap"
                    style={{ padding: '16px 24px' }}
                  >
                    {header.isPlaceholder
                      ? null
                      : flexRender(
                          header.column.columnDef.header,
                          header.getContext()
                        )}
                  </th>
                ))}
              </tr>
            ))}
          </thead>
          <tbody className="bg-white divide-y divide-slate-100">
            {table.getRowModel().rows.length === 0 ? (
              <tr>
                <td colSpan={columns.length} className="py-16 text-center text-slate-500" style={{ padding: '64px 24px' }}>
                  <div className="flex flex-col items-center justify-center opacity-70">
                    <MoreHorizontal className="w-8 h-8 text-slate-400 mb-3" />
                    <p className="text-[14px] font-medium">{emptyMessage}</p>
                  </div>
                </td>
              </tr>
            ) : (
              table.getRowModel().rows.map(row => (
                <tr 
                  key={row.id}
                  className="group hover:bg-slate-50 transition-all duration-200 ease-in-out cursor-default"
                >
                  {row.getVisibleCells().map(cell => (
                    <td 
                      key={cell.id} 
                      className="py-4 px-6 text-[14px] text-slate-700 whitespace-nowrap group-hover:text-slate-900 transition-colors"
                      style={{ padding: '16px 24px' }}
                    >
                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
                    </td>
                  ))}
                </tr>
              ))
            )}
          </tbody>
        </table>
      </div>
      
    </div>
  );
};