/**
 * FeatureScene Component
 *
 * Feature highlight with icon and description.
 * Used for solution/benefits section.
 */

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

type FeatureSceneProps = {
  content: FeatureContent;
};

// Feature icons
const icons = {
  shield: () => (
    <svg width="96" height="96" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
      <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
      <path d="M9 12l2 2 4-4" />
    </svg>
  ),
  clock: () => (
    <svg width="96" height="96" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
      <circle cx="12" cy="12" r="10" />
      <polyline points="12 6 12 12 16 14" />
    </svg>
  ),
  graph: () => (
    <svg width="96" height="96" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
      <circle cx="18" cy="5" r="3" />
      <circle cx="6" cy="12" r="3" />
      <circle cx="18" cy="19" r="3" />
      <line x1="8.59" y1="13.51" x2="15.42" y2="17.49" />
      <line x1="15.41" y1="6.51" x2="8.59" y2="10.49" />
    </svg>
  ),
  search: () => (
    <svg width="96" height="96" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
      <circle cx="11" cy="11" r="8" />
      <line x1="21" y1="21" x2="16.65" y2="16.65" />
    </svg>
  ),
  check: () => (
    <svg width="96" height="96" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
      <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
      <polyline points="22 4 12 14.01 9 11.01" />
    </svg>
  ),
  layers: () => (
    <svg width="96" height="96" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
      <polygon points="12 2 2 7 12 12 22 7 12 2" />
      <polyline points="2 17 12 22 22 17" />
      <polyline points="2 12 12 17 22 12" />
    </svg>
  ),
  audit: () => (
    <svg width="96" height="96" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
      <polyline points="14 2 14 8 20 8" />
      <line x1="16" y1="13" x2="8" y2="13" />
      <line x1="16" y1="17" x2="8" y2="17" />
      <polyline points="10 9 9 9 8 9" />
    </svg>
  ),
};

export const FeatureScene: React.FC<FeatureSceneProps> = ({ content }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  // Icon spring animation
  const iconSpring = spring({
    frame,
    fps,
    config: {
      damping: 20,
      stiffness: 100,
    },
  });

  const iconOpacity = interpolate(frame, [0, 10], [0, 1], {
    extrapolateRight: 'clamp',
  });
  const iconScale = interpolate(iconSpring, [0, 1], [0.5, 1]);

  // Title fade in
  const titleOpacity = interpolate(frame, [10, 25], [0, 1], {
    extrapolateRight: 'clamp',
  });
  const titleY = interpolate(frame, [10, 25], [20, 0], {
    extrapolateRight: 'clamp',
  });

  // Description fade in
  const descOpacity = interpolate(frame, [25, 40], [0, 1], {
    extrapolateRight: 'clamp',
  });

  // Highlight glow effect
  const glowIntensity = content.highlight
    ? interpolate(
        Math.sin(frame * 0.1),
        [-1, 1],
        [0.3, 0.6],
      )
    : 0;

  const IconComponent = icons[content.icon] || icons.check;

  return (
    <div
      style={{
        width: '100%',
        height: '100%',
        backgroundColor: stemedbPalette.background,
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        padding: 80,
      }}
    >
      {/* Feature card */}
      <div
        style={{
          backgroundColor: stemedbPalette.surface,
          borderRadius: 24,
          padding: 64,
          maxWidth: 900,
          width: '100%',
          border: `1px solid ${stemedbPalette.border}`,
          boxShadow: content.highlight
            ? `0 0 60px ${stemedbPalette.accent}${Math.round(glowIntensity * 255).toString(16).padStart(2, '0')}`
            : 'none',
        }}
      >
        {/* Icon */}
        <div
          style={{
            opacity: iconOpacity,
            transform: `scale(${iconScale})`,
            color: stemedbPalette.accent,
            marginBottom: 32,
            display: 'flex',
            justifyContent: 'center',
          }}
        >
          <IconComponent />
        </div>

        {/* Title */}
        <div
          style={{
            opacity: titleOpacity,
            transform: `translateY(${titleY}px)`,
            textAlign: 'center',
            marginBottom: 24,
          }}
        >
          <div
            style={{
              color: stemedbPalette.text,
              fontSize: 48,
              fontWeight: 700,
            }}
          >
            {content.title}
          </div>
        </div>

        {/* Description */}
        <div
          style={{
            opacity: descOpacity,
            textAlign: 'center',
          }}
        >
          <div
            style={{
              color: stemedbPalette.textSecondary,
              fontSize: 28,
              lineHeight: 1.5,
            }}
          >
            {content.description}
          </div>
        </div>
      </div>
    </div>
  );
};
