/* global React, ReactDOM */
const { useState, useEffect } = React;

// Componentes y utilidades compartidas (definidos en common.jsx).
const {
  Icon, useReveal, Navbar, Footer, useSiteTweaks, SiteTweaks,
  SubscribeModal, Galeria
} = window;

// Software gratis: la lista sale de api/list.php (tabla softwares). Cada ficha
// trae en details las características, los requisitos y las capturas con
// título. Los programas no tienen enlace directo: al aceptar el aviso legal se
// pide un enlace temporal a api/sw_token.php (como MADeCa Mini), que cuenta la
// descarga. El manual se abre desde api/sw_manual.php, que también lo cuenta.

const SW_ERRORES = {
  demasiadas: "Se han pedido demasiadas descargas desde su conexión. Inténtelo dentro de una hora.",
  no_disponible: "La descarga no está disponible en este momento. Inténtelo más tarde.",
  robot: "Su navegador no permite esta descarga. Pruebe con otro navegador."
};

const conV = v => (v ? (/^v/i.test(v) ? v : "v" + v) : "");

// Capturas de la ficha: las de details (con título y descripción) o, en fichas
// antiguas, la principal y las extra sin texto.
const capturasDe = item => {
  const det = item.details && Array.isArray(item.details.capturas) ? item.details.capturas : [];
  if (det.length) return det.filter(c => c && c.src);
  const urls = [item.screenshot_url, ...(item.screenshots_extra_urls || [])].filter(Boolean);
  return urls.map((src, i) => ({ src, t: `Captura ${i + 1}`, d: "" }));
};

/* ---------- Descarga: aviso legal + enlace temporal ---------- */
const SwDescarga = ({ item, onClose }) => {
  const [accept, setAccept] = useState(false);
  const [preparando, setPreparando] = useState(false);
  const [error, setError] = useState(null);
  const [iniciada, setIniciada] = useState(false);
  const open = !!item;

  useEffect(() => {
    if (!open) return undefined;
    setAccept(false); setError(null); setIniciada(false);
    document.body.style.overflow = "hidden";
    const esc = e => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", esc);
    return () => { window.removeEventListener("keydown", esc); document.body.style.overflow = ""; };
  }, [item]);

  const descargar = async () => {
    if (!accept || preparando) return;
    setPreparando(true); setError(null); setIniciada(false);
    try {
      const r = await fetch("api/sw_token.php", {
        method: "POST",
        credentials: "same-origin",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ slug: item.slug, acepto: true })
      });
      const d = await r.json().catch(() => ({}));
      if (!r.ok || !d.ok || !d.url) throw new Error(d.error || "servidor");
      window.location.href = d.url;
      setIniciada(true);
    } catch (e) {
      setError(SW_ERRORES[e.message] || "No se ha podido iniciar la descarga. Inténtelo de nuevo en unos minutos.");
    } finally {
      setPreparando(false);
    }
  };

  return (
    <div className={`modal-bg ${open ? "is-open" : ""}`} onClick={onClose}>
      {item && (
        <div className="modal" role="dialog" aria-modal="true" aria-label={`Descargar ${item.title}`} onClick={e => e.stopPropagation()}>
          <button className="modal__close" onClick={onClose} aria-label="Cerrar"><Icon name="x" size={16}/></button>
          <span className="eyebrow"><Icon name="download" size={12}/> &nbsp;Descarga gratuita</span>
          <h3>{item.title} {conV(item.version)}</h3>
          <p style={{ fontSize: 14, color: "var(--muted)", marginBottom: 16 }}>
            {[item.size_label, item.platform].filter(Boolean).join(" · ")}
          </p>

          <div className="md-mini-lic">
            <b>Aviso legal</b>
            <p>
              {item.title} es gratuito y se entrega tal cual, sin garantía de ningún tipo.
              Antes de descargarlo, lea el aviso legal y las limitaciones de su manual
              {item.manual_url
                ? <> (<a href={item.manual_url + "#legal"} target="_blank" rel="noopener">abrir el aviso legal</a>).</>
                : "."}
            </p>
            <p style={{ marginTop: 8 }}>Para contar las descargas se guarda la dirección IP y el país aproximado.</p>
          </div>

          <label className="field--check md-mini-acepto">
            <input type="checkbox" checked={accept} onChange={e => setAccept(e.target.checked)}/>
            <span>He leído el aviso legal de {item.title} y lo acepto.</span>
          </label>

          <button
            type="button"
            className="btn btn--accent"
            style={{ width: "100%", justifyContent: "center", display: "flex", opacity: accept && !preparando ? 1 : 0.45, marginTop: 8 }}
            disabled={!accept || preparando}
            onClick={descargar}
          >
            <Icon name="download" size={16}/> {preparando ? "Preparando la descarga…" : `Descargar${item.size_label ? ` (${item.size_label})` : ""}`}
          </button>
          {error && <p className="md-mini-msg md-mini-msg--err" role="alert">{error}</p>}
          {iniciada && <p className="md-mini-msg" role="status">La descarga ha comenzado. El enlace es personal y caduca en una hora.</p>}
          {item.sha256 && (
            <p className="md-mini-sha sg-sha">
              {item.file_name} · SHA-256: <code>{item.sha256}</code>
              {" · "}<a href={`software-gratis/${encodeURIComponent(item.file_name)}.sha256`}>fichero .sha256</a>
              {" · "}<a href={vtUrl(item.sha256)} target="_blank" rel="noopener noreferrer">análisis en VirusTotal</a>
            </p>
          )}
        </div>
      )}
    </div>
  );
};

