/* ============================================================================
   StonksScout — SHARED UI ATOMS
   ============================================================================ */

function TierBadge({ tier, size="md" }){
  const t = tierOf(tier);
  const pad = size==="sm" ? "px-2 py-0.5 text-[10px]" : size==="lg" ? "px-3 py-1.5 text-[13px]" : "px-2.5 py-1 text-[11px]";
  return (
    <span className={"inline-flex items-center gap-1.5 rounded-md font-semibold uppercase tracking-wider whitespace-nowrap "+pad}
          style={{ color:t.color, background:t.soft, border:`1px solid ${t.line}` }}>
      <span className="rounded-full" style={{ width:6, height:6, background:t.color, boxShadow:`0 0 6px ${t.color}` }} />
      {t.label}
    </span>
  );
}

function PumpRisk({ size="md" }){
  const pad = size==="sm" ? "px-2 py-0.5 text-[10px]" : "px-2.5 py-1 text-[11px]";
  return (
    <span className={"inline-flex items-center gap-1 rounded-md font-bold uppercase tracking-wider "+pad}
          style={{ color:"#ee3f5f", background:"rgba(245,85,109,0.12)", border:"1px solid rgba(245,85,109,0.5)" }}>
      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
        <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>
      Pump Risk
    </span>
  );
}

function Chip({ children, tone="neutral" }){
  const tones = {
    neutral: { c:"var(--text)",  b:"var(--line)",            bg:"var(--fill-soft)" },
    pos:     { c:"#1f9e6b",      b:"rgba(70,211,154,0.3)",   bg:"rgba(70,211,154,0.07)" },
    neg:     { c:"#d24b66",      b:"rgba(245,85,109,0.3)",   bg:"rgba(245,85,109,0.07)" },
  };
  const s = tones[tone];
  return (
    <span className="inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-[11px] leading-tight"
          style={{ color:s.c, border:`1px solid ${s.b}`, background:s.bg }}>
      <span className="shrink-0 rounded-full" style={{ width:4, height:4, background:s.c }} />
      {children}
    </span>
  );
}

function ChangePill({ value, className="" }){
  const pos = value>=0;
  const c = pos ? "#17a86a" : "#ee3f5f";
  return (
    <span className={"inline-flex items-center gap-0.5 font-mono tabular-nums "+className} style={{ color:c }}>
      <svg width="10" height="10" viewBox="0 0 24 24" fill="currentColor" style={{ transform: pos?"none":"rotate(180deg)" }}>
        <path d="M12 5l7 9H5z"/>
      </svg>
      {fmtPct(value).replace(/^[+\-]/,"")}
    </span>
  );
}

function Ret({ value }){
  if(value==null) return <span style={{color:"var(--muted)"}}>—</span>;
  const c = value>0 ? "#17a86a" : value<0 ? "#ee3f5f" : "var(--muted)";
  return <span className="font-mono tabular-nums" style={{color:c}}>{fmtPct(value)}</span>;
}

function StatCard({ label, value, sub, accent, mono=true }){
  return (
    <div className="ss-card px-4 py-3.5 flex flex-col gap-1">
      <span className="text-[10.5px] uppercase tracking-[0.13em]" style={{color:"var(--muted)"}}>{label}</span>
      <span className={(mono?"font-mono ":"")+"text-2xl font-bold leading-none tabular-nums"}
            style={{ color: accent || "var(--text)" }}>{value}</span>
      {sub && <span className="text-[11px] mt-0.5" style={{color:"var(--muted)"}}>{sub}</span>}
    </div>
  );
}

/* Day-change inline (price + arrow %) */
function PriceChange({ price, change }){
  return (
    <div className="flex items-baseline gap-2">
      <span className="font-mono font-semibold tabular-nums" style={{color:"var(--text)"}}>{fmtPrice(price)}</span>
      <ChangePill value={change} className="text-[12px]" />
    </div>
  );
}

/* Trade frame block — entry / stop / targets / R:R */
function TradeFrame({ frame, tierColor, dense=false }){
  if(!frame || frame.entry_zone==="none" || frame.stop==null){
    return (
      <div className="flex items-center gap-2 rounded-lg px-3 py-2.5"
           style={{ border:"1px dashed rgba(245,85,109,0.4)", background:"rgba(245,85,109,0.05)" }}>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#ee3f5f" strokeWidth="2"><circle cx="12" cy="12" r="9"/><path d="M5 5l14 14"/></svg>
        <span className="text-[12px]" style={{color:"#d24b66"}}>No trade — flagged setup, no levels issued</span>
      </div>
    );
  }
  const cells = [
    { k:"ENTRY ZONE", v:frame.entry_zone, c:"var(--text)" },
    { k:"STOP",       v:fmtPrice(frame.stop), c:"#ee3f5f" },
    { k:"TARGETS",    v:(frame.targets||[]).map(t=>Number(t).toFixed(1)).join(" → "), c:"#17a86a" },
    { k:"R : R",      v:fmtRR(frame.r_r), c: tierColor },
  ];
  return (
    <div className="grid grid-cols-4 rounded-lg overflow-hidden" style={{ border:"1px solid var(--line)" }}>
      {cells.map((c,i)=>(
        <div key={c.k} className={"px-3 "+(dense?"py-2":"py-2.5")} style={{ borderLeft: i? "1px solid var(--line)":"none", background:"var(--fill-soft)" }}>
          <div className="text-[9.5px] uppercase tracking-[0.1em] mb-1" style={{color:"var(--muted)"}}>{c.k}</div>
          <div className="font-mono text-[13px] font-medium tabular-nums truncate" style={{color:c.c}}>{c.v}</div>
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { TierBadge, PumpRisk, Chip, ChangePill, Ret, StatCard, PriceChange, TradeFrame });