// Ticker tape — horizontally scrolling marquee of hay grade prices.

function Ticker() {
  const { HAY_GRADES } = window.HAYSCOUT_DATA;
  const [tick, setTick] = React.useState(0);

  // Re-jiggle prices every 2.5s so the ticker feels live.
  React.useEffect(() => {
    const id = setInterval(() => setTick((t) => t + 1), 2500);
    return () => clearInterval(id);
  }, []);

  const items = React.useMemo(() => {
    return HAY_GRADES.map((g, i) => {
      const wob = (Math.sin((tick + i) * 1.3) * 0.4) + (Math.cos((tick + i * 2) * 0.7) * 0.3);
      return { ...g, price: g.price + wob, chg: g.chg + wob * 0.1 };
    });
  }, [tick]);

  // Two copies for seamless loop
  const loop = [...items, ...items];

  return (
    <>
      <style>{`
        .ticker {
          border-top: 1px solid var(--line);
          border-bottom: 1px solid var(--line);
          background: var(--paper-2);
          overflow: hidden;
          position: relative;
        }
        .ticker::before, .ticker::after {
          content: ""; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2;
          pointer-events: none;
        }
        .ticker::before { left: 0; background: linear-gradient(to right, var(--paper-2), transparent); }
        .ticker::after  { right: 0; background: linear-gradient(to left, var(--paper-2), transparent); }
        .ticker-track {
          display: flex; gap: 0;
          animation: tick-scroll 80s linear infinite;
          width: max-content;
          padding: 10px 0;
        }
        .ticker-item {
          display: flex; align-items: baseline; gap: 8px;
          padding: 0 22px;
          border-right: 1px solid var(--line);
          font-family: 'JetBrains Mono', ui-monospace, monospace;
          font-size: 12.5px;
          white-space: nowrap;
        }
        .ticker-sym { color: var(--ink); font-weight: 600; letter-spacing: 0.02em; }
        .ticker-price { color: var(--ink-2); font-variant-numeric: tabular-nums; }
        .ticker-chg { font-variant-numeric: tabular-nums; font-size: 11.5px; }
        .ticker-chg.up   { color: var(--green); }
        .ticker-chg.down { color: var(--red); }
        @keyframes tick-scroll {
          from { transform: translateX(0); }
          to   { transform: translateX(-50%); }
        }
        .ticker-label {
          position: absolute; left: 0; top: 0; bottom: 0; z-index: 3;
          display: flex; align-items: center; gap: 8px;
          padding: 0 16px;
          background: var(--ink); color: var(--paper);
          font-family: 'JetBrains Mono', ui-monospace, monospace;
          font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em;
          text-transform: uppercase;
        }
        .ticker-label .pulse {
          width: 6px; height: 6px; border-radius: 50%;
          background: var(--amber-2);
          box-shadow: 0 0 0 0 rgba(232, 144, 32, 0.6);
          animation: pulse-glow 1.6s ease-out infinite;
        }
        @keyframes pulse-glow {
          0%   { box-shadow: 0 0 0 0 rgba(232, 144, 32, 0.6); }
          100% { box-shadow: 0 0 0 8px rgba(232, 144, 32, 0); }
        }
      `}</style>
      <div className="ticker">
        <div className="ticker-label"><span className="pulse" /> Live</div>
        <div className="ticker-track" style={{ paddingLeft: 100 }}>
          {loop.map((g, i) => (
            <div className="ticker-item" key={i}>
              <span className="ticker-sym">{g.sym}</span>
              <span className="ticker-price">${g.price.toFixed(2)}</span>
              <span className={'ticker-chg ' + (g.chg >= 0 ? 'up' : 'down')}>
                {g.chg >= 0 ? '▲' : '▼'} {Math.abs(g.chg).toFixed(2)}%
              </span>
            </div>
          ))}
        </div>
      </div>
    </>
  );
}

window.Ticker = Ticker;