// solution-cursor.jsx
// F1: macOS-style cursor primitive. Hidden by default; scenes will push
// a `track` (array of {t, x, y, click?}) to drive it in later phases.
//
// Exports on window: Cursor, useCursor, CursorTrack

const CursorContext = React.createContext({ track: [], visible: false });
const useCursor = () => React.useContext(CursorContext);

// CursorTrack: simple declarative track of cursor positions over time.
// Renders <Cursor> if any track is active for the current playhead.
//
//   <CursorTrack track={[
//     { t: 1.0,  x: 200, y: 100 },
//     { t: 1.6,  x: 400, y: 220, click: true },
//   ]} />
//
function CursorTrack({ track = [] }) {
  const { time } = useTimeline();
  if (!track || track.length === 0) return null;
  if (time < track[0].t) return null;
  const last = track[track.length - 1];
  if (time > last.t + 0.6) return null; // fade out after final waypoint

  // Find current segment
  let prev = track[0], next = track[0];
  for (let i = 0; i < track.length - 1; i++) {
    if (time >= track[i].t && time <= track[i + 1].t) {
      prev = track[i]; next = track[i + 1];
      break;
    }
  }
  if (time >= last.t) { prev = last; next = last; }

  const span = next.t - prev.t;
  const localT = span > 0 ? Math.max(0, Math.min(1, (time - prev.t) / span)) : 1;
  const eased = Easing.easeInOutCubic(localT);
  const x = prev.x + (next.x - prev.x) * eased;
  const y = prev.y + (next.y - prev.y) * eased;

  // Detect click pulse: any waypoint within the last 320ms with click=true
  let clickAge = Infinity;
  for (let i = 0; i < track.length; i++) {
    if (track[i].click && time >= track[i].t && time - track[i].t < 0.32) {
      clickAge = time - track[i].t;
    }
  }
  const showClick = isFinite(clickAge);
  const clickP = showClick ? clickAge / 0.32 : 0;

  return (
    <div style={{
      position: 'absolute',
      left: 0, top: 0,
      pointerEvents: 'none',
      zIndex: 50,
      transform: `translate(${x}px, ${y}px)`,
      willChange: 'transform',
    }}>
      {/* Click pulse ring */}
      {showClick && (
        <div style={{
          position: 'absolute',
          left: -4, top: -4,
          width: 8 + 32 * clickP,
          height: 8 + 32 * clickP,
          marginLeft: -16 * clickP,
          marginTop: -16 * clickP,
          borderRadius: '50%',
          border: `2px solid rgba(0, 122, 255, ${0.8 * (1 - clickP)})`,
          pointerEvents: 'none',
        }} />
      )}
      {/* macOS cursor SVG */}
      <svg width="22" height="26" viewBox="0 0 22 26" style={{ display: 'block', filter: 'drop-shadow(0 1px 2px rgba(0,0,0,0.25))' }}>
        <path d="M2 1.5 L2 19.5 L7 15.5 L10.5 23 L13.5 22 L10 14.5 L17 14.5 Z"
              fill="#ffffff" stroke="#1d1d1f" strokeWidth="1.4" strokeLinejoin="round" />
      </svg>
    </div>
  );
}

// LocalCursorTrack: convenience wrapper that takes act-local times and an offset,
// translates them to absolute times, and renders <CursorTrack>.
//
//   <LocalCursorTrack actStart={7} track={[{t: 0.5, x: 200, y: 300}, ...]} />
//
function LocalCursorTrack({ actStart = 0, track = [] }) {
  const abs = track.map(p => ({ ...p, t: p.t + actStart }));
  return <CursorTrack track={abs} />;
}

Object.assign(window, { CursorContext, useCursor, CursorTrack, LocalCursorTrack });