// Reaksiyoner — Pages: MagazineFront, FeedPage, DialogPage, ArticlePage

function MagazineFront({ onOpen }) {
  return (
    <main className="mag-front">
      <IssueBand />
      {FRONT.map((teaser, i) => (
        <Teaser key={i} teaser={teaser} onOpen={onOpen} />
      ))}
    </main>
  );
}

function FeedPage({ onOpen }) {
  const [filter, setFilter] = React.useState({ fmt: "all" });
  let items = FEED_ORDER.map(id => ARTICLES[id]);
  if (filter.fmt !== "all") items = items.filter(a => a.fmt === filter.fmt);

  return (
    <main className="feed-page">
      <div className="feed-head">
        <h1>Akış</h1>
        <p>Sayının tamamı, kronolojik. Filtrele, gez. — Toplam {Object.keys(ARTICLES).length} yazı.</p>
      </div>

      <div className="feed-filters">
        <span className="chip-label">Format</span>
        <button
          className={`chip ${filter.fmt === "all" ? "is-active" : ""}`}
          onClick={() => setFilter({ fmt: "all" })}
        >Tümü</button>
        {Object.entries(FORMATS).map(([id, f]) => (
          <button
            key={id}
            className={`chip ${filter.fmt === id ? "is-active" : ""}`}
            onClick={() => setFilter({ fmt: id })}
            style={filter.fmt === id ? { background: f.color, borderColor: f.color, color: "#fff" } : { color: f.color, borderColor: "currentColor" }}
          >
            {f.label}
          </button>
        ))}
      </div>

      <div style={{ fontFamily: "var(--sans)", fontSize: 13, color: "var(--text-soft)", margin: "6px 0 4px" }}>
        {items.length} yazı listeleniyor
      </div>

      {items.map(a => {
        const fmt = FORMATS[a.fmt];
        const writer = WRITERS[a.writer];
        return (
          <div key={a.id} className="feed-row" onClick={() => onOpen(a.id)}>
            <div className="feed-thumb">
              {(a.cover || a.imageLabel) ? (
                <CoverPlaceholder src={a.cover} label={null} tone={(a.id.charCodeAt(2) % 3) + 1} aspect="1/1" />
              ) : (
                <div style={{
                  width: "100%", height: "100%",
                  background: fmt.color,
                  display: "flex", alignItems: "center", justifyContent: "center",
                  fontFamily: "var(--serif-display)",
                  fontWeight: 900, fontSize: 28, color: "#fff",
                  letterSpacing: "-0.02em"
                }}>{a.id.toUpperCase()}</div>
              )}
            </div>
            <div className="feed-text">
              <div className="feed-fmt" style={{ color: fmt.color }}>{fmt.label}</div>
              <h3>{a.title}</h3>
              <p className="feed-lead">{a.lead}</p>
              <div className="feed-meta">
                {writer.name} · {a.date} · {a.readMin} dakika
              </div>
            </div>
          </div>
        );
      })}

      {items.length === 0 && (
        <div style={{ padding: "32px 0", fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 16, color: "var(--text-soft)" }}>
          Bu filtrede yazı bulunamadı.
        </div>
      )}
    </main>
  );
}

