// page-guider.jsx — Article listing and reader
// Depends on: BodyBlock, BlocksRenderer, parseMdRu (from page-rugby.jsx)
//             useArticles (from data.js)

const { useState, useMemo } = React;

function ArticleCardHero({ article }) {
  return (
    <Link to={'/guider/' + article.slug} className="article-card-hero">
      <div className="article-card-hero__body">
        <div>
          <span className="eyebrow eyebrow--gold" style={{ marginBottom: 10, display: 'block' }}>
            Utvald guide · {article.category}
          </span>
          <h2 className="display display-m article-card-hero__title">{article.title}</h2>
          <p className="article-card-hero__excerpt">{article.excerpt}</p>
        </div>
        <div className="article-card-hero__footer">
          <div className="article-card-hero__tags">
            {(article.tags || []).map(t => (
              <span key={t} className="chip chip--paper" style={{ marginRight: 6, marginBottom: 4 }}>{t}</span>
            ))}
          </div>
          <span className="article-card__arrow" style={{ color: 'var(--gold)' }}><Arrow size={16} /></span>
        </div>
      </div>
    </Link>
  );
}

function ArticleCard({ article }) {
  return (
    <Link to={'/guider/' + article.slug} className="article-card">
      {article.featured && (
        <span className="article-card__featured eyebrow eyebrow--maroon">Utvald</span>
      )}
      <div className="article-card__body">
        <p className="eyebrow eyebrow--maroon" style={{ marginBottom: 10 }}>
          {article.category}
        </p>
        <h3 className="article-card__title display display-s">{article.title}</h3>
        <p className="article-card__excerpt">{article.excerpt}</p>
      </div>
      <div className="article-card__footer">
        <div className="article-card__tags">
          {(article.tags || []).slice(0, 3).map(t => (
            <span key={t} className="chip" style={{ marginRight: 6, marginBottom: 4 }}>{t}</span>
          ))}
        </div>
        <span className="article-card__arrow"><Arrow size={14} /></span>
      </div>
    </Link>
  );
}

const FILTER_VISIBLE = 5;

function GuideFilter({ tags, active, onSelect }) {
  const [expanded, setExpanded] = useState(false);
  const visibleTags = expanded ? tags : tags.slice(0, FILTER_VISIBLE);
  const hiddenCount = tags.length - FILTER_VISIBLE;

  return (
    <div className="guide-filter">
      <button
        className={'guide-filter__pill' + (active === null ? ' is-active' : '')}
        onClick={() => onSelect(null)}
      >
        Alla
      </button>
      {visibleTags.map(tag => (
        <button
          key={tag}
          className={'guide-filter__pill' + (active === tag ? ' is-active' : '')}
          onClick={() => onSelect(active === tag ? null : tag)}
        >
          {tag}
        </button>
      ))}
      {!expanded && hiddenCount > 0 && (
        <button className="guide-filter__pill guide-filter__pill--more" onClick={() => setExpanded(true)}>
          +{hiddenCount} fler
        </button>
      )}
      {expanded && tags.length > FILTER_VISIBLE && (
        <button className="guide-filter__pill guide-filter__pill--more" onClick={() => setExpanded(false)}>
          Visa färre
        </button>
      )}
    </div>
  );
}

