/* ============================================================================
   VIEW 2 — TICKER DETAIL  (full breakdown for one pick)
   ============================================================================ */

function Panel({ title, right, children, className="" }){
  return (
    <div className={"ss-card p-5 "+className}>
      <div className="flex items-center justify-between mb-4">
        <h3 className="text-[12px] uppercase tracking-[0.13em]" style={{color:"var(--muted)"}}>{title}</h3>
        {right}
      </div>
      {children}
    </div>
  );
}

function SocialStat({ label, value, sub, accent }){
  return (
    <div className="ss-inset rounded-lg px-3.5 py-3 flex flex-col gap-1">
      <span className="text-[10px] uppercase tracking-[0.1em]" style={{color:"var(--muted)"}}>{label}</span>
      <span className="font-mono text-xl font-bold tabular-nums" style={{color:accent||"var(--text)"}}>{value}</span>
      {sub && <span className="text-[10.5px]" style={{color:"var(--muted)"}}>{sub}</span>}
    </div>
  );
}

function TickerDetail({ v, onBack, onPrev, onNext }){
  if(!v) return null;
  const t = tierOf(v.tier);
  const sparkColor = v.change_pct>=0 ? "#17a86a" : "#ee3f5f";
  // split risks/catalysts into bull/bear framing
  return (
    <div className="flex flex-col gap-5">
      {/* breadcrumb / nav */}
      <div className="flex items-center gap-3">
        <button onClick={onBack} className="ss-btn-ghost rounded-lg px-3 py-2 text-[12px] flex items-center gap-1.5">
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2"><path d="M19 12H5M11 6l-6 6 6 6"/></svg>
          Verdicts
        </button>
        <span className="text-[12px]" style={{color:"var(--muted)"}}>/ Detail</span>
        <div className="ml-auto flex items-center gap-1.5">
          <button onClick={onPrev} className="ss-btn-ghost rounded-lg w-9 h-9 flex items-center justify-center" title="Previous pick">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M15 6l-6 6 6 6"/></svg>
          </button>
          <button onClick={onNext} className="ss-btn-ghost rounded-lg w-9 h-9 flex items-center justify-center" title="Next pick">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M9 6l6 6-6 6"/></svg>
          </button>
        </div>
      </div>

      {/* header band */}
      <div className="ss-card ss-hero relative overflow-hidden p-6" style={{borderColor:t.line}}>
        <div className="pointer-events-none absolute -top-20 -right-16 w-72 h-72 rounded-full blur-3xl" style={{background:t.color,opacity:0.10}} />
        <div className="grid lg:grid-cols-[auto_1fr_auto] gap-6 items-center">
          <div className="ss-inset rounded-xl p-3 flex items-center justify-center">
            <ConvictionGauge value={v.conviction} color={t.color} size={170} />
          </div>
          <div className="min-w-0">
            <div className="flex flex-wrap items-center gap-x-4 gap-y-2 mb-2">
              <h1 className="font-mono text-5xl font-bold tracking-tight" style={{color:"var(--text)"}}>{v.ticker}</h1>
              <TierBadge tier={v.tier} size="lg" />
              {v.manipulation_flag && <PumpRisk/>}
            </div>
            <div className="flex flex-wrap items-center gap-x-4 gap-y-1 mb-3">
              <span className="text-[14px]" style={{color:"var(--text-2)"}}>{v.company}</span>
              <span className="text-[12px] px-2 py-0.5 rounded" style={{color:"var(--muted)",border:"1px solid var(--line)"}}>{v.sector}</span>
            </div>
            <div className="flex items-baseline gap-3">
              <span className="font-mono text-3xl font-bold tabular-nums" style={{color:"var(--text)"}}>{fmtPrice(v.price)}</span>
              <ChangePill value={v.change_pct} className="text-[16px]" />
            </div>
          </div>
          <div className="lg:w-[220px]">
            <Sparkline data={v.price_history} color={sparkColor} width={220} height={70} strokeWidth={2} />
            <div className="text-[10px] uppercase tracking-[0.1em] mt-1 text-right" style={{color:"var(--muted)"}}>7-session trend</div>
          </div>
        </div>
      </div>

      {/* main grid */}
      <div className="grid lg:grid-cols-3 gap-5">
        {/* left col: thesis + bull/bear */}
        <div className="lg:col-span-2 flex flex-col gap-5">
          <Panel title="Thesis">
            <p className="text-[15px] leading-relaxed" style={{color:"var(--text-2)"}}>{v.thesis}</p>
          </Panel>

          <div className="grid sm:grid-cols-2 gap-5">
            <Panel title="Bull case · Catalysts" right={<span className="text-[11px] font-mono" style={{color:"#17a86a"}}>{v.catalysts.length}</span>}>
              <div className="flex flex-col gap-2">
                {v.catalysts.length ? v.catalysts.map((c,i)=>(
                  <div key={i} className="flex items-start gap-2.5">
                    <svg className="mt-0.5 shrink-0" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#17a86a" strokeWidth="2.4"><path d="M20 6L9 17l-5-5"/></svg>
                    <span className="text-[13px] leading-snug" style={{color:"var(--text-2)"}}>{c}</span>
                  </div>
                )) : <span className="text-[13px]" style={{color:"var(--muted)"}}>No catalysts identified — hollow setup.</span>}
              </div>
            </Panel>
            <Panel title="Bear case · Risks" right={<span className="text-[11px] font-mono" style={{color:"#ee3f5f"}}>{v.risks.length}</span>}>
              <div className="flex flex-col gap-2">
                {v.risks.map((c,i)=>(
                  <div key={i} className="flex items-start gap-2.5">
                    <svg className="mt-0.5 shrink-0" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#ee3f5f" strokeWidth="2.4"><path d="M18 6L6 18M6 6l12 12"/></svg>
                    <span className="text-[13px] leading-snug" style={{color:"var(--text-2)"}}>{c}</span>
                  </div>
                ))}
              </div>
            </Panel>
          </div>

          <Panel title="Price & trade levels" right={<span className="text-[11px] font-mono" style={{color:"var(--muted)"}}>entry · stop · targets</span>}>
            <PriceChart data={v.price_history} frame={v.trade_frame} color={t.color} />
            <div className="mt-4"><TradeFrame frame={v.trade_frame} tierColor={t.color} /></div>
          </Panel>
        </div>

        {/* right col: radar + analyst + social */}
        <div className="flex flex-col gap-5">
          <Panel title="Factor breakdown" right={<span className="font-mono text-[11px]" style={{color:t.color}}>8 signals</span>}>
            <RadarChart factors={v.factors} color={t.color} size={290} />
          </Panel>

          <Panel title="Analyst ratings" right={<span className="text-[11px]" style={{color:"var(--muted)"}}>avg tgt <span className="font-mono" style={{color:"#17a86a"}}>{fmtPrice(v.analyst.avg_target)}</span></span>}>
            <AnalystSplit a={v.analyst} />
            <div className="mt-4 pt-4 grid grid-cols-2 gap-3" style={{borderTop:"1px solid var(--line)"}}>
              <div>
                <div className="text-[10px] uppercase tracking-[0.1em]" style={{color:"var(--muted)"}}>Implied upside</div>
                <div className="font-mono text-lg font-bold mt-1" style={{color: v.analyst.avg_target>=v.price?"#17a86a":"#ee3f5f"}}>
                  {fmtPct((v.analyst.avg_target/v.price-1)*100)}
                </div>
              </div>
              <div>
                <div className="text-[10px] uppercase tracking-[0.1em]" style={{color:"var(--muted)"}}>Coverage</div>
                <div className="font-mono text-lg font-bold mt-1" style={{color:"var(--text)"}}>
                  {v.analyst.strong_buy+v.analyst.buy+v.analyst.hold+v.analyst.sell}
                </div>
              </div>
            </div>
          </Panel>

          <Panel title="Social signal">
            <div className="grid grid-cols-2 gap-3">
              <SocialStat label="Reddit 24h" value={fmtNum(v.social.reddit_mentions_24h)} sub="mentions" />
              <SocialStat label="Velocity" value={fmtPct(v.social.reddit_velocity_pct)} accent={v.social.reddit_velocity_pct>300?"#ee3f5f":"#17a86a"} sub="vs 7d avg" />
              <SocialStat label="StockTwits" value={v.social.stocktwits_sentiment_bull_pct+"%"} accent="#17a86a" sub="bullish" />
              <div className="ss-inset rounded-lg px-3.5 py-3 flex flex-col gap-1.5 justify-center">
                <span className="text-[10px] uppercase tracking-[0.1em]" style={{color:"var(--muted)"}}>Bull / Bear</span>
                <div className="flex h-2.5 rounded-full overflow-hidden" style={{background:"rgba(245,85,109,0.4)"}}>
                  <div style={{width:v.social.stocktwits_sentiment_bull_pct+"%",background:"#17a86a"}} />
                </div>
              </div>
            </div>
            {v.manipulation_flag &&
              <div className="mt-3 flex items-center gap-2 rounded-lg px-3 py-2" style={{background:"rgba(245,85,109,0.1)",border:"1px solid rgba(245,85,109,0.4)"}}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#ee3f5f" strokeWidth="2.2"><path d="M12 9v4M12 17h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z"/></svg>
                <span className="text-[11.5px]" style={{color:"#d24b66"}}>Velocity + sentiment extreme vs. zero fundamentals — coordinated promotion likely.</span>
              </div>}
          </Panel>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { TickerDetail });