'use client';

import React from 'react';
import { ChevronLeft, ChevronRight } from 'lucide-react';
import { Button } from '@/components/ui/button';

export interface Column<T> {
  header: string;
  className?: string;
  cell: (item: T) => React.ReactNode;
  hide?: boolean; // <-- Add optional hide flag
}

interface DataTableProps<T> {
  data: T[] | undefined;
  columns: Column<T>[];
  emptyMessage?: string;
  pagination?: {
    page: number;
    pages: number;
    total: number;
    onPageChange: (page: number) => void;
  };
}

export function DataTable<T>({ 
  data, 
  columns, 
  emptyMessage = "No records found.", 
  pagination 
}: DataTableProps<T>) {
  // Filter out any hidden column automatically
  const visibleColumns = columns.filter((col) => !col.hide);

  return (
    <div className="bg-surface border border-border/40 rounded-xl overflow-hidden shadow-sm">
      <div className="overflow-x-auto">
        <table className="w-full text-left border-collapse text-xs">
          <thead className="bg-muted/30 border-b border-border/20 font-semibold text-muted-foreground tracking-tight">
            <tr>
              {visibleColumns.map((col, index) => (
                <th key={index} className={`p-3 ${col.className || ''}`}>{col.header}</th>
              ))}
              {/* {columns.map((col, index) => (
                <th key={index} className={`p-3 ${col.className || ''}`}>{col.header}</th>
              ))} */}
            </tr>
          </thead>
          <tbody className="divide-y divide-border/10 text-foreground font-medium">
            {!data || data.length === 0 ? (
              <tr>
                <td colSpan={columns.length} className="p-12 text-center text-muted-foreground/60 font-medium">
                  {emptyMessage}
                </td>
              </tr>
            ) : (
              data.map((item, rowIndex) => (
                <tr key={rowIndex} className="hover:bg-muted/10 transition-colors">
                  {/* {columns.map((col, colIndex) => (
                    <td key={colIndex} className={`p-3 ${col.className || ''}`}>
                      {col.cell(item)}
                    </td>
                  ))} */}
                  {visibleColumns.map((col, colIndex) => (
                    <td key={colIndex} className={`p-3 ${col.className || ''}`}>
                      {col.cell(item)}
                    </td>
                  ))}
                </tr>
              ))
            )}
          </tbody>
        </table>
      </div>

      {/* COMPACT SYSTEM PAGINATION CONTROLS */}
      {pagination && pagination.pages > 1 && (
        <div className="flex items-center justify-between border-t border-border/20 px-4 py-2.5 bg-muted/10">
          <span className="text-[10px] font-mono font-medium text-muted-foreground">
            Showing page {pagination.page} of {pagination.pages} ({pagination.total} total items)
          </span>
          <div className="flex items-center gap-1">
            <Button
              variant="outline"
              size="icon"
              onClick={() => pagination.onPageChange(Math.max(pagination.page - 1, 1))}
              disabled={pagination.page === 1}
              className="h-7 w-7 rounded-md border-border/40 disabled:opacity-40"
            >
              <ChevronLeft className="h-3.5 w-3.5" />
            </Button>
            <Button
              variant="outline"
              size="icon"
              onClick={() => pagination.onPageChange(Math.min(pagination.page + 1, pagination.pages))}
              disabled={pagination.page === pagination.pages}
              className="h-7 w-7 rounded-md border-border/40 disabled:opacity-40"
            >
              <ChevronRight className="h-3.5 w-3.5" />
            </Button>
          </div>
        </div>
      )}
    </div>
  );
}