import React from "react";
import { AbsoluteFill, Img, interpolate, spring, staticFile, useCurrentFrame, useVideoConfig } from "remotion";
import { FONT } from "../../lib/fonts";
import { hexToRgba, mixHex } from "../../lib/anim";
import { ThreeBackdrop, Grain, Vignette, ProgressDots, Kicker, useSceneTransition } from "../chrome";
import type { BlockProps, SceneBlock } from "../types";

const resolveSrc = (u: string) => (/^https?:\/\//.test(u) ? u : staticFile(u));

const ImageCaption: React.FC<BlockProps> = ({ data, colors, L, index, total, durationInFrames }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const { opacity, slide } = useSceneTransition(durationInFrames, L);
  const cardSp = spring({ frame: frame - 2, fps, config: { damping: 18, stiffness: 90 } });
  const cardScale = interpolate(cardSp, [0, 1], [0.9, 1]);
  const float = Math.sin(frame / 26) * L.vmin(8);
  const textSp = spring({ frame: frame - 10, fps, config: { damping: 18, stiffness: 110 } });
  const textX = interpolate(textSp, [0, 1], [L.vmin(40), 0]);

  const cardW = L.pick(L.vmin(820), L.vmin(720), L.vmin(820));
  const cardH = L.pick(L.vmin(520), L.vmin(470), L.vmin(560));

  const Card = (
    <div style={{ transform: `translateY(${float}px) scale(${cardScale}) rotate(-1.5deg)`, width: cardW, height: cardH, borderRadius: L.vmin(28), overflow: "hidden", boxShadow: `0 ${L.vmin(40)}px ${L.vmin(80)}px ${hexToRgba("#1f2937", 0.28)}`, border: `${L.vmin(10)}px solid #ffffff`, background: mixHex(colors.backgroundColor, "#ffffff", 0.5) }}>
      {data.imageUrl ? (
        <Img src={resolveSrc(data.imageUrl)} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
      ) : (
        <div style={{ width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center", background: `linear-gradient(135deg, ${mixHex(colors.accentColor, "#ffffff", 0.55)}, ${mixHex(colors.secondaryColor, "#ffffff", 0.55)})`, color: hexToRgba(colors.textColor, 0.4), fontSize: L.vmin(70) }}>
          🖼
        </div>
      )}
    </div>
  );

  const Text = (
    <div style={{ direction: "rtl", textAlign: L.isWide ? "right" : "center", transform: `translateX(${textX}px)`, maxWidth: L.isWide ? L.vmin(620) : L.vmin(900) }}>
      <Kicker index={index} total={total} colors={colors} L={L} slide={slide} />
      <div style={{ fontWeight: 800, fontSize: L.pick(L.vmin(64), L.vmin(58), L.vmin(56)), color: colors.textColor, lineHeight: 1.2, letterSpacing: -0.5 }}>{data.title}</div>
      <div style={{ marginTop: L.vmin(16), fontWeight: 400, fontSize: L.pick(L.vmin(31), L.vmin(30), L.vmin(29)), color: hexToRgba(colors.textColor, 0.64), lineHeight: 1.7 }}>{data.caption}</div>
    </div>
  );

  return (
    <AbsoluteFill style={{ opacity, fontFamily: FONT, backgroundColor: colors.backgroundColor }}>
      <ThreeBackdrop colors={colors} />
      <AbsoluteFill style={{ display: "flex", flexDirection: L.isWide ? "row-reverse" : "column", alignItems: "center", justifyContent: "center", gap: L.pick(L.vmin(70), L.vmin(40), L.vmin(48)), padding: L.vmin(70) }}>
        {Card}
        {Text}
      </AbsoluteFill>
      <ProgressDots index={index} total={total} colors={colors} L={L} />
      <Vignette />
      <Grain />
    </AbsoluteFill>
  );
};

export const ImageCaptionBlock: SceneBlock = {
  id: "ImageCaption",
  label: "تصویر و توضیح",
  component: ImageCaption,
  fields: [
    { key: "imageUrl", label: "تصویر", type: "image", default: "" },
    { key: "title", label: "عنوان", type: "text", default: "ویژگی شما" },
    { key: "caption", label: "توضیح", type: "text", default: "توضیح کوتاه دربارهٔ این تصویر یا ویژگی", multiline: true },
  ],
  defaultDurationSec: 4,
  minDurationSec: 2,
  maxDurationSec: 8,
};