function ArticleReader({ article }) {
  if (!article) {
    return (
      <section className="section">
        <div className="wrap">
          <p className="text-muted">Artikeln hittades inte.</p>
          <Link to="/guider" className="btn btn--ghost" style={{ marginTop: 16 }}>
            ← Alla guider
          </Link>
        </div>
      </section>
    );
  }

  return (
    <>
      <section className="section--ink article-hero">
        <div className="wrap" style={{ paddingTop: 80, paddingBottom: 64 }}>
          <Link to="/guider" className="back-link back-link--paper">
            ← Alla guider
          </Link>
          <p className="eyebrow eyebrow--gold" style={{ marginTop: 28 }}>
            {article.category}
          </p>
          <h1
            className="display display-l"
            style={{ color: 'var(--cream)', marginTop: 14, maxWidth: 780 }}
          >
            {article.title}
          </h1>
          <p className="lede text-paper" style={{ marginTop: 20, maxWidth: 640 }}>
            {article.excerpt}
          </p>
          <div style={{ marginTop: 28, display: 'flex', flexWrap: 'wrap', gap: 8 }}>
            {(article.tags || []).map(t => (
              <span key={t} className="chip chip--paper">{t}</span>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wrap wrap--narrow">
          <BlocksRenderer blocks={article.body} />

          <div style={{ marginTop: 72 }}>
            <hr className="divider" />
            <div
              style={{
                marginTop: 32,
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center',
                flexWrap: 'wrap',
                gap: 16,
              }}
            >
              <p className="text-muted" style={{ fontSize: 12 }}>
                Publicerad {article.publishedAt}
                {article.author ? ' · ' + article.author : ''}
              </p>
              <Link to="/guider" className="btn btn--ghost">← Fler guider</Link>
            </div>
          </div>
        </div>
      </section>

      <section className="section section--paper2">
        <div className="wrap" style={{ textAlign: 'center' }}>
          <p className="eyebrow eyebrow--maroon">Vill du lära dig spelet?</p>
          <h2 className="display display-l" style={{ marginTop: 16 }}>
            Lär dig reglerna.
          </h2>
          <p className="lede" style={{ marginTop: 20, maxWidth: 480, marginInline: 'auto' }}>
            Från grunderna till åldersgrupper — allt om rugby som sport.
          </p>
          <Link to="/rugby" className="btn btn--ink" style={{ marginTop: 32 }}>
            Till Rugby-sidan <Arrow />
          </Link>
        </div>
      </section>
    </>
  );
}

function PageGuider({ sub }) {
  const { data: articles, loading } = useArticles();
  const [activeFilter, setActiveFilter] = useState(null);

  // Hooks must run unconditionally before any early return
  const allTags = useMemo(() => {
    if (!articles) return [];
    const set = new Set();
    articles.forEach(a => (a.tags || []).forEach(t => set.add(t)));
    return Array.from(set);
  }, [articles]);

  const sorted = useMemo(() => {
    if (!articles) return [];
    return [...articles].sort((a, b) => (b.featured ? 1 : 0) - (a.featured ? 1 : 0));
  }, [articles]);

  const filtered = useMemo(() => {
    if (!activeFilter) return sorted;
    return sorted.filter(a => (a.tags || []).includes(activeFilter));
  }, [sorted, activeFilter]);

  if (sub) {
    const article = articles ? articles.find(a => a.slug === sub) : null;
    if (loading) {
      return (
        <section className="section">
          <div className="wrap"><p className="text-muted">Laddar…</p></div>
        </section>
      );
    }
    return <ArticleReader article={article} />;
  }

  const heroArticle = !activeFilter && filtered.length > 0 && filtered[0].featured
    ? filtered[0]
    : null;
  const gridArticles = heroArticle ? filtered.slice(1) : filtered;

  return (
    <>
      <section className="section--ink" style={{ paddingBlock: 'var(--section-y)' }}>
        <div className="wrap">
          <p className="eyebrow eyebrow--paper">Kunskapsbank</p>
          <h1 className="display display-xl" style={{ color: 'var(--cream)', marginTop: 12 }}>
            Guider.
          </h1>
          <p className="lede text-paper" style={{ marginTop: 22, maxWidth: 560 }}>
            Utrustningsguider och tips för rugby — på svenska, skrivna av spelare för spelare.
          </p>
        </div>
      </section>

      {loading && (
        <section className="section">
          <div className="wrap"><p className="text-muted">Laddar guider…</p></div>
        </section>
      )}

      {!loading && (
        <section className="section">
          <div className="wrap">

            <div className="guide-filter-bar">
              <GuideFilter tags={allTags} active={activeFilter} onSelect={setActiveFilter} />
              <p className="guide-filter-bar__count eyebrow">
                {filtered.length} {filtered.length === 1 ? 'guide' : 'guider'}
                {activeFilter ? ` om ${activeFilter.toLowerCase()}` : ''}
              </p>
            </div>

            {heroArticle && (
              <div style={{ marginBottom: 20 }}>
                <ArticleCardHero article={heroArticle} />
              </div>
            )}

            {gridArticles.length > 0 && (
              <div className="article-grid">
                {gridArticles.map(a => <ArticleCard key={a.id} article={a} />)}
              </div>
            )}

            {filtered.length === 0 && (
              <p className="text-muted" style={{ paddingBlock: 32 }}>
                Inga guider matchar filtret.{' '}
                <button
                  className="back-link"
                  onClick={() => setActiveFilter(null)}
                  style={{ display: 'inline' }}
                >
                  Visa alla
                </button>
              </p>
            )}

          </div>
        </section>
      )}

      <section className="section section--ink">
        <div className="wrap" style={{ textAlign: 'center', padding: '64px var(--gutter)' }}>
          <p className="eyebrow eyebrow--paper">Vill du lära dig spelet?</p>
          <h2 className="display display-l" style={{ color: 'var(--cream)', marginTop: 16 }}>
            Lär dig reglerna.
          </h2>
          <p className="lede text-paper" style={{ marginTop: 20, maxWidth: 520, marginInline: 'auto' }}>
            Historia, regler och åldersanpassningar — allt om rugby som sport.
          </p>
          <Link to="/rugby" className="btn btn--gold" style={{ marginTop: 32 }}>
            Till Rugby-sidan <Arrow />
          </Link>
        </div>
      </section>
    </>
  );
}

Object.assign(window, { PageGuider });