/* CoinPage — public-facing coin page on the marketing site.
   Click a coin in the ticker / featured coins → arrive here.
   Layout: breadcrumb + hero (price + chart), then News/Videos tabs. */

const CoinPage = ({ symbol, onBack }) => {
  const c = COINS.find(x => x.symbol === symbol) || COINS[0];
  const [tf, setTf] = useState("1D");
  const data = useMemo(
    () => genSpark(c.seed * 7, !c.down).concat(genSpark(c.seed * 11, !c.down)),
    [c.symbol]
  );
  const min = Math.min(...data), max = Math.max(...data);
  const range = max - min || 1;
  const w = 1100, h = 320;
  const pts = data.map((d, i) => [(i / (data.length - 1)) * w, h - ((d - min) / range) * (h - 40) - 20]);
  const path = "M" + pts.map(p => p.join(" ")).join(" L ");
  const up = !c.down;
  const stroke = up ? "var(--up)" : "var(--down)";
  const id = `mkt-chart-${c.symbol}`;

  React.useEffect(() => { window.scrollTo(0, 0); }, [c.symbol]);

  return (
    <div data-screen-label={`Coin · ${c.symbol}`}>
      <Nav onLogoClick={onBack}/>

      {/* Breadcrumb */}
      <div style={{ maxWidth: 1200, margin: "0 auto", padding: "24px 32px 0" }}>
        <button onClick={onBack} style={{
          background: "none", border: 0, padding: 0, cursor: "pointer",
          color: "var(--fg-2)", fontSize: 13, display: "inline-flex", alignItems: "center", gap: 6,
        }}>
          ← Back to markets
        </button>
      </div>

      {/* Hero */}
      <section style={{ maxWidth: 1200, margin: "0 auto", padding: "32px 32px 0" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 18, marginBottom: 28 }}>
          <CoinLogo symbol={c.symbol} size={56}/>
          <div>
            <div style={{ display: "flex", alignItems: "baseline", gap: 12, flexWrap: "wrap" }}>
              <h1 style={{ margin: 0, fontFamily: "var(--font-display)", fontSize: 44, fontWeight: 700, letterSpacing: "-0.02em", color: "var(--fg-0)" }}>{c.name}</h1>
              <span style={{ fontFamily: "var(--font-mono)", fontSize: 18, color: "var(--fg-2)" }}>{c.symbol}</span>
              <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, padding: "3px 10px", borderRadius: 4, background: "var(--bg-2)", border: "1px solid var(--line-2)", color: "var(--fg-2)", letterSpacing: "0.04em" }}>RANK #{c.rank}</span>
            </div>
            <div style={{ marginTop: 6, fontSize: 13, color: "var(--fg-2)" }}>
              Live price, news and analysis · refreshed every 8 seconds
            </div>
          </div>
          <div style={{ marginLeft: "auto", display: "flex", gap: 10 }}>
            <Button variant="secondary" icon={<Icons.star size={14}/>}>Add to watchlist</Button>
            <Button variant="primary" icon={<Icons.bell size={14}/>}>Set price alert</Button>
          </div>
        </div>

        {/* Price + chart panel */}
        <div style={{ background: "var(--bg-1)", border: "1px solid var(--line-2)", borderRadius: 16, padding: 28 }}>
          <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", marginBottom: 20, flexWrap: "wrap", gap: 16 }}>
            <div>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--fg-2)", marginBottom: 8 }}>{c.symbol}/USD</div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 56, fontWeight: 700, letterSpacing: "-0.02em", color: "var(--fg-0)", fontVariantNumeric: "tabular-nums", lineHeight: 1 }}>{fmtPrice(c.price)}</div>
              <div style={{ marginTop: 10, display: "flex", gap: 16, alignItems: "center" }}>
                <DeltaBadge value={c.c24h}/>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--fg-2)", letterSpacing: "0.04em", textTransform: "uppercase" }}>past 24 hours</span>
              </div>
            </div>
            <div style={{ display: "flex", gap: 4, padding: 4, background: "var(--bg-2)", border: "1px solid var(--line-2)", borderRadius: 8 }}>
              {["1H","1D","1W","1M","1Y","All"].map(t => (
                <button key={t} onClick={() => setTf(t)} style={{
                  height: 28, padding: "0 12px", borderRadius: 4, border: 0, cursor: "pointer",
                  fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: 500,
                  background: tf === t ? "var(--bg-4)" : "transparent",
                  color: tf === t ? "var(--fg-0)" : "var(--fg-2)",
                }}>{t}</button>
              ))}
            </div>
          </div>

          <svg width="100%" viewBox={`0 0 ${w} ${h}`} style={{ display: "block" }}>
            <defs>
              <linearGradient id={id} x1="0" x2="0" y1="0" y2="1">
                <stop offset="0%" stopColor={up ? "#00C896" : "#FF5A5F"} stopOpacity="0.32"/>
                <stop offset="100%" stopColor={up ? "#00C896" : "#FF5A5F"} stopOpacity="0"/>
              </linearGradient>
            </defs>
            {[0.25,0.5,0.75].map(f => <line key={f} x1="0" x2={w} y1={h*f} y2={h*f} stroke="rgba(255,255,255,0.04)" strokeDasharray="2 4"/>)}
            <path d={`${path} L ${w} ${h} L 0 ${h} Z`} fill={`url(#${id})`}/>
            <path d={path} fill="none" stroke={stroke} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>

          {/* stat strip */}
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 1, background: "var(--line-1)", marginTop: 20, borderRadius: 8, overflow: "hidden", border: "1px solid var(--line-1)" }}>
            {[
              ["Market cap", fmtBig(c.mcap)],
              ["24h volume", fmtBig(c.vol)],
              ["Circ. supply", c.supply.toLocaleString("en-US", { maximumFractionDigits: 0 }) + " " + c.symbol],
              ["7d change", null],
            ].map(([label, value], i) => (
              <div key={label} style={{ background: "var(--bg-1)", padding: "14px 18px" }}>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--fg-2)", marginBottom: 6 }}>{label}</div>
                {value ? (
                  <div style={{ fontFamily: "var(--font-mono)", fontSize: 16, fontWeight: 500, color: "var(--fg-0)", fontVariantNumeric: "tabular-nums" }}>{value}</div>
                ) : (
                  <DeltaBadge value={c.c7d}/>
                )}
              </div>
            ))}
          </div>
        </div>

        {/* Feeds */}
        <CoinFeeds coin={c}/>

        {/* Disclaimer */}
        <div style={{ marginTop: 24, marginBottom: 60, padding: 16, background: "var(--bg-1)", border: "1px solid var(--line-1)", borderRadius: 8, fontSize: 12, color: "var(--fg-2)", lineHeight: 1.5 }}>
          Information on this page is aggregated from public market data, news APIs (CryptoPanic) and YouTube. CryptoPrice.co does not endorse any third-party content. Not financial advice.
        </div>
      </section>

      <Footer/>
    </div>
  );
};

window.CoinPage = CoinPage;