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

const CheckIcon = () => (
  <svg width={22} height={22} viewBox="0 0 24 24" style={{ flexShrink: 0 }}>
    <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" fill="#22c55e" />
  </svg>
);

const FEATURES = ["Auth & Identity", "Permissions", "Audit Logs", "Revocation"];
const FEATURE_DELAYS = [65, 80, 95, 110];

export const Scene4Architecture = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const fadeIn = interpolate(frame, [0, 12], [0, 1], { extrapolateRight: "clamp" });
  const titleP = spring({ fps, frame, config: SPRING_CFG, delay: 0 });
  const layer1P = spring({ fps, frame, config: SPRING_CFG, delay: 12 });
  const arrow1P = spring({ fps, frame, config: { damping: 20, stiffness: 200 }, delay: 32 });
  const layer2P = spring({ fps, frame, config: SPRING_CFG, delay: 46 });
  const featureProgress = FEATURE_DELAYS.map((d) =>
    spring({ fps, frame, config: SPRING_CFG, delay: d })
  );
  const arrow2P = spring({ fps, frame, config: { damping: 20, stiffness: 200 }, delay: 128 });
  const layer3P = spring({ fps, frame, config: SPRING_CFG, delay: 142 });

  return (
    <AbsoluteFill
      style={{
        background: COLORS.bg,
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
        padding: "28px 60px",
        gap: 0,
        opacity: fadeIn,
      }}
    >
      <div
        style={{
          fontFamily: FONT,
          fontSize: 42,
          fontWeight: 700,
          color: COLORS.text,
          marginBottom: 24,
          opacity: titleP,
          transform: `translateY(${(1 - titleP) * -20}px)`,
        }}
      >
        How It Works
      </div>

      {/* Layer 1: AI Agent */}
      <div
        style={{
          background: COLORS.bgCard,
          border: `1px solid ${COLORS.border}`,
          borderRadius: 16,
          padding: "22px 40px",
          width: 880,
          textAlign: "center",
          opacity: layer1P,
          transform: `translateY(${(1 - layer1P) * -30}px)`,
        }}
      >
        <div style={{ fontFamily: FONT, fontSize: 12, color: COLORS.textSecondary, textTransform: "uppercase", letterSpacing: 2, marginBottom: 6 }}>
          Layer 1
        </div>
        <div style={{ fontFamily: FONT, fontSize: 34, fontWeight: 700, color: COLORS.text }}>
          Your AI Agent
        </div>
        <div style={{ fontFamily: FONT, fontSize: 18, color: COLORS.textSecondary, marginTop: 6 }}>
          Claude · Codex · GPT · Any Model
        </div>
      </div>

      {/* Arrow 1 */}
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          padding: "6px 0",
          opacity: arrow1P,
        }}
      >
        <div style={{ fontFamily: FONT, fontSize: 12, color: COLORS.accent, fontWeight: 600, letterSpacing: 1 }}>
          MCP
        </div>
        <div style={{ color: COLORS.accent, fontSize: 26, lineHeight: 1.1 }}>↓</div>
      </div>

      {/* Layer 2: SquareMCP Control Plane */}
      <div
        style={{
          background: `linear-gradient(135deg, rgba(14,99,246,0.14), rgba(14,99,246,0.06))`,
          border: `1.5px solid ${COLORS.borderBlue}`,
          borderRadius: 20,
          padding: "22px 40px",
          width: 880,
          opacity: layer2P,
          transform: `scale(${0.96 + 0.04 * layer2P})`,
        }}
      >
        <div style={{ fontFamily: FONT, fontSize: 12, color: COLORS.accent, textTransform: "uppercase", letterSpacing: 2, marginBottom: 6 }}>
          Layer 2 — Control Plane
        </div>
        <div style={{ fontFamily: FONT, fontSize: 30, fontWeight: 700, color: COLORS.text, marginBottom: 16 }}>
          SquareMCP
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "10px 20px" }}>
          {FEATURES.map((f, i) => (
            <div
              key={i}
              style={{
                display: "flex",
                alignItems: "center",
                gap: 10,
                opacity: featureProgress[i],
                transform: `translateX(${(1 - featureProgress[i]) * 24}px)`,
              }}
            >
              <CheckIcon />
              <span style={{ fontFamily: FONT, fontSize: 20, color: COLORS.text }}>{f}</span>
            </div>
          ))}
        </div>
      </div>

      {/* Arrow 2 */}
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          padding: "6px 0",
          opacity: arrow2P,
        }}
      >
        <div style={{ fontFamily: FONT, fontSize: 12, color: COLORS.accentLight, fontWeight: 600, letterSpacing: 1 }}>
          Controlled Access
        </div>
        <div style={{ color: COLORS.accentLight, fontSize: 26, lineHeight: 1.1 }}>↓</div>
      </div>

      {/* Layer 3: Internal Tools */}
      <div
        style={{
          background: COLORS.bgCard,
          border: `1px solid ${COLORS.border}`,
          borderRadius: 16,
          padding: "22px 40px",
          width: 880,
          textAlign: "center",
          opacity: layer3P,
          transform: `translateY(${(1 - layer3P) * 30}px)`,
        }}
      >
        <div style={{ fontFamily: FONT, fontSize: 12, color: COLORS.textSecondary, textTransform: "uppercase", letterSpacing: 2, marginBottom: 6 }}>
          Layer 3
        </div>
        <div style={{ fontFamily: FONT, fontSize: 34, fontWeight: 700, color: COLORS.text }}>
          Your Internal Tools
        </div>
        <div style={{ fontFamily: FONT, fontSize: 18, color: COLORS.textSecondary, marginTop: 6 }}>
          Email · Knowledge Base · CRM · Ops Systems
        </div>
      </div>
    </AbsoluteFill>
  );
};