function DialogPage({ onOpen }) {
  const [tab, setTab] = React.useState("hepsi");

  const threads = [
    {
      ref: "a01", artTitle: "Pasifik'te yeni güvenlik mimarisi…",
      author: "Okan Çelik", role: "Üye, Ankara",
      head: "Mutabakatın açıklanmayan ekleri için kamuoyu denetimi mümkün mü?",
      body: "Yazıda atıfta bulunulan ekler, hem demokratik denetim hem de uluslararası hukuk açısından önemli. Türk dışişlerinin bu ekleri Avrupa Konseyi düzeyinde takip ettiği duyuluyor — bu konuda daha ayrıntılı bir haber okumak isterdim.",
      replies: 14, likes: 38, time: "2 saat önce"
    },
    {
      ref: "a04", artTitle: "Boğaziçi'nin küçük laboratuvarında üç yıl…",
      author: "Selma Erdem", role: "Üye, İzmir",
      head: "Açık kaynak vs. ticari ürün: Hangi tarafta duracağız?",
      body: "Modelin akademik değeri tartışılmaz. Ama Türkiye'nin AI politikası halen bir sanayi politikası mı, yoksa bilim politikası mı bilmiyoruz. Reaksiyoner bu konuda bir kapak yazısı yapma zamanı gelmedi mi?",
      replies: 22, likes: 51, time: "5 saat önce"
    },
    {
      ref: "a07", artTitle: "Anadolu'nun yeni göç dalgası: Mersin…",
      author: "Hüseyin Yalçın", role: "Üye, Mersin",
      head: "Yazıyı okurken bir Mersinli olarak başım dönüyor.",
      body: "Şehirde gerçekten bir değişim var — ama bu değişimin bedelini ödeyenler de var. Kira artışlarının yerli halkı zorladığını yazıda biraz daha vurgulamak gerekirdi. Veriler doğru, hikaye eksik.",
      replies: 9, likes: 27, time: "dün"
    },
    {
      ref: "a02", artTitle: "Anayasa Mahkemesi'nin yeni içtihadı…",
      author: "Av. Defne Aksoy", role: "Üye, İstanbul",
      head: "İçtihadın «sessiz devrim» niteliğine katılmıyorum.",
      body: "Yeni gerekçe çerçevesi sanıldığından çok daha dar yorumlanabilir. Önümüzdeki üç yılda mahkemenin nasıl bir içtihat çizgisi izleyeceğine bağlı. Yazıyı dengeli buldum ama bu noktada biraz iyimser.",
      replies: 31, likes: 64, time: "dün"
    },
    {
      ref: "a08", artTitle: "Konya ovasında 1980'den bu yana en düşük su seviyesi…",
      author: "Pelin Doğanay", role: "Üye, Konya",
      head: "Tarımsal sigortalardan önce konuşmamız gereken: Mera yönetimi.",
      body: "Sigorta önemli, ama Konya'da gerçek mesele mera ve havza yönetiminin parçalı yapısı. Bu tablonun ne kadar siyasi olduğunu — Reaksiyoner'in bu zinciri çıkarması iyi olur.",
      replies: 17, likes: 42, time: "2 gün önce"
    },
    {
      ref: "a23", artTitle: "Bir nehrin sonu: Asi Nehri'nin son yüz yılı",
      author: "Tarık Bilen", role: "Üye, Hatay",
      head: "Reaksiyoner'in en güzel uzun okumalarından biri. Teşekkürler.",
      body: "Asi Nehri ile ilgili bu kapsamlı yazı, sadece Hatay'ı değil tüm Doğu Akdeniz su politikasını anlamak için bir referans olabilir. Yazarın saha çalışması da çok değerli.",
      replies: 6, likes: 89, time: "3 gün önce"
    },
  ];

  return (
    <main className="dialog-page">
      <div className="dialog-head">
        <h1>Diyalog</h1>
        <p>Reaksiyoner okurlarının yazılar üzerine sürdürdüğü açık tartışma. Yorum yazarları kadar, okurlar da derginin bir parçası.</p>
      </div>

      <div className="dlg-tabs">
        {[
          { id: "hepsi", label: "Hepsi" },
          { id: "yeni",  label: "Yeni" },
          { id: "populer", label: "Popüler" },
          { id: "yanit",  label: "Yanıt bekleyen" },
        ].map(t => (
          <button key={t.id} className={`dlg-tab ${tab === t.id ? "is-active" : ""}`} onClick={() => setTab(t.id)}>
            {t.label}
          </button>
        ))}
      </div>

      <div className="dlg-thread">
        {threads.map((t, i) => (
          <div key={i} className="dlg-item">
            <div className="dlg-meta">
              <span className="dlg-name">{t.author}</span>
              <span style={{ opacity: 0.4 }}>·</span>
              <span>{t.role}</span>
              <span style={{ opacity: 0.4 }}>·</span>
              <span>{t.time}</span>
            </div>
            <h3>{t.head}</h3>
            <p>{t.body}</p>
            <div className="dlg-stats">
              <button className="dlg-link" onClick={() => onOpen(t.ref)}>
                «{t.artTitle}» →
              </button>
              <span>{t.replies} yanıt</span>
              <span style={{ opacity: 0.4, margin: "0 6px" }}>·</span>
              <span>{t.likes} beğeni</span>
            </div>
          </div>
        ))}
      </div>
    </main>
  );
}

function SearchPage() {
  return (
    <main className="dialog-page">
      <div className="dialog-head">
        <h1>Ara</h1>
        <p>Arşivin içinde dolaş. Yazar, format, tarih, anahtar kelime — hepsi aranabilir.</p>
      </div>
      <div style={{ borderTop: "1px solid var(--divider)", padding: "20px 0" }}>
        <input
          type="text"
          placeholder="Bir konu, bir yazar veya bir anahtar kelime…"
          autoFocus
          style={{
            width: "100%",
            padding: "16px 0",
            border: "0",
            borderBottom: "2px solid var(--text)",
            fontFamily: "var(--serif-display)",
            fontWeight: 500,
            fontStyle: "italic",
            fontSize: "28px",
            background: "transparent",
            outline: "none",
            color: "var(--text)",
          }}
        />
        <div style={{ marginTop: 20, fontFamily: "var(--sans)", fontSize: 13, color: "var(--text-soft)" }}>
          Önerilen aramalar:
        </div>
        <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginTop: 10 }}>
          {["Pasifik", "Lozan", "Mersin", "yarı iletken", "Hagia Sophia", "Konya", "fındık", "Diyarbakır surları"].map(s => (
            <button key={s} className="chip">{s}</button>
          ))}
        </div>
      </div>
    </main>
  );
}

