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

const HelpSection = ({ icon, title, children }) => (
  <div className="card">
    <div className="form-header">
      <h3>
        <i className={icon} style={{ marginRight: 8 }}></i>
        {title}
      </h3>
    </div>
    <div>{children}</div>
  </div>
);

const HelpPage = () => {
  return (
    <section className="content-wrapper">
      <div className="card" style={{ marginBottom: 24 }}>
        <div className="form-header">
          <h3>
            <i className="fas fa-question-circle" style={{ marginRight: 8 }}></i>
            Centro de ayuda
          </h3>
        </div>
        <p style={{ color: 'var(--gray)' }}>
          Aquí encontrarás una guía rápida para usar Request Scheduler, ejemplos y respuestas a preguntas frecuentes.
        </p>
      </div>

      <div className="content-grid" style={{ display: 'grid', gap: 24 }}>
        <HelpSection icon="fas fa-play-circle" title="Primeros pasos">
          <ol style={{ paddingLeft: 18 }}>
            <li>Ve a <b>Crear Solicitud</b> e ingresa la URL del servicio que deseas invocar.</li>
            <li>Selecciona el <b>método HTTP</b> y, si aplica, agrega <b>cuerpo</b> y <b>headers (JSON)</b>.</li>
            <li>Haz clic en <b>Enviar ahora</b> para probar o usa <b>Programar</b> para ejecutar más tarde.</li>
            <li>Consulta el resultado en <b>Historial</b> o edita tus tareas en <b>Solicitudes Programadas</b>.</li>
          </ol>
        </HelpSection>

        <HelpSection icon="fas fa-clock" title="Programación de solicitudes">
          <p>
            Puedes programar ejecuciones únicas o periódicas. El sistema admite intervalos simples (por ejemplo,
            cada 15 minutos) y fechas específicas. En la tabla de programadas usa el botón <b>Editar</b> para modificar
            frecuencia, payload y headers.
          </p>
          <ul style={{ paddingLeft: 18 }}>
            <li>Zona horaria: configurable en <b>Configuración</b>.</li>
            <li>Headers: usa JSON válido, por ejemplo: <code>{'{"Authorization":"Bearer <token>"}'}</code>.</li>
            <li>Prueba antes de programar para verificar que el endpoint responda como esperas.</li>
          </ul>
        </HelpSection>

        <HelpSection icon="fas fa-coins" title="Créditos">
          <p>
            Los <b>créditos</b> representan tu cuota disponible de ejecuciones. Desde el encabezado puedes
            recargarlos manualmente para fines de prueba (<i className="fas fa-sync" aria-hidden="true"></i> Recargar créditos).
            El valor se guarda en este navegador.
          </p>
        </HelpSection>

        <HelpSection icon="fas fa-tools" title="Solución de problemas">
          <ul style={{ paddingLeft: 18 }}>
            <li>
              <b>Error 4xx/5xx:</b> revisa la URL, método y autenticación. Verifica los headers y el cuerpo enviado.
            </li>
            <li>
              <b>JSON inválido:</b> en headers/cuerpo debes usar JSON válido. Puedes validar con
              <a href="https://jsonlint.com/" target="_blank" rel="noreferrer" style={{ marginLeft: 6 }}>JSONLint</a>.
            </li>
            <li>
              <b>No veo mis cambios:</b> intenta refrescar la página o limpiar el almacenamiento local del navegador.
            </li>
          </ul>
        </HelpSection>

        <HelpSection icon="fas fa-keyboard" title="Atajos útiles">
          <ul style={{ paddingLeft: 18 }}>
            <li><b>Ctrl/Cmd + Enter:</b> enviar formulario (cuando un formulario está enfocado).</li>
            <li><b>Ctrl/Cmd + K:</b> abrir búsqueda del navegador para filtrar (temporal).</li>
          </ul>
        </HelpSection>

        <HelpSection icon="fas fa-life-ring" title="Soporte y contacto">
          <p>
            ¿Necesitas ayuda adicional? Envía los detalles de tu solicitud (URL, método, headers y respuesta) al
            administrador del sistema o a tu equipo de soporte interno.
          </p>
        </HelpSection>
      </div>
    </section>
  );
};

export default HelpPage;