// ============================================================================
// pages-scores-contact.jsx — Live Scores (API-ready, 3 looks) & Contact
// ============================================================================

const STATUS_RANK = { live: 0, upcoming: 1, final: 2 };

function StatusBadge({ status, period }) {
  const label = status === 'live' ? 'LIVE' : status === 'upcoming' ? 'UPCOMING' : 'FINAL';
  return (
    <span className={`badge badge--${status}`}>
      {status === 'live' && <i className="badge__dot" />}
      {label}{period ? ` · ${period}` : ''}
    </span>);

}

function Crest({ team, lg }) {
  return (
    <span className={`crest ${team.logo ? 'crest--logo' : ''} ${lg ? 'crest--lg' : ''}`} style={{ '--tc': team.color }}>
      {team.logo ? <img src={team.logo} alt={`${team.name} logo`} /> : team.code}
    </span>);

}

// Hook: load scores, expose refresh + last-updated timestamp ------------------
function useLiveScores() {
  const [data, setData] = React.useState(null);
  const [busy, setBusy] = React.useState(false);
  const [updated, setUpdated] = React.useState(null);
  const load = React.useCallback(() => {
    setBusy(true);
    return fetchLiveScores().then((d) => {
      setData(d);
      setUpdated(Date.now());
      setBusy(false);
    });
  }, []);
  React.useEffect(() => {load();}, [load]);
  return { data, busy, updated, refresh: load };
}

// "updated 12s ago" relative clock -------------------------------------------
function useRelativeTime(ts) {
  const [, force] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => force((n) => n + 1), 1000);
    return () => clearInterval(t);
  }, []);
  if (!ts) return '';
  const s = Math.floor((Date.now() - ts) / 1000);
  if (s < 5) return 'just now';
  if (s < 60) return `${s}s ago`;
  return `${Math.floor(s / 60)}m ago`;
}

// Rich match card — vertical stack (home line / away line) -------------------
function MatchCard({ m, onOpen }) {
  const played = m.status !== 'upcoming';
  const hw = played && m.home.score > m.away.score;
  const aw = played && m.away.score > m.home.score;
  const open = () => onOpen && onOpen(m);
  const keyOpen = (e) => {
    if (!onOpen) return;
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      onOpen(m);
    }
  };
  const line = (t, win) =>
  <div className={`mc__line ${win ? 'is-win' : ''}`}>
      <Crest team={t} />
      <span className="mc__name">{t.name}</span>
      <span className="mc__num">{t.score ?? '–'}</span>
    </div>;

  return (
    <article
      className={`mc mc--${m.status}`}
      role={onOpen ? 'button' : undefined}
      tabIndex={onOpen ? 0 : undefined}
      onClick={open}
      onKeyDown={keyOpen}
      aria-label={`Open ${m.sportName} score details`}>
      <div className="mc__head">
        <span className="mc__sport">
          <img className="mc__pic" src={ASSETS.pic[m.sportId]} alt="" />
          {m.sportName}
        </span>
        <StatusBadge status={m.status} period={m.status === 'live' ? m.period : null} />
      </div>
      <div className="mc__lines">
        {line(m.home, hw)}
        {line(m.away, aw)}
      </div>
      <div className="mc__foot">
        <span>{m.court}</span>
        <span>{m.status === 'upcoming' ? m.period : m.status === 'final' ? 'Full time' : m.period}</span>
      </div>
    </article>);

}

// Compact full-width row -----------------------------------------------------
function MatchRow({ m, onOpen }) {
  const played = m.status !== 'upcoming';
  const hw = played && m.home.score > m.away.score;
  const aw = played && m.away.score > m.home.score;
  const open = () => onOpen && onOpen(m);
  const keyOpen = (e) => {
    if (!onOpen) return;
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      onOpen(m);
    }
  };
  return (
    <div
      className={`mr mr--${m.status}`}
      role={onOpen ? 'button' : undefined}
      tabIndex={onOpen ? 0 : undefined}
      onClick={open}
      onKeyDown={keyOpen}
      aria-label={`Open ${m.sportName} score details`}>
      <span className="mr__sport">
        <img className="mr__pic" src={ASSETS.pic[m.sportId]} alt="" />
        <span>{m.sportName}</span>
      </span>
      <div className={`mr__team ${hw ? 'is-win' : ''}`}>
        <span className="mr__name">{m.home.name}</span>
        <Crest team={m.home} />
      </div>
      <div className="mr__score">
        <span className={hw ? 'is-win' : ''}>{m.home.score ?? '–'}</span>
        <span className="mr__sep">:</span>
        <span className={aw ? 'is-win' : ''}>{m.away.score ?? '–'}</span>
      </div>
      <div className={`mr__team mr__team--away ${aw ? 'is-win' : ''}`}>
        <Crest team={m.away} />
        <span className="mr__name">{m.away.name}</span>
      </div>
      <span className="mr__status"><StatusBadge status={m.status} period={m.status === 'live' ? m.period : null} /></span>
    </div>);

}

