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

export const ShopFg: React.FC<{ accent: string; accent2: string }> = ({ accent, accent2 }) => {
  const frame = useCurrentFrame();
  const { durationInFrames } = useVideoConfig();
  const p = frame / durationInFrames; // 0..1 across the loop
  const t = p * Math.PI * 2;          // periodic angle

  // ----- Floating solid glossy gift parcels (centred-to-right) -----
  const parcels = [
    { left: 60, top: 44, size: 240, phase: 0.0, spin: 1, ribbon: true },
    { left: 80, top: 31, size: 168, phase: 1.1, spin: -1, ribbon: false },
    { left: 85, top: 66, size: 196, phase: 2.3, spin: 1, ribbon: true },
    { left: 66, top: 74, size: 150, phase: 3.4, spin: -1, ribbon: false },
    { left: 73, top: 53, size: 128, phase: 4.6, spin: 1, ribbon: true },
  ];

  // ----- Shopping bag shape -----
  const bag = { left: 50, top: 60, size: 180, phase: 5.6 };

  // ----- Twinkling gold sparkle stars -----
  const sparkles = [
    { left: 56, top: 27, size: 16, phase: 0.4 },
    { left: 90, top: 47, size: 20, phase: 1.6 },
    { left: 69, top: 34, size: 11, phase: 2.8 },
    { left: 83, top: 80, size: 18, phase: 3.9 },
    { left: 62, top: 86, size: 13, phase: 5.0 },
    { left: 94, top: 61, size: 12, phase: 1.2 },
  ];

  const softShadow = '0 22px 44px -12px rgba(15,23,42,.22), 0 8px 18px -8px rgba(15,138,79,.18)';

  return (
    <>
      {/* ---- Floating glossy emerald gift parcels ---- */}
      {parcels.map((b, i) => {
        const bob = Math.sin(t + b.phase) * 18;
        const sway = Math.cos(t + b.phase * 0.8) * 14;
        const tiltX = Math.sin(t + b.phase) * 9;
        const tiltY = Math.cos(t + b.phase * 1.3) * 12 * b.spin;
        const rot = Math.sin(t + b.phase) * 5;
        const breathe = 1 + Math.sin(t + b.phase * 1.7) * 0.03;

        return (
          <div
            key={`box-${i}`}
            style={{
              position: 'absolute',
              left: `${b.left}%`,
              top: `${b.top}%`,
              width: b.size,
              height: b.size * 0.84,
              transform: `translate(-50%, -50%) translate(${sway}px, ${bob}px) perspective(900px) rotateX(${tiltX}deg) rotateY(${tiltY}deg) rotateZ(${rot}deg) scale(${breathe})`,
              borderRadius: b.size * 0.17,
              background: `linear-gradient(150deg, #2bbd78 0%, ${accent} 48%, #0b6b3d 100%)`,
              boxShadow: `${softShadow}, inset 0 3px 4px rgba(255,255,255,0.42), inset 0 -12px 26px rgba(8,60,35,0.4)`,
            }}
          >
            {/* glossy top sheen */}
            <div
              style={{
                position: 'absolute',
                left: '9%',
                top: '7%',
                width: '58%',
                height: '32%',
                borderRadius: '50%',
                background:
                  'radial-gradient(ellipse at 40% 30%, rgba(255,255,255,0.55), rgba(255,255,255,0) 70%)',
                filter: 'blur(2px)',
              }}
            />

            {/* gold ribbon cross + bow knot */}
            {b.ribbon && (
              <>
                <div
                  style={{
                    position: 'absolute',
                    left: '44%',
                    top: 0,
                    width: '12%',
                    height: '100%',
                    background: `linear-gradient(180deg, #e7b94f, ${accent2} 50%, #b07f1f)`,
                    boxShadow: 'inset 0 0 5px rgba(255,255,255,0.5)',
                  }}
                />
                <div
                  style={{
                    position: 'absolute',
                    left: 0,
                    top: '44%',
                    width: '100%',
                    height: '13%',
                    background: `linear-gradient(90deg, #e7b94f, ${accent2} 50%, #b07f1f)`,
                    boxShadow: 'inset 0 0 5px rgba(255,255,255,0.5)',
                  }}
                />
                <div
                  style={{
                    position: 'absolute',
                    left: '50%',
                    top: '50%',
                    width: '27%',
                    height: '27%',
                    transform: 'translate(-50%,-50%) rotate(45deg)',
                    borderRadius: '32%',
                    background: `radial-gradient(circle at 35% 30%, #f7df9a, ${accent2})`,
                    boxShadow: '0 4px 9px -3px rgba(120,85,15,0.6), inset 0 1px 3px rgba(255,255,255,0.7)',
                  }}
                />
              </>
            )}

            {/* small gold price-tag for non-ribbon parcels */}
            {!b.ribbon && (
              <div
                style={{
                  position: 'absolute',
                  left: '58%',
                  top: '14%',
                  width: '32%',
                  height: '20%',
                  borderRadius: b.size * 0.05,
                  background: `linear-gradient(135deg, #f7df9a, ${accent2})`,
                  boxShadow: '0 5px 11px -4px rgba(120,85,15,0.55), inset 0 1px 2px rgba(255,255,255,0.7)',
                }}
              >
                {/* tag hole */}
                <div
                  style={{
                    position: 'absolute',
                    left: '16%',
                    top: '34%',
                    width: '14%',
                    height: '26%',
                    borderRadius: '50%',
                    background: '#0b6b3d',
                  }}
                />
                {/* tag price line */}
                <div
                  style={{
                    position: 'absolute',
                    left: '40%',
                    top: '42%',
                    width: '46%',
                    height: '12%',
                    borderRadius: 99,
                    background: 'rgba(120,85,15,0.55)',
                  }}
                />
              </div>
            )}
          </div>
        );
      })}

      {/* ---- Solid glossy shopping bag ---- */}
      {(() => {
        const bob = Math.sin(t + bag.phase) * 16;
        const sway = Math.cos(t + bag.phase * 0.9) * 12;
        const rot = Math.sin(t + bag.phase) * 4;
        const breathe = 1 + Math.sin(t + bag.phase * 1.5) * 0.025;
        const w = bag.size;
        const h = bag.size * 1.08;
        return (
          <div
            key="bag"
            style={{
              position: 'absolute',
              left: `${bag.left}%`,
              top: `${bag.top}%`,
              width: w,
              height: h,
              transform: `translate(-50%,-50%) translate(${sway}px, ${bob}px) rotateZ(${rot}deg) scale(${breathe})`,
            }}
          >
            {/* handle */}
            <div
              style={{
                position: 'absolute',
                left: '28%',
                top: '-2%',
                width: '44%',
                height: '34%',
                borderTopLeftRadius: '50%',
                borderTopRightRadius: '50%',
                border: `${w * 0.045}px solid ${accent2}`,
                borderBottom: 'none',
                boxSizing: 'border-box',
              }}
            />
            {/* bag body */}
            <div
              style={{
                position: 'absolute',
                left: 0,
                top: '20%',
                width: '100%',
                height: '80%',
                borderRadius: w * 0.12,
                background: `linear-gradient(150deg, #34c98a 0%, ${accent} 52%, #0a6037 100%)`,
                boxShadow: `${softShadow}, inset 0 3px 4px rgba(255,255,255,0.4), inset 0 -14px 28px rgba(8,60,35,0.4)`,
              }}
            >
              {/* gloss sheen */}
              <div
                style={{
                  position: 'absolute',
                  left: '8%',
                  top: '8%',
                  width: '40%',
                  height: '36%',
                  borderRadius: '50%',
                  background:
                    'radial-gradient(ellipse at 40% 30%, rgba(255,255,255,0.5), rgba(255,255,255,0) 70%)',
                  filter: 'blur(2px)',
                }}
              />
              {/* gold seam line near top */}
              <div
                style={{
                  position: 'absolute',
                  left: '8%',
                  top: '16%',
                  width: '84%',
                  height: '4%',
                  borderRadius: 99,
                  background: `linear-gradient(90deg, transparent, ${accent2}, transparent)`,
                }}
              />
            </div>
          </div>
        );
      })()}

      {/* ---- Twinkling gold sparkle stars ---- */}
      {sparkles.map((s, i) => {
        const tw = (Math.sin(t * 2 + s.phase) + 1) / 2; // 0..1 fast twinkle
        const op = 0.3 + tw * 0.7;
        const sc = 0.7 + tw * 0.6;
        const spin = p * 360 * (i % 2 === 0 ? 1 : -1);
        return (
          <div
            key={`spark-${i}`}
            style={{
              position: 'absolute',
              left: `${s.left}%`,
              top: `${s.top}%`,
              width: s.size,
              height: s.size,
              transform: `translate(-50%,-50%) rotate(${spin}deg) scale(${sc})`,
              opacity: op,
              background: `radial-gradient(circle, ${accent2} 0%, #f3d27a 30%, rgba(200,150,43,0) 70%)`,
              filter: `drop-shadow(0 0 ${s.size * 0.55}px rgba(200,150,43,0.65))`,
              borderRadius: '50%',
            }}
          >
            {/* 4-point star glints */}
            <div
              style={{
                position: 'absolute',
                left: '50%',
                top: '-40%',
                width: '14%',
                height: '180%',
                transform: 'translateX(-50%)',
                background: `linear-gradient(180deg, rgba(247,223,154,0), ${accent2}, rgba(247,223,154,0))`,
                borderRadius: '50%',
              }}
            />
            <div
              style={{
                position: 'absolute',
                top: '50%',
                left: '-40%',
                height: '14%',
                width: '180%',
                transform: 'translateY(-50%)',
                background: `linear-gradient(90deg, rgba(247,223,154,0), ${accent2}, rgba(247,223,154,0))`,
                borderRadius: '50%',
              }}
            />
          </div>
        );
      })}
    </>
  );
};