'use client';

import { useState, useMemo } from 'react';
import { EmptyState } from './empty-state';
import { TableSkeleton } from './skeleton';

interface Column<T> {
  key: string;
  label: string;
  sortable?: boolean;
  align?: 'left' | 'right' | 'center';
  render: (item: T) => React.ReactNode;
}

interface FilterOption {
  label: string;
  value: string;
}

interface QuickFilter {
  key: string;
  label: string;
  options: FilterOption[];
}

interface DataTableProps<T> {
  columns: Column<T>[];
  data: T[];
  loading?: boolean;
  emptyTitle?: string;
  emptyDescription?: string;
  keyExtractor: (item: T) => string;
  searchPlaceholder?: string;
  searchValue?: string;
  onSearchChange?: (value: string) => void;
  quickFilters?: QuickFilter[];
  activeFilters?: Record<string, string>;
  onFilterChange?: (key: string, value: string) => void;
  pageSize?: number;
  onRowClick?: (item: T) => void;
  maxHeight?: string;
  headerActions?: React.ReactNode;
}

const PAGE_SIZES = [10, 20, 50, 100];

export function DataTable<T>({
  columns,
  data,
  loading,
  emptyTitle = 'No data',
  emptyDescription,
  keyExtractor,
  searchPlaceholder,
  searchValue,
  onSearchChange,
  quickFilters,
  activeFilters,
  onFilterChange,
  pageSize: initialPageSize = 20,
  onRowClick,
  maxHeight,
  headerActions,
}: DataTableProps<T>) {
  const [sortKey, setSortKey] = useState<string | null>(null);
  const [sortDir, setSortDir] = useState<'asc' | 'desc'>('asc');
  const [page, setPage] = useState(1);
  const [perPage, setPerPage] = useState(initialPageSize);

  function handleSort(key: string) {
    if (sortKey === key) setSortDir(sortDir === 'asc' ? 'desc' : 'asc');
    else { setSortKey(key); setSortDir('asc'); }
    setPage(1);
  }

  const sortedData = useMemo(() => {
    if (!sortKey) return data;
    return [...data].sort((a, b) => {
      const aVal = (a as any)[sortKey];
      const bVal = (b as any)[sortKey];
      if (aVal == null) return 1;
      if (bVal == null) return -1;
      const cmp = typeof aVal === 'string' ? aVal.localeCompare(bVal) : aVal - bVal;
      return sortDir === 'asc' ? cmp : -cmp;
    });
  }, [data, sortKey, sortDir]);

  const totalPages = Math.ceil(sortedData.length / perPage);
  const paginatedData = sortedData.slice((page - 1) * perPage, page * perPage);
  const startItem = sortedData.length === 0 ? 0 : (page - 1) * perPage + 1;
  const endItem = Math.min(page * perPage, sortedData.length);

  // Reset page when data changes
  if (page > totalPages && totalPages > 0) setPage(totalPages);

  function getPageNumbers(): (number | '...')[] {
    if (totalPages <= 7) return Array.from({ length: totalPages }, (_, i) => i + 1);
    const pages: (number | '...')[] = [1];
    if (page > 3) pages.push('...');
    for (let i = Math.max(2, page - 1); i <= Math.min(totalPages - 1, page + 1); i++) pages.push(i);
    if (page < totalPages - 2) pages.push('...');
    if (totalPages > 1) pages.push(totalPages);
    return pages;
  }

  if (loading) return <TableSkeleton rows={6} cols={columns.length} />;

  return (
    <div className="flex flex-col">
      {/* Search + Quick Filters + Header Actions row */}
      <div className="flex flex-wrap items-center justify-between gap-3 mb-4">
        <div className="flex flex-wrap items-center gap-3">
        {onSearchChange && (
          <div className="relative flex-shrink-0">
            <svg className="absolute left-3 top-1/2 -translate-y-1/2 text-surface-400" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
              <circle cx="7" cy="7" r="5" /><path d="M11 11l3.5 3.5" />
            </svg>
            <input type="text" value={searchValue} onChange={(e) => { onSearchChange(e.target.value); setPage(1); }}
              placeholder={searchPlaceholder || 'Search...'} aria-label={searchPlaceholder || 'Search'}
              className="w-64 pl-9 pr-3 py-2 rounded-lg border border-surface-200 dark:border-surface-700 bg-white dark:bg-surface-800 text-sm text-surface-900 dark:text-surface-200 placeholder:text-surface-400 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20 transition-all duration-200" />
          </div>
        )}

        {/* Quick filter chips */}
        {quickFilters && onFilterChange && quickFilters.map((filter) => (
          <div key={filter.key} className="flex items-center gap-1">
            <span className="text-xs text-surface-400 dark:text-surface-500 mr-1">{filter.label}:</span>
            <button onClick={() => onFilterChange(filter.key, '')}
              className={`px-2.5 py-1 text-xs rounded-full font-medium transition-all duration-150 cursor-pointer ${
                !activeFilters?.[filter.key] ? 'bg-primary-100 dark:bg-primary-900/40 text-primary-700 dark:text-primary-400' : 'bg-surface-100 dark:bg-surface-700 text-surface-500 dark:text-surface-400 hover:bg-surface-200 dark:hover:bg-surface-600'
              }`}>All</button>
            {filter.options.map((opt) => (
              <button key={opt.value} onClick={() => onFilterChange(filter.key, opt.value)}
                className={`px-2.5 py-1 text-xs rounded-full font-medium transition-all duration-150 cursor-pointer ${
                  activeFilters?.[filter.key] === opt.value ? 'bg-primary-100 dark:bg-primary-900/40 text-primary-700 dark:text-primary-400' : 'bg-surface-100 dark:bg-surface-700 text-surface-500 dark:text-surface-400 hover:bg-surface-200 dark:hover:bg-surface-600'
                }`}>{opt.label}</button>
            ))}
          </div>
        ))}
        </div>
        {headerActions && <div className="flex-shrink-0">{headerActions}</div>}
      </div>

      {sortedData.length === 0 ? (
        <div className="bg-white dark:bg-surface-800 rounded-xl border border-surface-200/80 dark:border-surface-700">
          <EmptyState title={emptyTitle} description={emptyDescription}
            icon={<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"><rect x="3" y="3" width="18" height="18" rx="3" /><path d="M9 9h6M9 13h4" /></svg>} />
        </div>
      ) : (
        <>
          <div className="bg-white dark:bg-surface-800 rounded-xl border border-surface-200/80 dark:border-surface-700 flex flex-col">
            {/* Scrollable table body with sticky header */}
            <div className="overflow-x-auto" style={{ maxHeight: maxHeight ?? 'calc(100vh - 300px)' }}>
              <table className="min-w-full divide-y divide-surface-200 dark:divide-surface-700" role="grid">
                <thead className="bg-surface-50/50 dark:bg-surface-800/80 sticky top-0 z-10">
                  <tr>
                    {columns.map((col) => (
                      <th key={col.key}
                        className={`px-5 py-3 text-xs font-medium text-surface-500 dark:text-surface-400 uppercase tracking-wider bg-surface-50/80 dark:bg-surface-800/90 backdrop-blur-sm ${
                          col.align === 'right' ? 'text-right' : 'text-left'
                        } ${col.sortable ? 'cursor-pointer select-none hover:text-surface-700 dark:hover:text-surface-300 transition-colors' : ''}`}
                        onClick={col.sortable ? () => handleSort(col.key) : undefined}
                        aria-sort={sortKey === col.key ? (sortDir === 'asc' ? 'ascending' : 'descending') : undefined}>
                        <span className="flex items-center gap-1">
                          {col.label}
                          {col.sortable && sortKey === col.key && (
                            <svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
                              {sortDir === 'asc' ? <path d="M6 3l4 6H2z" /> : <path d="M6 9l4-6H2z" />}
                            </svg>
                          )}
                        </span>
                      </th>
                    ))}
                  </tr>
                </thead>
                <tbody className="divide-y divide-surface-100 dark:divide-surface-700">
                  {paginatedData.map((item) => (
                    <tr key={keyExtractor(item)}
                      className={`group transition-colors duration-100 ${
                        onRowClick
                          ? 'cursor-pointer hover:bg-primary-50/40 dark:hover:bg-primary-900/20 border-l-2 border-l-transparent hover:border-l-primary-400'
                          : 'hover:bg-surface-50/50 dark:hover:bg-surface-700/50'
                      }`}
                      onClick={onRowClick ? () => onRowClick(item) : undefined}
                    >
                      {columns.map((col) => (
                        <td key={col.key} className={`px-5 py-3.5 text-sm text-surface-700 dark:text-surface-300 ${col.align === 'right' ? 'text-right' : 'text-left'}`}>
                          {col.render(item)}
                        </td>
                      ))}
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>

          {/* Pagination controls — always visible */}
          <div className="mt-3 flex items-center justify-between flex-shrink-0">
            <div className="flex items-center gap-2 text-sm text-surface-500 dark:text-surface-400">
              <span>Showing {startItem}-{endItem} of {sortedData.length}</span>
              <select value={perPage} onChange={(e) => { setPerPage(Number(e.target.value)); setPage(1); }}
                aria-label="Items per page"
                className="ml-2 rounded-md border border-surface-200 dark:border-surface-700 px-2 py-1 text-xs bg-white dark:bg-surface-800 text-surface-700 dark:text-surface-300 cursor-pointer focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500/20">
                {PAGE_SIZES.map((s) => <option key={s} value={s}>{s}/page</option>)}
              </select>
            </div>

            {totalPages > 1 && (
              <nav className="flex items-center gap-1" aria-label="Pagination">
                <button onClick={() => setPage(Math.max(1, page - 1))} disabled={page === 1}
                  className="p-1.5 rounded-md text-surface-400 hover:text-surface-700 dark:hover:text-surface-300 hover:bg-surface-100 dark:hover:bg-surface-700 disabled:opacity-30 disabled:cursor-not-allowed cursor-pointer transition-colors"
                  aria-label="Previous page">
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"><path d="M10 4l-4 4 4 4" /></svg>
                </button>
                {getPageNumbers().map((p, i) =>
                  p === '...' ? (
                    <span key={`dots-${i}`} className="px-1 text-surface-300 dark:text-surface-500">...</span>
                  ) : (
                    <button key={p} onClick={() => setPage(p as number)}
                      className={`min-w-[32px] h-8 rounded-md text-sm font-medium transition-colors cursor-pointer ${
                        page === p ? 'bg-primary-600 text-white' : 'text-surface-600 dark:text-surface-300 hover:bg-surface-100 dark:hover:bg-surface-700'
                      }`}>{p}</button>
                  ),
                )}
                <button onClick={() => setPage(Math.min(totalPages, page + 1))} disabled={page === totalPages}
                  className="p-1.5 rounded-md text-surface-400 hover:text-surface-700 dark:hover:text-surface-300 hover:bg-surface-100 dark:hover:bg-surface-700 disabled:opacity-30 disabled:cursor-not-allowed cursor-pointer transition-colors"
                  aria-label="Next page">
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"><path d="M6 4l4 4-4 4" /></svg>
                </button>
              </nav>
            )}
          </div>
        </>
      )}
    </div>
  );
}