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';
import { ExcelMock } from '../components/ExcelMock';

// Scene 03: The Magic — 390–600 (7s)
// Shows the AI scanning process: receipt in → data extracted → Excel out

const EXCEL_ROWS = [
  { vendor: 'Aral Tankstelle', date: '16.08.26', category: 'Travel', amount: '€95.18', status: 'confirmed' as const },
  { vendor: 'Trattoria Roma', date: '15.08.26', category: 'Dining', amount: '€27.84', status: 'confirmed' as const },
  { vendor: 'REWE', date: '17.08.26', category: 'Office', amount: '€3.78', status: 'scanned' as const },
  { vendor: 'Media Markt', date: '12.08.26', category: 'Equipment', amount: '€349.00', status: 'pending' as const },
];

const EXTRACTED_FIELDS = [
  { label: 'VENDOR', value: 'Aral Tankstelle München', confirmed: true },
  { label: 'DATE', value: '16.08.2026', confirmed: true },
  { label: 'AMOUNT', value: '€95.18', confirmed: true },
  { label: 'TAX (19%)', value: '€13.10', confirmed: true },
  { label: 'CATEGORY', value: 'Travel / Fuel', confirmed: true },
  { label: 'PAYMENT', value: 'Credit Card', confirmed: true },
];

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

  const sceneFade = interpolate(frame, [0, 15], [0, 1], { extrapolateRight: 'clamp' });
  const exitFade = interpolate(frame, [195, 215], [1, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' });

  // Scan progress (receipt scan line)
  const scanProgress = interpolate(frame, [40, 100], [0, 1], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
  });

  // Arrow pulse animation
  const arrowScale = interpolate(
    Math.sin((frame / 8) * Math.PI),
    [-1, 1],
    [0.92, 1.08]
  );

  // Excel appears at frame 110 with row highlighting cycling
  const excelOpacity = interpolate(frame, [110, 130], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' });
  const highlightRow = frame > 130 ? Math.floor(((frame - 130) / 30) % 4) : undefined;

  // Fields appear one by one
  const fieldsVisible = Math.min(6, Math.floor((frame - 50) / 15));

  return (
    <AbsoluteFill style={{ opacity: sceneFade * exitFade }}>
      {/* Header section */}
      <div
        style={{
          position: 'absolute',
          top: 60,
          left: 80,
          right: 80,
        }}
      >
        <Reveal delay={5}>
          <div
            style={{
              fontFamily: 'monospace',
              fontSize: 10,
              letterSpacing: '0.14em',
              textTransform: 'uppercase',
              color: '#059669',
              marginBottom: 10,
              display: 'flex',
              alignItems: 'center',
              gap: 8,
            }}
          >
            <div style={{ width: 26, height: 1, background: '#059669' }} />
            The Solution
          </div>
        </Reveal>
        <AnimatedHeadline
          text="Watch the magic happen."
          delay={10}
          style={{
            fontFamily: "'Hanken Grotesk', sans-serif",
            fontWeight: 800,
            fontSize: 64,
            letterSpacing: '-0.04em',
            lineHeight: 1.05,
            color: '#000000',
          }}
        />
      </div>

      {/* Three-panel demo layout */}
      <div
        style={{
          position: 'absolute',
          top: 220,
          left: 80,
          right: 80,
          display: 'flex',
          alignItems: 'center',
          gap: 40,
        }}
      >
        {/* Panel 1: Receipt */}
        <div style={{ flex: '0 0 auto' }}>
          <Reveal delay={20} direction="left">
            <div
              style={{
                fontFamily: 'monospace',
                fontSize: 9,
                letterSpacing: '0.12em',
                textTransform: 'uppercase',
                color: '#64748B',
                marginBottom: 12,
                display: 'flex',
                alignItems: 'center',
                gap: 6,
              }}
            >
              <span style={{ background: '#000', color: '#fff', padding: '2px 6px', fontSize: 8 }}>01</span>
              Snap a receipt
            </div>
            <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={frame > 30}
              scanProgress={scanProgress}
              scale={1.05}
            />
          </Reveal>
        </div>

        {/* Arrow 1 */}
        <div
          style={{
            flex: '0 0 auto',
            opacity: interpolate(frame, [35, 55], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }),
            transform: `scale(${arrowScale})`,
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            gap: 6,
          }}
        >
          <div style={{ width: 80, height: 1, background: '#000000' }} />
          <div
            style={{
              width: 0,
              height: 0,
              borderLeft: '10px solid #000',
              borderTop: '6px solid transparent',
              borderBottom: '6px solid transparent',
              marginLeft: 80,
              marginTop: -6,
            }}
          />
          <div
            style={{
              fontFamily: 'monospace',
              fontSize: 8,
              letterSpacing: '0.12em',
              textTransform: 'uppercase',
              color: '#059669',
              marginTop: -4,
              background: '#F0FDF4',
              border: '1px solid #BBF7D0',
              padding: '3px 8px',
            }}
          >
            AI Processing
          </div>
        </div>

        {/* Panel 2: Extracted fields */}
        <div style={{ flex: '0 0 auto' }}>
          <Reveal delay={45}>
            <div
              style={{
                fontFamily: 'monospace',
                fontSize: 9,
                letterSpacing: '0.12em',
                textTransform: 'uppercase',
                color: '#64748B',
                marginBottom: 12,
                display: 'flex',
                alignItems: 'center',
                gap: 6,
              }}
            >
              <span style={{ background: '#059669', color: '#fff', padding: '2px 6px', fontSize: 8 }}>02</span>
              AI Extracts Data
            </div>
            <div
              style={{
                background: '#FFFFFF',
                border: '1px solid #E2E8F0',
                width: 260,
                overflow: 'hidden',
                boxShadow: '0 20px 60px -20px rgba(22,28,34,0.18)',
              }}
            >
              {/* AI header */}
              <div
                style={{
                  background: '#000000',
                  padding: '10px 16px',
                  display: 'flex',
                  alignItems: 'center',
                  gap: 8,
                  fontFamily: 'monospace',
                  fontSize: 9,
                  letterSpacing: '0.1em',
                  textTransform: 'uppercase',
                  color: '#FFFFFF',
                }}
              >
                <div
                  style={{
                    width: 7,
                    height: 7,
                    borderRadius: '50%',
                    background: '#059669',
                    boxShadow: '0 0 8px rgba(5,150,105,0.7)',
                  }}
                />
                Extracted Fields
              </div>
              {EXTRACTED_FIELDS.map((field, i) => {
                const visible = i < fieldsVisible;
                const fieldProgress = interpolate(frame - (50 + i * 15), [0, 14], [0, 1], {
                  extrapolateLeft: 'clamp',
                  extrapolateRight: 'clamp',
                });
                return (
                  <div
                    key={i}
                    style={{
                      opacity: visible ? 1 : 0,
                      transform: visible ? 'translateX(0)' : 'translateX(20px)',
                      transition: 'all 0.3s ease',
                      padding: '9px 16px',
                      borderBottom: '1px solid #EDF0F4',
                      display: 'flex',
                      justifyContent: 'space-between',
                      alignItems: 'center',
                    }}
                  >
                    <span
                      style={{
                        fontFamily: 'monospace',
                        fontSize: 8,
                        letterSpacing: '0.1em',
                        textTransform: 'uppercase',
                        color: '#94A3B8',
                      }}
                    >
                      {field.label}
                    </span>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                      <span
                        style={{
                          fontFamily: "'Inter', sans-serif",
                          fontSize: 12,
                          fontWeight: 600,
                          color: '#161C22',
                        }}
                      >
                        {field.value}
                      </span>
                      {visible && (
                        <span style={{ color: '#059669', fontSize: 11, fontWeight: 700 }}>✓</span>
                      )}
                    </div>
                  </div>
                );
              })}
            </div>
          </Reveal>
        </div>

        {/* Arrow 2 */}
        <div
          style={{
            flex: '0 0 auto',
            opacity: interpolate(frame, [115, 135], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }),
            transform: `scale(${arrowScale})`,
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            gap: 6,
          }}
        >
          <div style={{ width: 80, height: 1, background: '#000000' }} />
          <div
            style={{
              width: 0,
              height: 0,
              borderLeft: '10px solid #000',
              borderTop: '6px solid transparent',
              borderBottom: '6px solid transparent',
              marginLeft: 80,
              marginTop: -6,
            }}
          />
          <div
            style={{
              fontFamily: 'monospace',
              fontSize: 8,
              letterSpacing: '0.12em',
              textTransform: 'uppercase',
              color: '#059669',
              marginTop: -4,
              background: '#F0FDF4',
              border: '1px solid #BBF7D0',
              padding: '3px 8px',
            }}
          >
            Auto-Export
          </div>
        </div>

        {/* Panel 3: Excel */}
        <div style={{ flex: 1, opacity: excelOpacity, transform: `translateX(${interpolate(excelOpacity, [0, 1], [40, 0])}px)` }}>
          <div
            style={{
              fontFamily: 'monospace',
              fontSize: 9,
              letterSpacing: '0.12em',
              textTransform: 'uppercase',
              color: '#64748B',
              marginBottom: 12,
              display: 'flex',
              alignItems: 'center',
              gap: 6,
            }}
          >
            <span style={{ background: '#1D4ED8', color: '#fff', padding: '2px 6px', fontSize: 8 }}>03</span>
            Perfect Excel
          </div>
          <ExcelMock rows={EXCEL_ROWS} highlightRow={highlightRow} scale={0.88} />
        </div>
      </div>

      {/* Bottom timing badge */}
      <Reveal delay={150}>
        <div
          style={{
            position: 'absolute',
            bottom: 60,
            left: '50%',
            transform: 'translateX(-50%)',
            background: '#000000',
            color: '#FFFFFF',
            padding: '12px 28px',
            fontFamily: 'monospace',
            fontSize: 13,
            letterSpacing: '0.08em',
            textTransform: 'uppercase',
            whiteSpace: 'nowrap',
            display: 'flex',
            alignItems: 'center',
            gap: 14,
          }}
        >
          <span style={{ color: '#059669', fontSize: 20, lineHeight: 1 }}>⚡</span>
          Total time: Under 3 seconds
          <span style={{ color: '#059669', fontSize: 20, lineHeight: 1 }}>⚡</span>
        </div>
      </Reveal>
    </AbsoluteFill>
  );
};
