import * as React from 'react';

import { StatusBadge, type StatusBadgeProps } from './status-badge';

export interface ManagementTableColumn {
  key: string;
  label: string;
  align?: 'left' | 'right';
}

export interface ManagementTableCell {
  value: React.ReactNode;
  tone?: StatusBadgeProps['tone'] | string;
  badge?: boolean;
}

export interface ManagementTableRow {
  id: string;
  cells: Record<string, ManagementTableCell | React.ReactNode>;
}

export interface ManagementTableProps {
  columns: ManagementTableColumn[];
  rows: ManagementTableRow[];
  pageLabel?: string;
  getRowActions?: (row: ManagementTableRow) => Array<{
    label: string;
    href?: string;
    onClick?: () => void;
  }>;
}

function renderCell(cell: ManagementTableCell | React.ReactNode) {
  if (React.isValidElement(cell) || typeof cell !== 'object' || cell === null || !('value' in cell)) {
    return cell;
  }

  if (cell.badge) {
    return <StatusBadge tone={cell.tone as StatusBadgeProps['tone']}>{cell.value}</StatusBadge>;
  }

  return cell.value;
}

export function ManagementTable({
  columns,
  rows,
  pageLabel = 'Mostrando 1-10 de 48 registros',
  getRowActions,
}: ManagementTableProps) {
  return (
    <div className="overflow-hidden rounded-[1.25rem] border border-slate-200 bg-white">
      <table className="min-w-full divide-y divide-slate-200 text-sm">
        <thead className="bg-slate-50 text-left text-[10px] font-bold uppercase tracking-[0.16em] text-slate-500">
          <tr>
            {columns.map((column) => (
              <th
                key={column.key}
                className={`px-4 py-4 ${column.align === 'right' ? 'text-right' : 'text-left'}`}
              >
                {column.label}
              </th>
            ))}
            <th className="px-4 py-4 text-right">Acoes</th>
          </tr>
        </thead>
        <tbody className="divide-y divide-slate-100">
          {rows.map((row) => (
            <tr key={row.id} className="align-top">
              {columns.map((column) => (
                <td
                  key={`${row.id}-${column.key}`}
                  className={`px-4 py-4 text-slate-600 ${column.align === 'right' ? 'text-right' : 'text-left'}`}
                >
                  {renderCell(row.cells[column.key])}
                </td>
              ))}
              <td className="px-4 py-4">
                <div className="flex flex-wrap justify-end gap-2">
                  {(getRowActions?.(row) ?? [
                    { label: 'Visualizar' },
                    { label: 'Editar' },
                    { label: 'Ativar/Inativar' },
                    { label: 'Excluir' },
                  ]).map((action) => (
                    action.onClick ? (
                      <button
                        key={action.label}
                        type="button"
                        onClick={action.onClick}
                        className="rounded-full border border-slate-200 bg-white px-3 py-1 text-[11px] font-bold uppercase tracking-[0.18em] text-slate-600"
                      >
                        {action.label}
                      </button>
                    ) : (
                      <a
                        key={action.label}
                        href={action.href ?? '#'}
                        className="rounded-full border border-slate-200 bg-white px-3 py-1 text-[11px] font-bold uppercase tracking-[0.18em] text-slate-600"
                      >
                        {action.label}
                      </a>
                    )
                  ))}
                </div>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
      <div className="flex flex-col gap-3 border-t border-slate-100 bg-slate-50 px-4 py-4 text-sm text-slate-500 md:flex-row md:items-center md:justify-between">
        <p>{pageLabel}</p>
        <div className="flex items-center gap-2">
          <button type="button" className="rounded-full border border-slate-200 bg-white px-3 py-1 text-xs font-bold uppercase tracking-[0.18em] text-slate-600">
            Anterior
          </button>
          <button type="button" className="rounded-full border border-slate-900 bg-slate-900 px-3 py-1 text-xs font-bold uppercase tracking-[0.18em] text-white">
            1
          </button>
          <button type="button" className="rounded-full border border-slate-200 bg-white px-3 py-1 text-xs font-bold uppercase tracking-[0.18em] text-slate-600">
            2
          </button>
          <button type="button" className="rounded-full border border-slate-200 bg-white px-3 py-1 text-xs font-bold uppercase tracking-[0.18em] text-slate-600">
            Proxima
          </button>
        </div>
      </div>
    </div>
  );
}