'use client';

import * as React from 'react';
import { cn } from '@djangocfg/ui-core/lib';
import {
  Table,
  TableHeader,
  TableBody,
  TableFooter,
  TableRow,
  TableHead,
  TableCell,
  TableCaption,
} from '@djangocfg/ui-core/components';

import type { DataTableProps } from '../types';
import { DataTableProvider } from '../context/DataTableContext';
import { DataTableHeader } from './DataTableHeader';
import { DataTableRow } from './DataTableRow';
import { DataTablePagination } from './DataTablePagination';

export function DataTable<T>(props: DataTableProps<T>) {
  const {
    data,
    columns,
    getRowId,
    selectionMode,
    initialSelectedIds,
    onSelectionChange,
    sort,
    onSortChange,
    initialSort,
    filters,
    onFilterChange,
    initialFilters,
    pagination,
    onPaginationChange,
    initialPagination,
    pageSizeOptions,
    loading,
    emptyMessage,
    getRowClassName,
    onRowClick,
    onRowDoubleClick,
    className,
    style,
  } = props;

  return (
    <DataTableProvider<T>
      data={data}
      columns={columns}
      getRowId={getRowId}
      selectionMode={selectionMode}
      initialSelectedIds={initialSelectedIds}
      onSelectionChange={onSelectionChange}
      sort={sort}
      onSortChange={onSortChange}
      initialSort={initialSort}
      filters={filters}
      onFilterChange={onFilterChange}
      initialFilters={initialFilters}
      pagination={pagination}
      onPaginationChange={onPaginationChange}
      initialPagination={initialPagination}
      pageSizeOptions={pageSizeOptions}
      loading={loading}
      emptyMessage={emptyMessage}
      getRowClassName={getRowClassName}
      onRowClick={onRowClick}
      onRowDoubleClick={onRowDoubleClick}
    >
      <DataTableShell className={className} style={style} />
    </DataTableProvider>
  );
}
DataTable.displayName = 'DataTable';

function DataTableShell({ className, style }: { className?: string; style?: React.CSSProperties }) {
  return (
    <div
      data-slot="data-table"
      className={cn('flex flex-col gap-2 rounded-sm border border-border bg-background', className)}
      style={style}
    >
      <div className="relative w-full overflow-auto">
        <Table>
          <DataTableHeader />
          <TableBody>
            <DataTableRows />
          </TableBody>
        </Table>
      </div>
      <DataTablePagination />
    </div>
  );
}

function DataTableRows() {
  const { rows, getRowId, loading, emptyMessage } = useDataTableContext();

  if (loading) {
    return (
      <TableRow>
        <TableCell colSpan={999} className="p-8 text-center text-muted-foreground">
          Loading…
        </TableCell>
      </TableRow>
    );
  }

  if (rows.length === 0) {
    return (
      <TableRow>
        <TableCell colSpan={999} className="p-8 text-center text-muted-foreground">
          {emptyMessage}
        </TableCell>
      </TableRow>
    );
  }

  return (
    <>
      {rows.map((row, index) => (
        <DataTableRow key={String(getRowId(row))} row={row} index={index} />
      ))}
    </>
  );
}

// Ambient import for JSX usage
import { useDataTableContext } from '../context/DataTableContext';
