/**
 * QuestionScene Component
 *
 * Question text with options that stagger in and selection highlight.
 * Duration: ~3-3.5s
 */

import React from 'react';
import { interpolate, useCurrentFrame, useVideoConfig } from 'remotion';
import { TileOption } from '../components/TileOption';
import { darkPalette } from '../lib/colors';
import { msToFrames } from '../lib/timing';
import type { QuestionScene as QuestionSceneType } from '../types/video-script';

type QuestionSceneProps = {
  scene: QuestionSceneType;
};

export const QuestionScene: React.FC<QuestionSceneProps> = ({ scene }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const selectionFrame = msToFrames(scene.selectionDelayMs, fps);

  // Question text fade in
  const questionOpacity = interpolate(frame, [0, 15], [0, 1], {
    extrapolateRight: 'clamp',
  });

  // Selection progress (0-1) after selection delay
  const selectionProgress = interpolate(
    frame,
    [selectionFrame, selectionFrame + 12],
    [0, 1],
    { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }
  );

  return (
    <div
      style={{
        width: '100%',
        height: '100%',
        backgroundColor: darkPalette.background,
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        padding: 60,
      }}
    >
      {/* Question */}
      <h2
        style={{
          color: darkPalette.text,
          fontSize: 44,
          fontWeight: 600,
          marginBottom: 48,
          opacity: questionOpacity,
        }}
      >
        {scene.question}
      </h2>

      {/* Options */}
      <div
        style={{
          display: 'flex',
          flexWrap: 'wrap',
          gap: 20,
        }}
      >
        {scene.options.map((option, i) => {
          const isSelected = option === scene.selectedOption;
          return (
            <TileOption
              key={option}
              label={option}
              isSelected={isSelected}
              delayFrames={8 + i * 4}
              selectionProgress={isSelected ? selectionProgress : 0}
            />
          );
        })}
      </div>
    </div>
  );
};
