// === Sub-tab views: Leaderboard, Queries, Sources, Gaps, Anomalies, History ===

const RankCell = ({ n }) => {
  if (n == null) return <span className="muted mono">—</span>;
  const tone = n === 1 ? 'green' : n <= 3 ? 'gold' : '';
  return <span className={`pill ${tone} solid`} style={{fontSize: 10, padding: '2px 6px'}}>#{n}</span>;
};

const LeaderboardView = ({ brand, vertical, onOpenCompetitor }) => {
  const [llm, setLlm] = React.useState('all');
  const [range, setRange] = React.useState('30d');
  const llms = ['all', 'claude', 'gpt', 'gemini', 'perplex'];
  const competitors = (window.competitorsFor && brand && vertical) ? window.competitorsFor(brand.id, vertical.id) : window.COMPETITORS;

  return (
    <div className="card">
      <div className="filter-row">
        <div className="row" style={{gap: 4}}>
          {['7d','30d','90d','All'].map(r => (
            <Pill key={r} onClick={() => setRange(r)} active={range === r}>{r}</Pill>
          ))}
        </div>
        <div className="sep"/>
        <div className="row" style={{gap: 4}}>
          {llms.map(l => (
            <Pill key={l} onClick={() => setLlm(l)} active={llm === l}>
              {l !== 'all' && <LLMDot k={l}/>} {l === 'all' ? 'All providers' : l}
            </Pill>
          ))}
        </div>
        <div className="grow"/>
        <div className="search-wrap">
          <Icon name="search" size={13}/>
          <input className="input search" placeholder="Search competitors…"/>
        </div>
        <Btn ghost sm><Icon name="download" size={11}/> CSV</Btn>
      </div>

      <table className="tbl">
        <thead>
          <tr>
            <th style={{width: 40}}>#</th>
            <th>Company</th>
            <th className="right" style={{width: 90}}>Score</th>
            <th className="center" style={{width: 64}}>Claude</th>
            <th className="center" style={{width: 64}}>GPT</th>
            <th className="center" style={{width: 64}}>Gemini</th>
            <th className="center" style={{width: 64}}>Perplex</th>
            <th className="center" style={{width: 72}}>Coverage</th>
            <th className="center" style={{width: 110}}>30-day trend</th>
            <th className="right" style={{width: 80}}>SoV</th>
            <th className="right" style={{width: 60}}></th>
          </tr>
        </thead>
        <tbody>
          {competitors.map((c, i) => (
            <tr key={c.id} className={c.you ? 'you' : ''} onClick={() => !c.you && onOpenCompetitor(c)}>
              <td className="num muted">{i + 1}</td>
              <td>
                <div className="row" style={{gap: 8}}>
                  <Fav init={c.init}/>
                  <div className="stack-2">
                    <div style={{fontWeight: c.you ? 600 : 500}}>
                      {c.name}
                      {c.you && <span className="pill navy" style={{marginLeft: 6, fontSize: 9.5, padding: '1px 5px'}}>you</span>}
                      {c.rising && !c.you && <span className="pill coral" style={{marginLeft: 6, fontSize: 9.5, padding: '1px 5px'}}>rising</span>}
                    </div>
                    <div className="muted mono" style={{fontSize: 10.5}}>{c.domain}</div>
                  </div>
                </div>
              </td>
              <td className="right">
                <div className="row" style={{gap: 8, justifyContent: 'flex-end'}}>
                  <div className="bar" style={{width: 60}}><span style={{width: `${c.score}%`}}/></div>
                  <span className="mono" style={{fontWeight: 600, width: 24}}>{c.score}</span>
                </div>
              </td>
              <td className="center"><RankCell n={c.claude}/></td>
              <td className="center"><RankCell n={c.gpt}/></td>
              <td className="center"><RankCell n={c.gemini}/></td>
              <td className="center"><RankCell n={c.perplex}/></td>
              <td className="center num">{c.coverage}/142</td>
              <td className="center">
                <Sparkline data={trend(i+2, 14, c.score, 5)} color={c.trend === 'up' ? 'var(--coral)' : c.trend === 'down' ? 'var(--ink-4)' : 'var(--navy)'} w={86} h={20} fill/>
              </td>
              <td className="right">
                <div className="row" style={{gap: 4, justifyContent: 'flex-end'}}>
                  <span className="mono" style={{fontWeight: 600}}>{c.sov}%</span>
                  <Delta d={c.delta}/>
                </div>
              </td>
              <td className="right">
                {!c.you && <Icon name="chevronR" size={12}/>}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

const QueriesView = ({ brand, vertical }) => {
  const [intent, setIntent] = React.useState('all');
  const verticalKey = brand && vertical ? `${brand.id}.${vertical.id}` : null;
  const filtered = window.QUERIES.filter(q =>
    (intent === 'all' || q.intent === intent) &&
    (!verticalKey || q.vertical === verticalKey || !q.vertical)
  );
  return (
    <div className="card">
      <div className="filter-row">
        <div className="row" style={{gap: 4}}>
          {['all','commercial','informational','comparison','brand','support'].map(i => (
            <Pill key={i} onClick={() => setIntent(i)} active={intent === i}>{i}</Pill>
          ))}
        </div>
        <div className="sep"/>
        <Pill>1+ citations</Pill>
        <Pill>only alerts</Pill>
        <div className="grow"/>
        <span className="muted mono" style={{fontSize: 11}}>{filtered.length} of {window.QUERIES.length} queries</span>
      </div>

      <div style={{padding: '4px 14px 0', display: 'grid', gridTemplateColumns: '1fr 200px 200px 100px 30px', gap: 14, fontSize: 10, textTransform: 'uppercase', letterSpacing: '.06em', color: 'var(--ink-3)', fontWeight: 600, paddingTop: 12, paddingBottom: 6, borderBottom: '1px solid var(--line)'}}>
        <div>Prompt</div>
        <div className="center">Your rank by LLM</div>
        <div>Top result</div>
        <div className="right">Citations</div>
        <div></div>
      </div>

      {filtered.map((q, i) => (
        <div key={i} className="query-row" style={{gridTemplateColumns: '1fr 200px 200px 100px 30px'}}>
          <div>
            <div className="q-text">
              {q.alert && <span style={{color: 'var(--coral)', marginRight: 6}}>●</span>}
              {q.q}
            </div>
            <div className="q-meta">
              <Pill>{q.intent}</Pill>
              <span style={{marginLeft: 6}}>volume: <strong style={{color: 'var(--ink-2)'}}>{q.vol}</strong></span>
            </div>
          </div>
          <div className="llm-rank-grid" style={{justifyContent: 'center'}}>
            {['claude','gpt','gemini','perplex'].map(k => {
              const r = q.llms[k];
              const cls = r === null ? 'miss' : r <= 1 ? 'r1' : r <= 3 ? 'r2' : r <= 5 ? 'r3' : '';
              return (
                <div key={k} className={`rcell ${cls}`}>
                  <span className="h"><LLMDot k={k}/></span>
                  {r === null ? '—' : `#${r}`}
                </div>
              );
            })}
          </div>
          <div className="row">
            <Fav init={q.top.split(' ').map(w => w[0]).join('').slice(0,2)}/>
            <span style={{fontSize: 12, color: 'var(--ink-2)'}}>{q.top}</span>
          </div>
          <div className="right num">{q.cit}</div>
          <div><Icon name="chevronR" size={12}/></div>
        </div>
      ))}
    </div>
  );
};

const SourcesView = () => (
  <div className="grid-2" style={{gridTemplateColumns: '1.4fr 1fr'}}>
    <div className="card">
      <div className="card-head">
        <h3>Top citing domains</h3>
        <span className="sub">where LLMs source answers</span>
      </div>
      <table className="tbl">
        <thead>
          <tr>
            <th>Domain</th>
            <th>Type</th>
            <th className="right">Citations</th>
            <th className="right">Auth.</th>
            <th className="right">Sentiment</th>
            <th className="right">Your share</th>
          </tr>
        </thead>
        <tbody>
          {window.SOURCES.map((s, i) => (
            <tr key={i}>
              <td>
                <div className="row" style={{gap: 8}}>
                  <Fav init={s.domain[0].toUpperCase()}/>
                  <span style={{fontSize: 12.5}}>{s.domain}</span>
                  <Icon name="external" size={11}/>
                </div>
              </td>
              <td><Pill tone={s.type === 'self-owned' ? 'green' : s.type === 'editorial' ? 'navy' : s.type === 'review' ? 'gold' : ''}>{s.type}</Pill></td>
              <td className="right num">{s.cit}</td>
              <td className="right num">{s.auth}</td>
              <td className="right">
                <Pill tone={s.sent === 'positive' ? 'green' : s.sent === 'mixed' ? 'gold' : ''}>{s.sent}</Pill>
              </td>
              <td className="right">
                <div className="row" style={{gap: 6, justifyContent: 'flex-end'}}>
                  <div className="bar" style={{width: 50}}><span style={{width: `${s.shareYou*100}%`, background: s.shareYou > 0.3 ? 'var(--green)' : 'var(--navy)'}}/></div>
                  <span className="num" style={{width: 32}}>{Math.round(s.shareYou*100)}%</span>
                </div>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>

    <div className="card">
      <div className="card-head">
        <h3>Citation sentiment</h3>
        <span className="sub">how Admiral is described</span>
      </div>
      <div className="card-body">
        <div className="stack-12">
          {[
            {label: 'Positive', pct: 42, color: 'var(--green)'},
            {label: 'Neutral', pct: 41, color: 'var(--ink-3)'},
            {label: 'Mixed', pct: 12, color: 'var(--gold)'},
            {label: 'Negative', pct: 5, color: 'var(--coral)'},
          ].map(r => (
            <div key={r.label} className="stack-4">
              <div className="row" style={{justifyContent: 'space-between', fontSize: 12}}>
                <span>{r.label}</span>
                <span className="mono">{r.pct}%</span>
              </div>
              <div className="bar" style={{height: 6}}><span style={{width: `${r.pct}%`, background: r.color}}/></div>
            </div>
          ))}
        </div>
        <div style={{borderTop: '1px solid var(--line)', marginTop: 16, paddingTop: 14}}>
          <div className="eyebrow" style={{marginBottom: 8}}>Recent quotes from LLM responses</div>
          <div className="stack-12">
            <blockquote style={{margin: 0, padding: '10px 12px', background: 'var(--surface-2)', borderRadius: 8, fontSize: 12, lineHeight: 1.5, color: 'var(--ink-2)', borderLeft: '2px solid var(--green)'}}>
              "Admiral's MultiCar policy is widely cited as the most cost-effective option for households with two or more vehicles…"
              <div className="muted mono" style={{marginTop: 6, fontSize: 10}}>Claude · moneysavingexpert.com</div>
            </blockquote>
            <blockquote style={{margin: 0, padding: '10px 12px', background: 'var(--surface-2)', borderRadius: 8, fontSize: 12, lineHeight: 1.5, color: 'var(--ink-2)', borderLeft: '2px solid var(--gold)'}}>
              "Mixed Trustpilot reviews mention slow claims handling, though pricing is competitive…"
              <div className="muted mono" style={{marginTop: 6, fontSize: 10}}>Perplexity · trustpilot.com</div>
            </blockquote>
          </div>
        </div>
      </div>
    </div>
  </div>
);

const GapsView = ({ brand, vertical }) => {
  const verticalKey = brand && vertical ? `${brand.id}.${vertical.id}` : null;
  const gaps = window.GAPS.filter(g => !verticalKey || g.vertical === verticalKey || !g.vertical);
  return (
  <div className="card">
    <div className="card-head">
      <h3>Content gaps & opportunities</h3>
      <span className="sub">topics with weak Admiral coverage{vertical ? ` · ${vertical.name.toLowerCase()}` : ''}</span>
      <div className="grow"/>
      <Btn sm><Icon name="sparkles" size={11}/> Auto-draft briefs</Btn>
    </div>
    <table className="tbl">
      <thead>
        <tr>
          <th>Topic</th>
          <th className="right">Queries</th>
          <th className="right">Your citations</th>
          <th>Currently winning</th>
          <th>Why they win</th>
          <th className="right">Opportunity</th>
        </tr>
      </thead>
      <tbody>
        {gaps.map((g, i) => (
          <tr key={i}>
            <td style={{fontWeight: 500}}>{g.topic}</td>
            <td className="right num">{g.queries}</td>
            <td className="right num" style={{color: g.citations === 0 ? 'var(--coral)' : 'inherit'}}>{g.citations}</td>
            <td>
              <div className="row" style={{gap: 8}}>
                <Fav init={g.winning.slice(0,2).toUpperCase()}/>
                <span>{g.winning}</span>
              </div>
            </td>
            <td className="muted" style={{fontSize: 12, maxWidth: 320}}>{g.why}</td>
            <td className="right">
              <Pill tone={g.oppt === 'high' ? 'coral' : g.oppt === 'med' ? 'gold' : ''}>{g.oppt}</Pill>
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  </div>
  );
};

const AnomaliesView = ({ brand, vertical }) => {
  const verticalKey = brand && vertical ? `${brand.id}.${vertical.id}` : null;
  const items = window.ANOMALIES.filter(a => !verticalKey || a.vertical === verticalKey || !a.vertical);
  return (
  <div className="card">
    <div className="card-head">
      <h3>Anomalies feed</h3>
      <span className="sub">last 7 days{vertical ? ` · ${vertical.name.toLowerCase()}` : ''}</span>
    </div>
    <div className="divide-y">
      {items.map((a, i) => (
        <div key={i} style={{display: 'grid', gridTemplateColumns: 'auto 1fr auto auto', gap: 14, padding: '14px', alignItems: 'center'}}>
          <div className="row" style={{gap: 10}}>
            <div style={{width: 6, height: 6, borderRadius: '50%', background: a.sev === 'high' ? 'var(--coral)' : a.sev === 'med' ? 'var(--gold)' : 'var(--ink-4)'}}/>
            <Pill tone={a.sev === 'high' ? 'coral' : a.sev === 'med' ? 'gold' : ''}>{a.kind}</Pill>
          </div>
          <div style={{fontSize: 12.5}}>{a.text}</div>
          <Btn ghost sm>Investigate</Btn>
          <div className="muted mono" style={{fontSize: 11}}>{a.when}</div>
        </div>
      ))}
    </div>
  </div>
  );
};

const HistoryView = ({ brand }) => (
  <div className="grid-2">
    <div className="card">
      <div className="card-head"><h3>Rank history</h3><span className="sub">last 90 days</span></div>
      <div style={{padding: 16}}>
        <BigChart/>
      </div>
    </div>
    <div className="card">
      <div className="card-head"><h3>Citation volume</h3><span className="sub">across providers</span></div>
      <div style={{padding: 16}}>
        <BigChart variant="bars"/>
      </div>
    </div>
  </div>
);

const BigChart = ({ variant = 'lines' }) => {
  const w = 520, h = 220;
  const data = ['claude','gpt','gemini','perplex'].map((k, i) => ({k, d: trend(i+2, 30, 50, 12)}));
  const max = 80, min = 20;
  const sx = w / 29, sy = (v) => h - ((v - min) / (max - min)) * (h - 30) - 20;

  return (
    <svg viewBox={`0 0 ${w} ${h}`} width="100%" style={{maxWidth: '100%'}}>
      {/* grid */}
      {[20,40,60,80].map(g => (
        <g key={g}>
          <line x1="30" y1={sy(g)} x2={w} y2={sy(g)} stroke="var(--line)" strokeDasharray="2 3"/>
          <text x="0" y={sy(g)+3} fontSize="9" fill="var(--ink-4)" fontFamily="var(--font-mono)">#{100-g}</text>
        </g>
      ))}
      {variant === 'lines' && data.map(({k, d}) => {
        const colors = {claude: '#d97757', gpt: '#10a37f', gemini: '#4285f4', perplex: '#20808d'};
        const path = d.map((v, i) => `${i === 0 ? 'M' : 'L'}${30 + i * sx},${sy(v)}`).join(' ');
        return <path key={k} d={path} stroke={colors[k]} strokeWidth="1.6" fill="none" strokeLinecap="round"/>;
      })}
      {variant === 'bars' && data[0].d.map((_, i) => (
        <g key={i}>
          {data.map((d, j) => (
            <rect key={d.k} x={30 + i * sx + j * 3} y={sy(d.d[i])} width="2.4" height={h - 20 - sy(d.d[i])}
              fill={({claude: '#d97757', gpt: '#10a37f', gemini: '#4285f4', perplex: '#20808d'})[d.k]} opacity="0.9"/>
          ))}
        </g>
      ))}
      {/* legend */}
      <g transform={`translate(40, ${h - 8})`}>
        {data.map((d, i) => {
          const colors = {claude: '#d97757', gpt: '#10a37f', gemini: '#4285f4', perplex: '#20808d'};
          return (
            <g key={d.k} transform={`translate(${i * 90}, 0)`}>
              <circle cx="0" cy="-2" r="3" fill={colors[d.k]}/>
              <text x="8" y="2" fontSize="10" fill="var(--ink-2)">{d.k}</text>
            </g>
          );
        })}
      </g>
    </svg>
  );
};

Object.assign(window, { LeaderboardView, QueriesView, SourcesView, GapsView, AnomaliesView, HistoryView });