function ArticlePage({ articleId, onOpen, onNav }) {
  const article = ARTICLES[articleId];
  if (!article) return <main className="article"><p>Yazı bulunamadı.</p></main>;

  const writer = WRITERS[article.writer];
  const fmt = FORMATS[article.fmt];
  const related = Object.values(ARTICLES).filter(a => a.fmt === article.fmt && a.id !== article.id).slice(0, 3);
  while (related.length < 3) {
    const more = Object.values(ARTICLES).find(a => a.id !== article.id && !related.includes(a));
    if (more) related.push(more); else break;
  }

  return (
    <main className="article">
      <div className="art-format">
        <a href="#" className="art-fmt-link" style={{ color: fmt.color }}>{fmt.label}</a>
        <span className="art-fmt-sep">·</span>
        <span style={{ color: "var(--text-soft)" }}>{article.readMin} dakika okuma</span>
      </div>

      <h1 className="art-title">{article.title}</h1>
      <p className="art-lead">{article.lead}</p>

      <div className="art-credit">
        Yazan <a href="#">{writer.name}</a> <em>({writer.role})</em> · {article.date}
      </div>

      {(article.cover || article.imageLabel) && (
        <figure className="art-cover">
          <div style={{ maxWidth: 1100, margin: "0 auto" }}>
            <CoverPlaceholder src={article.cover} label={article.imageLabel} tone={1} aspect="16/9" />
          </div>
          <figcaption>
            {article.cover
              ? `Fotoğraf · ${article.imageLabel || (article.source?.outlet ? "kaynak: " + article.source.outlet : "")}`
              : `Fotoğraf · arşiv görseli yer tutucu — ${article.imageLabel}`}
          </figcaption>
        </figure>
      )}

      <div className="art-body">
        {article.body[0] && <p className="first">{article.body[0]}</p>}
        {article.body[1] && <p>{article.body[1]}</p>}
        <blockquote className="pullquote">
          <p>«{article.lead.split(".")[0]}.»</p>
          <footer>— {writer.name}, {writer.role}</footer>
        </blockquote>
        {article.body.slice(2).map((p, i) => <p key={i}>{p}</p>)}
      </div>

      <div className="art-foot">
        <div className="art-action">
          <button className="ab-btn">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M6 4v16l6-4 6 4V4z"/></svg>
            Yer imine ekle
          </button>
          <button className="ab-btn">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="m8.59 13.51 6.83 3.98M15.41 6.51l-6.82 3.98"/></svg>
            Paylaş
          </button>
          <button className="ab-btn">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg>
            Diyaloğa katıl
          </button>
          <button className="ab-btn">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M15.54 8.46a5 5 0 0 1 0 7.07"/></svg>
            Dinle
          </button>
        </div>

        <div className="art-author-card">
          <div className="ab-avatar">{initials(writer.name)}</div>
          <div>
            <div className="aac-eyebrow">Yazar</div>
            <h4>{writer.name}</h4>
            <p>
              {writer.name}, Reaksiyoner'in 2020'den bu yana {writer.role.toLowerCase()} olarak görev yapıyor.
              Saha çalışması yürüttüğü üç ülkede ve İstanbul'da yaşıyor; iki kitabı yayımlandı.
              <a href="#" style={{ color: "var(--primary)", textDecoration: "underline", textUnderlineOffset: 3, marginLeft: 6 }}>Tüm yazıları →</a>
            </p>
          </div>
        </div>
      </div>

      <section className="art-related">
        <h3>Aynı formattan daha fazlası</h3>
        {related.map(r => {
          const rwriter = WRITERS[r.writer];
          const rfmt = FORMATS[r.fmt];
          return (
            <div key={r.id} className="related-row" onClick={() => onOpen(r.id)}>
              <div className="rr-fmt" style={{ color: rfmt.color }}>{rfmt.label}</div>
              <h4>{r.title}</h4>
              <div className="rr-by">{rwriter.name} · {r.readMin} dakika</div>
            </div>
          );
        })}
      </section>
    </main>
  );
}

Object.assign(window, { MagazineFront, FeedPage, DialogPage, SearchPage, ArticlePage });