// Hand-drawn line chart placeholder — communicates "stock chart" without faking real data.
// Generates a gentle, deterministic squiggle based on shape keyword.

const StockChart = ({ shape = 'rising', color = tokens.ink, height = 320, accent = tokens.ochre, ticker, px, pxChange }) => {
  const w = 1000, h = height;
  // 24 deterministic points based on shape
  const points = React.useMemo(() => {
    const noise = (i, seed) => (Math.sin(i * 12.9898 + seed) * 43758.5453) % 1;
    const N = 80;
    const arr = [];
    for (let i = 0; i < N; i++) {
      const t = i / (N - 1);
      let v;
      if (shape === 'rising') v = 0.7 - t * 0.55 + Math.abs(noise(i, 1)) * 0.08;
      else if (shape === 'volatile-up') v = 0.85 - t * 0.6 + Math.sin(t * 14) * 0.08 + Math.abs(noise(i, 2)) * 0.05;
      else if (shape === 'breakout') v = 0.7 - (t < 0.6 ? t * 0.15 : 0.09 + (t - 0.6) * 1.4) + Math.abs(noise(i, 3)) * 0.04;
      else if (shape === 'recovery') v = 0.4 + (t < 0.4 ? t * 0.7 : 0.28 - (t - 0.4) * 0.5) + Math.abs(noise(i, 4)) * 0.05;
      else v = 0.5;
      v = Math.max(0.08, Math.min(0.92, v));
      arr.push([t * w, v * h]);
    }
    return arr;
  }, [shape, w, h]);

  const path = points.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p[0].toFixed(1)} ${p[1].toFixed(1)}`).join(' ');
  const lastY = points[points.length - 1][1];
  const firstY = points[0][1];
  const isUp = lastY < firstY;

  const gridLines = [0.25, 0.5, 0.75];
  const labels = ['1Y AGO', '6M', '3M', 'NOW'];

  return (
    <div style={{ background: tokens.paper, border: `1px solid ${tokens.inkLine}`, padding: '24px 28px 20px', position: 'relative' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: '20px' }}>
        <div>
          <div style={{ fontFamily: fontMono, fontSize: '11px', letterSpacing: '0.16em', color: tokens.inkMute }}>{ticker} · LAST 12 MONTHS</div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: '12px', marginTop: '8px' }}>
            <span style={{ fontSize: '34px', letterSpacing: '-0.03em', fontFamily: fontDisplay }}>{px}</span>
            <span style={{ fontFamily: fontMono, fontSize: '13px', color: isUp ? tokens.green : tokens.red }}>{pxChange}</span>
          </div>
        </div>
        <div style={{ display: 'flex', gap: '6px', fontFamily: fontMono, fontSize: '10px', letterSpacing: '0.1em', color: tokens.inkMute }}>
          {['1D','1W','1M','6M','1Y','5Y'].map((r,i) => (
            <span key={r} style={{ padding: '4px 8px', border: `1px solid ${tokens.inkLine}`, background: i===4 ? tokens.ink : 'transparent', color: i===4 ? tokens.bg : tokens.inkMute }}>{r}</span>
          ))}
        </div>
      </div>
      <svg viewBox={`0 0 ${w} ${h}`} style={{ width: '100%', height: 'auto', display: 'block' }}>
        <defs>
          <linearGradient id={`grad-${ticker}`} x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor={accent} stopOpacity="0.18" />
            <stop offset="100%" stopColor={accent} stopOpacity="0" />
          </linearGradient>
        </defs>
        {gridLines.map(g => (
          <line key={g} x1="0" x2={w} y1={g * h} y2={g * h} stroke={tokens.inkLine} strokeWidth="1" strokeDasharray="2 4" />
        ))}
        <path d={`${path} L ${w} ${h} L 0 ${h} Z`} fill={`url(#grad-${ticker})`} />
        <path d={path} fill="none" stroke={color} strokeWidth="1.75" strokeLinejoin="round" />
        <circle cx={points[points.length - 1][0]} cy={lastY} r="4" fill={color} />
        <circle cx={points[points.length - 1][0]} cy={lastY} r="9" fill={color} fillOpacity="0.18" />
      </svg>
      <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: '8px', fontFamily: fontMono, fontSize: '10px', letterSpacing: '0.12em', color: tokens.inkMute }}>
        {labels.map(l => <span key={l}>{l}</span>)}
      </div>
      <div style={{ position: 'absolute', top: '14px', right: '28px', fontFamily: fontMono, fontSize: '9px', letterSpacing: '0.16em', color: tokens.inkMute }}>
        ◇ STYLIZED · NOT REAL-TIME
      </div>
    </div>
  );
};

window.StockChart = StockChart;