import React from 'react';
import '../../styles/components.css';

const ScheduledTable = ({ items = [], onToggleEnabled, onRunNow, onEdit, onDelete }) => {
  const getStatusPill = (item) => {
    const cls = `status ${item.enabled ? 'completed' : 'pending'}`;
    const icon = item.enabled ? 'fas fa-check' : 'fas fa-pause';
    return (
      <span className={cls}>
        <i className={icon}></i> {item.enabled ? 'Activa' : 'Pausada'}
      </span>
    );
  };

  if (!items.length) {
    return (
      <div className="card" role="status">
        <div className="form-header">
          <h3>
            <i className="fas fa-calendar-alt"></i>
            Programaciones
          </h3>
        </div>
        <p style={{ color: 'var(--gray)' }}>No hay solicitudes programadas todavía. Crea una nueva para comenzar.</p>
      </div>
    );
  }

  return (
    <div className="table-container">
      <div className="table-header">
        <h3>Solicitudes Programadas</h3>
        <div className="table-actions">
          <button className="btn btn-outline btn-sm" onClick={() => window.location.reload()}>
            <i className="fas fa-sync"></i> Actualizar
          </button>
        </div>
      </div>
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>URL</th>
            <th>Método</th>
            <th>Tipo</th>
            <th>Cron / Fecha-Hora</th>
            <th>Próxima ejecución</th>
            <th>Estado</th>
            <th>Acciones</th>
          </tr>
        </thead>
        <tbody>
          {items.map((item) => (
            <tr key={item.id}>
              <td>#{String(item.id).padStart(5, '0')}</td>
              <td>{item.url}</td>
              <td>{item.method}</td>
              <td>{item.scheduleType === 'cron' ? 'CRON' : 'Única'}</td>
              <td>{item.scheduleType === 'cron' ? item.cronExpr : item.datetime}</td>
              <td>{item.nextRun || '—'}</td>
              <td>{getStatusPill(item)}</td>
              <td className="actions">
                <button className="view" title="Editar" onClick={() => onEdit?.(item)}>
                  <i className="fas fa-edit"></i>
                </button>
                <button className="execute" title="Ejecutar ahora" onClick={() => onRunNow?.(item)}>
                  <i className="fas fa-play"></i>
                </button>
                <button className="cancel" title={item.enabled ? 'Pausar' : 'Activar'} onClick={() => onToggleEnabled?.(item)}>
                  <i className={item.enabled ? 'fas fa-pause' : 'fas fa-play'}></i>
                </button>
                <button className="cancel" title="Eliminar" onClick={() => onDelete?.(item)}>
                  <i className="fas fa-trash"></i>
                </button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default ScheduledTable;