import React from 'react';
import {
  AbsoluteFill,
  useCurrentFrame,
  useVideoConfig,
  interpolate,
  spring,
} from 'remotion';
import { AnimatedHeadline } from '../components/AnimatedHeadline';
import { Reveal } from '../components/Reveal';
import { ReceiptMock } from '../components/ReceiptMock';

// Scene 01: Cinematic Intro — 0–210 frames (7s)
// Big logo reveal + headline + animated receipts flying in

export const Scene01Intro: React.FC = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  // Scene fade-in
  const sceneFade = interpolate(frame, [0, 15], [0, 1], { extrapolateRight: 'clamp' });

  // Logo spring
  const logoSpring = spring({ frame: frame - 5, fps, config: { damping: 14, stiffness: 100, mass: 0.8 } });
  const logoScale = interpolate(logoSpring, [0, 1], [0.5, 1]);
  const logoOpacity = interpolate(frame - 5, [0, 18], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' });

  // Receipt 1 — flies in from left
  const r1Spring = spring({ frame: frame - 30, fps, config: { damping: 18, stiffness: 90, mass: 1 } });
  const r1x = interpolate(r1Spring, [0, 1], [-350, 0]);
  const r1rot = interpolate(r1Spring, [0, 1], [-15, -8]);
  const r1opacity = interpolate(frame - 30, [0, 20], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' });

  // Receipt 2 — flies in from right
  const r2Spring = spring({ frame: frame - 50, fps, config: { damping: 18, stiffness: 90, mass: 1 } });
  const r2x = interpolate(r2Spring, [0, 1], [350, 0]);
  const r2rot = interpolate(r2Spring, [0, 1], [12, 6]);
  const r2opacity = interpolate(frame - 50, [0, 20], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' });

  // Receipt 3 — flies in from bottom
  const r3Spring = spring({ frame: frame - 70, fps, config: { damping: 18, stiffness: 90, mass: 1 } });
  const r3y = interpolate(r3Spring, [0, 1], [300, 0]);
  const r3rot = interpolate(r3Spring, [0, 1], [20, 3]);
  const r3opacity = interpolate(frame - 70, [0, 20], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' });

  // Scanline over stacked receipts
  const scanStart = 90;
  const scanProgress = interpolate(frame - scanStart, [0, 60], [0, 1], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
  });
  const scanning = frame > scanStart;

  // Scene exit fade
  const exitFade = interpolate(frame, [195, 215], [1, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' });

  return (
    <AbsoluteFill style={{ opacity: sceneFade * exitFade }}>
      {/* Left half: Text content */}
      <div
        style={{
          position: 'absolute',
          left: 0,
          top: 0,
          width: '50%',
          height: '100%',
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'center',
          padding: '0 80px',
        }}
      >
        {/* Logo / Brand */}
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            gap: 14,
            marginBottom: 40,
            opacity: logoOpacity,
            transform: `scale(${logoScale})`,
            transformOrigin: 'left center',
          }}
        >
          <div
            style={{
              width: 54,
              height: 54,
              border: '2.5px solid #000000',
              background: '#FFFFFF',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              fontFamily: "'Hanken Grotesk', sans-serif",
              fontWeight: 800,
              fontSize: 18,
              letterSpacing: '-0.02em',
            }}
          >
            SR
          </div>
          <div>
            <div
              style={{
                fontFamily: "'Hanken Grotesk', sans-serif",
                fontWeight: 800,
                fontSize: 22,
                letterSpacing: '-0.03em',
                color: '#000000',
                lineHeight: 1,
              }}
            >
              ScanReceipts
            </div>
            <div
              style={{
                fontFamily: 'monospace',
                fontSize: 9,
                letterSpacing: '0.12em',
                textTransform: 'uppercase',
                color: '#64748B',
                marginTop: 3,
              }}
            >
              AI-Powered Bookkeeping
            </div>
          </div>
        </div>

        {/* Badge */}
        <Reveal delay={20}>
          <div
            style={{
              display: 'inline-flex',
              alignItems: 'center',
              gap: 8,
              border: '1px solid #E2E8F0',
              background: '#EEF4FC',
              padding: '7px 12px',
              marginBottom: 22,
              fontFamily: 'monospace',
              fontSize: 10,
              letterSpacing: '0.1em',
              textTransform: 'uppercase',
              color: '#161C22',
              width: 'fit-content',
            }}
          >
            <div style={{ width: 7, height: 7, background: '#059669' }} />
            New · AI Receipt Scanner
          </div>
        </Reveal>

        {/* Main headline */}
        <AnimatedHeadline
          text="One Photo."
          delay={28}
          style={{
            fontFamily: "'Hanken Grotesk', sans-serif",
            fontWeight: 800,
            fontSize: 82,
            letterSpacing: '-0.04em',
            lineHeight: 1.0,
            color: '#000000',
            marginBottom: 4,
          }}
        />
        <AnimatedHeadline
          text="Perfect Excel."
          delay={40}
          style={{
            fontFamily: "'Hanken Grotesk', sans-serif",
            fontWeight: 800,
            fontSize: 82,
            letterSpacing: '-0.04em',
            lineHeight: 1.0,
            color: '#475569',
            marginBottom: 32,
          }}
        />

        {/* Subline */}
        <Reveal delay={65}>
          <div
            style={{
              fontSize: 18,
              color: '#475569',
              lineHeight: 1.6,
              maxWidth: 420,
              marginBottom: 40,
              fontFamily: "'Inter', sans-serif",
            }}
          >
            Snap a receipt. AI reads vendor, date, items, and tax — then exports a flawless dual-sheet Excel in seconds.
          </div>
        </Reveal>

        {/* Proof chips */}
        <Reveal delay={80}>
          <div
            style={{
              display: 'flex',
              gap: 16,
              flexWrap: 'wrap',
              fontFamily: 'monospace',
              fontSize: 10,
              letterSpacing: '0.1em',
              textTransform: 'uppercase',
              color: '#475569',
              borderTop: '1px solid #E2E8F0',
              paddingTop: 22,
            }}
          >
            {['✓ DATEV-Compatible', '✓ 99% AI Accuracy', '✓ Instant Export', '✓ Zero Manual Work'].map((t, i) => (
              <span key={i} style={{ color: i === 0 ? '#059669' : '#475569', fontWeight: i === 0 ? 700 : 400 }}>
                {t}
              </span>
            ))}
          </div>
        </Reveal>
      </div>

      {/* Right half: Animated receipts stack */}
      <div
        style={{
          position: 'absolute',
          right: 0,
          top: 0,
          width: '50%',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <div style={{ position: 'relative', width: 340, height: 460 }}>
          {/* Receipt 3 — back */}
          <div
            style={{
              position: 'absolute',
              top: 60,
              left: 80,
              opacity: r3opacity,
              transform: `translateY(${r3y}px) rotate(${r3rot}deg)`,
            }}
          >
            <ReceiptMock
              vendor="REWE"
              date="17.08.2026"
              items={[
                { name: 'Milch 1L', amount: '€1.29' },
                { name: 'Brot', amount: '€2.49' },
                { name: 'MwSt. 7%', amount: '€0.27' },
              ]}
              total="€3.78"
              scale={0.88}
            />
          </div>

          {/* Receipt 1 — left */}
          <div
            style={{
              position: 'absolute',
              top: 20,
              left: -20,
              opacity: r1opacity,
              transform: `translateX(${r1x}px) rotate(${r1rot}deg)`,
            }}
          >
            <ReceiptMock
              vendor="Trattoria Roma"
              date="15.08.2026"
              items={[
                { name: 'Pasta Carbonara', amount: '€14.90' },
                { name: 'Vino Rosso', amount: '€8.50' },
                { name: 'MwSt. 19%', amount: '€4.44' },
              ]}
              total="€27.84"
              scale={0.85}
            />
          </div>

          {/* Receipt 2 — right, SCANNING */}
          <div
            style={{
              position: 'absolute',
              top: 80,
              right: -30,
              opacity: r2opacity,
              transform: `translateX(${r2x}px) rotate(${r2rot}deg)`,
              zIndex: 10,
            }}
          >
            <ReceiptMock
              vendor="Aral Tankstelle"
              date="16.08.2026"
              items={[
                { name: 'Super E10 — 48L', amount: '€82.08' },
                { name: 'MwSt. 19%', amount: '€13.10' },
              ]}
              total="€95.18"
              scanning={scanning}
              scanProgress={scanProgress}
              scale={0.92}
            />
          </div>

          {/* AI Processing badge */}
          {frame > 110 && (
            <Reveal delay={0}>
              <div
                style={{
                  position: 'absolute',
                  bottom: 0,
                  left: '50%',
                  transform: 'translateX(-50%)',
                  background: '#000000',
                  color: '#FFFFFF',
                  padding: '10px 18px',
                  display: 'flex',
                  alignItems: 'center',
                  gap: 10,
                  fontFamily: 'monospace',
                  fontSize: 10,
                  letterSpacing: '0.1em',
                  textTransform: 'uppercase',
                  whiteSpace: 'nowrap',
                }}
              >
                <div
                  style={{
                    width: 7,
                    height: 7,
                    borderRadius: '50%',
                    background: '#059669',
                    animation: 'pulse 1.5s ease-in-out infinite',
                  }}
                />
                AI Extracting Data...
              </div>
            </Reveal>
          )}
        </div>
      </div>

      {/* Vertical divider line */}
      <div
        style={{
          position: 'absolute',
          left: '50%',
          top: '10%',
          width: 1,
          height: '80%',
          background: '#E2E8F0',
          opacity: interpolate(frame, [40, 70], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }),
        }}
      />
    </AbsoluteFill>
  );
};
