import { AbsoluteFill, interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";
import { COLORS, FONT, SPRING_CFG } from "../../styles";

export const TikTokDemo = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const chatIn = spring({ fps, frame, config: SPRING_CFG });
  const jsonIn = spring({ fps, frame: Math.max(0, frame - 30), config: SPRING_CFG });
  const chipsIn = spring({ fps, frame: Math.max(0, frame - 70), config: SPRING_CFG });
  const pulse = interpolate(frame % 45, [0, 22, 45], [0.75, 1, 0.75]);

  return (
    <AbsoluteFill style={{ padding: 58 }}>
      <div style={{ fontFamily: FONT, color: COLORS.text, fontSize: 68, fontWeight: 800, lineHeight: 1, marginTop: 48 }}>
        One prompt.
        <br />
        Real execution.
      </div>

      <div
        style={{
          marginTop: 42,
          borderRadius: 36,
          border: `1px solid ${COLORS.borderBlue}`,
          background: "rgba(9, 12, 22, 0.94)",
          padding: 30,
          opacity: chatIn,
          transform: `translateY(${(1 - chatIn) * 60}px)`,
        }}
      >
        <div style={{ fontFamily: FONT, color: COLORS.textSecondary, fontSize: 22, marginBottom: 18 }}>Chat</div>
        <div
          style={{
            marginLeft: "auto",
            maxWidth: 760,
            borderRadius: 28,
            background: "linear-gradient(135deg, rgba(14,99,246,0.95), rgba(125,182,255,0.9))",
            padding: "24px 26px",
            color: "#08111f",
            fontFamily: FONT,
            fontSize: 34,
            fontWeight: 700,
            lineHeight: 1.25,
          }}
        >
          Post my launch video to LinkedIn, X, and Instagram.
        </div>
      </div>

      <div
        style={{
          marginTop: 28,
          borderRadius: 36,
          border: "1px solid rgba(34, 197, 94, 0.24)",
          background: "rgba(5, 14, 10, 0.9)",
          padding: 30,
          opacity: jsonIn,
          transform: `translateY(${(1 - jsonIn) * 60}px)`,
        }}
      >
        <div style={{ fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", color: "#86efac", fontSize: 22, marginBottom: 18 }}>
          response.json
        </div>
        {[
          '{',
          '  "status": "success",',
          '  "published": ["linkedin", "x", "instagram"],',
          '  "duration_seconds": 12,',
          '  "urls": 3',
          '}',
        ].map((line) => (
          <div
            key={line}
            style={{
              fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
              color: line.includes("success") ? "#86efac" : "#dbeafe",
              fontSize: 24,
              lineHeight: 1.55,
            }}
          >
            {line}
          </div>
        ))}
      </div>

      <div
        style={{
          marginTop: 28,
          display: "grid",
          gridTemplateColumns: "1fr",
          gap: 16,
          opacity: chipsIn,
          transform: `scale(${0.96 + chipsIn * 0.04})`,
        }}
      >
        {["linkedin.com/post/7459...", "x.com/squaremcp/status/...", "instagram.com/reel/C..."].map((url) => (
          <div
            key={url}
            style={{
              borderRadius: 22,
              padding: "18px 22px",
              background: "rgba(255,255,255,0.06)",
              border: `1px solid ${COLORS.borderBlue}`,
              display: "flex",
              alignItems: "center",
              gap: 16,
              boxShadow: `0 0 24px rgba(34, 197, 94, ${0.12 * pulse})`,
            }}
          >
            <div
              style={{
                width: 18,
                height: 18,
                borderRadius: 999,
                background: "#22c55e",
              }}
            />
            <div style={{ fontFamily: FONT, color: COLORS.text, fontSize: 24, fontWeight: 600 }}>{url}</div>
          </div>
        ))}
      </div>
    </AbsoluteFill>
  );
};