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

interface ReceiptProps {
  vendor: string;
  date: string;
  items: { name: string; amount: string }[];
  total: string;
  scanning?: boolean;
  scanProgress?: number; // 0–1
  style?: React.CSSProperties;
  scale?: number;
}

export const ReceiptMock: React.FC<ReceiptProps> = ({
  vendor,
  date,
  items,
  total,
  scanning = false,
  scanProgress = 0,
  style = {},
  scale = 1,
}) => {
  const scanY = `${scanProgress * 90 + 5}%`;

  return (
    <div
      style={{
        background: '#FFFFFF',
        border: '1px solid #E2E8F0',
        fontFamily: "'Inter', sans-serif",
        fontSize: 13 * scale,
        width: 220 * scale,
        position: 'relative',
        overflow: 'hidden',
        boxShadow: '0 20px 60px -20px rgba(22,28,34,0.25)',
        transform: scanning ? `translateY(${-6 * scale}px)` : 'translateY(0)',
        transition: 'transform 0.4s ease',
        ...style,
      }}
    >
      {/* Scan line */}
      {scanning && (
        <div
          style={{
            position: 'absolute',
            left: 0,
            right: 0,
            top: scanY,
            height: 2,
            background: '#059669',
            boxShadow: '0 0 14px 3px rgba(5,150,105,0.55)',
            zIndex: 10,
            transition: 'top 0.05s linear',
          }}
        />
      )}

      {/* Header */}
      <div
        style={{
          borderBottom: '1px solid #E2E8F0',
          padding: `${12 * scale}px ${14 * scale}px`,
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
        }}
      >
        <div
          style={{
            fontFamily: "'Hanken Grotesk', sans-serif",
            fontWeight: 700,
            fontSize: 16 * scale,
            letterSpacing: '-0.01em',
            color: '#161C22',
          }}
        >
          {vendor}
        </div>
        <div style={{ fontFamily: 'monospace', fontSize: 9 * scale, color: '#64748B' }}>{date}</div>
      </div>

      {/* Items */}
      <div style={{ padding: `${10 * scale}px ${14 * scale}px` }}>
        {items.map((item, i) => (
          <div
            key={i}
            style={{
              display: 'flex',
              justifyContent: 'space-between',
              padding: `${4 * scale}px 0`,
              borderBottom: '1px dotted #EEF1F5',
              color: '#161C22',
              fontSize: 11 * scale,
            }}
          >
            <span>{item.name}</span>
            <span style={{ fontFamily: 'monospace', fontWeight: 600 }}>{item.amount}</span>
          </div>
        ))}
      </div>

      {/* Total */}
      <div
        style={{
          display: 'flex',
          justifyContent: 'space-between',
          padding: `${10 * scale}px ${14 * scale}px`,
          borderTop: '2px solid #161C22',
          fontFamily: 'monospace',
          fontWeight: 700,
          fontSize: 13 * scale,
          color: '#161C22',
        }}
      >
        <span>TOTAL</span>
        <span>{total}</span>
      </div>

      {/* Receipt tape perforations */}
      <div style={{ display: 'flex', gap: 4 * scale, padding: `0 ${14 * scale}px ${8 * scale}px`, opacity: 0.3 }}>
        {Array.from({ length: 14 }).map((_, i) => (
          <div key={i} style={{ width: 4 * scale, height: 4 * scale, borderRadius: '50%', background: '#94A3B8' }} />
        ))}
      </div>
    </div>
  );
};
