/* Detail pages: activity & article */
const initialsOf = (name) => name.replace(/^(dr\.?|hj\.?|h\.?)\s*/i, "").split(" ").map((w) => w[0]).filter(Boolean).slice(0, 2).join("").toUpperCase();

const ShareRow = () => (
  <div className="share-row">
    <span>Bagikan:</span>
    <a href="#" onClick={(e) => e.preventDefault()} aria-label="WhatsApp"><Icon name="whatsapp" /></a>
    <a href="#" onClick={(e) => e.preventDefault()} aria-label="Facebook"><Icon name="facebook" /></a>
    <a href="#" onClick={(e) => e.preventDefault()} aria-label="Instagram"><Icon name="instagram" /></a>
  </div>
);

/* small related cards */
const RelKeg = ({ k }) => (
  <a className="keg-card" href={`#!/kegiatan/${slugify(k.title)}`} onClick={(e) => { e.preventDefault(); navigate("kegiatan/" + slugify(k.title)); }}>
    <div className="keg-media">
      <Media media={k.hero} label={k.title} />
      <span className="keg-cat">{k.cat}</span>
      <div className="keg-date"><b>{k.d}</b><span>{k.m}</span></div>
    </div>
    <div className="keg-body">
      <h3>{k.title}</h3>
      <div className="keg-loc"><Icon name="pin" /> {k.loc}</div>
    </div>
  </a>
);
const RelArt = ({ a }) => (
  <a className="keg-card" href={`#!/artikel/${slugify(a.title)}`} onClick={(e) => { e.preventDefault(); navigate("artikel/" + slugify(a.title)); }}>
    <div className="keg-media"><Media media={a.hero} label={a.title} /><span className="keg-cat">{a.cat}</span></div>
    <div className="keg-body">
      <h3 style={{ fontSize: 18 }}>{a.title}</h3>
      <div className="keg-loc"><Icon name="clock" /> {a.rt}</div>
    </div>
  </a>
);

const NotFound = () => (
  <div className="detail"><div className="wrap" style={{ textAlign: "center", padding: "60px 0" }}>
    <h1 style={{ fontSize: 40, marginBottom: 16 }}>Halaman tidak ditemukan</h1>
    <p style={{ color: "var(--muted)", marginBottom: 28 }}>Maaf, konten yang Anda cari tidak tersedia.</p>
    <button className="btn btn-green" onClick={() => navigate("")}>Kembali ke Beranda</button>
  </div></div>
);

/* -------- ACTIVITY DETAIL -------- */
const KegiatanDetail = ({ item }) => {
  if (!item) return <NotFound />;
  const others = SITE.kegiatan.filter((k) => k.title !== item.title).slice(0, 3);
  return (
    <article className="detail">
      <div className="wrap">
        <div className="detail-top">
          <button className="btn-back" onClick={() => navigate("")}><Icon name="arrow" style={{ transform: "rotate(180deg)" }} /> Kembali</button>
          <div className="crumb">Beranda · Kegiatan · <b>{item.cat}</b></div>
        </div>
        <Reveal className="detail-hero">
          <Media media={item.hero} label={item.title} dark />
          <span className="keg-cat">{item.cat}</span>
        </Reveal>
        <div className="detail-grid">
          <div className="detail-main">
            <div className="meta-row">
              <span className="cat">{item.cat}</span>
              <span className="mi"><Icon name="pin" /> {item.loc}</span>
              <span className="dot"></span>
              <span className="mi"><Icon name="clock" /> {item.d} {item.m} {item.year}</span>
            </div>
            <h1>{item.title}</h1>
            <div className="byline">
              <div className="av"><img src="assets/logo.png" alt="" style={{ width: "100%", height: "100%", objectFit: "contain" }} /></div>
              <div><b>DPD Perwatusi Riau</b><span>Penyelenggara kegiatan</span></div>
            </div>
            <div className="prose">{item.body.map((p, i) => <p key={i}>{p}</p>)}</div>
            <ShareRow />
          </div>
          <aside className="detail-aside">
            <div className="info-card green">
              <h4>Informasi Kegiatan</h4>
              <div className="info-row"><div className="ic"><Icon name="clock" /></div><div><small>Tanggal</small><b>{item.d} {item.m} {item.year}</b></div></div>
              <div className="info-row"><div className="ic"><Icon name="clock" /></div><div><small>Waktu</small><b>{item.time}</b></div></div>
              <div className="info-row"><div className="ic"><Icon name="pin" /></div><div><small>Lokasi</small><b>{item.address}</b></div></div>
              <button className="btn btn-gold" onClick={() => { navigate(""); setTimeout(() => document.getElementById("kontak")?.scrollIntoView({ behavior: "smooth" }), 120); }}>Daftar / Tanya <Icon name="arrow" /></button>
            </div>
          </aside>
        </div>
        <section className="related">
          <h3>Kegiatan lainnya</h3>
          <div className="related-grid">{others.map((k) => <RelKeg key={k.title} k={k} />)}</div>
        </section>
      </div>
    </article>
  );
};