// Análisis del programa en VirusTotal, buscado por su huella SHA-256.
const vtUrl = sha => `https://www.virustotal.com/gui/file/${encodeURIComponent(sha)}`;

// Programas que también se publican en GitHub (repositorio público con las descargas en Releases).
const GITHUB = {
  maclipboard: "MAClipBoard", macolor: "MAColor", madisk: "MADisk",
  maprocess: "MAProcess", mascrshot: "MAScrShot", maserv: "MAServ",
};
const githubUrl = item => GITHUB[item.slug] ? `https://github.com/MaSoft/${GITHUB[item.slug]}/releases/latest` : null;

// Resumen de una línea para el índice: la descripción hasta los dos puntos o
// el primer punto (todas empiezan diciendo qué hace el programa).
const resumenDe = item => {
  const d = (item.description || "").trim();
  const corte = d.search(/[:.]/);
  return corte > 0 ? d.slice(0, corte) : d;
};

/* ---------- Índice: una tarjeta por programa ---------- */
const Indice = ({ items, onIr }) => (
  <nav className="sg-indice" aria-label="Programas">
    {items.map((item, i) => {
      const c = capturasDe(item)[0];
      return (
        <a key={item.id} className="sg-indice__item" href={`#${item.slug}`} onClick={e => { e.preventDefault(); onIr(item.slug); }}>
          <span className="sg-indice__shot">{c ? <img src={c.src} alt="" loading="lazy"/> : <Icon name="image" size={18}/>}</span>
          <span className="sg-indice__txt">
            <span className="sg-indice__num">{String(i + 1).padStart(2, "0")}</span>
            <b>{item.title} <span className="sg-indice__ver">{conV(item.version)}</span></b>
            <span className="sg-indice__res">{resumenDe(item)}</span>
          </span>
          <span className="sg-indice__ir" aria-hidden="true"><Icon name="arrow-down" size={16}/></span>
        </a>
      );
    })}
  </nav>
);

/* ---------- Barra fija con los programas (marca en cuál estás) ----------
   Misma subcabecera que las páginas de producto (MADeCa, MASys, MAPerit). */
