// News.jsx — Nyhetssiden. Henter fra Supabase `news`-tabellen.
// Viser tom-tilstand med admin-prompt når ingen nyheter er publisert.
//
// Supabase `news`-tabell (opprett ved behov):
//   CREATE TABLE news (
//     id uuid DEFAULT gen_random_uuid() PRIMARY KEY,
//     created_at timestamp DEFAULT now(),
//     published_at timestamp DEFAULT now(),
//     title text NOT NULL,
//     excerpt text,
//     body text,
//     category text DEFAULT 'LIGA',   -- LIGA | PATCH | META | INTERVJU
//     author text DEFAULT 'WZN Redaksjonen',
//     featured boolean DEFAULT false,
//     image_url text,
//     slug text UNIQUE
//   );

const CATEGORIES = ["ALL", "PATCH", "LIGA", "META", "INTERVJU"];

// ── Statisk patch-logg (vises i sidebar alltid) ───────────────────────────────
const PATCH_LOG = [
  { v: "v06.05", d: "11.05.2026", c: "12 endringer" },
  { v: "v06.04", d: "04.05.2026", c: "Hotfix · server" },
  { v: "v06.03", d: "27.04.2026", c: "8 endringer" },
  { v: "v06.02", d: "20.04.2026", c: "Map rotation" },
  { v: "v06.01", d: "13.04.2026", c: "Sesong 06 start" },
];

function fmtNewsDate(s) {
  if (!s) return "";
  return new Date(s).toLocaleDateString("no-NO", { day: "numeric", month: "short", year: "numeric" });
}

// ── Tom-tilstand ──────────────────────────────────────────────────────────────
function NewsEmpty({ accent }) {
  return (
    <div className="panel" style={{ padding: "60px 40px", textAlign: "center" }}>
      <div style={{ fontSize: 48, marginBottom: 16 }}>📰</div>
      <div style={{ fontSize: 20, fontWeight: 900, color: "var(--text)", marginBottom: 8 }}>
        INGEN NYHETER PUBLISERT ENNÅ
      </div>
      <div style={{ color: "var(--text-dim)", marginBottom: 24 }}>
        Nyheter publiseres av admin fra Supabase-tabellen <code>news</code>.
      </div>
      <div style={{ fontSize: 13, color: "var(--text-faint)", fontFamily: "var(--font-mono)" }}>
        INSERT INTO news (title, excerpt, category, featured) VALUES (...)
      </div>
    </div>
  );
}

// ── Nyhets-rad (liste) ────────────────────────────────────────────────────────
function NewsRow({ n, accent }) {
  return (
    <article className="news-row">
      <div className="nr-img">
        <div className="stream-mock">
          <div className="stream-mock-scan" />
          <div className="stream-mock-corners"><span/><span/><span/><span/></div>
          <div className="nr-cat" style={{ borderColor: accent, color: accent }}>{n.category}</div>
        </div>
      </div>
      <div className="nr-body">
        <div className="nr-meta">
          <span>{fmtNewsDate(n.published_at || n.created_at)}</span>
          <span className="dot-sep">·</span>
          <span>{n.author || "WZN Redaksjonen"}</span>
        </div>
        <h3 className="nr-title">{n.title}</h3>
        {n.excerpt && <p className="nr-excerpt">{n.excerpt}</p>}
        <button className="nr-read">LES MER →</button>
      </div>
    </article>
  );
}