function ScoreDetails({ match }) {
  const details = match.details || {};
  const hasScores = match.status !== 'upcoming';
  if (details.type === 'sets') {
    const sets = details.sets || [];
    if (!sets.length) return <p className="scoremodal__empty">Sets will appear once the match starts.</p>;
    return (
      <div className="scoremodal__sets">
        {sets.map((set) =>
        <div className="scoremodal__set" key={set.label}>
            <span>{set.label}</span>
            <b>{set.home}</b>
            <em>–</em>
            <b>{set.away}</b>
          </div>
        )}
      </div>);
  }

  if (details.type === 'scorers') {
    const scorers = details.scorers || [];
    if (!scorers.length) return <p className="scoremodal__empty">Scorers will appear once the match starts.</p>;
    return (
      <div className="scoremodal__scorers">
        {scorers.map((scorer, i) =>
        <div className="scoremodal__scorer" key={`${scorer.team}-${scorer.name}-${i}`}>
            <span className="scoremodal__time">{scorer.time}</span>
            <span className="scoremodal__team">{scorer.team}</span>
            <b>{scorer.name}</b>
            <em>{scorer.detail}</em>
          </div>
        )}
      </div>);
  }

  if (details.type === 'track') {
    const times = details.times || [];
    if (!times.length) return <p className="scoremodal__empty">Times will appear once the event starts.</p>;
    return (
      <div className="scoremodal__times">
        <h3 className="scoremodal__event">{details.event || times[0].event}</h3>
        {times.map((result) =>
        <div className="scoremodal__time-row" key={`${result.team}-${result.athlete}`}>
            <span className="scoremodal__rank">#{result.rank}</span>
            <b>{result.athlete}</b>
            <span>{result.team}</span>
            <em>{result.time}</em>
          </div>
        )}
      </div>);
  }

  if (details.type === 'esports') {
    return (
      <div className="scoremodal__esports">
        <span>Final score</span>
        <b>{details.finalScore}</b>
        <em>Winner: {hasScores ? details.winner : 'TBD'}</em>
      </div>);
  }

  return <p className="scoremodal__empty">Detailed scoring will appear here.</p>;
}

