/* global React, NA_DATA */
const { useState, useEffect, useRef, useMemo } = React;

// ---------- Shared chrome ----------

function Topbar({ page, setPage, mobileOpen, setMobileOpen }) {
  const { NAVIGATION } = NA_DATA;
  return (
    <React.Fragment>
      <header className="topbar">
        <div className="wrap topbar-inner">
          <div className="brand" onClick={() => { setPage('home'); setMobileOpen(false); }}>
            <img src="assets/na-logo-blue.png" alt="Nottingham Athletic crest" />
            <span className="brand-mark">Nottingham Athletic</span>
          </div>
          <nav className="nav">
            {NAVIGATION.map(n => (
              <a key={n.id}
                 className={page === n.id ? 'active' : ''}
                 onClick={() => setPage(n.id)}>
                {n.label}
              </a>
            ))}
          </nav>
          <div className="topbar-cta">
            <button className="btn btn-accent"
                    onClick={() => setPage('contact')}>
              Join
            </button>
            <button className="btn btn-soft btn-icon menu-btn"
                    aria-label="Menu"
                    onClick={() => setMobileOpen(o => !o)}>
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" width="18" height="18">
                {mobileOpen
                  ? <path d="M18 6 6 18M6 6l12 12" />
                  : <><path d="M3 6h18" /><path d="M3 12h18" /><path d="M3 18h18" /></>}
              </svg>
            </button>
          </div>
        </div>
      </header>
      {/* Rendered OUTSIDE <header> on purpose: .topbar has backdrop-filter,
          which would make it the containing block for this position:fixed
          drawer and clamp it to the header's height. As a top-level sibling
          its inset:0 resolves against the viewport and covers the screen. */}
      {mobileOpen && (
        <div className="mobile-menu open">
          <button className="mobile-menu-close" aria-label="Close menu" onClick={() => setMobileOpen(false)}>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" width="20" height="20">
              <path d="M18 6 6 18M6 6l12 12" />
            </svg>
          </button>
          {NAVIGATION.map(n => (
            <a key={n.id}
               className={page === n.id ? 'active' : ''}
               onClick={() => { setPage(n.id); setMobileOpen(false); }}>
              {n.label}
            </a>
          ))}
        </div>
      )}
    </React.Fragment>
  );
}

function Footer({ setPage }) {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-grid">
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 16 }}>
              <img src="assets/crest-with-ball.png" alt="" style={{ height: 56, width: 'auto', filter: 'brightness(0) invert(1)' }} />
              <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 700, fontSize: 26, color: '#fff', letterSpacing: '-0.01em' }}>
                Nottingham Athletic
              </div>
            </div>
            <p style={{ maxWidth: 38 + 'ch', fontSize: 14, lineHeight: 1.6, marginTop: 8 }}>
              A Nottingham basketball club. Seven squads, one shared standard. Open trials each season — anyone with the work ethic is welcome.
            </p>
          </div>
          <div>
            <h4>Club</h4>
            <ul>
              <li><a onClick={() => setPage('teams')}>Teams</a></li>
              <li><a onClick={() => setPage('coaches')}>Coaches</a></li>
              <li><a onClick={() => setPage('about')}>About</a></li>
              <li><a onClick={() => setPage('sponsors')}>Sponsors</a></li>
            </ul>
          </div>
          <div>
            <h4>Play</h4>
            <ul>
              <li><a onClick={() => setPage('trials')}>Trials</a></li>
              <li><a onClick={() => setPage('fixtures')}>Fixtures</a></li>
              <li><a onClick={() => setPage('shop')}>Shop</a></li>
              <li><a onClick={() => setPage('contact')}>Venues</a></li>
            </ul>
          </div>
          <div>
            <h4>Get in touch</h4>
            <ul>
              <li><a href="mailto:admin@nottinghamathletic.com">admin@nottinghamathletic.com</a></li>
              <li><a>Instagram</a></li>
              <li><a>YouTube</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Nottingham Athletic Basketball Club. All rights reserved.</span>
          <span className="footer-policies">
            <a href="assets/policies/Nottingham-Athletic-Safeguarding-Policy.pdf" target="_blank" rel="noopener noreferrer">Safeguarding Policy</a>
            <a href="assets/policies/Nottingham-Athletic-Data-Protection-Policy.pdf" target="_blank" rel="noopener noreferrer">Data Protection &amp; GDPR</a>
          </span>
        </div>
      </div>
    </footer>
  );
}

