'use client';

import { ChevronLeft, ChevronRight, Search, Filter, ChevronDown } from 'lucide-react';
import React, { useState } from 'react';

export interface ColumnDef<T> {
  header: string;
  accessorKey?: keyof T;
  cell?: (item: T) => React.ReactNode;
  align?: 'left' | 'center' | 'right';
}

interface DataTableProps<T> {
  title?: string;
  columns: ColumnDef<T>[];
  data: T[];
  searchPlaceholder?: string;
  searchValue?: string;
  onSearchChange?: (value: string) => void;
  filters?: React.ReactNode;
  emptyMessage?: string;
}

export function DataTable<T>({ 
  title, 
  columns, 
  data, 
  searchPlaceholder = "Tìm kiếm...", 
  searchValue,
  onSearchChange,
  filters,
  emptyMessage = "Không có dữ liệu" 
}: DataTableProps<T>) {
  const [internalSearch, setInternalSearch] = useState('');
  const isControlled = searchValue !== undefined;
  const currentSearch = isControlled ? searchValue : internalSearch;

  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
    const val = e.target.value;
    if (!isControlled) {
      setInternalSearch(val);
    }
    if (onSearchChange) {
      onSearchChange(val);
    }
  };

  return (
    <div className="bg-card border border-border rounded-2xl p-6 flex flex-col min-h-[420px]">
      {title && (
        <div className="flex flex-col xl:flex-row justify-between items-start xl:items-center gap-4 mb-6">
          <h2 className="text-foreground font-bold text-base">{title}</h2>
          {filters}
        </div>
      )}

      <div className="flex flex-col sm:flex-row items-center gap-3 mb-6">
        <div className="relative flex-1 w-full">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
          <input 
            type="text" 
            placeholder={searchPlaceholder}
            value={currentSearch}
            onChange={handleSearch}
            className="w-full bg-background border border-border rounded-xl pl-10 pr-4 py-2.5 text-xs text-foreground placeholder-muted-foreground focus:outline-none focus:border-primary/50 transition-colors"
          />
        </div>
      </div>

      <div className="flex-1 flex flex-col border border-border rounded-xl overflow-x-auto">
        <div className="min-w-[700px] w-full">
          <div className="flex bg-background border-b border-border px-4 py-3">
            {columns.map((col, idx) => (
              <div 
                key={idx} 
                className={`flex-1 text-[10px] font-bold text-muted-foreground uppercase tracking-wider ${col.align === 'right' ? 'text-right' : col.align === 'center' ? 'text-center' : 'text-left'}`}
              >
                {col.header}
              </div>
            ))}
          </div>
          <div className="flex-1 flex flex-col bg-card min-h-[160px]">
            {data.length === 0 ? (
              <div className="flex-1 flex items-center justify-center">
                <p className="text-muted-foreground text-sm font-medium">{emptyMessage}</p>
              </div>
            ) : (
              data.map((item, rowIdx) => (
                <div key={rowIdx} className="flex border-b border-border last:border-b-0 px-4 py-3 items-center hover:bg-muted/50 transition-colors">
                  {columns.map((col, colIdx) => (
                    <div 
                      key={colIdx} 
                      className={`flex-1 text-sm ${col.align === 'right' ? 'text-right' : col.align === 'center' ? 'text-center' : 'text-left'}`}
                    >
                      {col.cell ? col.cell(item) : (col.accessorKey ? String(item[col.accessorKey]) : '')}
                    </div>
                  ))}
                </div>
              ))
            )}
          </div>
        </div>
      </div>
      
      {/* Pagination (Dumb component for now) */}
      <div className="flex justify-between items-center mt-4">
        <p className="text-xs text-muted-foreground">Hiển thị {data.length} dòng</p>
        <div className="flex items-center gap-1">
          <button className="text-muted-foreground hover:text-foreground text-xs font-medium px-2 py-1 flex items-center gap-1 disabled:opacity-50" disabled>
            <ChevronLeft className="w-4 h-4" /> Trước
          </button>
          <button className="w-6 h-6 rounded bg-white/10 text-white text-xs font-bold flex items-center justify-center">1</button>
          <button className="text-muted-foreground hover:text-foreground text-xs font-medium px-2 py-1 flex items-center gap-1 disabled:opacity-50" disabled>
            Tiếp <ChevronRight className="w-4 h-4" />
          </button>
        </div>
      </div>
    </div>
  );
}