// BRAWL BALA — Team page module (slug from URL path /times-bsc/<slug>/ or ?id=)
(function () {
  function getWantedSlug() {
    const m = location.pathname.match(/\/times-bsc\/([^/?#]+)\/?$/i);
    if (m && m[1]) return decodeURIComponent(m[1]);
    const q = new URLSearchParams(location.search);
    return q.get('id') || '';
  }

  function opponentFor(scrim, self) {
    return scrim.teamA?.name === self ? scrim.teamB : scrim.teamA;
  }

  function TeamPage() {
    const { data, error, loading } = usePageData();
    const [oppFilter, setOppFilter] = React.useState('');

    const resolved = React.useMemo(() => {
      if (!data) return { team: null, region: null, slug: getWantedSlug() };
      const slug = getWantedSlug();
      const regions = data.tables.circuit_regions || [];
      for (const r of regions) {
        const found = r.teams.find(t => BB.teamSlug(t.name) === slug);
        if (found) return { team: found, region: r, slug };
      }
      return { team: null, region: null, slug };
    }, [data]);

    React.useEffect(() => {
      const t = resolved.team, r = resolved.region;
      if (t && r) document.title = `${t.name} — ${r.label} BSC 2026 · BRAWL BALA`;
    }, [resolved.team, resolved.region]);

    React.useEffect(() => {
      setOppFilter('');
    }, [resolved.slug]);

    if (loading) return <PageLoading />;
    if (error)   return <PageError error={error} />;
    if (!resolved.team) return <NotFound slug={resolved.slug} regions={data.tables.circuit_regions || []} />;

    const team = resolved.team;
    const region = resolved.region;
    const training = (data.tables.team_training_stats || [])
      .find(s => s.name.toLowerCase() === team.name.toLowerCase());
    const allScrims = (data.tables.scrim_sessions || []).filter(s =>
      s.teamA?.name === team.name || s.teamB?.name === team.name
    );
    const filteredScrims = oppFilter
      ? allScrims.filter(s => (opponentFor(s, team.name)?.name || '').toLowerCase() === oppFilter.toLowerCase())
      : allScrims;
    const scrims = filteredScrims.slice(0, 8);
    const allPlayerStats = data.tables.player_brawler_stats || [];
    const roster = (team.players || []).map(name => ({
      name,
      stats: allPlayerStats.find(p => p.playerName && p.playerName.toLowerCase() === name.toLowerCase()),
    }));
    const accent = region.color;

    return (
      <div className="fade-up">
        <PageHeader active="team" updatedAt={data.generated_at} data={data} />
        <div className="glass" style={{padding:24,marginBottom:22,position:'relative',overflow:'hidden',background:`linear-gradient(120deg, ${accent}22, rgba(255,46,154,0.08) 60%, rgba(255,255,255,0.02))`,borderTop:`2px solid ${accent}`}}>
          <div className="hero-team">
            <TeamLogo name={team.name} img={team.img} imgRemote={team.imgRemote} size={104} rounded={20} accent={accent} />
            <div>
              <div style={{display:'flex',alignItems:'center',gap:10,marginBottom:6,flexWrap:'wrap'}}>
                <span className="label" style={{color:accent}}>{region.label}</span>
                <span style={{color:'var(--text-3)'}}>·</span>
                <span className="label" style={{color:'var(--text-2)'}}>{BB.t('team.seed','SEED')} #{team.rank}</span>
                {team.rank === 1 && (
                  <span style={{display:'inline-flex',alignItems:'center',gap:6,padding:'3px 8px',borderRadius:999,background:'rgba(255,203,5,0.12)',border:'1px solid rgba(255,203,5,0.35)',color:'var(--gold)',fontSize:11,fontWeight:700,letterSpacing:'0.08em'}}>{BB.t('team.champ','★ CAMPEÃO REGIONAL')}</span>
                )}
              </div>
              <h1 className="display team-name" style={{margin:0,fontSize:44,letterSpacing:'-0.03em',lineHeight:1.05}}>{team.name.toUpperCase()}</h1>
              <div style={{color:'var(--text-2)',fontSize:13,marginTop:6}}>
                {team.players.length} {BB.t('team.players','players')} · {BB.t('team.prefix','prefixo')} <span className="num">{(training?.prefix || '–')}</span>
              </div>
            </div>
            <a href="/bsc-2026/" style={{padding:'10px 16px',borderRadius:12,background:'rgba(255,255,255,0.04)',border:'1px solid var(--line-1)',fontSize:12,fontWeight:600,color:'var(--text-1)',whiteSpace:'nowrap'}}>{BB.t('team.back','← Voltar ao circuito')}</a>
          </div>
          <div className="grid-stats-4" style={{marginTop:22,paddingTop:18,borderTop:'1px solid var(--line-1)'}}>
            <BigStat label={BB.t('team.points','Pontos')} value={team.points} format={v => Math.round(v).toLocaleString('pt-BR')} />
            <BigStat label={BB.t('team.matchwr','Match WR')} value={team.matchWR}    format={v => v.toFixed(1) + '%'} color={BB.wrColor(team.matchWR)} />
            <BigStat label={BB.t('team.setwr','Set WR')}   value={team.setWR}      format={v => v.toFixed(1) + '%'} color={BB.wrColor(team.setWR)} />
            <BigStat label={BB.t('team.setsplayed','Sets jogados')} value={team.setsPlayed} format={v => Math.round(v).toString()} />
          </div>
        </div>

        {training && (
          <>
            <SectionTitle hint={BB.t('team.training.hint','dados consolidados de scrims rastreados')}>{BB.t('team.training','Performance em treino')}</SectionTitle>
            <div className="glass" style={{padding:18,marginBottom:22}}>
              <div className="grid-stats-5">
                <SmallStat label={BB.t('team.sessions','Sessões')} value={training.sessions} />
                <SmallStat label={BB.t('team.setsplayed','Sets jogados')} value={training.setsPlayed} />
                <SmallStat label={BB.t('team.setwr','Set WR')}     value={training.setWR}    format={v => v.toFixed(1) + '%'} color={BB.wrColor(training.setWR)} />
                <SmallStat label={BB.t('team.rounds','Rounds jogados')} value={training.roundsPlayed} />
                <SmallStat label={BB.t('team.roundwr','Round WR')}   value={training.roundWR}  format={v => v.toFixed(1) + '%'} color={BB.wrColor(training.roundWR)} />
              </div>
              {training.topOpponents && training.topOpponents.length > 0 && (
                <div style={{marginTop:16,paddingTop:14,borderTop:'1px solid var(--line-1)'}}>
                  <div className="label" style={{color:'var(--text-2)',marginBottom:8}}>{BB.t('team.topopps','Top adversários')}</div>
                  <div style={{display:'flex',gap:8,flexWrap:'wrap'}}>
                    <Chip active={!oppFilter} onClick={() => setOppFilter('')}>{BB.t('team.allopps','Todos')}</Chip>
                    {training.topOpponents.map((o, i) => (
                      <Chip key={i} active={oppFilter === o.name} onClick={() => setOppFilter(v => v === o.name ? '' : o.name)}>
                        {o.name} <span className="num" style={{color:'var(--text-2)',marginLeft:4}}>x{o.count}</span>
                      </Chip>
                    ))}
                  </div>
                </div>
              )}
            </div>
          </>
        )}

        <div className="grid-team-body">
          <div>
            <SectionTitle hint={roster.length + ' ' + BB.t('team.playerscount','jogadores')}>{BB.t('team.roster','Roster')}</SectionTitle>
            <div className="glass" style={{padding:8}}>
              <div style={{display:'grid',gap:8}}>
                {roster.map(p => <PlayerRow key={p.name} player={p} accent={accent} />)}
              </div>
            </div>
          </div>
          <div>
            <SectionTitle hint={scrims.length + ' ' + BB.t('team.matches','partidas') + (oppFilter ? ' - ' + BB.t('team.filtered','filtradas') : '')}>{BB.t('team.scrims','Scrims recentes')}</SectionTitle>
            <div className="glass" style={{padding:8}}>
              {scrims.length === 0 ? (
                <div style={{padding:24,textAlign:'center',color:'var(--text-2)',fontSize:13}}>{BB.t('team.noscrims','Sem scrims rastreados ainda.')}</div>
              ) : (
                <div style={{display:'grid',gap:6}}>{scrims.map((s, i) => <ScrimRow key={i} scrim={s} self={team.name} />)}</div>
              )}
            </div>
          </div>
        </div>
      </div>
    );
  }

  function NotFound({ slug, regions }) {
    const all = regions.flatMap(r => r.teams.map(t => ({ ...t, region: r.label, color: r.color })));
    return (
      <div className="fade-up">
        <PageHeader active="esports" updatedAt={null} />
        <div className="glass" style={{padding:32,textAlign:'center'}}>
          <h2 className="display">{BB.t('team.notfound.title','Time não encontrado')}</h2>
          <p style={{color:'var(--text-2)'}}>O slug <code className="num">{slug || '(vazio)'}</code> não existe no circuito.</p>
          <SectionTitle>{BB.t('team.choose','Escolha um time')}</SectionTitle>
          <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit, minmax(220px, 1fr))',gap:8}}>
            {all.map(t => (
              <a key={t.name + t.region} href={`/times-bsc/${encodeURIComponent(BB.teamSlug(t.name))}/`} style={{display:'flex',alignItems:'center',gap:10,padding:8,borderRadius:10,border:'1px solid var(--line-1)',background:'rgba(255,255,255,0.02)'}}>
                <TeamLogo name={t.name} img={t.img} imgRemote={t.imgRemote} size={28} rounded={8} accent={t.color}/>
                <div style={{minWidth:0,textAlign:'left'}}>
                  <div style={{fontWeight:600,fontSize:13}}>{t.name}</div>
                  <div className="label" style={{color:t.color,marginTop:2}}>{t.region}</div>
                </div>
              </a>
            ))}
          </div>
        </div>
      </div>
    );
  }

  function BigStat({ label, value, format, color }) {
    return (<div>
      <div className="label" style={{color:'var(--text-2)'}}>{label}</div>
      <div className="num display" style={{fontSize:'clamp(22px,4vw,32px)',lineHeight:1,marginTop:4,color:color || 'var(--text-0)'}}>
        <CountUp value={Number(value) || 0} format={format} />
      </div>
    </div>);
  }
  function SmallStat({ label, value, format, color }) {
    return (<div>
      <div className="label" style={{color:'var(--text-2)'}}>{label}</div>
      <div className="num display" style={{fontSize:'clamp(18px,3vw,22px)',lineHeight:1.1,marginTop:4,color:color || 'var(--text-0)'}}>
        <CountUp value={Number(value) || 0} format={format || (v => Math.round(v).toString())} />
      </div>
    </div>);
  }
  function PlayerRow({ player, accent }) {
    const mains = player.stats?.topBrawlers?.slice(0, 4) || [];
    const totalPicks = player.stats?.totalPicks || 0;
    const avgWR = mains.length
      ? mains.reduce((s, m) => s + (m.winRate || 0) * (m.picks || 0), 0) / mains.reduce((s, m) => s + (m.picks || 0), 1)
      : null;
    return (
      <div className="player-row" style={{padding:'10px 10px',borderRadius:12,background:'rgba(255,255,255,0.02)',border:'1px solid var(--line-1)'}}>
        <div style={{width:44,height:44,borderRadius:12,background:`linear-gradient(135deg, ${accent}66, ${accent}22)`,display:'flex',alignItems:'center',justifyContent:'center',fontFamily:'var(--font-display)',fontWeight:800,fontSize:18,color:'#fff',textShadow:'0 2px 6px rgba(0,0,0,0.4)',flexShrink:0}}>{player.name.slice(0, 2).toUpperCase()}</div>
        <div style={{minWidth:0}}>
          <div style={{fontWeight:700,fontSize:14,marginBottom:4}}>{player.name}</div>
          {mains.length > 0 ? (
            <div style={{display:'flex',gap:6,alignItems:'center'}}>
              {mains.map(m => (
                <div key={m.name} style={{position:'relative'}} title={`${m.name} · ${m.picks} picks · ${BB.fmtPct(m.winRate)}`}>
                  <BrawlerImg name={m.name} size={28} rounded={0.32}/>
                </div>
              ))}
            </div>
          ) : (
            <div style={{color:'var(--text-2)',fontSize:11}}>{BB.t('team.nomains','sem mains rastreados')}</div>
          )}
        </div>
        <div style={{textAlign:'right'}}>
          {avgWR != null && (
            <div className="num display" style={{fontSize:14,fontWeight:700,color:BB.wrColor(avgWR)}}>{BB.fmtPct(avgWR)}</div>
          )}
          <div className="num" style={{color:'var(--text-2)',fontSize:10,marginTop:1}}>{totalPicks} {BB.t('team.picks','picks')}</div>
        </div>
      </div>
    );
  }
  function ScrimRow({ scrim, self }) {
    const isA = scrim.teamA?.name === self;
    const opp = opponentFor(scrim, self);
    const myWins = isA ? scrim.matchesWonA : scrim.matchesWonB;
    const oppWins = isA ? scrim.matchesWonB : scrim.matchesWonA;
    const result = myWins > oppWins ? 'W' : myWins < oppWins ? 'L' : 'D';
    const resultColor = result === 'W' ? 'var(--lime)' : result === 'L' ? 'var(--red)' : 'var(--text-2)';
    const resultBg    = result === 'W' ? 'rgba(163,230,53,0.10)' : result === 'L' ? 'rgba(251,75,110,0.10)' : 'rgba(255,255,255,0.03)';
    const myRounds = isA ? scrim.winsA : scrim.winsB;
    const oppRounds = isA ? scrim.winsB : scrim.winsA;
    const oppSlug = BB.teamSlug(opp.name);
    return (
      <a href={`/times-bsc/${encodeURIComponent(oppSlug)}/`} className="scrim-row" style={{padding:'8px 10px',borderRadius:10,background:resultBg,border:`1px solid ${resultColor}33`}}>
        <div className="display" style={{width:22,height:22,borderRadius:6,background:resultColor,color:'#0a0a0a',display:'flex',alignItems:'center',justifyContent:'center',fontWeight:800,fontSize:11}}>{result}</div>
        <TeamLogo name={opp.name} img={opp.img} imgRemote={opp.imgRemote} size={26} rounded={6}/>
        <div style={{minWidth:0}}>
          <div style={{fontWeight:600,fontSize:13,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>vs {opp.name}</div>
          <div className="num" style={{color:'var(--text-2)',fontSize:10,marginTop:2}}>{scrim.region} · {scrim.matchCount} matches · {scrim.winsA + scrim.winsB} rounds</div>
        </div>
        <div className="num display" style={{fontSize:14,fontWeight:700,color:resultColor}}>
          {myWins}-{oppWins} <span style={{color:'var(--text-3)',fontWeight:500}}>({myRounds}-{oppRounds})</span>
        </div>
      </a>
    );
  }

  ReactDOM.createRoot(document.getElementById('root')).render(<TeamPage />);
})();