/**
 * Slide — reusable single-slide renderer for Remotion compositions.
 *
 * Uses inline styles only (no Tailwind — Remotion bundles in isolation).
 * Style: dark gradient (#0f172a → #1e293b), white text, emerald accent (#10b981).
 */

import React from 'react';
import { AbsoluteFill, useCurrentFrame, interpolate } from 'remotion';

// ─── Types ──────────────────────────────────────────────────────────────────

export interface SlideData {
  type: 'cover' | 'key_point' | 'steps' | 'statistic' | 'quote' | 'cta';
  title: string;
  subtitle?: string;
  content?: string;
  items?: string[];
  value?: string;
  label?: string;
  author?: string;
  cta_text?: string;
  background_style?: string;
}

// ─── Palette ────────────────────────────────────────────────────────────────

const ACCENT = '#10b981';
const TEXT = '#ffffff';
const MUTED = 'rgba(255,255,255,0.6)';
const FONT = '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif';

// ─── Slide ──────────────────────────────────────────────────────────────────

/**
 * Renders a single slide with a fade-in + slide-up entrance animation.
 * Meant to be used inside a <Sequence> in ShipVideo/AdVideo.
 */
export const Slide: React.FC<{ slide: SlideData }> = ({ slide }) => {
  const frame = useCurrentFrame();
  const opacity = interpolate(frame, [0, 15], [0, 1], { extrapolateRight: 'clamp' });
  const y = interpolate(frame, [0, 15], [24, 0], { extrapolateRight: 'clamp' });

  return (
    <AbsoluteFill
      style={{
        opacity,
        transform: `translateY(${y}px)`,
        fontFamily: FONT,
        color: TEXT,
        padding: '80px',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'flex-start',
      }}
    >
      <SlideContent slide={slide} />
    </AbsoluteFill>
  );
};

// ─── Slide content by type ──────────────────────────────────────────────────

function SlideContent({ slide }: { slide: SlideData }) {
  switch (slide.type) {
    case 'cover':
      return (
        <>
          <div
            style={{
              fontSize: 14,
              fontWeight: 600,
              letterSpacing: 2,
              color: ACCENT,
              textTransform: 'uppercase',
              marginBottom: 20,
            }}
          >
            {slide.subtitle || 'Just Shipped'}
          </div>
          <h1
            style={{
              fontSize: 56,
              fontWeight: 800,
              lineHeight: 1.1,
              margin: 0,
              marginBottom: 24,
              color: TEXT,
            }}
          >
            {slide.title}
          </h1>
        </>
      );

    case 'key_point':
      return (
        <>
          <div
            style={{
              fontSize: 13,
              fontWeight: 600,
              letterSpacing: 2,
              color: ACCENT,
              textTransform: 'uppercase',
              marginBottom: 16,
            }}
          >
            {slide.title}
          </div>
          <p style={{ fontSize: 36, fontWeight: 600, lineHeight: 1.4, margin: 0, color: TEXT }}>
            {slide.content}
          </p>
        </>
      );

    case 'steps':
      return (
        <>
          <div
            style={{
              fontSize: 13,
              fontWeight: 600,
              letterSpacing: 2,
              color: ACCENT,
              textTransform: 'uppercase',
              marginBottom: 24,
            }}
          >
            {slide.title}
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
            {(slide.items || []).map((item, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
                <div
                  style={{
                    width: 36,
                    height: 36,
                    borderRadius: '50%',
                    background: ACCENT,
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    fontSize: 14,
                    fontWeight: 700,
                    color: '#0f172a',
                    flexShrink: 0,
                  }}
                >
                  {i + 1}
                </div>
                <span style={{ fontSize: 28, fontWeight: 500 }}>{item}</span>
              </div>
            ))}
          </div>
        </>
      );

    case 'statistic':
      return (
        <>
          <div
            style={{
              fontSize: 13,
              fontWeight: 600,
              letterSpacing: 2,
              color: ACCENT,
              textTransform: 'uppercase',
              marginBottom: 24,
            }}
          >
            {slide.title}
          </div>
          <div
            style={{ fontSize: 120, fontWeight: 900, lineHeight: 1, color: TEXT, marginBottom: 12 }}
          >
            {slide.value || '—'}
          </div>
          <div style={{ fontSize: 24, color: MUTED, fontWeight: 400 }}>{slide.label}</div>
        </>
      );

    case 'quote':
      return (
        <>
          <div
            style={{
              width: 48,
              height: 4,
              background: ACCENT,
              marginBottom: 32,
              borderRadius: 2,
            }}
          />
          <p
            style={{
              fontSize: 36,
              fontWeight: 600,
              lineHeight: 1.5,
              margin: 0,
              marginBottom: 32,
              fontStyle: 'italic',
              color: TEXT,
            }}
          >
            &ldquo;{slide.content}&rdquo;
          </p>
          {slide.author && <div style={{ fontSize: 18, color: MUTED }}>— {slide.author}</div>}
        </>
      );

    case 'cta':
      return (
        <>
          {slide.subtitle && (
            <div
              style={{
                fontSize: 13,
                fontWeight: 600,
                letterSpacing: 2,
                color: ACCENT,
                textTransform: 'uppercase',
                marginBottom: 20,
              }}
            >
              {slide.subtitle}
            </div>
          )}
          <h2
            style={{
              fontSize: 56,
              fontWeight: 800,
              lineHeight: 1.1,
              margin: 0,
              marginBottom: 40,
              color: TEXT,
            }}
          >
            {slide.title}
          </h2>
          <div
            style={{
              padding: '20px 40px',
              background: ACCENT,
              borderRadius: 12,
              fontSize: 22,
              fontWeight: 700,
              color: '#0f172a',
            }}
          >
            {slide.cta_text || 'Get Started'}
          </div>
        </>
      );

    default:
      return <div style={{ fontSize: 32 }}>{slide.title}</div>;
  }
}