// ---------- Reusable bits ----------

function Photo({ variant = 'photo-v1', tag, glyph, className = '', style, src, focal }) {
  if (src) {
    return (
      <div className={`photo photo-img ${className}`} style={style}>
        <img src={src} alt={tag || ''} style={{ objectPosition: focal || 'center 20%' }} />
        {tag && <span className="photo-tag">{tag}</span>}
      </div>
    );
  }
  return (
    <div className={`photo ${variant} ${className}`} style={style}>
      {glyph}
      {tag && <span className="photo-tag">{tag}</span>}
    </div>
  );
}

function Pill({ children, kind = 'navy' }) {
  return <span className={`pill pill-${kind}`}>{children}</span>;
}

function Stat({ label, value, sub }) {
  return (
    <div className="stat">
      <div className="stat-label">{label}</div>
      <div className="stat-value">{value}</div>
      {sub && <div className="stat-sub">{sub}</div>}
    </div>
  );
}

function SquadCard({ squad, onClick }) {
  return (
    <div className="squad-card" onClick={onClick}>
      <div className="squad-bar" style={{ background: squad.barColor }}></div>
      <div className="squad-num">{squad.short}</div>
      <div className="squad-label">{squad.tag}</div>
      <h3>{squad.name}</h3>
      <div className="squad-meta">
        <span className="tabular">{squad.players} players</span>
        <span>·</span>
        <span>{squad.coach}</span>
      </div>
    </div>
  );
}

function FilterBar({ items, value, onChange }) {
  return (
    <div className="filterbar">
      {items.map(it => (
        <button key={it.id}
                className={'filter-pill ' + (value === it.id ? 'active' : '')}
                onClick={() => onChange(it.id)}>
          {it.dotClass && <span className={`dot ${it.dotClass}`}></span>}
          {it.label}
        </button>
      ))}
    </div>
  );
}

function FixtureRow({ fx, expanded, onToggle }) {
  const isWin = fx.result?.outcome === 'win';
  const isLoss = fx.result?.outcome === 'loss';
  return (
    <>
      <div className={`fixture-row ${expanded ? 'expanded' : ''}`} onClick={onToggle}>
        <div className="fixture-date">
          <span className="day">{fx.date.day}</span>
          <span className="month">{fx.date.month}</span>
        </div>
        <div className="fixture-main">
          <div className="fixture-title">
            <span className={`dot dot-${fx.squad}`}></span>
            <span>
              {fx.home ? 'vs ' : 'at '} {fx.opponent}
            </span>
            {fx.status === 'past' && (
              <Pill kind={isWin ? 'green' : isLoss ? 'red' : 'navy'}>
                {isWin ? 'W' : isLoss ? 'L' : '–'}
              </Pill>
            )}
          </div>
          <div className="fixture-sub">
            {fx.squadLabel} · {fx.tipoff} · {fx.venue || 'TBC'}
          </div>
        </div>
        <div className={`fixture-result ${fx.status === 'upcoming' ? 'upcoming' : isWin ? 'win' : isLoss ? 'loss' : ''}`}>
          {fx.status === 'upcoming'
            ? fx.fullDate.replace(/^[A-Za-z]+ /, '')
            : `${fx.result.ours} – ${fx.result.theirs}`}
        </div>
        <button className="btn btn-soft btn-icon" aria-label="Expand">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" width="16" height="16"
               style={{ transform: expanded ? 'rotate(180deg)' : 'none', transition: 'transform .2s' }}>
            <path d="m6 9 6 6 6-6" />
          </svg>
        </button>
      </div>
      {expanded && (
        <div className="fixture-detail">
          <div>
            <div className="lbl">Date</div>
            <div className="val tabular">{fx.fullDate}</div>
          </div>
          <div>
            <div className="lbl">Venue</div>
            <div className="val">{fx.venue || 'TBC'}</div>
          </div>
          <div>
            <div className="lbl">Tip-off</div>
            <div className="val tabular">{fx.tipoff}</div>
          </div>
          <div>
            <div className="lbl">Notes</div>
            <div className="val">{fx.notes}</div>
          </div>
        </div>
      )}
    </>
  );
}

window.NASite = { Topbar, Footer, Photo, Pill, Stat, SquadCard, FilterBar, FixtureRow };