"use client";

import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { CATEGORIES, sectionName } from "../lib/categories.js";
import { clipText, dek } from "../lib/text.js";
import { PHOTOS, commonsUrl } from "../lib/photos.js";

// BidaAngMamamayan — a PUBLIC tribute news desk for Senator BAM Aquino.
// No login, no accounts, no "I like this" — the site's whole identity is the
// subject. Views: front, each desk, and the community board. The reader is a
// side drawer over the current view.

const DAY_NAMES = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
const MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

function fmtDate(d) {
  return `${DAY_NAMES[d.getDay()]}, ${MONTHS[d.getMonth()]} ${d.getDate()}, ${d.getFullYear()}`;
}
function ago(iso) {
  if (!iso) return "";
  const h = (Date.now() - new Date(iso).getTime()) / 3600e3;
  if (!Number.isFinite(h) || h < 0) return "";
  if (h < 1) return `${Math.max(1, Math.round(h * 60))}m`;
  if (h < 24) return `${Math.round(h)}h`;
  return `${Math.round(h / 24)}d`;
}
function imgSrc(u) {
  if (!u) return null;
  return `/api/img?u=${encodeURIComponent(u)}`;
}

// The masthead wordmark: BIDA ANG MAMAMAYAN, with the B-A-M letters carried in
// gold (bold) as the tribute's highlight.
function Brand() {
  return (
    <div className="brand">
      <span className="bam">B</span>ida<span className="bam">A</span>ng<span className="bam">M</span>amamayan
    </div>
  );
}

