/* FearGreed — Crypto Fear & Greed Index gauge for the marketing site.
   Mirrors alternative.me/crypto/fear-and-greed-index API shape:
     { value: 0-100, value_classification: "Greed", timestamp, ... }
   Swap buildHistory() with a real fetch when ready. */

const FG_LEVELS = [
  { max: 24,  label: "Extreme fear", color: "#FF5A5F" },
  { max: 49,  label: "Fear",         color: "#FF9F43" },
  { max: 54,  label: "Neutral",      color: "#FFD93D" },
  { max: 74,  label: "Greed",        color: "#A8D957" },
  { max: 100, label: "Extreme greed",color: "#00C896" },
];

const fgLevel = (v) => FG_LEVELS.find(l => v <= l.max) || FG_LEVELS[FG_LEVELS.length - 1];

/* Deterministic 30-day history seeded from current value */
const buildFGHistory = (current) => {
  let s = 7;
  const r = () => { s = (s * 9301 + 49297) % 233280; return s / 233280; };
  const out = [];
  let v = current;
  for (let i = 29; i >= 0; i--) {
    out.push(Math.round(Math.max(5, Math.min(95, v))));
    v = v + (r() - 0.5) * 14;
  }
  return out.reverse();
};

const FearGreedGauge = ({ value, size = 220 }) => {
  const lvl = fgLevel(value);
  const cx = size / 2, cy = size * 0.62;
  const r = size * 0.42;
  const startA = Math.PI, endA = 0; // half circle, left → right
  // Convert value 0..100 to angle along the arc
  const valA = startA + (value / 100) * (endA - startA);

  // Helper to make arc path between two angles (going clockwise from start)
  const arc = (a0, a1, color) => {
    const x0 = cx + r * Math.cos(a0), y0 = cy + r * Math.sin(a0);
    const x1 = cx + r * Math.cos(a1), y1 = cy + r * Math.sin(a1);
    const large = Math.abs(a1 - a0) > Math.PI ? 1 : 0;
    return <path d={`M ${x0} ${y0} A ${r} ${r} 0 ${large} 0 ${x1} ${y1}`} stroke={color} strokeWidth={size * 0.07} fill="none" strokeLinecap="butt"/>;
  };

  // Five colored segments along the arc
  const segs = [
    { from: 0,   to: 24,  color: "#FF5A5F" },
    { from: 24,  to: 49,  color: "#FF9F43" },
    { from: 49,  to: 54,  color: "#FFD93D" },
    { from: 54,  to: 74,  color: "#A8D957" },
    { from: 74,  to: 100, color: "#00C896" },
  ];

  // Needle position
  const nx = cx + (r - size * 0.02) * Math.cos(valA);
  const ny = cy + (r - size * 0.02) * Math.sin(valA);

  return (
    <svg width={size} height={size * 0.78} viewBox={`0 0 ${size} ${size * 0.78}`} style={{ display: "block" }}>
      {/* track */}
      {segs.map((s, i) => {
        const a0 = startA + (s.from / 100) * (endA - startA);
        const a1 = startA + (s.to   / 100) * (endA - startA);
        return <g key={i}>{arc(a0, a1, s.color)}</g>;
      })}
      {/* needle */}
      <line x1={cx} y1={cy} x2={nx} y2={ny} stroke="var(--fg-0)" strokeWidth="2.5" strokeLinecap="round"/>
      <circle cx={cx} cy={cy} r={size * 0.04} fill="var(--bg-0)" stroke="var(--fg-0)" strokeWidth="2"/>
      {/* center value */}
      <text x={cx} y={cy - size * 0.13} textAnchor="middle" style={{ fontFamily: "var(--font-display)", fontSize: size * 0.22, fontWeight: 700, fill: "var(--fg-0)", letterSpacing: "-0.02em", fontVariantNumeric: "tabular-nums" }}>{value}</text>
      <text x={cx} y={cy - size * 0.02} textAnchor="middle" style={{ fontFamily: "var(--font-mono)", fontSize: size * 0.05, fill: "var(--fg-2)", letterSpacing: "0.06em", textTransform: "uppercase" }}>out of 100</text>
      {/* end labels */}
      <text x={cx - r} y={cy + size * 0.08} textAnchor="middle" style={{ fontFamily: "var(--font-mono)", fontSize: 10, fill: "var(--fg-3)", letterSpacing: "0.04em", textTransform: "uppercase" }}>0 · Fear</text>
      <text x={cx + r} y={cy + size * 0.08} textAnchor="middle" style={{ fontFamily: "var(--font-mono)", fontSize: 10, fill: "var(--fg-3)", letterSpacing: "0.04em", textTransform: "uppercase" }}>Greed · 100</text>
    </svg>
  );
};

