// page-rugby.jsx — Rugby history, rules and age groups

/* ---------- SHARED BLOCK RENDERING ---------- */

function parseMdRu(text) {
  if (!text) return null;
  const parts = text.split(/\*\*(.+?)\*\*/);
  return parts.map((p, i) =>
    i % 2 === 1 ? React.createElement('strong', { key: i }, p) : p
  );
}

function BodyBlock({ block }) {
  switch (block.type) {
    case 'paragraph':
      return (
        <p className="text-body" style={{ marginTop: 18 }}>
          {parseMdRu(block.text)}
        </p>
      );

    case 'heading': {
      const level = block.level || 2;
      const cls = level === 2 ? 'display display-s' : 'display display-xs';
      const mt = level === 2 ? 44 : 30;
      return React.createElement(
        'h' + level,
        { id: block.anchor, className: cls, style: { marginTop: mt } },
        block.text
      );
    }

    case 'list': {
      const Tag = block.ordered ? 'ol' : 'ul';
      return (
        <Tag className="prose-list" start={block.start || 1} style={{ marginTop: 16 }}>
          {(block.items || []).map((item, i) => (
            <li key={i}>{parseMdRu(item)}</li>
          ))}
        </Tag>
      );
    }

    case 'blockquote':
      return (
        <blockquote className="prose-blockquote">
          {parseMdRu(block.text)}
        </blockquote>
      );

    case 'divider':
      return <hr className="divider" style={{ margin: '44px 0' }} />;

    case 'table':
      return (
        <div className="prose-table-wrap">
          <table className="prose-table">
            <thead>
              <tr>
                {(block.headers || []).map((h, i) => <th key={i}>{h}</th>)}
              </tr>
            </thead>
            <tbody>
              {(block.rows || []).map((row, i) => (
                <tr key={i}>
                  {row.map((cell, j) => <td key={j}>{parseMdRu(cell)}</td>)}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      );

    case 'info_box':
      return (
        <div className={'info-box info-box--' + (block.variant || 'info')}>
          {block.title && <p className="info-box__title">{block.title}</p>}
          <p className="info-box__text">{parseMdRu(block.text)}</p>
        </div>
      );

    case 'affiliate': {
      const af = block.affiliate;
      return (
        <div className="affiliate-block">
          <div className="affiliate-block__inner">
            <div className="affiliate-block__content">
              <p className="affiliate-block__tag eyebrow">Rekommenderad produkt</p>
              <p className="affiliate-block__title">{af.title}</p>
              <p className="affiliate-block__desc">{af.desc}</p>
              {af.price && <p className="affiliate-block__price">{af.price}</p>}
            </div>
            <a
              href={'https://www.amazon.se/dp/' + af.asin + '?tag=' + af.tag}
              target="_blank"
              rel="noopener sponsored noreferrer"
              className="btn btn--gold affiliate-block__btn"
            >
              Köp på Amazon ↗
            </a>
          </div>
        </div>
      );
    }

    case 'cta': {
      const c = block.cta;
      return (
        <div className="prose-cta">
          <h3 className="display display-s">{c.title}</h3>
          <p className="text-body" style={{ marginTop: 10 }}>{parseMdRu(c.body)}</p>
          <a href={c.href} className="btn btn--ink" style={{ marginTop: 16 }}>
            Läs mer <Arrow />
          </a>
        </div>
      );
    }

    default:
      return null;
  }
}

function BlocksRenderer({ blocks }) {
  if (!blocks) return null;
  return (
    <div className="prose-body">
      {blocks.map((block, i) => <BodyBlock key={i} block={block} />)}
    </div>
  );
}

/* ---------- HISTORY ---------- */

function RugbyHistory() {
  return (
    <>
      <section className="section">
        <div className="wrap wrap--narrow">
          <p className="eyebrow eyebrow--maroon">Kapitel 01</p>
          <h2 className="display display-l" style={{ marginTop: 12 }}>
            Legenden om<br />Webb Ellis.
          </h2>
          <div style={{ marginTop: 36, display: 'flex', flexDirection: 'column', gap: 20 }}>
            <p className="lede">
              År 1823, på skolgården vid Rugby School i Warwickshire, England, ska en skolpojke
              vid namn William Webb Ellis ha gjort något som förändrade sporthistorien: han tog
              fotbollen i sina händer och sprang mot motståndarnas mål.
            </p>
            <p className="text-body">
              I dåtidens fotboll var det förbjudet att röra bollen med händerna. Vad Webb Ellis
              faktiskt gjorde — om han ens gjorde det — omtvistas fortfarande av historiker.
              Men legenden lever, och VM-pokalen är uppkallad efter honom: <em>The William Webb Ellis Cup</em>.
            </p>
            <p className="text-body">
              De första skrivna reglerna för "football as played at Rugby School" publicerades
              1845 av tre elever. Från dessa regler växte en helt ny sport fram.
            </p>
          </div>
        </div>
      </section>

      <section className="section section--paper2">
        <div className="wrap wrap--narrow">
          <p className="eyebrow eyebrow--maroon">Kapitel 02</p>
          <h2 className="display display-l" style={{ marginTop: 12 }}>
            Sporten<br />tar form.
          </h2>
          <div style={{ marginTop: 36, display: 'flex', flexDirection: 'column', gap: 20 }}>
            <p className="text-body">
              <strong>1871</strong> bildades Rugby Football Union (RFU) i England — den första nationella
              rugbyorganisationen i världen. Samma år spelades det första officiella internationella rugbymötet:
              England mot Skottland i Edinburgh.
            </p>
            <p className="text-body">
              <strong>1895</strong> kom den stora skilsmässan — "The Great Split". Nordliga engelska klubbar
              ville betala sina spelare för arbetstid de missade under matcher. RFU vägrade. 21 klubbar bröt
              sig ur och bildade Northern Rugby Football Union — som senare blev Rugby League. Rugby Union
              förblev amatörspelat i ytterligare hundra år.
            </p>
            <p className="text-body">
              Rugby Union spelades vid <strong>OS 1900, 1908, 1920 och 1924</strong> — men försvann sedan
              från programmet i nästan 100 år.
            </p>
            <p className="text-body">
              <strong>1987</strong> spelades det första Rugby World Cup med 16 nationer i Australien och
              Nya Zeeland. All Blacks vann det första VM-guldet. I dag är Rugby World Cup ett av världens
              mest sedda sportevenemang.
            </p>
            <p className="text-body">
              <strong>26 augusti 1995</strong> deklarerade World Rugby officiellt att Rugby Union fick
              bli professionellt. Sporten exploderade globalt — de stora lagen kunde nu rekrytera
              världens bästa spelare.
            </p>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wrap wrap--narrow">
          <p className="eyebrow eyebrow--maroon">Kapitel 03</p>
          <h2 className="display display-l" style={{ marginTop: 12 }}>
            OS, Sevens<br />och framtiden.
          </h2>
          <div style={{ marginTop: 36, display: 'flex', flexDirection: 'column', gap: 20 }}>
            <p className="text-body">
              Rugby Sevens — det kortare formatet med sju spelare per lag och sju minuter per halvlek —
              återvände till OS 2016 i Rio de Janeiro. Fiji vann det olympiska guldet och höll bollen
              i luften i jubel på ett sätt som gick runt hela världen. Det var Fijis första olympiska medalj
              någonsin.
            </p>
            <p className="text-body">
              I dag spelas Rugby Union i över 120 länder. World Rugby är en av världens snabbast
              växande internationella idrottsorganisationer, med en särskilt stark tillväxt i Asien
              och Amerika.
            </p>
          </div>
        </div>
      </section>

      <section className="section section--paper2">
        <div className="wrap wrap--narrow">
          <p className="eyebrow eyebrow--maroon">Kapitel 04</p>
          <h2 className="display display-l" style={{ marginTop: 12 }}>
            Rugby i<br />Sverige.
          </h2>
          <div style={{ marginTop: 36, display: 'flex', flexDirection: 'column', gap: 20 }}>
            <p className="lede">
              Svenska Rugbyförbundet bildades <strong>1932</strong>. och valdes in i Riksidrottsförbundet 1958. Den första landskampen spelades i Stockholm i Sverige den 23 oktober 1949 mot Danmark, som Sverige vann med 6–0.
            </p>
            <p className="text-body">
              I dag finns rugbyklubbar i många svenska städer. Sporten lockar spelare i alla
              åldrar — från tag rugby för de minsta till seniortävlingar i rugby union och rugby sevens.
            </p>
            <p className="text-body">
              <strong>Vänersborgs Rugbyklubb (VRK)</strong> är en av de klubbar som drivit rugbyns tillväxt i
              Västra Götaland — med lag i ungdomsklasserna och seniorrugby som lockar spelare
              från hela regionen.
            </p>
          </div>
        </div>
      </section>

      <section className="section section--ink">
        <div className="wrap" style={{ textAlign: 'center', padding: '64px var(--gutter)' }}>
          <p className="eyebrow eyebrow--paper">Nästa steg</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' }}>
            Nu när du vet var rugby kommer ifrån — lär dig hur det faktiskt spelas.
          </p>
          <Link to="/rugby/regler" className="btn btn--gold" style={{ marginTop: 32 }}>
            Till reglerna <Arrow />
          </Link>
        </div>
      </section>
    </>
  );
}

/* ---------- REGLER ---------- */

function RuleCard({ section }) {
  return (
    <Link to={'/rugby/regler/' + section.slug} className="rule-card">
      <span className="rule-card__num eyebrow">
        {String(section.order).padStart(2, '0')}
      </span>
      <h3 className="rule-card__title display display-s">{section.title}</h3>
      <p className="rule-card__sub">{section.subtitle}</p>
      <span className="rule-card__arrow">
        <Arrow size={16} />
      </span>
    </Link>
  );
}

function RuleDetail({ section, prev, next }) {
  return (
    <section className="section">
      <div className="wrap wrap--narrow">
        <Link to="/rugby/regler" className="back-link">
          ← Alla regler
        </Link>
        <p className="eyebrow eyebrow--maroon" style={{ marginTop: 28 }}>
          Lag {String(section.order).padStart(2, '0')}
        </p>
        <h1 className="display display-l" style={{ marginTop: 12 }}>{section.title}</h1>
        <p className="lede" style={{ marginTop: 16, color: 'var(--stone)' }}>
          {section.subtitle}
        </p>
        <div style={{ marginTop: 52 }}>
          <BlocksRenderer blocks={section.body} />
        </div>
        <div style={{ marginTop: 64, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12 }}>
          <div>
            {prev
              ? <Link to={'/rugby/regler/' + prev.slug} className="btn btn--ghost">← {prev.title}</Link>
              : <Link to="/rugby/regler" className="btn btn--ghost">← Alla regler</Link>
            }
          </div>
          <div>
            {next
              ? <Link to={'/rugby/regler/' + next.slug} className="btn btn--ink">{next.title} <Arrow /></Link>
              : <Link to="/guider" className="btn btn--gold">Utrustningsguider <Arrow /></Link>
            }
          </div>
        </div>
      </div>
    </section>
  );
}

function RugbyRegler({ rulesData, loading, sub2 }) {
  if (loading) {
    return (
      <section className="section">
        <div className="wrap"><p className="text-muted">Laddar regler…</p></div>
      </section>
    );
  }
  if (!rulesData) {
    return (
      <section className="section">
        <div className="wrap"><p className="text-muted">Kunde inte ladda regeldata.</p></div>
      </section>
    );
  }

  const sections = rulesData.sections || [];

  if (sub2) {
    const idx = sections.findIndex(s => s.slug === sub2);
    if (idx === -1) {
      return (
        <section className="section">
          <div className="wrap">
            <p className="text-muted">Regelsektion hittades inte.</p>
            <Link to="/rugby/regler" className="btn btn--ghost" style={{ marginTop: 16 }}>
              Alla regler
            </Link>
          </div>
        </section>
      );
    }
    const found = sections[idx];
    const prev = idx > 0 ? sections[idx - 1] : null;
    const next = idx < sections.length - 1 ? sections[idx + 1] : null;
    return <RuleDetail section={found} prev={prev} next={next} />;
  }

  return (
    <>
      <section className="section">
        <div className="wrap">
          <p className="eyebrow eyebrow--maroon">Hur spelet fungerar</p>
          <h2 className="display display-l" style={{ marginTop: 12 }}>Regelöversikt.</h2>
          <p className="lede" style={{ marginTop: 18, maxWidth: 540 }}>
            Tretton regelavsnitt — från hur bollen rör sig till vad som händer i klunga och inkast.
          </p>
          <div className="rule-grid" style={{ marginTop: 52 }}>
            {sections.map(s => <RuleCard key={s.id} section={s} />)}
          </div>
        </div>
      </section>
      <section className="section section--ink">
        <div className="wrap" style={{ textAlign: 'center', padding: '64px var(--gutter)' }}>
          <p className="eyebrow eyebrow--paper">Spela du?</p>
          <h2 className="display display-l" style={{ color: 'var(--cream)', marginTop: 16 }}>
            Åldersanpassade regler.
          </h2>
          <p className="lede text-paper" style={{ marginTop: 20, maxWidth: 520, marginInline: 'auto' }}>
            Reglerna anpassas efter åldersgrupp. Se vad som gäller för just din grupp.
          </p>
          <Link to="/rugby/aldersgrupper" className="btn btn--gold" style={{ marginTop: 32 }}>
            Till åldersgrupperna <Arrow />
          </Link>
        </div>
      </section>
    </>
  );
}

/* ---------- ÅLDERSGRUPPER ---------- */

function AgeGroupCard({ group }) {
  return (
    <Link
      to={'/rugby/aldersgrupper/' + group.slug}
      className={'age-card' + (group.contact ? ' age-card--contact' : ' age-card--tag')}
    >
      <div className="age-card__header">
        <span className="age-card__format eyebrow">{group.format}</span>
        <span className={'age-card__badge ' + (group.contact ? 'age-card__badge--contact' : 'age-card__badge--tag')}>
          {group.contact ? 'Kontakt' : 'Tag'}
        </span>
      </div>
      <h3 className="age-card__title display display-m">{group.title}</h3>
      <p className="age-card__ages">{group.ages}</p>
      <div className="age-card__meta">
        <span>{group.players}</span>
        <span>{group.gameDuration}</span>
      </div>
      <span className="age-card__arrow"><Arrow size={16} /></span>
    </Link>
  );
}

function AgeGroupDetail({ group }) {
  return (
    <section className="section">
      <div className="wrap wrap--narrow">
        <Link to="/rugby/aldersgrupper" className="back-link">
          ← Alla åldersgrupper
        </Link>
        <div style={{ marginTop: 28 }}>
          <span
            className={'chip ' + (group.contact ? '' : 'chip--filled')}
            style={{ marginBottom: 16, display: 'inline-flex' }}
          >
            {group.contact ? 'Kontaktrugby' : 'Tag Rugby'}
          </span>
          <h1 className="display display-l">{group.title}</h1>
          <p className="lede" style={{ marginTop: 20 }}>{parseMdRu(group.intro)}</p>
        </div>

        <div className="age-detail-grid" style={{ marginTop: 44 }}>
          {[
            { label: 'Ålder', value: group.ages },
            { label: 'Format', value: group.format },
            { label: 'Spelare', value: group.players },
            { label: 'Planstorlek', value: group.fieldSize },
            { label: 'Matchtid', value: group.gameDuration },
            group.ballSize ? { label: 'Boll', value: 'Storlek ' + group.ballSize } : null,
          ].filter(Boolean).map(item => (
            <div key={item.label} className="age-detail-item">
              <p className="eyebrow">{item.label}</p>
              <p className="display display-s" style={{ marginTop: 6 }}>{item.value}</p>
            </div>
          ))}
        </div>

        {group.modifications && group.modifications.length > 0 && (
          <div style={{ marginTop: 52 }}>
            <h2 className="display display-s">Regelmodifieringar</h2>
            <ul className="prose-list" style={{ marginTop: 20 }}>
              {group.modifications.map((mod, i) => (
                <li key={i}>{parseMdRu(mod)}</li>
              ))}
            </ul>
          </div>
        )}

        {group.equipment && group.equipment.length > 0 && (
          <div style={{ marginTop: 48 }}>
            <h2 className="display display-s">Utrustning</h2>
            <ul className="prose-list" style={{ marginTop: 20 }}>
              {group.equipment.map((eq, i) => <li key={i}>{eq}</li>)}
            </ul>
            <div style={{ marginTop: 28 }}>
              <Link to="/guider/nyborjare-rugby-utrustning" className="btn btn--gold">
                Utrustningsguide <Arrow />
              </Link>
            </div>
          </div>
        )}
      </div>
    </section>
  );
}

function RugbyAldersgrupper({ rulesData, loading, sub2 }) {
  if (loading) {
    return (
      <section className="section">
        <div className="wrap"><p className="text-muted">Laddar…</p></div>
      </section>
    );
  }
  if (!rulesData) {
    return (
      <section className="section">
        <div className="wrap"><p className="text-muted">Kunde inte ladda data.</p></div>
      </section>
    );
  }

  const groups = rulesData.ageGroups || [];

  if (sub2) {
    const found = groups.find(g => g.slug === sub2);
    if (!found) {
      return (
        <section className="section">
          <div className="wrap">
            <p className="text-muted">Åldersgrupp hittades inte.</p>
            <Link to="/rugby/aldersgrupper" className="btn btn--ghost" style={{ marginTop: 16 }}>
              Alla åldersgrupper
            </Link>
          </div>
        </section>
      );
    }
    return <AgeGroupDetail group={found} />;
  }

  const tagGroups     = groups.filter(g => !g.contact);
  const contactGroups = groups.filter(g => g.contact);

  return (
    <section className="section">
      <div className="wrap">
        <p className="eyebrow eyebrow--maroon">Regler per ålder</p>
        <h2 className="display display-l" style={{ marginTop: 12 }}>Åldersgrupper.</h2>
        <p className="lede" style={{ marginTop: 18, maxWidth: 560 }}>
          Rugby anpassas efter ålder och mognad. Välj din åldersgrupp för att se vad som gäller.
        </p>

        <h3 className="display display-s" style={{ marginTop: 56, marginBottom: 24 }}>
          Tag Rugby — utan kontakt
        </h3>
        <div className="age-grid">
          {tagGroups.map(g => <AgeGroupCard key={g.id} group={g} />)}
        </div>

        <h3 className="display display-s" style={{ marginTop: 56, marginBottom: 24 }}>
          Kontaktrugby
        </h3>
        <div className="age-grid">
          {contactGroups.map(g => <AgeGroupCard key={g.id} group={g} />)}
        </div>
      </div>
    </section>
  );
}

/* ---------- PAGE ROOT ---------- */

function PageRugby({ sub, sub2 }) {
  const { data: rulesData, loading } = useRules();
  const current = sub || '';

  const tabs = [
    { slug: '',               label: 'Historia' },
    { slug: 'regler',        label: 'Regler' },
    { slug: 'aldersgrupper', label: 'Åldersgrupper' },
  ];

  return (
    <div className="rugby-page">
      <section className="rugby-hero section--ink">
        <div className="wrap" style={{ paddingTop: 64, paddingBottom: 0 }}>
          <p className="eyebrow eyebrow--paper">Sporten</p>
          <h1 className="display display-xl" style={{ color: 'var(--cream)', marginTop: 12 }}>
            Rugby.
          </h1>
          <p className="lede text-paper" style={{ marginTop: 22, maxWidth: 560 }}>
            Från Rugby School till VM — historia, regler och allt du behöver veta om sporten.
          </p>
        </div>
        <div className="about-subnav" style={{ marginTop: 40 }}>
          <div className="wrap about-subnav__inner">
            {tabs.map(t => (
              <Link
                key={t.slug}
                to={'/rugby' + (t.slug ? '/' + t.slug : '')}
                className={'about-subnav__link ' + (current === t.slug ? 'is-active' : '')}
              >
                {t.label}
              </Link>
            ))}
          </div>
        </div>
      </section>

      {current === ''              && <RugbyHistory />}
      {current === 'regler'        && <RugbyRegler rulesData={rulesData} loading={loading} sub2={sub2} />}
      {current === 'aldersgrupper' && <RugbyAldersgrupper rulesData={rulesData} loading={loading} sub2={sub2} />}
    </div>
  );
}

Object.assign(window, { PageRugby, BodyBlock, BlocksRenderer, parseMdRu });