// === Brand/Vertical detail page — sub-tabs: Intelligence, Leaderboard, Queries, Sources, Gaps, Anomalies ===

const BrandPage = ({ brand, vertical, onOpenCompetitor }) => {
  const [sub, setSub] = React.useState('Intelligence');
  const tabs = ['Intelligence', 'Leaderboard', 'Queries', 'Sources', 'Gaps', 'Anomalies', 'History'];

  return (
    <>
      <SubTabs tabs={tabs} active={sub} setActive={setSub}/>
      <div className="body">
        <BrandHero brand={brand} vertical={vertical}/>
        {sub === 'Intelligence' && <IntelligenceView brand={brand} vertical={vertical} onOpenCompetitor={onOpenCompetitor}/>}
        {sub === 'Leaderboard' && <LeaderboardView brand={brand} vertical={vertical} onOpenCompetitor={onOpenCompetitor}/>}
        {sub === 'Queries' && <QueriesView brand={brand} vertical={vertical}/>}
        {sub === 'Sources' && <SourcesView/>}
        {sub === 'Gaps' && <GapsView brand={brand} vertical={vertical}/>}
        {sub === 'Anomalies' && <AnomaliesView brand={brand} vertical={vertical}/>}
        {sub === 'History' && <HistoryView brand={brand}/>}
      </div>
    </>
  );
};

const BrandHero = ({ brand, vertical }) => {
  const v = vertical;
  return (
    <div className="card" style={{padding: 0}}>
      <div style={{padding: '18px 22px', display: 'grid', gridTemplateColumns: 'auto 1fr auto', gap: 22, alignItems: 'center'}}>
        <Fav init={brand.initial} size="xl"/>
        <div className="stack-4">
          <div className="row" style={{gap: 10}}>
            <h1 className="section-title" style={{fontSize: 24}}>{brand.name}</h1>
            <span className="muted mono" style={{fontSize: 12}}>{brand.domain}</span>
            <Pill tone="navy"><span className="dot"/> tracking</Pill>
          </div>
          <div className="muted" style={{fontSize: 12.5, maxWidth: 620}}>
            {brand.desc}. Currently viewing <strong style={{color: 'var(--ink-1)'}}>{v.name}</strong> · {v.queries} tracked prompts.
          </div>
        </div>
        <div className="row" style={{gap: 8}}>
          <div className="search-wrap">
            <Icon name="search" size={13}/>
            <input className="input search" placeholder="Best car insurance UK…" defaultValue="Best car insurance UK 2026"/>
          </div>
          <select className="input" style={{minWidth: 110}}>
            <option>UK</option>
            <option>London</option>
            <option>Manchester</option>
          </select>
          <Btn primary>Re-scan <Icon name="sparkles" size={11}/></Btn>
        </div>
      </div>

      {/* KPI strip */}
      <div className="kpi-grid" style={{borderRadius: 0, borderLeft: 0, borderRight: 0, borderTop: '1px solid var(--line)'}}>
        <div className="kpi">
          <div className="label">Health</div>
          <div className="value">{brand.health}<span className="unit">/ 100</span></div>
          <div className="delta-row"><Delta d="+3"/> 7-day</div>
        </div>
        <div className="kpi">
          <div className="label">Avg rank</div>
          <div className="value">#{v.rank}<span className="unit">across {v.queries} prompts</span></div>
          <div className="delta-row"><Delta d={v.delta}/> 7-day</div>
        </div>
        <div className="kpi">
          <div className="label">AI citations</div>
          <div className="value">381<span className="unit">last 7d</span></div>
          <div className="delta-row"><Delta d="+24"/> vs prev</div>
          <Sparkline data={trend(2, 14, 50, 6)} color="var(--navy)" w={120} h={20}/>
        </div>
        <div className="kpi">
          <div className="label">Source coverage</div>
          <div className="value">28<span className="unit">/ 48</span></div>
          <div className="delta-row">{Math.round(28/48*100)}% of cited domains</div>
        </div>
        <div className="kpi">
          <div className="label">Top threat</div>
          <div className="value" style={{fontSize: 22}}>Direct Line</div>
          <div className="delta-row"><Pill tone="coral"><span className="dot"/> outranks on 11 queries</Pill></div>
        </div>
        <div className="kpi" style={{background: 'var(--coral-soft)'}}>
          <div className="label" style={{color: 'var(--coral)'}}>Anomalies</div>
          <div className="value" style={{color: 'var(--coral)'}}>19</div>
          <div className="delta-row" style={{color: 'var(--coral)'}}>4 critical · 15 low</div>
        </div>
      </div>
    </div>
  );
};

