// BRAWL BALA — Individual brawler page module
// Reads slug from URL path /brawler/<slug>/ (with underscore variant fallback)
(function () {
  function getWantedSlug() {
    const m = location.pathname.match(/\/brawler\/([^/?#]+)\/?$/i);
    if (m && m[1]) return decodeURIComponent(m[1]).toLowerCase();
    const q = new URLSearchParams(location.search);
    return (q.get('id') || '').toLowerCase();
  }

  function cleanAbilityText(text) {
    return String(text || '')
      .replace(/<[^>]+>/g, ' ')
      .replace(/\bis healed for health\b/gi, 'is healed')
      .replace(/\bhealed for health\b/gi, 'healed')
      .replace(/\bfor sec\b/gi, 'for a short time')
      .replace(/\s+\./g, '.')
      .replace(/\s+/g, ' ')
      .trim();
  }

  function BrawlerPage() {
    const { data, error, loading } = usePageData();

    const resolved = React.useMemo(() => {
      if (!data) return { brawler: null, slug: getWantedSlug() };
      const slug = getWantedSlug();
      // Try matching slug against brawlerSlug(name) directly, and also a dash-variant
      const dashSlug = slug.replace(/-/g, '_');
      const all = data.tables.brawler_details || [];
      for (const b of all) {
        const bs = BB.brawlerSlug(b.name);
        if (bs === dashSlug || bs === slug || bs.replace(/_/g, '-') === slug) return { brawler: b, slug };
      }
      return { brawler: null, slug };
    }, [data]);

    React.useEffect(() => {
      const b = resolved.brawler;
      if (b) document.title = `${b.name} — Meta, build e matchups · BRAWL BALA`;
    }, [resolved.brawler]);

    if (loading) return <PageLoading />;
    if (error)   return <PageError error={error} />;
    if (!resolved.brawler) return <NotFound slug={resolved.slug} data={data} />;

    const b = resolved.brawler;
    const ranked  = b.currentMeta?.ranked;
    const pro     = b.currentMeta?.proScrims;
    const matchups = b.matchups || {};
    const abilities = b.abilities?.brawlifyDescriptions || b.abilities?.official || {};
    const rarityColor = b.rarity?.color || 'var(--magenta)';

    return (
      <div className="fade-up">
        <PageHeader active="meta" updatedAt={data.generated_at} data={data} />

        {/* HERO */}
        <div className="glass" style={{padding:24,marginBottom:22,position:'relative',overflow:'hidden',
            background:`linear-gradient(120deg, ${rarityColor}33, rgba(255,46,154,0.06) 60%, rgba(255,255,255,0.02))`,
            borderTop:`2px solid ${rarityColor}`}}>
          <div className="hero-team">
            <div style={{position:'relative',width:240,flexShrink:0}}>
              <BrawlerSplash name={b.name} height={220} />
            </div>
            <div>
              <div style={{display:'flex',alignItems:'center',gap:8,marginBottom:6,flexWrap:'wrap'}}>
                {b.rarity?.name && (
                  <span className="label" style={{
                    color: rarityColor, padding:'3px 9px', borderRadius:999,
                    background:`${rarityColor}22`, border:`1px solid ${rarityColor}66`,
                  }}>{b.rarity.name.toUpperCase()}</span>
                )}
                {b.class?.name && b.class.name !== 'Unknown' && (
                  <span className="label" style={{color:'var(--text-2)'}}>· {b.class.name.toUpperCase()}</span>
                )}
                {ranked?.rank && (
                  <span className="label" style={{color:'var(--text-2)'}}>· #{ranked.rank} RANKED</span>
                )}
              </div>
              <h1 className="display team-name" style={{margin:0,fontSize:'clamp(32px,5vw,48px)',letterSpacing:'-0.03em',lineHeight:1.05}}>
                {b.name.toUpperCase()}
              </h1>
              {b.description && (
                <p style={{color:'var(--text-1)',fontSize:14,marginTop:10,maxWidth:640,lineHeight:1.5}}>
                  {b.description.replace(/[^\x20-\x7E -ſ]/g, '')}
                </p>
              )}
            </div>
            <a href="/meta-ranked-3v3/" 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'}}>← Ranking</a>
          </div>

          {/* STATS Ranked + Pro */}
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:14,marginTop:22,paddingTop:18,borderTop:'1px solid var(--line-1)'}}>
            <StatBlock title="Ranked 3v3" data={ranked} kind="ranked" />
            <StatBlock title="Pro Friendly" data={pro} kind="pro" accent="var(--cyan)" />
          </div>
        </div>

        {/* ABILITIES */}
        {(abilities.starPowers?.length || abilities.gadgets?.length || abilities.hyperCharges?.length) && (
          <>
            <SectionTitle hint={BB.t('brawler.abilitiesHint','star powers, gadgets e hyper charge')}>{BB.t('brawler.abilities','Habilidades')}</SectionTitle>
            <div className="glass" style={{padding:18,marginBottom:22}}>
              <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit, minmax(280px, 1fr))',gap:14}}>
                {(abilities.starPowers || []).map(sp => (
                  <AbilityCard key={sp.id} kind="STAR POWER" item={sp} color="var(--gold)" />
                ))}
                {(abilities.gadgets || []).map(g => (
                  <AbilityCard key={g.id} kind="GADGET" item={g} color="var(--cyan)" />
                ))}
                {(abilities.hyperCharges || []).map(h => (
                  <AbilityCard key={h.id} kind="HYPERCHARGE" item={h} color="var(--magenta)" />
                ))}
              </div>
            </div>
          </>
        )}

        {/* MATCHUPS */}
        {(matchups.goodAgainst?.length || matchups.strugglesAgainst?.length) && (
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:14,marginBottom:22}}>
            <MatchupColumn title={BB.t('brawler.goodAgainst','Forte contra')} hint={BB.t('brawler.goodHint','alto win rate observado')} rows={matchups.goodAgainst || []} accent="var(--lime)" />
            <MatchupColumn title={BB.t('brawler.badAgainst','Sofre contra')} hint={BB.t('brawler.badHint','baixo win rate observado')} rows={matchups.strugglesAgainst || []} accent="var(--red)" />
          </div>
        )}

        {/* EXTERNAL */}
        {b.externalLinks?.brawlify && (
          <div style={{display:'flex',gap:10,marginBottom:30}}>
            <a href={b.externalLinks.brawlify} target="_blank" rel="noopener noreferrer" style={{
              padding:'10px 16px',borderRadius:12,
              background:'rgba(255,255,255,0.04)',border:'1px solid var(--line-1)',
              fontSize:13,fontWeight:600,color:'var(--text-1)',
            }}>{BB.t('brawler.brawlify','Ver no Brawlify')}</a>
          </div>
        )}
      </div>
    );
  }

  function StatBlock({ title, data, kind, accent }) {
    accent = accent || 'var(--magenta)';
    if (!data) {
      return (
        <div style={{opacity:0.5}}>
          <div className="label" style={{color: accent}}>{title}</div>
          <div style={{color:'var(--text-2)',fontSize:13,marginTop:8}}>sem dados</div>
        </div>
      );
    }
    const score = data.nota != null ? data.nota : data.meta;
    return (
      <div style={{padding:14,borderRadius:14,background:'rgba(255,255,255,0.02)',border:'1px solid var(--line-1)'}}>
        <div style={{display:'flex',alignItems:'baseline',gap:10,marginBottom:10}}>
          <div className="label" style={{color: accent}}>{title}</div>
          <span className="num" style={{color:'var(--text-3)',fontSize:11}}>#{data.rank}</span>
          {data.lowSample && <span className="num" style={{color:'var(--text-3)',fontSize:10}}>(amostra baixa)</span>}
        </div>
        <div style={{display:'grid',gridTemplateColumns:'repeat(4, 1fr)',gap:10}}>
          <Mini label="WR" value={data.wr} format={v=>v.toFixed(1)+'%'} color={BB.wrColor(data.wr)} />
          <Mini label="META" value={score} format={v=>v.toFixed(2)} />
          <Mini label="PICKS" value={data.picks} format={v=>BB.fmtNum(v)} />
          <Mini label="PRES." value={data.presence} format={v=>v.toFixed(1)+'%'} />
        </div>
      </div>
    );
  }

  function Mini({ label, value, format, color }) {
    return (
      <div>
        <div className="label" style={{color:'var(--text-2)',fontSize:9}}>{label}</div>
        <div className="num display" style={{fontSize:18,lineHeight:1.1,marginTop:2,color:color||'var(--text-0)'}}>
          {value != null ? format(value) : '–'}
        </div>
      </div>
    );
  }

  function AbilityCard({ kind, item, color }) {
    const img = item.imageLocal || item.imageUrl;
    return (
      <div style={{padding:14,borderRadius:14,background:'rgba(255,255,255,0.02)',border:'1px solid var(--line-1)',display:'flex',gap:12,alignItems:'flex-start'}}>
        <div style={{width:56,height:56,borderRadius:12,flexShrink:0,
            background:`linear-gradient(135deg, ${color}33, ${color}11)`,
            border:`1px solid ${color}55`,
            display:'flex',alignItems:'center',justifyContent:'center',overflow:'hidden'}}>
          {img ? (
            <img src={img} alt={item.name} loading="lazy" onError={(e)=>{e.currentTarget.style.display='none';}}
                 style={{width:'88%',height:'88%',objectFit:'contain'}}/>
          ) : (
            <span className="display" style={{fontSize:24,color,fontWeight:800}}>
              {(item.name||'?')[0].toUpperCase()}
            </span>
          )}
        </div>
        <div style={{minWidth:0,flex:1}}>
          <div className="label" style={{color,fontSize:10}}>{kind}</div>
          <div style={{fontWeight:700,fontSize:14,marginTop:2}}>{item.name}</div>
          {item.description && (
            <div style={{color:'var(--text-2)',fontSize:11,marginTop:6,lineHeight:1.4}}>
              {cleanAbilityText(item.description)}
            </div>
          )}
        </div>
      </div>
    );
  }

  function MatchupColumn({ title, hint, rows, accent }) {
    return (
      <div>
        <SectionTitle hint={hint}>{title}</SectionTitle>
        <div className="glass" style={{padding:8}}>
          {rows.length === 0 ? (
            <div style={{padding:20,textAlign:'center',color:'var(--text-2)',fontSize:13}}>Sem dados suficientes.</div>
          ) : (
            <div style={{display:'grid',gap:6}}>
              {rows.map(r => <MatchupRow key={r.brawler} row={r} accent={accent} />)}
            </div>
          )}
        </div>
      </div>
    );
  }

  function MatchupRow({ row, accent }) {
    const slug = BB.brawlerSlug(row.brawler).replace(/_/g, '-');
    return (
      <a href={`/brawler/${slug}/`} style={{display:'grid',gridTemplateColumns:'40px 1fr auto',gap:10,alignItems:'center',
          padding:'8px 10px',borderRadius:10,background:'rgba(255,255,255,0.02)',border:'1px solid var(--line-1)'}}>
        <BrawlerImg name={row.brawler} size={36}/>
        <div style={{minWidth:0}}>
          <div style={{fontWeight:600,fontSize:13}}>{row.brawler}</div>
          <div className="num" style={{color:'var(--text-2)',fontSize:11,marginTop:1}}>
            {row.games} games · {row.wins}W / {row.games - row.wins - (row.draws || 0)}L
          </div>
        </div>
        <div className="num display" style={{fontSize:15,fontWeight:700,color: accent}}>
          {row.wr.toFixed(0)}%
        </div>
      </a>
    );
  }

  function NotFound({ slug, data }) {
    const all = (data?.tables?.brawler_details || []).slice().sort((a,b) => a.name.localeCompare(b.name));
    return (
      <div className="fade-up">
        <PageHeader active="meta" updatedAt={data?.generated_at} data={data} />
        <div className="glass" style={{padding:32,textAlign:'center'}}>
          <h2 className="display">Brawler não encontrado</h2>
          <p style={{color:'var(--text-2)'}}>O slug <code className="num">{slug || '(vazio)'}</code> não bate com nenhum brawler conhecido.</p>
          <SectionTitle>Escolha um brawler</SectionTitle>
          <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit, minmax(150px, 1fr))',gap:6,maxHeight:500,overflowY:'auto'}}>
            {all.map(b => {
              const s = BB.brawlerSlug(b.name).replace(/_/g, '-');
              return (
                <a key={b.name} href={`/brawler/${s}/`} style={{display:'flex',alignItems:'center',gap:8,padding:8,
                    borderRadius:10,border:'1px solid var(--line-1)',background:'rgba(255,255,255,0.02)'}}>
                  <BrawlerImg name={b.name} size={28}/>
                  <div style={{fontWeight:600,fontSize:13,textAlign:'left'}}>{b.name}</div>
                </a>
              );
            })}
          </div>
        </div>
      </div>
    );
  }

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