const BarraProgramas = ({ items, activo, onIr }) => {
  const caja = React.useRef(null);
  // En pantallas estrechas la barra se desliza: se centra el programa activo.
  useEffect(() => {
    const nav = caja.current;
    const el = nav && nav.querySelector(".is-active");
    if (!el || nav.scrollWidth <= nav.clientWidth) return;
    nav.scrollTo({ left: el.offsetLeft - (nav.clientWidth - el.offsetWidth) / 2, behavior: "smooth" });
  }, [activo]);
  return (
  <div className="mp-subnav">
    <div className="container">
      <nav className="mp-subnav__inner" ref={caja} aria-label="Ir a un programa">
        <a href="#descargas" className={activo ? undefined : "is-active"} aria-current={activo ? undefined : "true"}
           onClick={e => { e.preventDefault(); window.scrollTo({ top: 0, behavior: "smooth" }); }}>
          Todos
        </a>
        {items.map(item => (
          <a key={item.id} href={`#${item.slug}`} className={activo === item.slug ? "is-active" : undefined}
             aria-current={activo === item.slug ? "true" : undefined}
             onClick={e => { e.preventDefault(); onIr(item.slug); }}>
            {item.title}
          </a>
        ))}
      </nav>
    </div>
  </div>
  );
};

/* ---------- Sección de un programa ---------- */
const Programa = ({ item, num, total, onDownload }) => {
  const det = item.details || {};
  const caracteristicas = Array.isArray(det.caracteristicas) ? det.caracteristicas : [];
  const requisitos = Array.isArray(det.requisitos) ? det.requisitos : [];
  const capturas = capturasDe(item);

  return (
    <section className="sg-sec" id={item.slug} data-sg={item.slug}>
      <div className="container">
        <div className="sg-sec__top">
          <div className="sg-sec__info reveal">
            <span className="sg-sec__num">{String(num).padStart(2, "0")} / {String(total).padStart(2, "0")}</span>
            <h2 className="sg-sec__tit">{item.title} <span className="sg-prog__ver">{conV(item.version)}</span></h2>
            <p className="sg-prog__meta">{[item.platform, item.size_label].filter(Boolean).join(" · ")}</p>
            <p className="sg-sec__desc">{item.description}</p>
            {(item.tags || []).length > 0 && (
              <div className="dl-card__tags">
                {item.tags.map(t => <span key={t} className="dl-tag">{t}</span>)}
              </div>
            )}
            <div className="sg-prog__acciones">
              {item.has_file
                ? <button type="button" className="btn btn--accent" onClick={() => onDownload(item)}><Icon name="download" size={16}/> Descargar{item.size_label ? ` (${item.size_label})` : ""}</button>
                : <span className="sg-prog__nodisp">Descarga no disponible</span>}
              {item.manual_url && (
                <a className="btn btn--ghost" href={item.manual_url} target="_blank" rel="noopener"><Icon name="file-text" size={16}/> Manual</a>
              )}
              {githubUrl(item) && (
                <a className="btn btn--ghost" href={githubUrl(item)} target="_blank" rel="noopener noreferrer" title="Descargar desde GitHub"><Icon name="github" size={16}/> GitHub</a>
              )}
            </div>
          </div>
          {capturas[0] && (
            <figure className="sg-sec__shot reveal">
              {/* Sin carga diferida: si se cargara al pasar por ella, empujaría la página al saltar a otro programa. */}
              <img src={capturas[0].src} alt={`${item.title}: ${capturas[0].t}`}/>
            </figure>
          )}
        </div>

        {(caracteristicas.length > 0 || requisitos.length > 0) && (
          <div className="sg-sec__datos">
            {caracteristicas.length > 0 && (
              <div className="sg-prog__bloque reveal">
                <h3>Qué hace</h3>
                <ul className="sg-prog__lista">
                  {caracteristicas.map((c, i) => (
                    <li key={i}><span className="sg-prog__check"><Icon name="check" size={14} stroke={2.4}/></span>{c}</li>
                  ))}
                </ul>
              </div>
            )}
            {requisitos.length > 0 && (
              <div className="sg-prog__bloque reveal">
                <h3>Requisitos</h3>
                <div className="mp-table sg-req">
                  {requisitos.map(([k, v], i) => (
                    <div key={i} className="mp-table__row">
                      <div className="mp-table__k">{k || "—"}</div>
                      <div className="mp-table__v">{v}</div>
                    </div>
                  ))}
                </div>
                {det.nota && <p className="sg-prog__nota">{det.nota}</p>}
              </div>
            )}
          </div>
        )}

        {capturas.length > 1 && (
          <div className="sg-prog__bloque">
            <h3>Capturas</h3>
            <Galeria shots={capturas}/>
          </div>
        )}

        {item.sha256 && (
          <p className="md-mini-sha sg-sha sg-sec__sha">
            {item.file_name} · SHA-256: <code>{item.sha256}</code>
            {" · "}<a href={`software-gratis/${encodeURIComponent(item.file_name)}.sha256`}>fichero .sha256</a>
            {" · "}<a href={vtUrl(item.sha256)} target="_blank" rel="noopener noreferrer">análisis en VirusTotal</a>
          </p>
        )}
      </div>
    </section>
  );
};