// ── Hoved-komponent ───────────────────────────────────────────────────────────
const NewsHub = ({ tweaks, userRole }) => {
  const accent = tweaks?.accent || "#ff6b35";
  const isAdmin = ["admin", "superadmin", "mod"].includes(userRole);

  const [cat, setCat] = React.useState("ALL");
  const [news, setNews] = React.useState([]);
  const [loading, setLoading] = React.useState(true);

  React.useEffect(() => {
    let cancelled = false;
    setLoading(true);

    const fetchNews = async () => {
      if (window.db) {
        try {
          const { data } = await window.db
            .from("news")
            .select("*")
            .order("published_at", { ascending: false })
            .limit(50);
          if (!cancelled && data) {
            setNews(data);
          }
        } catch (e) {
          console.warn("News fetch feil:", e.message);
        }
      }
      if (!cancelled) setLoading(false);
    };

    fetchNews();
    return () => { cancelled = true; };
  }, []);

  const featured  = news.find(n => n.featured);
  const rest      = news.filter(n => !n.featured);
  const filtered  = cat === "ALL" ? rest : rest.filter(n => n.category === cat);

  return (
    <div className="news-hub">
      <SectionHeader
        code="12"
        title="NYHETER · META · PATCH"
        subtitle="Ligaens nyhetsstrøm — alt på ett sted"
        accent={accent}
        right={isAdmin && (
          <span style={{ fontSize: 12, color: "var(--text-dim)", fontFamily: "var(--font-mono)" }}>
            ADMIN: publiser via Supabase <code>news</code>-tabell
          </span>
        )}
      />

      <div className="news-grid">
        <div className="news-main">

          {loading && (
            <div className="panel" style={{ padding: 40, textAlign: "center", color: "var(--text-dim)" }}>
              LASTER NYHETER…
            </div>
          )}

          {!loading && news.length === 0 && <NewsEmpty accent={accent} />}

          {!loading && news.length > 0 && (
            <>
              {/* Featured */}
              {featured && (
                <div className="panel news-featured">
                  <div className="nf-img">
                    <div className="stream-mock big">
                      <div className="stream-mock-scan" />
                      <div className="stream-mock-corners"><span/><span/><span/><span/></div>
                      <div className="nf-overlay-tag" style={{ background: accent }}>{featured.category}</div>
                      <div className="nf-overlay-stamp">FEATURED</div>
                    </div>
                  </div>
                  <div className="nf-body">
                    <div className="nf-eyebrow">
                      <span style={{ color: accent }}>●</span> NYTT · {fmtNewsDate(featured.published_at || featured.created_at)}
                    </div>
                    <h2 className="nf-title">{featured.title}</h2>
                    {featured.excerpt && <p className="nf-excerpt">{featured.excerpt}</p>}
                    <div className="nf-meta">
                      <span>AV {featured.author || "WZN Redaksjonen"}</span>
                    </div>
                    <button className="cta cta-primary" style={{ background: accent, borderColor: accent }}>
                      <span>LES HELE SAKEN</span> <span>↗</span>
                    </button>
                  </div>
                </div>
              )}

              {/* Filter row */}
              <div className="news-filters">
                {CATEGORIES.map(c => (
                  <button
                    key={c}
                    className={`ghost-btn ${cat === c ? "active" : ""}`}
                    onClick={() => setCat(c)}
                    style={cat === c ? { borderColor: accent, color: accent } : {}}
                  >
                    {c === "ALL" ? "ALLE" : c}
                  </button>
                ))}
              </div>

              {/* Feed list */}
              <div className="news-list">
                {filtered.length === 0 ? (
                  <div style={{ padding: "32px 0", color: "var(--text-dim)", textAlign: "center" }}>
                    Ingen nyheter i kategorien {cat}.
                  </div>
                ) : (
                  filtered.map(n => <NewsRow key={n.id} n={n} accent={accent} />)
                )}
              </div>
            </>
          )}
        </div>

        {/* Right sidebar */}
        <div className="news-side">
          <div className="panel compact">
            <div className="ls-head">
              <div className="ls-head-l">
                <div className="section-code" style={{ borderColor: accent }}>N01</div>
                <div>
                  <div className="ls-title">PATCH-LOGG</div>
                  <div className="ls-sub">Siste 5 patches</div>
                </div>
              </div>
            </div>
            <ul className="patch-log">
              {PATCH_LOG.map((p, i) => (
                <li key={i}>
                  <span className="pl-v" style={i === 0 ? { color: accent } : {}}>{p.v}</span>
                  <span className="pl-d">{p.d}</span>
                  <span className="pl-c">{p.c}</span>
                </li>
              ))}
            </ul>
          </div>

          <div className="panel compact">
            <div className="ls-head">
              <div className="ls-head-l">
                <div className="section-code" style={{ borderColor: accent }}>N02</div>
                <div>
                  <div className="ls-title">UKENS SNAKKIS</div>
                  <div className="ls-sub">Hete diskusjoner</div>
                </div>
              </div>
            </div>
            <ul className="trending-list">
              {[
                { t: "Er MCW-12 for sterk?",          m: "142 svar · 2t siden" },
                { t: "Nord Recon mister momentum?",    m: "87 svar · 5t siden" },
                { t: "Hospital — den nye Superstore?", m: "63 svar · 8t siden" },
                { t: "Burde divisjonene utvides?",     m: "51 svar · 14t siden" },
              ].map((item, i) => (
                <li key={i}>
                  <span className="tl-num" style={{ color: accent }}>{String(i + 1).padStart(2, "0")}</span>
                  <div>
                    <div className="tl-title">{item.t}</div>
                    <div className="tl-meta">{item.m}</div>
                  </div>
                </li>
              ))}
            </ul>
          </div>

          <div className="panel compact news-cta">
            <div className="nc-eyebrow">SKREVET EN ARTIKKEL?</div>
            <p>Send inn til redaksjonen. Vi publiserer gode innlegg fra spillere og analytikere hver uke.</p>
            <button className="ghost-btn">SEND INN ↗</button>
          </div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { NewsHub });