/**
 * ExpertMessageScene Component
 *
 * Chat bubble with expert message, text emphasis, and optional diagram.
 * Duration: ~4-6s
 */

import React from 'react';
import { interpolate, spring, useCurrentFrame, useVideoConfig } from 'remotion';
import { ExpertAvatar } from '../components/ExpertAvatar';
import { AnimatedText } from '../components/AnimatedText';
import { darkPalette } from '../lib/colors';
import type { ExpertMessageScene as ExpertMessageSceneType } from '../types/video-script';

type ExpertMessageSceneProps = {
  scene: ExpertMessageSceneType;
  expert: { name: string; title: string; avatarUrl: string };
};

export const ExpertMessageScene: React.FC<ExpertMessageSceneProps> = ({
  scene,
  expert,
}) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  // Avatar appears
  const avatarOpacity = interpolate(frame, [0, 10], [0, 1], {
    extrapolateRight: 'clamp',
  });

  // Bubble slides up
  const bubbleProgress = spring({
    frame: frame - 5,
    fps,
    config: { damping: 15, stiffness: 100 },
  });
  const bubbleY = interpolate(bubbleProgress, [0, 1], [30, 0]);
  const bubbleOpacity = interpolate(bubbleProgress, [0, 1], [0, 1]);

  // Diagram fade in (if present)
  const diagramOpacity = scene.diagram
    ? interpolate(frame, [fps * 1.5, fps * 2], [0, 1], {
        extrapolateRight: 'clamp',
      })
    : 0;

  return (
    <div
      style={{
        width: '100%',
        height: '100%',
        backgroundColor: darkPalette.background,
        padding: 60,
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
      }}
    >
      {/* Expert info row */}
      <div
        style={{
          display: 'flex',
          alignItems: 'flex-start',
          gap: 24,
          opacity: avatarOpacity,
        }}
      >
        <ExpertAvatar name={expert.name} avatarUrl={expert.avatarUrl} size="medium" />

        <div style={{ flex: 1 }}>
          {/* Name and title */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 16 }}>
            <span style={{ color: darkPalette.text, fontSize: 28, fontWeight: 600 }}>
              {expert.name}
            </span>
            <span style={{ color: darkPalette.textMuted, fontSize: 22 }}>
              {expert.title}
            </span>
          </div>

          {/* Message bubble */}
          <div
            style={{
              backgroundColor: darkPalette.surfaceElevated,
              border: `2px solid ${darkPalette.border}`,
              borderRadius: 28,
              borderTopLeftRadius: 8,
              padding: 32,
              transform: `translateY(${bubbleY}px)`,
              opacity: bubbleOpacity,
            }}
          >
            <AnimatedText
              text={scene.text}
              emphasis={scene.emphasis}
              style={{
                color: darkPalette.text,
                fontSize: 32,
                lineHeight: 1.5,
              }}
              fadeInDuration={20}
            />
          </div>
        </div>
      </div>

      {/* Diagram overlay (if present) */}
      {scene.diagram && (
        <div
          style={{
            marginTop: 48,
            padding: 32,
            backgroundColor: darkPalette.surface,
            borderRadius: 20,
            opacity: diagramOpacity,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          <DiagramPlaceholder type={scene.diagram} />
        </div>
      )}
    </div>
  );
};

// Placeholder diagram component
const DiagramPlaceholder: React.FC<{ type: string }> = ({ type }) => {
  const diagramLabels: Record<string, string> = {
    spine: 'Spine Alignment',
    'pressure-points': 'Pressure Points',
    'foam-layers': 'Foam Layers',
  };

  return (
    <div
      style={{
        width: '100%',
        height: 240,
        background: `linear-gradient(135deg, ${darkPalette.primary}33 0%, ${darkPalette.surface} 100%)`,
        borderRadius: 16,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      <span style={{ color: darkPalette.textMuted, fontSize: 28 }}>
        [{diagramLabels[type] || type}]
      </span>
    </div>
  );
};