const IntelligenceView = ({ brand, vertical, onOpenCompetitor }) => {
  const [filter, setFilter] = React.useState('all');
  const competitors = window.competitorsFor ? window.competitorsFor(brand.id, vertical.id) : window.COMPETITORS;
  return (
    <div className="grid-2" style={{gridTemplateColumns: '1.5fr 1fr', alignItems: 'flex-start'}}>
      <div className="card">
        <div className="card-head">
          <h3>Competitive map</h3>
          <span className="sub">queries · sources · competitors · {vertical.name.toLowerCase()}</span>
          <div className="grow"/>
          <div className="row" style={{gap: 4}}>
            {['all','queries','sources','competitors'].map(f => (
              <Pill key={f} onClick={() => setFilter(f)} active={filter === f}>{f}</Pill>
            ))}
          </div>
        </div>
        <BubbleMap filter={filter} competitors={competitors}/>
      </div>

      <div className="stack-12">
        <div className="card">
          <div className="card-head">
            <h3>Where they outrank you</h3>
            <span className="sub">top 6 threats · {vertical.name.toLowerCase()}</span>
          </div>
          <div className="divide-y">
            {competitors.filter(c => !c.you).slice(0, 6).map(c => (
              <div key={c.id} onClick={() => onOpenCompetitor(c)} style={{display: 'grid', gridTemplateColumns: 'auto 1fr auto auto', gap: 10, padding: '10px 14px', alignItems: 'center', cursor: 'pointer'}}>
                <Fav init={c.init}/>
                <div className="stack-2">
                  <div style={{fontSize: 12.5, fontWeight: 500}}>{c.name}</div>
                  <div className="muted" style={{fontSize: 11}}>{c.domain} · outranks on {Math.max(2, 12 - c.score/10) | 0} queries</div>
                </div>
                <Sparkline data={trend(c.score % 10, 12, c.score, 4)} color={c.trend === 'up' ? 'var(--coral)' : 'var(--ink-4)'} w={50} h={18}/>
                <div className="row" style={{gap: 6}}>
                  <span className="mono" style={{fontSize: 11, fontWeight: 600}}>#{c.claude || '—'}</span>
                  <Delta d={c.delta}/>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="card">
          <div className="card-head">
            <h3>Suggested actions</h3>
            <span className="sub">drafted by Bloxx</span>
          </div>
          <div className="divide-y">
            {[
              { txt: 'Create comparison content showing how Admiral differs from Direct Line, Aviva, and Churchill on multi-car households.', cta: 'Draft' },
              { txt: 'Publish EV-specific landing pages — competitors own this gap with 0 Admiral citations.', cta: 'Draft' },
              { txt: 'Defend MultiCar narrative: refresh the explainer FAQ; add structured data.', cta: 'Plan' },
            ].map((s, i) => (
              <div key={i} style={{display: 'grid', gridTemplateColumns: '1fr auto', gap: 10, padding: '12px 14px', alignItems: 'center'}}>
                <div style={{fontSize: 12.5, color: 'var(--ink-2)', lineHeight: 1.45}}>{s.txt}</div>
                <Btn sm>{s.cta} <Icon name="arrow" size={10}/></Btn>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

// SVG bubble map — query/source/competitor ecosystem
const BubbleMap = ({ filter, competitors }) => {
  const comps = competitors || window.COMPETITORS;
  const items = React.useMemo(() => {
    const seed = (n) => ((n * 9301 + 49297) % 233280) / 233280;
    const arr = [];
    window.QUERIES.slice(0, 14).forEach((q, i) => {
      arr.push({ kind: 'q', label: q.q, size: 10 + q.cit * 0.8, x: 25 + seed(i*7) * 30, y: 20 + seed(i*13) * 50 });
    });
    window.SOURCES.slice(0, 12).forEach((s, i) => {
      arr.push({ kind: 's', label: s.domain, size: 10 + s.cit * 0.3, x: 55 + seed(i*11) * 35, y: 50 + seed(i*17) * 40 });
    });
    comps.forEach((c, i) => {
      arr.push({ kind: c.you ? 'you' : 'c', label: c.name, size: 14 + c.score * 0.3, x: 8 + seed(i*5) * 18, y: 60 + seed(i*19) * 35 });
    });
    return arr;
  }, [comps]);

  const visible = items.filter(b => filter === 'all' ||
    (filter === 'queries' && b.kind === 'q') ||
    (filter === 'sources' && b.kind === 's') ||
    (filter === 'competitors' && (b.kind === 'c' || b.kind === 'you')));

  return (
    <div className="bubbles">
      {/* Quadrant labels */}
      <div style={{position: 'absolute', top: 14, left: 14, fontSize: 10, color: 'var(--ink-4)', textTransform: 'uppercase', letterSpacing: '.08em', fontWeight: 600}}>Queries</div>
      <div style={{position: 'absolute', top: 14, right: 14, fontSize: 10, color: 'var(--ink-4)', textTransform: 'uppercase', letterSpacing: '.08em', fontWeight: 600}}>Sources</div>
      <div style={{position: 'absolute', bottom: 14, left: 14, fontSize: 10, color: 'var(--ink-4)', textTransform: 'uppercase', letterSpacing: '.08em', fontWeight: 600}}>Competitors</div>

      {visible.map((b, i) => (
        <div
          key={i}
          className={`bubble ${b.kind}`}
          style={{
            left: `${b.x}%`,
            top: `${b.y}%`,
            width: b.size,
            height: b.size,
            opacity: filter === 'all' ? 0.85 : 0.95,
          }}
          title={b.label}
        >
          {b.size > 28 && b.label.split(' ').slice(0,2).join(' ').slice(0, 14)}
        </div>
      ))}

      {/* You badge tooltip */}
      <div style={{
        position: 'absolute', left: '14%', top: '70%',
        background: 'var(--ink-1)', color: 'var(--surface)',
        padding: '6px 10px', borderRadius: 6, fontSize: 11,
        boxShadow: 'var(--shadow-2)', zIndex: 4, lineHeight: 1.4,
      }}>
        <div style={{fontWeight: 600}}>You — Admiral</div>
        <div style={{opacity: .8}}>12 queries · avg rank #5</div>
        <div style={{opacity: .8}}>10 self-owned sources</div>
      </div>

      <div style={{position: 'absolute', top: 14, left: '50%', transform: 'translateX(-50%)', display: 'flex', gap: 12, fontSize: 11, color: 'var(--ink-3)'}}>
        <span className="row" style={{gap: 4}}><span className="bubble q" style={{position:'static', width: 8, height: 8}}/> Query</span>
        <span className="row" style={{gap: 4}}><span className="bubble s" style={{position:'static', width: 8, height: 8}}/> Source</span>
        <span className="row" style={{gap: 4}}><span className="bubble c" style={{position:'static', width: 8, height: 8}}/> Competitor</span>
      </div>
    </div>
  );
};

window.BrandPage = BrandPage;