const FGHistoryStrip = ({ values }) => {
  const w = 460, h = 60, bw = w / values.length - 2;
  return (
    <svg width="100%" viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none" style={{ display: "block" }}>
      {values.map((v, i) => {
        const lvl = fgLevel(v);
        const bh = (v / 100) * (h - 4);
        return <rect key={i} x={i * (bw + 2)} y={h - bh - 2} width={bw} height={bh} fill={lvl.color} rx={2} opacity={0.85}/>;
      })}
    </svg>
  );
};

const FearGreed = () => {
  const value = (window.MARKET_GLOBAL && window.MARKET_GLOBAL.fearGreed) || 68;
  const lvl = fgLevel(value);
  const history = useMemo(() => buildFGHistory(value), [value]);
  const yesterday = history[history.length - 2];
  const lastWeek = history[history.length - 8];
  const lastMonth = history[0];

  const cards = [
    { label: "Yesterday", value: yesterday },
    { label: "Last week", value: lastWeek },
    { label: "Last month", value: lastMonth },
  ];

  return (
    <section style={{ maxWidth: 1200, margin: "0 auto", padding: "80px 32px 0" }}>
      <div style={{ marginBottom: 28 }}>
        <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--brand-lime)", marginBottom: 8 }}>Market sentiment</div>
        <h2 style={{ margin: 0, fontFamily: "var(--font-display)", fontSize: 36, fontWeight: 700, letterSpacing: "-0.02em", color: "var(--fg-0)" }}>Fear &amp; Greed Index</h2>
        <p style={{ margin: "10px 0 0", fontSize: 14, lineHeight: 1.55, color: "var(--fg-2)", maxWidth: 640 }}>
          Aggregated from volatility, momentum, social sentiment, dominance and trends across the market. Updated daily.
        </p>
      </div>

      <div style={{
        display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: 0,
        background: "var(--bg-1)", border: "1px solid var(--line-2)", borderRadius: 16, overflow: "hidden",
      }}>
        {/* Left — gauge */}
        <div style={{ padding: 32, borderRight: "1px solid var(--line-2)", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", textAlign: "center" }}>
          <FearGreedGauge value={value}/>
          <div style={{ marginTop: 4, padding: "6px 14px", borderRadius: 999, background: lvl.color + "26", border: `1px solid ${lvl.color}66`, color: lvl.color, fontFamily: "var(--font-mono)", fontSize: 12, fontWeight: 600, letterSpacing: "0.04em", textTransform: "uppercase" }}>
            {lvl.label}
          </div>
          <div style={{ marginTop: 14, fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--fg-3)" }}>
            Updated · {new Date().toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })}
          </div>
        </div>

        {/* Right — historical context */}
        <div style={{ padding: 32, display: "flex", flexDirection: "column", gap: 24 }}>
          <div>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--fg-2)", marginBottom: 12 }}>Last 30 days</div>
            <FGHistoryStrip values={history}/>
            <div style={{ display: "flex", justifyContent: "space-between", marginTop: 6, fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--fg-3)" }}>
              <span>30d ago</span><span>today</span>
            </div>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 1, background: "var(--line-1)", borderRadius: 8, overflow: "hidden", border: "1px solid var(--line-1)" }}>
            {cards.map(c => {
              const l = fgLevel(c.value);
              return (
                <div key={c.label} style={{ background: "var(--bg-2)", padding: "14px 16px" }}>
                  <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--fg-2)", marginBottom: 8 }}>{c.label}</div>
                  <div style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
                    <span style={{ fontFamily: "var(--font-display)", fontSize: 26, fontWeight: 700, color: "var(--fg-0)", letterSpacing: "-0.02em", fontVariantNumeric: "tabular-nums" }}>{c.value}</span>
                    <span style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: l.color, letterSpacing: "0.04em", textTransform: "uppercase" }}>{l.label}</span>
                  </div>
                </div>
              );
            })}
          </div>

          {/* Legend */}
          <div>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--fg-2)", marginBottom: 10 }}>How to read it</div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 6 }}>
              {FG_LEVELS.map((l, i) => {
                const min = i === 0 ? 0 : FG_LEVELS[i-1].max + 1;
                return (
                  <div key={l.label} style={{ padding: "8px 10px", borderRadius: 6, background: "var(--bg-2)", border: `1px solid ${l.color}44` }}>
                    <div style={{ width: 8, height: 8, borderRadius: 999, background: l.color, marginBottom: 6 }}/>
                    <div style={{ fontSize: 11, fontWeight: 500, color: "var(--fg-0)", lineHeight: 1.2 }}>{l.label}</div>
                    <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--fg-2)", marginTop: 2, fontVariantNumeric: "tabular-nums" }}>{min}–{l.max}</div>
                  </div>
                );
              })}
            </div>
          </div>

          <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--fg-3)" }}>
            Source: alternative.me · CryptoPrice.co aggregation
          </div>
        </div>
      </div>
    </section>
  );
};

window.FearGreed = FearGreed;