/* global React */
// Page templates for the multi-page Zenón Pereyra site.
// Reads route data from window: PAGES, NAV, BY_SLUG, getBreadcrumb, siblings, children.

const { useState: useStateP, useEffect: useEffectP } = React;

// ── Router ────────────────────────────────────────────────
function useHashRoute() {
  const get = () => {
    const h = window.location.hash || "#/";
    return h.replace(/^#/, "") || "/";
  };
  const [path, setPath] = useStateP(get());
  useEffectP(() => {
    const on = () => { setPath(get()); window.scrollTo({top:0, behavior:'instant'}); };
    window.addEventListener("hashchange", on);
    return () => window.removeEventListener("hashchange", on);
  }, []);
  return path;
}

function link(slug, external) {
  if (external) return slug;
  return "#" + slug;
}

// ── Breadcrumb ────────────────────────────────────────────
function Breadcrumb({ slug }) {
  const crumbs = window.getBreadcrumb(slug);
  return (
    <nav className="crumbs">
      <a href="#/">Inicio</a>
      {crumbs.map((c, i) => (
        <React.Fragment key={i}>
          <span className="sep">/</span>
          {c.slug && i < crumbs.length - 1
            ? <a href={link(c.slug)}>{c.label}</a>
            : <span className={i === crumbs.length - 1 ? "current" : ""}>{c.label}</span>}
        </React.Fragment>
      ))}
    </nav>
  );
}

// ── Page Hero ─────────────────────────────────────────────
function PageHero({ eyebrow, title, lede, slug }) {
  return (
    <header className="page-hero">
      <div className="container">
        <Breadcrumb slug={slug}/>
        {eyebrow && <div className="eyebrow-s" style={{marginTop:18}}>{eyebrow}</div>}
        <h1 className="page-title">{title}</h1>
        {lede && <p className="page-lede">{lede}</p>}
      </div>
      <div className="page-hero-stripe"><i/><i/><i/></div>
    </header>
  );
}

// ── Sidebar nav (siblings) ────────────────────────────────
function SectionSidebar({ slug }) {
  const sibs = window.siblings(slug);
  const kids = window.children(slug);
  const items = kids.length ? kids : sibs;
  if (!items.length) return null;
  const heading = kids.length ? "En esta sección" : "También en esta área";
  return (
    <aside className="side-nav">
      <h4>{heading}</h4>
      <ul>
        {items.map((it, i) => (
          <li key={i}>
            <a href={link(it.slug)}>{it.label}</a>
          </li>
        ))}
      </ul>
    </aside>
  );
}

// ── Templates ─────────────────────────────────────────────

function ArticleHero({ hero }) {
  if (!hero || !hero.src) return null;
  return (
    <section className="article-hero-wrap">
      <div className="container">
        <figure className="article-hero">
          <img src={hero.src} alt={hero.alt || ""} loading="lazy"/>
          {hero.caption && <figcaption>{hero.caption}</figcaption>}
        </figure>
      </div>
    </section>
  );
}

function ArticlePage({ slug, page }) {
  return (
    <>
      <PageHero {...page} slug={slug}/>
      <ArticleHero hero={page.hero}/>
      <section className="page-body">
        <div className="container grid-with-side">
          <article className="prose">
            {page.body && page.body.map((p, i) => <p key={i}>{p}</p>)}
            {page.sections && page.sections.map((sec, i) => (
              <div key={i}>
                <h2>{sec.h}</h2>
                {sec.paras.map((p, j) => <p key={j}>{p}</p>)}
              </div>
            ))}
            {!page.body && !page.sections && (
              <div className="empty-block">
                <p>Contenido próximamente.</p>
                <p className="small">Esta sección se está actualizando con la nueva versión del sitio. Para más información, comunicate con la Comuna.</p>
              </div>
            )}
            {page.factbox && <FactBox box={page.factbox}/>}
          </article>
          <SectionSidebar slug={slug}/>
        </div>
      </section>
    </>
  );
}

function FactBox({ box }) {
  return (
    <aside className="factbox">
      <h4>{box.title}</h4>
      <dl>
        {box.rows.map(([k, v], i) => (
          <React.Fragment key={i}>
            <dt>{k}</dt>
            <dd>{v}</dd>
          </React.Fragment>
        ))}
      </dl>
    </aside>
  );
}

function AuthoritiesPage({ slug, page }) {
  const featured = page.members.filter(m => m.featured);
  const rest = page.members.filter(m => !m.featured);
  return (
    <>
      <PageHero {...page} slug={slug}/>
      <section className="page-body">
        <div className="container">
          <div className="auth-grid">
            {featured.map((m, i) => (
              <div key={i} className="auth-card feature">
                <div className="avatar lg">{m.initials}</div>
                <div className="role">{m.role}</div>
                <div className="name">{m.name}</div>
              </div>
            ))}
          </div>
          <div className="auth-list">
            {rest.map((m, i) => (
              <div key={i} className="auth-card">
                <div className="avatar">{m.initials}</div>
                <div>
                  <div className="role">{m.role}</div>
                  <div className="name">{m.name}</div>
                </div>
              </div>
            ))}
          </div>
          <p className="caption">Comisión Comunal en funciones. Fuente: Comuna de Zenón Pereyra.</p>
        </div>
      </section>
    </>
  );
}

function HubPage({ slug, page }) {
  const kids = window.children(slug);
  return (
    <>
      <PageHero {...page} slug={slug}/>
      <section className="page-body">
        <div className="container">
          <div className="hub-grid">
            {kids.map((c, i) => (
              <a key={i} href={link(c.slug)} className="hub-tile">
                <div className="hub-num">{String(i + 1).padStart(2, "0")}</div>
                <div className="hub-label">{c.label}</div>
                <div className="hub-arrow">→</div>
              </a>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}

function InstitutionsPage({ slug, page }) {
  const kids = window.children(slug);
  return (
    <>
      <PageHero {...page} slug={slug}/>
      <section className="page-body">
        <div className="container">
          <div className="inst-grid">
            {kids.map((c, i) => (
              <a key={i} href={link(c.slug)} className="inst-card">
                <div className="inst-mark">
                  <span>{c.label.split(" ").slice(0, 2).map(w => w[0]).join("").slice(0,2).toUpperCase()}</span>
                </div>
                <div className="inst-label">{c.label}</div>
                <div className="inst-cta">Ver institución <span>→</span></div>
              </a>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}

function EventsPage({ slug, page }) {
  const ev = [
    { day: "17", mon: "MAY", title: "Feria de la Economía Social", tag: "Producción", where: "Plaza San Martín · 9:00 a 13:00" },
    { day: "24", mon: "MAY", title: "Fiesta Patronal · Santa Justina", tag: "Cultura", where: "Iglesia · Misa 11:00 · Procesión 17:00" },
    { day: "31", mon: "MAY", title: "Encuentro de Adultos Mayores", tag: "Desarrollo Social", where: "Centro de Jubilados · 16:00" },
    { day: "07", mon: "JUN", title: "Jornada de plantación · Reserva Ecológica", tag: "Medio Ambiente", where: "Reserva Ecológica Comunal · 8:30" },
    { day: "14", mon: "JUN", title: "Función del Ballet «Huellas de mi Pueblo»", tag: "Cultura", where: "Salón Comunal · 21:00" },
  ];
  return (
    <>
      <PageHero {...page} slug={slug}/>
      <section className="page-body">
        <div className="container">
          <div className="events-list">
            {ev.map((e, i) => (
              <article key={i} className="event-row">
                <div className="event-date">
                  <span className="num">{e.day}</span>
                  <span className="mon">{e.mon}</span>
                </div>
                <div className="event-meta">
                  <span className="tag">{e.tag}</span>
                  <h3>{e.title}</h3>
                  <div className="where">{e.where}</div>
                </div>
                <a className="event-cta" href="#">Más info →</a>
              </article>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}

// TODO: reemplazar por el mail real de la Comuna y activar FormSubmit
// enviando el form una vez desde el sitio desplegado (FormSubmit manda un
// link de confirmación al destinatario; hasta hacer clic ahí no se entregan mensajes).
const CONTACT_EMAIL = "tu-mail@example.com";

function ContactForm() {
  const [status, setStatus] = useStateP("idle"); // idle | sending | success | error
  const [errorMsg, setErrorMsg] = useStateP("");

  async function handleSubmit(e) {
    e.preventDefault();
    const form = e.currentTarget;
    // Honeypot: si está completo, lo tratamos como bot y fingimos éxito.
    if (form._honey && form._honey.value) {
      setStatus("success");
      form.reset();
      return;
    }
    const data = {
      name: form.name.value.trim(),
      email: form.email.value.trim(),
      _subject: form._subject.value.trim() || "Mensaje desde el sitio comunal",
      message: form.message.value.trim(),
      _template: "table",
      _captcha: "false",
    };
    setStatus("sending");
    setErrorMsg("");
    try {
      const res = await fetch(`https://formsubmit.co/ajax/${CONTACT_EMAIL}`, {
        method: "POST",
        headers: { "Content-Type": "application/json", "Accept": "application/json" },
        body: JSON.stringify(data),
      });
      const json = await res.json().catch(() => ({}));
      if (res.ok && (json.success === "true" || json.success === true)) {
        setStatus("success");
        form.reset();
      } else {
        throw new Error(json.message || `HTTP ${res.status}`);
      }
    } catch (err) {
      setStatus("error");
      setErrorMsg(err.message || "No pudimos enviar el mensaje.");
    }
  }

  if (status === "success") {
    return (
      <div className="contact-form contact-feedback success" role="status">
        <h3>¡Gracias por escribirnos!</h3>
        <p>Recibimos tu mensaje y la Comuna te va a responder a la brevedad al correo que indicaste.</p>
        <button className="btn btn-ghost" type="button" onClick={() => setStatus("idle")}>
          Enviar otro mensaje
        </button>
      </div>
    );
  }

  const mailtoFallback = `mailto:${CONTACT_EMAIL}?subject=${encodeURIComponent("Mensaje desde el sitio comunal")}`;

  return (
    <form className="contact-form" onSubmit={handleSubmit} noValidate>
      <h3>Escribinos</h3>
      <div className="row-2">
        <label>Nombre
          <input type="text" name="name" placeholder="Tu nombre" required minLength="2" autoComplete="name"/>
        </label>
        <label>Email
          <input type="email" name="email" placeholder="tu@email.com" required autoComplete="email"/>
        </label>
      </div>
      <label>Asunto
        <input type="text" name="_subject" placeholder="¿En qué te podemos ayudar?" required minLength="3"/>
      </label>
      <label>Mensaje
        <textarea name="message" rows="5" placeholder="Contanos un poco más" required minLength="10"/>
      </label>
      {/* honeypot anti-bots: invisible para humanos, los bots lo completan */}
      <input type="text" name="_honey" tabIndex="-1" autoComplete="off"
             style={{position:'absolute', left:'-9999px', width:1, height:1, opacity:0}} aria-hidden="true"/>
      <button className="btn btn-primary" type="submit" disabled={status === "sending"}>
        {status === "sending" ? "Enviando…" : "Enviar mensaje →"}
      </button>
      {status === "error" && (
        <p className="contact-feedback error" role="alert">
          No pudimos enviar el mensaje{errorMsg ? ` (${errorMsg})` : ""}.{" "}
          Probá nuevamente o escribinos a <a href={mailtoFallback}>{CONTACT_EMAIL}</a>.
        </p>
      )}
    </form>
  );
}

function ContactPage({ slug, page }) {
  return (
    <>
      <PageHero {...page} slug={slug}/>
      <section className="page-body">
        <div className="container contact-grid">
          <div>
            <div className="contact-blocks">
              {page.blocks.map((b, i) => (
                <div key={i} className="contact-block">
                  <div className="cb-label">{b.label}</div>
                  {b.href
                    ? <a className="cb-value" href={b.href}>{b.value}</a>
                    : <div className="cb-value">{b.value}</div>}
                </div>
              ))}
            </div>
            <div className="contact-block hours">
              <div className="cb-label">Horario de atención</div>
              <div className="cb-value">Lunes a viernes, 7:00 a 13:00</div>
            </div>
          </div>
          <ContactForm/>
        </div>
      </section>
    </>
  );
}

function SatelliteMap({ lat, lon, zoom = 14, caption }) {
  // Iframe de Google Maps en modo satelital (t=k). Sin API key.
  const src = `https://maps.google.com/maps?q=${lat},${lon}&z=${zoom}&t=k&output=embed`;
  return (
    <figure className="satellite-map">
      <iframe
        src={src}
        title="Vista satelital de Zenón Pereyra"
        loading="lazy"
        referrerPolicy="no-referrer-when-downgrade"
        allowFullScreen
      />
      {caption && <figcaption>{caption}</figcaption>}
    </figure>
  );
}

function DirectoryPage({ slug, page }) {
  const items = page.entries || [];
  const hasContent = items.length > 0 || page.map || page.intro;
  return (
    <>
      <PageHero {...page} slug={slug}/>
      <section className="page-body">
        <div className="container">
          {page.map && <SatelliteMap {...page.map}/>}
          {page.intro && <p className="page-lede" style={{maxWidth: 880, marginBottom: 28, fontStyle:'normal', fontSize:16}}>{page.intro}</p>}
          {items.length > 0 && (
            <div className="dir-grid">
              {items.map((b, i) => {
                const Tile = b.href ? "a" : "div";
                const tileProps = b.href
                  ? { href: b.href, target: b.external ? "_blank" : undefined, rel: b.external ? "noopener" : undefined }
                  : {};
                return (
                  <Tile key={i} className="dir-tile" {...tileProps}>
                    <div className="dir-num">{b.num}</div>
                    <div className="dir-who">
                      <div>{b.who}</div>
                      {b.info && <div className="dir-info">{b.info}</div>}
                    </div>
                    <div className="dir-arrow">→</div>
                  </Tile>
                );
              })}
            </div>
          )}
          {!hasContent && (
            <div className="empty-block">
              <p>Información próximamente.</p>
            </div>
          )}
          {page.note && (
            <p className="caption" style={{marginTop: 32, maxWidth: 880}}>{page.note}</p>
          )}
        </div>
      </section>
    </>
  );
}

function ListPage({ slug, page }) {
  // /category/obras, /category/proyectos
  const items = [
    { title: slug.includes("obras") ? "Pavimento barrio Norte · Etapa 1" : "Proyecto · Centro de Día para Adultos Mayores", date: "Mayo 2026", tag: slug.includes("obras") ? "En ejecución" : "En desarrollo" },
    { title: slug.includes("obras") ? "Cordón cuneta calle Belgrano" : "Proyecto · Ampliación Reserva Ecológica", date: "Abril 2026", tag: "Finalizado" },
    { title: slug.includes("obras") ? "Iluminación LED · Acceso por RP 20" : "Proyecto · Polo gastronómico", date: "Marzo 2026", tag: "En estudio" },
    { title: slug.includes("obras") ? "Refacción SAMCo · Sala de espera" : "Proyecto · Vivienda joven", date: "Marzo 2026", tag: "En desarrollo" },
  ];
  return (
    <>
      <PageHero {...page} slug={slug}/>
      <section className="page-body">
        <div className="container">
          <div className="list-stack">
            {items.map((it, i) => (
              <article key={i} className="list-row">
                <div className="list-date">{it.date}</div>
                <h3 className="list-title">{it.title}</h3>
                <span className="list-tag">{it.tag}</span>
                <a className="list-arrow" href="#">→</a>
              </article>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}

// ── Fallback stub for any unspecified page ────────────────
function StubPage({ slug }) {
  const node = window.BY_SLUG[slug];
  const page = {
    eyebrow: (node && node.parents.length) ? node.parents[node.parents.length - 1].label : "Comuna",
    title: node ? node.label : "Página no encontrada",
    lede: node ? "Esta sección está siendo migrada al nuevo sitio. La información estará disponible próximamente." : "",
  };
  if (!node) {
    return (
      <section className="page-body">
        <div className="container" style={{padding:"120px 0", textAlign:"center"}}>
          <h1 className="page-title">Página no encontrada</h1>
          <p className="page-lede">La ruta solicitada no existe en este sitio.</p>
          <a className="btn btn-primary" href="#/" style={{marginTop:24, display:'inline-flex'}}>← Volver al inicio</a>
        </div>
      </section>
    );
  }
  return <ArticlePage slug={slug} page={page}/>;
}

// ── Page dispatch ─────────────────────────────────────────
function Page({ slug }) {
  const page = window.PAGES[slug];
  if (!page) return <StubPage slug={slug}/>;
  switch (page.type) {
    case "authorities":   return <AuthoritiesPage slug={slug} page={page}/>;
    case "article":       return <ArticlePage    slug={slug} page={page}/>;
    case "hub":           return <HubPage        slug={slug} page={page}/>;
    case "institutions":  return <InstitutionsPage slug={slug} page={page}/>;
    case "events":        return <EventsPage     slug={slug} page={page}/>;
    case "contact":       return <ContactPage    slug={slug} page={page}/>;
    case "directory":     return <DirectoryPage  slug={slug} page={page}/>;
    case "list":          return <ListPage       slug={slug} page={page}/>;
    default:              return <ArticlePage    slug={slug} page={page}/>;
  }
}

Object.assign(window, { useHashRoute, Page, link });