export default function Home() {
  const [view, setView] = useState("front"); // front | <catKey> | board
  const [edition, setEdition] = useState(null);
  const [desks, setDesks] = useState([]);
  const [stats, setStats] = useState(null);
  const [boardPosts, setBoardPosts] = useState(null);
  const [boardCount, setBoardCount] = useState(0);
  const [reading, setReading] = useState(null); // story in the drawer
  const [toast, setToast] = useState("");
  const toastTimer = useRef(null);
  const [loadErr, setLoadErr] = useState("");

  const say = useCallback((msg) => {
    setToast(msg);
    clearTimeout(toastTimer.current);
    toastTimer.current = setTimeout(() => setToast(""), 3200);
  }, []);

  async function loadFeed() {
    try {
      const r = await fetch("/api/feed", { cache: "no-store", signal: AbortSignal.timeout(20000) });
      const j = await r.json();
      if (j.ok) {
        setEdition(j.feed || null);
        setDesks(j.desks || []);
        setStats(j.stats || null);
        setLoadErr("");
      } else setLoadErr("The desk is still warming up — check back in a minute.");
    } catch {
      setLoadErr("Could not reach the desk. The site may be mid-deploy — try again shortly.");
    }
  }

  async function loadBoard() {
    try {
      const r = await fetch("/api/board", { cache: "no-store", signal: AbortSignal.timeout(15000) });
      const j = await r.json();
      if (j.ok) {
        setBoardPosts(j.posts || []);
        setBoardCount(j.count || 0);
      }
    } catch {
      /* board is optional chrome on the front view */
    }
  }

  useEffect(() => {
    loadFeed();
    loadBoard();
    return () => clearTimeout(toastTimer.current);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  // Refresh the edition every 5 min so a long-open tab keeps ticking.
  useEffect(() => {
    const t = setInterval(loadFeed, 5 * 60 * 1000);
    return () => clearInterval(t);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const items = useMemo(() => (edition ? edition.items || [] : []), [edition]);

  const namedItems = useMemo(() => items.filter((i) => i.named).sort((a, b) => b.score - a.score), [items]);

  const lead = useMemo(() => {
    if (!items.length) return null;
    const n = namedItems[0];
    if (n) return n;
    return items[0];
  }, [items, namedItems]);

  const deskByKey = useMemo(() => new Map(desks.map((d) => [d.key, d])), [desks]);

  // The view's story list: the whole edition on front; a desk's stories on a
  // desk view. The desk grid itself feeds from the pool (deskHeadlines), which
  // is a superset of the ranked edition — use whichever has more.
  const viewItems = useMemo(() => {
    if (view === "front") return items;
    if (view === "board") return [];
    const d = deskByKey.get(view);
    const fromPool = d ? d.stories || [] : [];
    const fromEdition = items.filter((i) => i.category === view);
    const map = new Map();
    for (const s of [...fromEdition, ...fromPool]) map.set(s.url, s);
    return [...map.values()].sort((a, b) => b.score - a.score || new Date(b.published || 0) - new Date(a.published || 0));
  }, [view, items, deskByKey]);

  function openStory(s) {
    if (!s) return;
    setReading({ story: s, state: "loading", article: null, realUrl: s.url });
  }
  function closeReading() {
    setReading(null);
  }

  // ── ticker: named-BAM headlines scroll, pause on hover ─────────────────
  const tickerItems = useMemo(() => namedItems.slice(0, 12), [namedItems]);

  // ── board posting ──────────────────────────────────────────────────────
  const [nick, setNick] = useState("");
  const [msg, setMsg] = useState("");
  const [posting, setPosting] = useState(false);
  const [postErr, setPostErr] = useState("");
  const [freshId, setFreshId] = useState(null);

  async function doPost(e) {
    e.preventDefault();
    setPostErr("");
    setPosting(true);
    try {
      const r = await fetch("/api/board", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ nick, message: msg }),
        signal: AbortSignal.timeout(15000),
      });
      const j = await r.json();
      if (j.ok && j.post) {
        setBoardPosts((p) => (p ? [j.post, ...p] : [j.post]));
        setBoardCount((c) => c + 1);
        setMsg("");
        setFreshId(j.post.id);
        say("Posted. Thank you — the board is full of you.");
      } else {
        setPostErr(j.error || "Could not post right now.");
      }
    } catch {
      setPostErr("Network hiccup — try again.");
    } finally {
      setPosting(false);
    }
  }

  const deskLabel = view === "front" ? "Front Desk" : view === "board" ? "The Board" : sectionName(view);

  return (
    <>
      <header className="masthead">
        <Brand />
        <div className="slogan">Bida ang Mamamayan</div>
        <div className="who">
          The supporter tribute desk for <b>Senator Bam Aquino</b> — the gamer of the Philippine
          Senate, champion of college students, scholarships, and the people's power bill. Every
          story that names him, crawled live from the wire.
        </div>
        <div className="disclaimer">
          <b>DISCLAIMER</b> — BidaAngMamamayan is built and run by <b>supporters</b> of Senator Bam
          Aquino. It is <b>not affiliated with, endorsed by, or operated by</b> the senator or his
          office. News items belong to their original publishers; this site aggregates them for
          tribute purposes only.
        </div>
      </header>

      <nav className="navstrip">
        <a className={`navbtn ${view === "front" ? "active" : ""}`} href="#front" onClick={(e) => { e.preventDefault(); setView("front"); window.scrollTo({ top: 0 }); }}>
          <span className="dot" />Front
        </a>
        {CATEGORIES.filter((c) => c.key !== "bam").map((c) => (
          <a key={c.key} className={`navbtn ${view === c.key ? "active" : ""}`} href={`#${c.key}`} onClick={(e) => { e.preventDefault(); setView(c.key); window.scrollTo({ top: 0 }); }}>
            {c.label}
          </a>
        ))}
        <a className={`navbtn board ${view === "board" ? "active" : ""}`} href="#board-band" onClick={(e) => { e.preventDefault(); if (view === "front") { document.getElementById("board-band")?.scrollIntoView({ behavior: "smooth", block: "start" }); } else { setView("front"); setTimeout(() => document.getElementById("board-band")?.scrollIntoView({ behavior: "smooth", block: "start" }), 60); } }}>
          {boardCount > 0 && <span className="dot" />}Thank You Board
        </a>
      </nav>

      {stats && (
        <div className="hud">
          <div className="chip"><span className="live" />LIVE DESK</div>
          <div className="chip">STORIES <b>{edition ? edition.total : "—"}</b></div>
          <div className="chip">LAST 24H <b>{stats.today ?? "—"}</b></div>
          <div className="chip">NAMED BAM <b>{edition ? edition.named : "—"}</b></div>
          <div className="chip">BOARD <b>{boardCount}</b></div>
          <div className="chip">EDITION <b>{fmtDate(new Date())}</b></div>
        </div>
      )}
      {edition && (
        <div className="xpbar">
          <span>EDITION STRENGTH — {edition.total} WIRE STORIES LOADED</span>
          <div className="track"><div className="fill" style={{ width: `${Math.min(100, Math.round((edition.total / 60) * 100))}%` }} /></div>
        </div>
      )}

      {tickerItems.length > 1 && (
        <div className="ticker">
          <span className="label">BAM WIRE</span>
          <div className="rail">
            {[...tickerItems, ...tickerItems].map((s, i) => (
              <span className="item" key={i}>
                <b>{ago(s.published) || s.source}</b>
                <a href={s.url} target="_blank" rel="noopener noreferrer" onClick={() => openStory(s)}>{s.title}</a>
              </span>
            ))}
          </div>
        </div>
      )}

      <main className="wrap">
        {loadErr && !edition && (
          <div className="panel" style={{ padding: 40, textAlign: "center" }}>
            <div className="empty">{loadErr}</div>
            <button className="srcbtn" onClick={loadFeed}>RETRY</button>
          </div>
        )}

        {view === "front" && (
          <>
            {/* ── IN PICTURES — credited public photos, its own full-width band ── */}
            <section className="band photos-band">
              <div className="bandhead">
                <span className="bandtitle">In Pictures</span>
                <span className="bandsub">Public photos of the senator — every image credited to its source</span>
              </div>
              <div className="photoscroll">
                {PHOTOS.map((p, i) => (
                  <figure className="photo" key={i} onClick={() => window.open(commonsUrl(p.commons), "_blank", "noopener")}>
                    <div className="phimg" style={{ backgroundImage: `url(${imgSrc(p.url)})` }} />
                    <figcaption>
                      <div className="cap">{p.caption}</div>
                      <div className="cred">📷 {p.source}</div>
                      <div className="lic">{p.credit}</div>
                    </figcaption>
                  </figure>
                ))}
              </div>
              <div className="photos-note">
                Click a photo to view it on Wikimedia Commons. Photos are public-domain, sourced from the
                senator's official Senate / social pages. This section is separate from the news wire.
              </div>
            </section>

            <div className="cols">
              <div>
                {!edition && (
                  <>
                    <div className="sk" style={{ aspectRatio: "16/8.5", marginBottom: 12 }} />
                    <div className="sk" style={{ height: 72, marginBottom: 8 }} />
                    <div className="sk" style={{ height: 72, marginBottom: 8 }} />
                    <div className="sk" style={{ height: 72 }} />
                  </>
                )}
                {lead && (
                  <article className="panel lead" onClick={() => openStory(lead)}>
                    <div className={`hero ${lead.image ? "" : "noimg"}`} style={lead.image ? { backgroundImage: `url(${imgSrc(lead.image)})` } : null}>
                      {!lead.image && <span className="ghost">BAM</span>}
                      <div className="ph-tag">
                        {lead.named && <span className="tag named">★ NAMED BAM</span>}
                        <span className="tag desk">{sectionName(lead.category)}</span>
                        <span className="tag src">{lead.source}</span>
                      </div>
                    </div>
                    <h1>{lead.title}</h1>
                    {lead.summary && <div className="dek">{dek(lead.summary, 220)}</div>}
                    <div className="meta"><span className="ts">{ago(lead.published)}</span> · {lead.desk || sectionName(lead.category)} · READ IN THE DESK →</div>
                  </article>
                )}

                <div className="panel" style={{ marginTop: 16 }}>
                  <div className="ph">On the wire <span className="count">{viewItems.length} stories</span></div>
                  {viewItems.slice(0, 14).map((s) => (
                    <StoryRow key={s.url} s={s} onOpen={() => openStory(s)} />
                  ))}
                  {viewItems.length === 0 && <div className="empty">The wire is quiet — the next crawl tick is on the way.</div>}
                </div>
              </div>

              <div>
                <div className="panel railcard">
                  <div className="ph">In this edition <span className="count">{desks.length} desks</span></div>
                  <div className="deskgrid" style={{ padding: 12 }}>
                    {desks.map((d) => (
                      <div key={d.key} className="deskcard" onClick={() => { setView(d.key); window.scrollTo({ top: 0 }); }}>
                        <div className="dh"><span className="pix" />{d.label}<span className="n">{d.count}</span></div>
                        <div className="dt">{clipText(d.stories[0].title, 90)}</div>
                        <div className="dm">{ago(d.stories[0].published)} · {d.stories[0].source}</div>
                      </div>
                    ))}
                    {desks.length === 0 && <div className="empty" style={{ gridColumn: "1/-1" }}>Desks staff as the wire fills up.</div>}
                  </div>
                </div>

                <div className="panel railcard">
                  <div className="ph">Who he is</div>
                  <div style={{ padding: 14, color: "var(--muted)", fontSize: 15, fontWeight: 500, lineHeight: 1.5 }}>
                    <b style={{ color: "var(--text)" }}>Francis "Bam" Tan Aquino IV</b> — Senator for
                    Pampanga. The first gamer to reach the Philippine Senate: a runner-up in the
                    2025 <b style={{ color: "var(--gold)" }}>PalaPinas</b> esports championship, and
                    a legislator who has made the fight for <b style={{ color: "var(--gold)" }}>college
                    students, scholarships, and fair electricity</b> his signature. This desk follows
                    the wire for every story that bears his name — from verified Philippine and
                    international news outlets only.
                  </div>
                </div>
              </div>
            </div>

            {/* ── THE BOARD — its own prominent full-width band, not a news desk ── */}
            <section className="band board-band" id="board-band">
              <div className="bandhead">
                <span className="bandtitle">Thank you, Senator BAM</span>
                <span className="bandsub">The community board — say it to the senator, no account needed</span>
              </div>
              <form className="postform big" onSubmit={doPost}>
                <label htmlFor="bnick">Your nickname</label>
                <input id="bnick" value={nick} onChange={(e) => setNick(e.target.value)} maxLength={24} placeholder="e.g. PampangaProud, BamGang13" required />
                <label htmlFor="bmsg">Your message</label>
                <textarea id="bmsg" value={msg} onChange={(e) => setMsg(e.target.value)} maxLength={600} rows={3} placeholder="Thank you, Senator BAM — ..." required />
                <button className="go" type="submit" disabled={posting || !nick.trim() || !msg.trim()}>
                  {posting ? "Sending..." : "Post to the board"}
                </button>
                {postErr && <div className="err">{postErr}</div>}
              </form>
              <div className="postlist board">
                {(boardPosts || []).slice(0, 12).map((p) => (
                  <div key={p.id} className={`post ${p.id === freshId ? "fresh" : ""}`}>
                    <div className="toprow"><span className="nick">{p.nick}</span><span className="ts">{ago(p.createdAt)}</span></div>
                    <div className="msg">{p.message}</div>
                  </div>
                ))}
                {boardPosts && boardPosts.length === 0 && (
                  <div className="empty">The board is empty. Say the first thank you.</div>
                )}
              </div>
            </section>
          </>
        )}

        {view !== "front" && view !== "board" && (
          <div className="panel">
            <div className="ph">{deskLabel} <span className="count">{viewItems.length} stories</span></div>
            {viewItems.map((s) => (
              <StoryRow key={s.url} s={s} onOpen={() => openStory(s)} />
            ))}
            {viewItems.length === 0 && (
              <div className="empty">
                Nothing on this desk right now — the wire is a slow burn for a single senator. The
                next crawl tick (every 15 min) may staff it.
              </div>
            )}
          </div>
        )}

        {view === "board" && (
          <div>
            <div className="boardhead">
              <div className="h">Thank you, Senator BAM</div>
              <div className="sub">
                The community board. No account, no email — just your nickname and a word for the
                senator. Plain words only: no links, no markup.
              </div>
            </div>
            <form className="postform" onSubmit={doPost}>
              <label htmlFor="nick">Your nickname</label>
              <input id="nick" value={nick} onChange={(e) => setNick(e.target.value)} maxLength={24} placeholder="e.g. PampangaProud, GMAmateur, BamGang13" required />
              <label htmlFor="msg">Your message</label>
              <textarea id="msg" value={msg} onChange={(e) => setMsg(e.target.value)} maxLength={600} rows={4} placeholder="Thank you, Senator BAM — ..." required />
              <button className="go" type="submit" disabled={posting || !nick.trim() || !msg.trim()}>
                {posting ? "Sending..." : "Post to the board"}
              </button>
              {postErr && <div className="err">{postErr}</div>}
            </form>
            <div className="postlist">
              {(boardPosts || []).map((p) => (
                <div key={p.id} className={`post ${p.id === freshId ? "fresh" : ""}`}>
                  <div className="toprow">
                    <span className="nick">{p.nick}</span>
                    <span className="ts">{ago(p.createdAt)}</span>
                  </div>
                  <div className="msg">{p.message}</div>
                </div>
              ))}
              {boardPosts && boardPosts.length === 0 && (
                <div className="empty">The board is empty. Say the first thank you.</div>
              )}
            </div>
          </div>
        )}
      </main>

      <footer className="site">
        <div className="fb">
          <span className="bam">B</span>ida<span className="bam">A</span>ng<span className="bam">M</span>amamayan
        </div>
        <div className="disc">
          A fan-made tribute run by supporters of Senator Bam Aquino. <b>Not affiliated with,
          endorsed by, or operated by</b> the senator or his office. All news content belongs to its
          original publishers.
        </div>
        <div>
          Bida ang Mamamayan · built with love (and one very loud speaker) · {fmtDate(new Date()).split(",")[1].trim()}
        </div>
      </footer>

      {reading && (
        <Reader
          state={reading}
          onClose={closeReading}
          onLoaded={(article, realUrl) => setReading((r) => (r ? { ...r, article, realUrl, state: "ready" } : r))}
          onToast={say}
        />
      )}
      {toast && <div className="toast">{toast}</div>}
    </>
  );
}

function StoryRow({ s, onOpen }) {
  return (
    <div className="story" onClick={onOpen}>
      <div className="thumb" style={s.image ? { backgroundImage: `url(${imgSrc(s.image)})` } : null}>
        {s.named && <span className="tag named">★</span>}
      </div>
      <div>
        <div className="t">{clipText(s.title, 120)}</div>
        {s.summary && <div className="s">{clipText(s.summary, 110)}</div>}
        <div className="m"><b>{s.source}</b> · {ago(s.published)} · {sectionName(s.category)}</div>
      </div>
    </div>
  );
}

// The reader drawer: pulls the article body from /api/article (Mongo cache
// first, publisher fetch on a miss — warmed by the crawl tick).
function Reader({ state, onClose, onLoaded, onToast }) {
  const { story, article, realUrl } = state;
  const [failed, setFailed] = useState(false);

  useEffect(() => {
    let alive = true;
    (async () => {
      try {
        const r = await fetch(`/api/article?url=${encodeURIComponent(story.url)}`, {
          cache: "no-store",
          signal: AbortSignal.timeout(60000),
        });
        const j = await r.json();
        if (!alive) return;
        if (j.ok) onLoaded(j.article, j.realUrl);
        else { setFailed(true); onToast("Article unavailable — read at the source instead."); }
      } catch {
        if (alive) { setFailed(true); onToast("Could not load the article."); }
      }
    })();
    return () => { alive = false; };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [story.url]);

  // Close on ESC
  useEffect(() => {
    function k(e) { if (e.key === "Escape") onClose(); }
    window.addEventListener("keydown", k);
    return () => window.removeEventListener("keydown", k);
  }, [onClose]);

  return (
    <div className="drawer" onClick={(e) => { if (e.target.classList.contains("drawer")) onClose(); }}>
      <div className="sheet">
        <div className="top">
          <span className="k">READING — {story.source?.toUpperCase()}</span>
          <button className="close" onClick={onClose}>ESC ✕</button>
        </div>
        {story.image && !failed && <img className="img" src={imgSrc(story.image)} alt="" />}
        <div className="body">
          <h2>{story.title}</h2>
          <div className="byline">
            <b>{story.source}</b> · {ago(story.published)} ago · {sectionName(story.category)}
            {story.named ? " · ★ NAMED BAM" : ""}
          </div>
          {state.state === "loading" && <div className="loading">EXTRACTING ARTICLE...</div>}
          {failed && (
            <div className="blocked">
              The publisher is blocking the extractor (paywall or bot wall). The story is still real —
              read it at the source below.
              {story.summary && <div style={{ marginTop: 12 }}>{story.summary}</div>}
            </div>
          )}
          {!failed && state.state === "ready" && article && (
            <>
              {(article.paras || []).map((p, i) =>
                p.text ? (
                  <p key={i} className={`para ${p.tag && p.tag !== "p" ? "head" : ""}`}>{p.text}</p>
                ) : (
                  <div key={i} className="blocked" style={{ marginTop: 16 }}>
                    Continue at the source — the full story lives on {story.source}.
                  </div>
                )
              )}
              {(article.paras || []).length === 0 && article.metaDesc && (
                <p className="para">{article.metaDesc}</p>
              )}
            </>
          )}
          <a className="srcbtn" href={realUrl || story.url} target="_blank" rel="noopener noreferrer">
            READ AT {story.source?.toUpperCase()} ↗
          </a>
        </div>
      </div>
    </div>
  );
}