const { useState: useStateAH } = React;

function AdminHomepage() {
  const [form, setForm] = useStateAH(function () {
    return window.getHPSettings ? window.getHPSettings() : {};
  });
  const [saved, setSaved] = useStateAH(false);

  function upd(key) {
    return function (e) {
      var val = e.target.value;
      setForm(function (prev) { return Object.assign({}, prev, { [key]: val }); });
      if (saved) setSaved(false);
    };
  }

  function save() {
    localStorage.setItem('sst_homepage_settings', JSON.stringify(form));
    if (typeof window.sbSave === 'function') window.sbSave('sst_homepage_settings', form);
    window.dispatchEvent(new Event('sst_homepage_updated'));
    setSaved(true);
    setTimeout(function () { setSaved(false); }, 3500);
  }

  /* ── Estilos reutilizables ── */
  var card = { background: 'white', borderRadius: 12, border: '1px solid #e5e7eb', padding: '22px 24px', marginBottom: 16 };
  var lbl = { display: 'block', fontSize: 11, fontWeight: 700, color: '#374151', marginBottom: 6, textTransform: 'uppercase', letterSpacing: '0.07em' };
  var inp = { width: '100%', padding: '10px 14px', border: '1.5px solid #e5e7eb', borderRadius: 8, fontSize: 13, fontFamily: 'inherit', outline: 'none', color: '#1e293b', background: '#fafafa', boxSizing: 'border-box' };
  var ta = { width: '100%', padding: '10px 14px', border: '1.5px solid #e5e7eb', borderRadius: 8, fontSize: 13, fontFamily: 'inherit', outline: 'none', color: '#1e293b', background: '#fafafa', boxSizing: 'border-box', resize: 'vertical', minHeight: 78, lineHeight: 1.55 };
  var secHead = { margin: '0 0 16px', fontSize: 12, fontWeight: 800, color: '#1c79b4', textTransform: 'uppercase', letterSpacing: '0.08em', paddingBottom: 10, borderBottom: '2px solid #EEF2F7' };
  var g2 = { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 };
  var g3 = { display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 14 };
  var mb10 = { marginBottom: 10 };
  var mb14 = { marginBottom: 14 };

  return (
    <div style={{ maxWidth: 800 }}>

      {/* Aviso informativo */}
      <div style={{ background: '#f0f7ff', border: '1px solid #c3ddf5', borderLeft: '3px solid #1c79b4', borderRadius: '0 10px 10px 0', padding: '12px 16px', marginBottom: 22, display: 'flex', gap: 10, alignItems: 'center' }}>
        <span style={{ fontSize: 20, flexShrink: 0 }}>🖥️</span>
        <p style={{ margin: 0, fontSize: 13, color: '#3d6a91', lineHeight: 1.55 }}>
          Los cambios guardados se reflejan en el <strong>panel derecho de la pantalla de inicio de sesión</strong>. Cierra sesión para previsualizar.
        </p>
      </div>

      {/* ① Textos principales */}
      <div style={card}>
        <h3 style={secHead}>① Textos principales</h3>
        <div style={mb14}>
          <label style={lbl}>Descripción de la plataforma</label>
          <textarea style={ta} value={form.descripcion || ''} onChange={upd('descripcion')} />
        </div>
        <div>
          <label style={lbl}>Mensaje de bienvenida del formulario de login</label>
          <textarea style={Object.assign({}, ta, { minHeight: 58 })} value={form.mensajeBienvenida || ''} onChange={upd('mensajeBienvenida')} />
        </div>
      </div>

      {/* ② Contadores de impacto */}
      <div style={card}>
        <h3 style={secHead}>② Contadores de impacto</h3>
        <div style={g2}>
          {[
            { label: 'Contador 1', numKey: 'contador1Num', descKey: 'contador1Desc', numPh: '+1.000', descPh: 'Profesionales SST formados' },
            { label: 'Contador 2', numKey: 'contador2Num', descKey: 'contador2Desc', numPh: '+200', descPh: 'Plantillas editables' }
          ].map(function (c) {
            return (
              <div key={c.label} style={{ padding: 14, background: '#f8fafc', borderRadius: 10, border: '1px solid #e5e7eb' }}>
                <div style={{ fontSize: 12, fontWeight: 700, color: '#374151', marginBottom: 10 }}>{c.label}</div>
                <div style={mb10}>
                  <label style={lbl}>Número</label>
                  <input style={inp} value={form[c.numKey] || ''} onChange={upd(c.numKey)} placeholder={c.numPh} />
                </div>
                <div>
                  <label style={lbl}>Descripción</label>
                  <input style={inp} value={form[c.descKey] || ''} onChange={upd(c.descKey)} placeholder={c.descPh} />
                </div>
              </div>
            );
          })}
        </div>
      </div>

      {/* ③ Calificación */}
      <div style={card}>
        <h3 style={secHead}>③ Calificación</h3>
        <div style={{ display: 'grid', gridTemplateColumns: '200px 1fr', gap: 14 }}>
          <div>
            <label style={lbl}>Número (ej: 4.9/5)</label>
            <input style={inp} value={form.calificacionNum || ''} onChange={upd('calificacionNum')} placeholder="4.9/5" />
          </div>
          <div>
            <label style={lbl}>Texto descriptivo</label>
            <input style={inp} value={form.calificacionDesc || ''} onChange={upd('calificacionDesc')} placeholder="Calificación promedio de nuestros estudiantes" />
          </div>
        </div>
      </div>

      {/* ④ Badges de confianza */}
      <div style={card}>
        <h3 style={secHead}>⑤ Badges de confianza</h3>
        <div style={g3}>
          {[
            ['badge1', 'Badge 1', '✓ Certificado ASSYST'],
            ['badge2', 'Badge 2', '✓ 100% Virtual'],
            ['badge3', 'Badge 3', '✓ Normativa vigente 2025']
          ].map(function (b) {
            return (
              <div key={b[0]}>
                <label style={lbl}>{b[1]}</label>
                <input style={inp} value={form[b[0]] || ''} onChange={upd(b[0])} placeholder={b[2]} />
              </div>
            );
          })}
        </div>
        {/* Vista previa de badges */}
        <div style={{ marginTop: 14, padding: '10px 14px', background: 'linear-gradient(135deg,#0a3d5e,#1c79b4)', borderRadius: 8 }}>
          <div style={{ fontSize: 10, color: 'rgba(255,255,255,.5)', textTransform: 'uppercase', letterSpacing: '0.07em', marginBottom: 8 }}>Vista previa</div>
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
            {[form.badge1, form.badge2, form.badge3].filter(Boolean).map(function (b) {
              return (
                <span key={b} style={{ background: 'rgba(196,180,0,.13)', border: '1px solid rgba(196,180,0,.45)', color: '#c4b400', borderRadius: 20, padding: '5px 13px', fontSize: 11, fontWeight: 700 }}>{b}</span>
              );
            })}
          </div>
        </div>
      </div>

      {/* Botón Guardar */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 16, paddingBottom: 40 }}>
        <button
          onClick={save}
          style={{ padding: '13px 34px', background: '#1c79b4', color: 'white', border: 'none', borderRadius: 10, fontSize: 14, fontWeight: 700, cursor: 'pointer', fontFamily: 'inherit', letterSpacing: '0.02em', boxShadow: '0 4px 14px rgba(28,121,180,.28)', transition: 'background .2s' }}
          onMouseOver={function (e) { e.currentTarget.style.background = '#1565a0'; }}
          onMouseOut={function (e) { e.currentTarget.style.background = '#1c79b4'; }}
        >
          💾 Guardar cambios
        </button>
        {saved && (
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, background: '#f0fdf4', border: '1px solid #86efac', borderRadius: 8, padding: '10px 16px' }}>
            <span style={{ fontSize: 16 }}>✅</span>
            <span style={{ fontSize: 13, color: '#15803d', fontWeight: 700 }}>Cambios guardados correctamente</span>
          </div>
        )}
      </div>

    </div>
  );
}

window.AdminHomepage = AdminHomepage;