/**
 * ProblemScene Component
 *
 * Animated problem statements with icons.
 * Used for "Why This Keeps Happening" section.
 */

import React from 'react';
import { interpolate, useCurrentFrame } from 'remotion';
import { stemedbPalette } from '../lib/colors';
import type { ProblemContent } from '../types/pitch-script';

type ProblemSceneProps = {
  content: ProblemContent;
};

// Simple icon components
const icons = {
  alert: () => (
    <svg width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
      <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
      <line x1="12" y1="9" x2="12" y2="13" />
      <line x1="12" y1="17" x2="12.01" y2="17" />
    </svg>
  ),
  warning: () => (
    <svg width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
      <circle cx="12" cy="12" r="10" />
      <line x1="12" y1="8" x2="12" y2="12" />
      <line x1="12" y1="16" x2="12.01" y2="16" />
    </svg>
  ),
  database: () => (
    <svg width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
      <ellipse cx="12" cy="5" rx="9" ry="3" />
      <path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3" />
      <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5" />
    </svg>
  ),
  lock: () => (
    <svg width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
      <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
      <path d="M7 11V7a5 5 0 0 1 10 0v4" />
    </svg>
  ),
  clock: () => (
    <svg width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
      <circle cx="12" cy="12" r="10" />
      <polyline points="12 6 12 12 16 14" />
    </svg>
  ),
};

export const ProblemScene: React.FC<ProblemSceneProps> = ({ content }) => {
  const frame = useCurrentFrame();

  // Icon pulse animation
  const iconScale = interpolate(
    frame,
    [0, 10, 20],
    [0.5, 1.1, 1],
    { extrapolateRight: 'clamp' }
  );
  const iconOpacity = interpolate(frame, [0, 10], [0, 1], {
    extrapolateRight: 'clamp',
  });

  // Text fade in
  const textOpacity = interpolate(frame, [15, 30], [0, 1], {
    extrapolateRight: 'clamp',
  });
  const textY = interpolate(frame, [15, 30], [30, 0], {
    extrapolateRight: 'clamp',
  });

  const IconComponent = content.icon ? icons[content.icon] : icons.alert;

  // Highlight emphasized words
  const renderStatement = () => {
    if (!content.emphasis || content.emphasis.length === 0) {
      return content.statement;
    }

    let result = content.statement;
    const parts: React.ReactNode[] = [];
    let lastIndex = 0;

    content.emphasis.forEach((word) => {
      const index = result.toLowerCase().indexOf(word.toLowerCase(), lastIndex);
      if (index !== -1) {
        // Add text before the emphasized word
        if (index > lastIndex) {
          parts.push(result.slice(lastIndex, index));
        }
        // Add the emphasized word
        parts.push(
          <span key={word} style={{ color: stemedbPalette.accent, fontWeight: 700 }}>
            {result.slice(index, index + word.length)}
          </span>
        );
        lastIndex = index + word.length;
      }
    });

    // Add remaining text
    if (lastIndex < result.length) {
      parts.push(result.slice(lastIndex));
    }

    return parts.length > 0 ? parts : content.statement;
  };

  return (
    <div
      style={{
        width: '100%',
        height: '100%',
        backgroundColor: stemedbPalette.background,
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        padding: 80,
      }}
    >
      {/* Icon */}
      <div
        style={{
          opacity: iconOpacity,
          transform: `scale(${iconScale})`,
          color: stemedbPalette.warning,
          marginBottom: 48,
        }}
      >
        <IconComponent />
      </div>

      {/* Problem statement */}
      <div
        style={{
          opacity: textOpacity,
          transform: `translateY(${textY}px)`,
          textAlign: 'center',
          maxWidth: 1200,
        }}
      >
        <div
          style={{
            color: stemedbPalette.text,
            fontSize: 48,
            fontWeight: 500,
            lineHeight: 1.4,
          }}
        >
          {renderStatement()}
        </div>
      </div>
    </div>
  );
};