/* ---------- Página Software gratis ---------- */
const SoftwareGratisPage = () => {
  const [t, setTweak] = useSiteTweaks();
  const [items, setItems]             = useState(null);   // null = cargando
  const [fallo, setFallo]             = useState(false);
  const [subOpen, setSubOpen]         = useState(false);
  const [dlItem, setDlItem]           = useState(null);
  const [contactInfo, setContactInfo] = useState({});
  const [activo, setActivo]           = useState(null);

  useReveal(items ? items.length : 0);

  const cargar = () => {
    setFallo(false); setItems(null);
    fetch("api/list.php")
      .then(r => r.json())
      .then(d => { if (d && d.ok && Array.isArray(d.items)) setItems(d.items); else throw new Error(); })
      .catch(() => { setItems([]); setFallo(true); });
  };

  useEffect(() => {
    cargar();
    fetch("api/settings.php?action=get_public")
      .then(r => r.json())
      .then(d => { if (d.ok && d.settings) setContactInfo(d.settings); })
      .catch(() => {});
  }, []);

  // Programa activo en la barra: el último cuya sección ya ha pasado bajo la
  // barra fija. Ninguno mientras se está en la cabecera o en el índice.
  useEffect(() => {
    if (!items || !items.length) return undefined;
    const calcular = () => {
      let actual = null;
      document.querySelectorAll("[data-sg]").forEach(s => {
        if (s.getBoundingClientRect().top <= 160) actual = s.dataset.sg;
      });
      setActivo(actual);
    };
    calcular();
    window.addEventListener("scroll", calcular, { passive: true });
    window.addEventListener("resize", calcular);
    return () => { window.removeEventListener("scroll", calcular); window.removeEventListener("resize", calcular); };
  }, [items]);

  // Al llegar con #programa en la dirección, ir a su sección cuando ya existe.
  useEffect(() => {
    const h = decodeURIComponent((window.location.hash || "").slice(1));
    if (items && h && document.getElementById(h)) irA(h, "instant");
  }, [items]);

  // 128 px = menú principal + barra de programas. Si al terminar el desplazamiento
  // algo de encima ha cambiado de alto (imágenes que acaban de cargar), se reajusta.
  const irA = (slug, behavior = "smooth") => {
    const el = document.getElementById(slug);
    if (!el) return;
    const ir = b => window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 128, behavior: b });
    ir(behavior);
    [700, 1400].forEach(ms => setTimeout(() => {
      if (Math.abs(el.getBoundingClientRect().top - 128) > 4) ir("instant");
    }, ms));
    if (window.history.replaceState) window.history.replaceState(null, "", "#" + slug);
  };

  const onScroll = (id) => {
    if (id === "top") { window.scrollTo({ top: 0, behavior: "smooth" }); return; }
    irA(id);
  };

  const adminEmail = contactInfo.contact_email || "hola@masoft.es";
  const lista = items || [];

  return (
    <>
      <Navbar page="downloads" theme={t.theme} onToggleTheme={() => setTweak("theme", t.theme === "dark" ? "light" : "dark")} onScroll={onScroll}/>
      {lista.length > 0 && <BarraProgramas items={lista} activo={activo} onIr={irA}/>}
      <main id="top">
        <section className="section sg-cabecera" id="descargas">
          <div className="container">
            <div className="section-head reveal">
              <div>
                <span className="eyebrow">Software gratis</span>
                <h2>Utilidades gratuitas para Windows.</h2>
              </div>
              <p className="section-head__r">
                Programas desarrollados por Masoft.es que usamos en nuestro trabajo diario.
                Gratis y sin registro: un solo archivo que se copia y se abre, con su manual.
              </p>
            </div>

            {/* Suscripción arriba, a la vista nada más entrar (antes estaba al final de la página) */}
            <div className="sg-suscripcion reveal">
              <div>
                <b>¿Quieres estar al día?</b>
                <p>Recibe un aviso cuando publiquemos nuevo software o actualizaciones. Sin spam.</p>
              </div>
              <button className="btn btn--accent" onClick={() => setSubOpen(true)}><Icon name="mail" size={15}/> Suscribirme</button>
            </div>

            {items === null && <p className="sg-estado">Cargando el software…</p>}
            {fallo && (
              <p className="sg-estado" role="alert">
                No se ha podido cargar la lista de programas.{" "}
                <button type="button" className="mp-linkbtn" onClick={cargar}>Reintentar</button>
              </p>
            )}
            {items && !fallo && items.length === 0 && <p className="sg-estado">Todavía no hay software publicado.</p>}

            {lista.length > 0 && (
              <div className="sg-aviso reveal" role="note">
                <b><span className="sg-aviso__ico"><Icon name="shield" size={18}/></span> Importante: al abrir el programa por primera vez</b>
                <p>
                  Los programas no están firmados digitalmente, así que Windows puede mostrar el aviso
                  «Windows protegió su PC» (SmartScreen). Para abrirlo, pulse «Más información» y después
                  «Ejecutar de todas formas». Si quiere comprobar que el archivo es el original, compare su
                  huella SHA-256 con la publicada en la ficha. En PowerShell: <code>Get-FileHash .\nombre_del_archivo.exe</code>
                </p>
                <p>
                  Para mayor seguridad, cada ficha enlaza al análisis del programa en{" "}
                  <a href="https://www.virustotal.com" target="_blank" rel="noopener noreferrer">VirusTotal</a>, que lo revisa
                  con decenas de antivirus. También puede subir allí el archivo descargado y comprobar que su huella coincide.
                </p>
                <p>
                  En VirusTotal puede ver uno o dos avisos de antivirus poco conocidos que marcan cualquier programa sin firma
                  digital, por su forma de empaquetarlo y no por lo que hace. Ninguno de los antivirus de uso habitual
                  (Microsoft Defender, ESET, Kaspersky, Bitdefender…) detecta nada. Si un antivirus importante lo marcara,
                  retiraríamos la descarga hasta aclararlo.
                </p>
              </div>
            )}

            {lista.length > 0 && <Indice items={lista} onIr={irA}/>}

          </div>
        </section>

        {lista.map((item, i) => (
          <Programa key={item.id} item={item} num={i + 1} total={lista.length} onDownload={setDlItem}/>
        ))}

      </main>
      <Footer page="downloads" contactInfo={contactInfo} onScroll={onScroll}/>

      <SwDescarga item={dlItem} onClose={() => setDlItem(null)}/>
      <SubscribeModal open={subOpen} onClose={() => setSubOpen(false)} adminEmail={adminEmail}/>

      <SiteTweaks t={t} setTweak={setTweak}/>
    </>
  );
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<SoftwareGratisPage/>);