import React from 'react';
import { InboxIcon } from '@heroicons/react/24/outline';

export interface Column<T> {
  key: string;
  header: string;
  render?: (item: T) => React.ReactNode;
  className?: string;
}

type Props<T> = {
  columns: Column<T>[];
  data: T[];
  actions?: (row: T) => React.ReactNode;
};

const renderCell = <T,>(item: T, column: Column<T>) => {
  if (column.render) {
    return column.render(item);
  }

  const keys = column.key.split('.');
  let value: any = item;
  for (const key of keys) {
    value = value?.[key];
  }

  return value ?? 'N/A';
};

function DataTable<T>({ columns, data, actions }: Props<T>) {
  return (
    <div className="w-full">
      {/* Versão Desktop */}
      <div className="hidden md:block rounded-lg shadow">
        <div className="min-w-full inline-block align-middle">
          <table className="min-w-full divide-y divide-gray-200">
            <thead className="bg-gray-50">
              <tr>
                {columns.map((col, index) => (
                  <th
                    key={col.key}
                    className={`px-3 sm:px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider ${col.className || 'text-left'}`}
                  >
                    {col.header}
                  </th>
                ))}
                {actions && (
                  <th className="px-3 sm:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    Ações
                  </th>
                )}
              </tr>
            </thead>
            <tbody className="divide-y divide-gray-200">
              {data.length === 0 ? (
                <tr>
                  <td
                    colSpan={columns.length + (actions ? 1 : 0)}
                    className="px-3 sm:px-6 py-4 text-center text-gray-500 text-sm"
                  >
                    <div className="flex items-center justify-center gap-2">
                      <InboxIcon className="w-5 h-5 text-gray-400" />
                      Nenhum item encontrado
                    </div>
                  </td>
                </tr>
              ) : (
                data.map((row, idx) => (
                  <tr key={idx} className="odd:bg-gray-50 hover:bg-gray-100 transition-colors duration-150 border-b border-gray-200">
                    {columns.map(col => (
                      <td
                        key={col.key}
                        className={`px-3 sm:px-6 py-4 text-sm text-gray-900 ${col.className || ''}`}
                      >
                        <div className={col.className?.includes('max-w-xs') ? 'truncate' : ''}>
                          {renderCell(row, col)}
                        </div>
                      </td>
                    ))}
                    {actions && (
                      <td className="px-3 sm:px-6 py-4 text-sm font-medium">
                        <div className="flex gap-2 flex-wrap justify-start">
                          {actions(row)}
                        </div>
                      </td>
                    )}
                  </tr>
                ))
              )}
            </tbody>
          </table>
        </div>
      </div>

      {/* Versão Mobile - Cards */}
      <div className="md:hidden space-y-4">
        {data.length === 0 ? (
          <div className="bg-white rounded-lg shadow p-6 text-center">
            <InboxIcon className="w-12 h-12 text-gray-400 mx-auto mb-2" />
            <p className="text-gray-500">Nenhum item encontrado</p>
          </div>
        ) : (
          data.map((row, idx) => (
            <div key={idx} className="bg-white rounded-lg shadow p-4 space-y-3">
              {columns.map(col => (
                <div key={col.key} className="flex justify-between items-start">
                  <span className="text-sm font-medium text-gray-500 flex-shrink-0 mr-2">
                    {col.header}:
                  </span>
                  <span className="text-sm text-gray-900 text-right break-words">
                    {renderCell(row, col)}
                  </span>
                </div>
              ))}
              {actions && (
                <div className="pt-3 border-t border-gray-200">
                  <div className="flex gap-2 flex-wrap justify-end">
                    {actions(row)}
                  </div>
                </div>
              )}
            </div>
          ))
        )}
      </div>
    </div>
  );
}

export default DataTable;