/* -------- ARTICLE DETAIL -------- */
const ArtikelDetail = ({ item }) => {
  if (!item) return <NotFound />;
  const doc = SITE.doctors.find((d) => d.name === item.by || d.name.split(",")[0].trim() === item.by || d.name.startsWith(item.by));
  const others = SITE.articles.filter((a) => a.title !== item.title).slice(0, 3);
  return (
    <article className="detail">
      <div className="wrap">
        <div className="detail-top">
          <button className="btn-back" onClick={() => { navigate(""); setTimeout(() => document.getElementById("edukasi")?.scrollIntoView({ behavior: "smooth" }), 120); }}><Icon name="arrow" style={{ transform: "rotate(180deg)" }} /> Edukasi</button>
          <div className="crumb">Beranda · Edukasi · <b>{item.cat}</b></div>
        </div>
        <Reveal className="detail-hero">
          <Media media={item.hero} label={item.title} dark />
        </Reveal>
        <div className="detail-grid">
          <div className="detail-main">
            <div className="meta-row">
              <span className="cat">{item.cat}</span>
              <span className="mi"><Icon name="clock" /> {item.date}</span>
              <span className="dot"></span>
              <span className="mi">{item.rt}</span>
            </div>
            <h1>{item.title}</h1>
            <div className="byline">
              <div className="av">{initialsOf(item.by)}</div>
              <div><b>{item.by}</b><span>{doc ? doc.role : "Tim Edukasi Perwatusi Riau"}</span></div>
            </div>
            <div className="prose">{item.body.map((p, i) => <p key={i}>{p}</p>)}</div>
            <ShareRow />
          </div>
          <aside className="detail-aside">
            {doc && (
              <div className="info-card author-card">
                <div className="av">{initialsOf(doc.name)}</div>
                <b>{doc.name}</b>
                <div className="role">{doc.role}</div>
                <p>{doc.bio}</p>
              </div>
            )}
            <div className="info-card">
              <h4>Detail Artikel</h4>
              <div className="info-row"><div className="ic"><Icon name="leaf" /></div><div><small>Kategori</small><b>{item.cat}</b></div></div>
              <div className="info-row"><div className="ic"><Icon name="clock" /></div><div><small>Dipublikasikan</small><b>{item.date}</b></div></div>
              <div className="info-row"><div className="ic"><Icon name="bone" /></div><div><small>Durasi baca</small><b>{item.rt}</b></div></div>
            </div>
          </aside>
        </div>
        <section className="related">
          <h3>Baca juga</h3>
          <div className="related-grid">{others.map((a) => <RelArt key={a.title} a={a} />)}</div>
        </section>
      </div>
    </article>
  );
};

const DetailPage = ({ route }) => {
  if (route.type === "kegiatan") return <KegiatanDetail item={SITE.kegiatan.find((k) => slugify(k.title) === route.slug)} />;
  if (route.type === "artikel") return <ArtikelDetail item={SITE.articles.find((a) => slugify(a.title) === route.slug)} />;
  return <NotFound />;
};

window.DetailPage = DetailPage;