import React from "react";
import { Img, staticFile, interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";
import { THEME } from "../theme";

type PhoneMockupProps = {
  screenshot: string;
  screenshotB?: string;
  crossfadeAt?: number;
  enterFrom?: "bottom" | "right" | "left" | "top" | "fade" | "scale";
  delay?: number;
  scale?: number;
  sequenceFolder?: string;
  sequenceFrameCount?: number;
  sequenceStartAt?: number;
  sequenceSpeed?: number;
};

// iPhone frame dimensions — iphone.png is the bezel/frame image.
// The screen area sits inside the frame with insets.
const FRAME_WIDTH = 433;
const FRAME_HEIGHT = 885;
const SCREEN_TOP = 22;
const SCREEN_LEFT = 23;
const SCREEN_WIDTH = 386;
const SCREEN_HEIGHT = 842;
const SCREEN_BORDER_RADIUS = 37;

// CSS fallback frame (used when iphone.png is missing)
const CSSFrame: React.FC<{ children: React.ReactNode }> = ({ children }) => (
  <div
    style={{
      width: FRAME_WIDTH,
      height: FRAME_HEIGHT,
      borderRadius: 52,
      background: "#1a1a1a",
      padding: 18,
      boxShadow: "0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.1)",
      position: "relative",
      overflow: "hidden",
    }}
  >
    {/* Dynamic Island */}
    <div
      style={{
        position: "absolute",
        top: 26,
        left: "50%",
        transform: "translateX(-50%)",
        width: 120,
        height: 34,
        borderRadius: 17,
        background: "#000",
        zIndex: 10,
      }}
    />
    <div
      style={{
        width: SCREEN_WIDTH,
        height: SCREEN_HEIGHT,
        borderRadius: SCREEN_BORDER_RADIUS,
        overflow: "hidden",
      }}
    >
      {children}
    </div>
  </div>
);

// Image-based frame using iphone.png overlay
const ImageFrame: React.FC<{ children: React.ReactNode }> = ({ children }) => (
  <div style={{ position: "relative", width: FRAME_WIDTH, height: FRAME_HEIGHT }}>
    <div
      style={{
        position: "absolute",
        top: SCREEN_TOP,
        left: SCREEN_LEFT,
        width: SCREEN_WIDTH,
        height: SCREEN_HEIGHT,
        borderRadius: SCREEN_BORDER_RADIUS,
        overflow: "hidden",
      }}
    >
      {children}
    </div>
    <Img
      src={staticFile("iphone.png")}
      style={{
        position: "absolute",
        top: 0,
        left: 0,
        width: FRAME_WIDTH,
        height: FRAME_HEIGHT,
        pointerEvents: "none",
      }}
    />
  </div>
);

// Set to true once you place iphone.png in public/
const USE_IMAGE_FRAME = true;

export const PhoneMockup: React.FC<PhoneMockupProps> = ({
  screenshot,
  screenshotB,
  crossfadeAt = 35,
  enterFrom = "bottom",
  delay = 8,
  scale = 1.0,
  sequenceFolder,
  sequenceFrameCount = 0,
  sequenceStartAt = 15,
  sequenceSpeed = 1,
}) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const entrance = spring({
    frame: frame - delay,
    fps,
    config: THEME.spring,
  });

  const translateY =
    enterFrom === "bottom"
      ? interpolate(entrance, [0, 1], [400, 0])
      : enterFrom === "top"
        ? interpolate(entrance, [0, 1], [-400, 0])
        : 0;

  const translateX =
    enterFrom === "right"
      ? interpolate(entrance, [0, 1], [400, 0])
      : enterFrom === "left"
        ? interpolate(entrance, [0, 1], [-400, 0])
        : 0;

  const entranceOpacity =
    enterFrom === "fade" || enterFrom === "scale"
      ? interpolate(entrance, [0, 1], [0, 1])
      : 1;

  const entranceScale =
    enterFrom === "scale"
      ? interpolate(entrance, [0, 1], [0.3, 1])
      : 1;

  // Crossfade between two screenshots if screenshotB is provided
  const crossfadeProgress = screenshotB
    ? spring({
        frame: frame - crossfadeAt,
        fps,
        config: { damping: 20, mass: 0.8, stiffness: 100 },
      })
    : 0;
  const bOpacity = interpolate(crossfadeProgress, [0, 1], [0, 1]);

  // Image sequence: pick the right frame based on current time
  const sequenceFrameIndex = sequenceFolder && sequenceFrameCount > 0
    ? Math.min(
        Math.floor(Math.max(0, frame - sequenceStartAt) * sequenceSpeed),
        sequenceFrameCount - 1
      )
    : -1;

  const sequenceSrc = sequenceFrameIndex >= 0
    ? staticFile(`screenshots/${sequenceFolder}/frame-${String(sequenceFrameIndex + 1).padStart(3, "0")}.jpg`)
    : null;

  const screenContent = (
    <div style={{ position: "relative", width: "100%", height: "100%" }}>
      {/* Base static screenshot — always rendered to prevent flash */}
      <Img
        src={staticFile(`screenshots/${screenshot}`)}
        style={{
          position: "absolute",
          top: 0,
          left: 0,
          width: "100%",
          height: "100%",
          objectFit: "cover",
        }}
      />
      {screenshotB && (
        <Img
          src={staticFile(`screenshots/${screenshotB}`)}
          style={{
            position: "absolute",
            top: 0,
            left: 0,
            width: "100%",
            height: "100%",
            objectFit: "cover",
            opacity: bOpacity,
          }}
        />
      )}
      {/* Sequence frame layered on top — uses CSS backgroundImage to avoid flash */}
      {sequenceSrc && (
        <div
          style={{
            position: "absolute",
            top: 0,
            left: 0,
            width: "100%",
            height: "100%",
            backgroundImage: `url(${sequenceSrc})`,
            backgroundSize: "cover",
            backgroundPosition: "center",
          }}
        />
      )}
    </div>
  );

  const Frame = USE_IMAGE_FRAME ? ImageFrame : CSSFrame;

  return (
    <div
      style={{
        transform: `translate(${translateX}px, ${translateY}px) scale(${scale * entranceScale})`,
        opacity: entranceOpacity,
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <Frame>{screenContent}</Frame>
    </div>
  );
};
