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

const ShieldIcon = () => (
  <svg width={52} height={52} viewBox="0 0 24 24">
    <path
      d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z"
      fill="#0E63F6"
    />
  </svg>
);

const AuditLine = ({ frame, delay }: { frame: number; delay: number }) => {
  const w = ((Math.sin(((frame + delay) / 90) * 2 * Math.PI) + 1) / 2) * 110 + 70;
  return (
    <div
      style={{
        height: 3,
        width: w,
        background: "rgba(125, 182, 255, 0.28)",
        borderRadius: 2,
        marginBottom: 7,
      }}
    />
  );
};

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

  const revealP = spring({ fps, frame, config: SPRING_CFG, delay: 0 });
  const shieldScale = 1 + Math.sin((frame / 45) * Math.PI) * 0.04;

  return (
    <AbsoluteFill
      style={{
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        padding: "0 240px",
      }}
    >
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          width: "100%",
          opacity: revealP,
          transform: `translateY(${(1 - revealP) * 30}px)`,
        }}
      >
        {/* Top: AI Agent */}
        <div
          style={{
            background: "rgba(18, 18, 31, 0.9)",
            border: "1px solid rgba(125, 182, 255, 0.2)",
            borderRadius: 14,
            padding: "20px 40px",
            textAlign: "center",
          }}
        >
          <div style={{ fontFamily: FONT, fontSize: 22, color: COLORS.accentLight, fontWeight: 600 }}>
            Your AI Agent
          </div>
          <div style={{ fontFamily: FONT, fontSize: 15, color: COLORS.textSecondary, marginTop: 4 }}>
            Claude · Codex · GPT · Any Model
          </div>
        </div>

        <div style={{ display: "flex", justifyContent: "center", padding: "10px 0" }}>
          <div style={{ color: COLORS.accent, fontSize: 22 }}>↓</div>
        </div>

        {/* Center: Control Layer */}
        <div
          style={{
            background: "rgba(14, 99, 246, 0.13)",
            border: "2px solid rgba(14, 99, 246, 0.45)",
            borderRadius: 20,
            padding: "26px 40px",
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",
            transform: `scale(${shieldScale})`,
          }}
        >
          <div style={{ display: "flex", flexDirection: "column" }}>
            {[0, 30, 60, 90].map((d) => (
              <AuditLine key={d} frame={frame} delay={d} />
            ))}
          </div>
          <div style={{ textAlign: "center" }}>
            <div style={{ display: "flex", justifyContent: "center", marginBottom: 8 }}>
              <ShieldIcon />
            </div>
            <div style={{ fontFamily: FONT, fontSize: 24, fontWeight: 700, color: "#fff" }}>
              SquareMCP
            </div>
            <div style={{ fontFamily: FONT, fontSize: 13, color: COLORS.accent, marginTop: 5, letterSpacing: 1 }}>
              Auth · Permissions · Audit · Revocation
            </div>
          </div>
          <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-end" }}>
            {[15, 45, 75, 105].map((d) => (
              <AuditLine key={d} frame={frame} delay={d} />
            ))}
          </div>
        </div>

        <div style={{ display: "flex", justifyContent: "center", padding: "10px 0" }}>
          <div style={{ color: COLORS.accentLight, fontSize: 22 }}>↓</div>
        </div>

        {/* Bottom: Internal Tools */}
        <div
          style={{
            background: "rgba(18, 18, 31, 0.9)",
            border: "1px solid rgba(125, 182, 255, 0.2)",
            borderRadius: 14,
            padding: "20px 40px",
            textAlign: "center",
          }}
        >
          <div style={{ fontFamily: FONT, fontSize: 22, color: COLORS.accentLight, fontWeight: 600 }}>
            Your Internal Tools
          </div>
          <div style={{ fontFamily: FONT, fontSize: 15, color: COLORS.textSecondary, marginTop: 4 }}>
            Email · Knowledge Base · CRM · Ops Systems
          </div>
        </div>
      </div>
    </AbsoluteFill>
  );
};