function ScoreModal({ match, onClose }) {
  React.useEffect(() => {
    const onKey = (e) => {
      if (e.key === 'Escape') onClose();
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [onClose]);

  const played = match.status !== 'upcoming';
  const homeWin = played && match.home.score > match.away.score;
  const awayWin = played && match.away.score > match.home.score;
  const isTrack = match.details && match.details.type === 'track';

  return (
    <div className="scoremodal" role="dialog" aria-modal="true" aria-label={`${match.sportName} score details`} onClick={onClose}>
      <div className="scoremodal__panel" onClick={(e) => e.stopPropagation()}>
        <button className="scoremodal__close" type="button" onClick={onClose} aria-label="Close score details">×</button>
        <div className="scoremodal__head">
          <span className="scoremodal__sport">
            <img src={ASSETS.pic[match.sportId]} alt="" />
            {match.sportName}
          </span>
          <StatusBadge status={match.status} period={match.status === 'live' ? match.period : null} />
        </div>
        {!isTrack && (
          <div className="scoremodal__score">
            <div className={homeWin ? 'is-win' : ''}>
              <Crest team={match.home} lg />
              <span>{match.home.name}</span>
              <b>{match.home.score ?? '–'}</b>
            </div>
            <em>vs</em>
            <div className={awayWin ? 'is-win' : ''}>
              <Crest team={match.away} lg />
              <span>{match.away.name}</span>
              <b>{match.away.score ?? '–'}</b>
            </div>
          </div>
        )}
        <div className="scoremodal__meta">
          <span>{match.court}</span>
          <span>{match.period}</span>
        </div>
        <ScoreDetails match={match} />
      </div>
    </div>);
}

// Summary bar + filter chips -------------------------------------------------
function ScoresBar({ counts, filter, setFilter, updated, busy, refresh }) {
  const rel = useRelativeTime(updated);
  const chips = [
  { id: 'all', label: 'All' },
  { id: 'live', label: 'Live' },
  { id: 'upcoming', label: 'Upcoming' },
  { id: 'final', label: 'Final' }];

  return (
    <div className="sbar">
      <div className="sbar__top">
        <div className="sbar__live">
          <span className="sbar__pulse" />
          <span className="sbar__count">{counts.live}</span>
          <span className="sbar__word">matches live now</span>
        </div>
        <div className="sbar__meta">
          <span className="sbar__upd">Updated {rel}</span>
          <button className={`sbar__refresh ${busy ? 'is-busy' : ''}`} onClick={refresh} disabled={busy}>
            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M21 12a9 9 0 1 1-2.64-6.36M21 3v6h-6" />
            </svg>
            Refresh
          </button>
        </div>
      </div>
      <div className="sbar__chips">
        {chips.map((c) =>
        <button
          key={c.id}
          className={`chip ${filter === c.id ? 'is-active' : ''} ${c.id === 'live' ? 'chip--live' : ''}`}
          onClick={() => setFilter(c.id)}>
          
            {c.id === 'live' && <i className="chip__dot" />}
            {c.label}
            <span className="chip__n">{counts[c.id]}</span>
          </button>
        )}
      </div>
    </div>);

}

function ScoreSportSection({ group, mode, onOpen }) {
  const live = group.matches.filter((m) => m.status === 'live').length;
  const upcoming = group.matches.filter((m) => m.status === 'upcoming').length;
  const final = group.matches.filter((m) => m.status === 'final').length;
  const isList = mode === 'list';

  return (
    <section className="scoregroup">
      <div className="scoregroup__head">
        <div className="scoregroup__title">
          <img src={ASSETS.pic[group.id]} alt="" />
          <div>
            <h2>{group.name}</h2>
            <span>{group.matches.length} {group.matches.length === 1 ? 'match' : 'matches'}</span>
          </div>
        </div>
        <div className="scoregroup__meta">
          {live > 0 && <span className="scoregroup__pill scoregroup__pill--live">{live} live</span>}
          {upcoming > 0 && <span className="scoregroup__pill">{upcoming} upcoming</span>}
          {final > 0 && <span className="scoregroup__pill scoregroup__pill--final">{final} final</span>}
        </div>
      </div>
      <div className={isList ? 'mrs' : 'mcs'}>
        {group.matches.map((m) => isList ?
        <MatchRow key={m.id} m={m} onOpen={onOpen} /> :
        <MatchCard key={m.id} m={m} onOpen={onOpen} />
        )}
      </div>
    </section>);

}

function ScoresPage({ look = 'grid' }) {
  const { data, busy, updated, refresh } = useLiveScores();
  const [filter, setFilter] = React.useState('all');
  const [selectedMatch, setSelectedMatch] = React.useState(null);

  if (!data) {
    return (
      <main>
        <Banner title="LIVE SCORES" />
        <div className="wrap"><div className="loading">Loading live scores…</div></div>
      </main>);

  }

  const all = data.
  flatMap((s) => s.matches.map((m) => ({ ...m, sportName: s.name, sportId: s.id }))).
  sort((a, b) => STATUS_RANK[a.status] - STATUS_RANK[b.status]);
  const counts = {
    all: all.length,
    live: all.filter((m) => m.status === 'live').length,
    upcoming: all.filter((m) => m.status === 'upcoming').length,
    final: all.filter((m) => m.status === 'final').length
  };
  const sportGroups = data.map((s) => {
    const matches = s.matches.
    map((m) => ({ ...m, sportName: s.name, sportId: s.id })).
    filter((m) => filter === 'all' || m.status === filter).
    sort((a, b) => STATUS_RANK[a.status] - STATUS_RANK[b.status]);
    return { id: s.id, name: s.name, matches };
  }).filter((group) => group.matches.length > 0);
  const shownCount = sportGroups.reduce((total, group) => total + group.matches.length, 0);

  return (
    <main>
      <Banner title="LIVE SCORES" />
      <div className="wrap">
        <div className="score-inactive">Live scoring is currently inactive</div>
        <div className="score-powered">
          <span>Live scores powered by</span>
          <img src={ASSETS.logoSportall} alt="Sportall" />
        </div>
        <ScoresBar counts={counts} filter={filter} setFilter={setFilter} updated={updated} busy={busy} refresh={refresh} />

        {shownCount === 0 ?
        <div className="loading">No {filter} matches right now.</div> :
        <div className="scoregroups">
          {sportGroups.map((group) =>
          <ScoreSportSection key={group.id} group={group} mode={look === 'list' ? 'list' : 'grid'} onOpen={setSelectedMatch} />
          )}
        </div>
        }

      </div>
      {selectedMatch && <ScoreModal match={selectedMatch} onClose={() => setSelectedMatch(null)} />}
    </main>);
}

// --- Contact ----------------------------------------------------------------
function ContactPage() {
  const [form, setForm] = React.useState({ name: '', email: '', subject: '', message: '' });
  const [errs, setErrs] = React.useState({});
  const [sent, setSent] = React.useState(false);
  const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));

  const submit = (e) => {
    e.preventDefault();
    const errors = {};
    if (!form.name.trim()) errors.name = 'Please enter your name';
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(form.email)) errors.email = 'Enter a valid email';
    if (!form.message.trim()) errors.message = 'Add a short message';
    setErrs(errors);

    if (Object.keys(errors).length === 0) {
      const subject = form.subject.trim() || 'Muafakat Games enquiry';
      const body = [
        `Name: ${form.name.trim()}`,
        `Email: ${form.email.trim()}`,
        '',
        form.message.trim(),
      ].join('\n');
      window.location.href = `${SOCIAL_LINKS.emailHref}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
      setSent(true);
    }
  };

  return (
    <main>
      <Banner title="CONTACT" />
      <div className="wrap contact">
        <div className="contact__info">
          <h2 className="contact__h">Get in touch</h2>
          <p className="contact__lead">
            Questions about the games, partnerships, or volunteering? Send us a
            message and the committee will get back to you.
          </p>
          <a className="contact__email" href={SOCIAL_LINKS.emailHref}>{SOCIAL_LINKS.email}</a>
          <div className="contact__socials">
            {SOCIAL_ORDER.map((k) => {
              const I = Icon[k];
              return (
                <a key={k} href={SOCIAL_LINKS[k]} className="contact__soc" aria-label={k} target="_blank" rel="noopener noreferrer">
                  <I width="20" height="20" />
                </a>
              );
            })}
          </div>
        </div>

        {sent ?
        <div className="contact__sent">
            <div className="contact__check">✓</div>
            <h3>Message sent!</h3>
            <p>Thanks {form.name.split(' ')[0]} — we'll be in touch soon.</p>
            <button className="btn" onClick={() => {setSent(false);setForm({ name: '', email: '', subject: '', message: '' });}}>
              Send another
            </button>
          </div> :

        <form className="contact__form" onSubmit={submit} noValidate>
            <label className="field">
              <span>Name</span>
              <input value={form.name} onChange={set('name')} className={errs.name ? 'has-err' : ''} placeholder="Your name" />
              {errs.name && <em>{errs.name}</em>}
            </label>
            <label className="field">
              <span>Email</span>
              <input value={form.email} onChange={set('email')} className={errs.email ? 'has-err' : ''} placeholder="you@email.com" />
              {errs.email && <em>{errs.email}</em>}
            </label>
            <label className="field">
              <span>Subject</span>
              <input value={form.subject} onChange={set('subject')} placeholder="What's this about?" />
            </label>
            <label className="field">
              <span>Message</span>
              <textarea rows="5" value={form.message} onChange={set('message')} className={errs.message ? 'has-err' : ''} placeholder="Your message…" />
              {errs.message && <em>{errs.message}</em>}
            </label>
            <button className="btn btn--send" type="submit">Send message</button>
          </form>
        }
      </div>
    </main>);

}

Object.assign(window, { ScoresPage, ContactPage });