'use client';

import { useState, useMemo } from 'react';
import { PiCaretDoubleLeftBold, PiCaretDoubleRightBold, PiCaretLeftBold, PiCaretRightBold } from 'react-icons/pi';

type Column<T> = {
  header: string;
  accessor: keyof T;
  render?: (value: any, row: T) => React.ReactNode;
};

interface Props<T> {
  data: T[];
  columns: Column<T>[];
  searchAble?: boolean;
  pagination?: boolean;
  onRowClick?: (row: T) => void;
}

export default function DataTable<T>({
  data,
  columns,
  searchAble = true,
  pagination = true,
  onRowClick,
}: Props<T>) {
  const [search, setSearch] = useState('');
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(25);

  // 🔍 Search
  const filtered = useMemo(() => {
    return data.filter((item) =>
      Object.values(item as any)
        .join(' ')
        .toLowerCase()
        .includes(search.toLowerCase())
    );
  }, [data, search]);

  // 📄 Pagination
  const totalPages = Math.ceil(filtered.length / pageSize);

  const paginatedData = useMemo(() => {
    if (!pagination) return filtered;
    return filtered.slice((page - 1) * pageSize, page * pageSize);
  }, [filtered, page, pageSize, pagination]);

  return (
    <div className="space-y-4">

      {/* 🔍 Search */}
      {searchAble && (
        <div className="px-4 pt-4">
          <input
            type="text"
            placeholder="Search..."
            value={search}
            onChange={(e) => {
              setSearch(e.target.value);
              setPage(1);
            }}
            className="w-full rounded-lg border px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
          />
        </div>
      )}

      {/* 📊 Table */}
      <div className="overflow-x-auto">
        <table className="min-w-full text-sm">
          <thead className="bg-gray-100 text-left">
            <tr>
              {columns.map((col, i) => (
                <th key={i} className="p-3 font-semibold">
                  {col.header}
                </th>
              ))}
            </tr>
          </thead>

          <tbody>
            {paginatedData.map((row, rowIndex) => (
              <tr key={rowIndex} className="border-t hover:bg-gray-50" onClick={() => onRowClick?.(row)}>
                {columns.map((col, colIndex) => (
                  <td key={colIndex} className="p-3">
                    {col.render
                      ? col.render(row[col.accessor], row)
                      : (row[col.accessor] as any)}
                  </td>
                ))}
              </tr>
            ))}

            {paginatedData.length === 0 && (
              <tr>
                <td
                  colSpan={columns.length}
                  className="p-4 text-center text-gray-400"
                >
                  No data found
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </div>

      {/* 📌 Pagination UI */}
      {pagination && (
        <div className="flex items-center justify-between px-4 pb-4">

          {/* Rows per page */}
          <div className="flex items-center gap-2 text-sm">
            <span className="text-gray-600">Rows per page</span>
            <select
              value={pageSize}
              onChange={(e) => {
                setPageSize(Number(e.target.value));
                setPage(1);
              }}
              className="border rounded-md px-6 py-2 text-sm"
            >
              <option value={25}>25</option>
              <option value={50}>50</option>
              <option value={100}>100</option>
            </select>
          </div>

          {/* Page Info */}
          <div className="text-sm text-gray-600">
            Page {page} of {totalPages || 1}
          </div>

          {/* Controls */}
          <div className="flex items-center gap-2">
            <button
              onClick={() => setPage(1)}
              disabled={page === 1}
              className="px-2 py-1 border rounded disabled:opacity-50"
            >
              <PiCaretDoubleLeftBold/>
            </button>

            <button
              onClick={() => setPage(page - 1)}
              disabled={page === 1}
              className="px-2 py-1 border rounded disabled:opacity-50"
            >
              <PiCaretLeftBold size={14} />
            </button>

            <button
              onClick={() => setPage(page + 1)}
              disabled={page === totalPages || totalPages === 0}
              className="px-2 py-1 border rounded disabled:opacity-50"
            >
              <PiCaretRightBold size={14} />
            </button>

            <button
              onClick={() => setPage(totalPages)}
              disabled={page === totalPages || totalPages === 0}
              className="px-2 py-1 border rounded disabled:opacity-50"
            >
              <PiCaretDoubleRightBold/>
            </button>
          </div>
        </div>
      )}
    </div>
  );
}