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

const WA_GREEN = "#25D366";
const WA_DARK = "#111b21";
const WA_BUBBLE = "#005c4b";
const WA_HEADER = "#202c33";

// ── Left panel: SquareMCP chat + API call ─────────────────────────────────────

const CURL_LINES = [
  "curl -X POST \\",
  "  https://graph.facebook.com/v18.0/ \\",
  "  {PHONE_NUMBER_ID}/messages \\",
  "  -H 'Authorization: Bearer {TOKEN}' \\",
  "  -H 'Content-Type: application/json' \\",
  "  -d '{",
  '    "messaging_product": "whatsapp",',
  '    "to": "+19548716341",',
  '    "type": "text",',
  '    "text": { "body": "Hello from SquareMCP!" }',
  "  }'",
];

const RESPONSE_LINES = [
  "{",
  '  "messaging_product": "whatsapp",',
  '  "messages": [{',
  '    "id": "wamid.HBgLMTk1NDg3MTYzNDEV..."',
  "  }]",
  "}",
];

const LeftPanel = ({ frame, fps }: { frame: number; fps: number }) => {
  const panelIn = spring({ fps, frame, config: SPRING_SOFT });
  const chatIn = spring({ fps, frame: Math.max(0, frame - 10), config: SPRING_CFG });
  const termIn = spring({ fps, frame: Math.max(0, frame - 30), config: SPRING_CFG });

  // Animate curl lines appearing one by one
  const curlProgress = interpolate(frame, [40, 140], [0, CURL_LINES.length], { extrapolateRight: "clamp" });
  // Response appears after curl finishes
  const responseProgress = interpolate(frame, [155, 210], [0, RESPONSE_LINES.length], { extrapolateRight: "clamp" });

  return (
    <div
      style={{
        flex: 1,
        padding: "40px 32px 40px 48px",
        display: "flex",
        flexDirection: "column",
        gap: 24,
        opacity: panelIn,
        transform: `translateX(${(1 - panelIn) * -60}px)`,
      }}
    >
      {/* Section label */}
      <div style={{ fontFamily: FONT, color: "rgba(255,255,255,0.4)", fontSize: 20, fontWeight: 600, letterSpacing: 2, textTransform: "uppercase" }}>
        SquareMCP — Sending message
      </div>

      {/* Chat prompt bubble */}
      <div
        style={{
          borderRadius: 20,
          border: "1px solid rgba(14,99,246,0.35)",
          background: "rgba(9,12,22,0.94)",
          padding: "20px 24px",
          opacity: chatIn,
          transform: `translateY(${(1 - chatIn) * 30}px)`,
        }}
      >
        <div style={{ fontFamily: FONT, color: "rgba(255,255,255,0.4)", fontSize: 16, marginBottom: 10 }}>Chat</div>
        <div
          style={{
            marginLeft: "auto",
            borderRadius: 18,
            background: "linear-gradient(135deg, rgba(14,99,246,0.95), rgba(125,182,255,0.9))",
            padding: "16px 20px",
            color: "#08111f",
            fontFamily: FONT,
            fontSize: 22,
            fontWeight: 700,
            lineHeight: 1.3,
            maxWidth: "90%",
          }}
        >
          Send a WhatsApp message to +1 954 871 6341:<br />
          "Hello from SquareMCP!"
        </div>
      </div>

      {/* Terminal */}
      <div
        style={{
          borderRadius: 16,
          background: "#0d1117",
          border: "1px solid rgba(37,211,102,0.2)",
          padding: "18px 20px",
          flex: 1,
          opacity: termIn,
          transform: `translateY(${(1 - termIn) * 30}px)`,
        }}
      >
        {/* Terminal header */}
        <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 14 }}>
          {["#ff5f57", "#febc2e", "#28c840"].map((c) => (
            <div key={c} style={{ width: 12, height: 12, borderRadius: 999, background: c }} />
          ))}
          <div style={{ marginLeft: 8, fontFamily: "ui-monospace, monospace", color: "rgba(255,255,255,0.3)", fontSize: 14 }}>
            terminal — curl
          </div>
        </div>

        {/* Prompt */}
        <div style={{ fontFamily: "ui-monospace, monospace", color: "#7ee787", fontSize: 15, marginBottom: 6 }}>
          $ {/* cursor blink when not yet started */}
        </div>

        {/* Curl lines */}
        {CURL_LINES.slice(0, Math.ceil(curlProgress)).map((line, i) => (
          <div
            key={i}
            style={{
              fontFamily: "ui-monospace, monospace",
              color: line.startsWith("  -d") || line.includes('"') ? "#79c0ff" : "#e6edf3",
              fontSize: 15,
              lineHeight: 1.6,
              opacity: i < curlProgress - 1 ? 1 : curlProgress - i,
            }}
          >
            {line}
          </div>
        ))}

        {/* Response */}
        {responseProgress > 0 && (
          <div style={{ marginTop: 12 }}>
            <div style={{ fontFamily: "ui-monospace, monospace", color: WA_GREEN, fontSize: 14, marginBottom: 4 }}>
              # Response (200 OK)
            </div>
            {RESPONSE_LINES.slice(0, Math.ceil(responseProgress)).map((line, i) => (
              <div
                key={i}
                style={{
                  fontFamily: "ui-monospace, monospace",
                  color: line.includes("wamid") ? WA_GREEN : "#e6edf3",
                  fontSize: 15,
                  lineHeight: 1.55,
                  opacity: i < responseProgress - 1 ? 1 : responseProgress - i,
                }}
              >
                {line}
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
};

// ── Right panel: WhatsApp phone UI ────────────────────────────────────────────

const RightPanel = ({ frame, fps }: { frame: number; fps: number }) => {
  const panelIn = spring({ fps, frame, config: SPRING_SOFT });
  // Message bubble appears at frame 220 (after API response shown)
  const msgIn = spring({ fps, frame: Math.max(0, frame - 220), config: SPRING_CFG });
  const checkIn = spring({ fps, frame: Math.max(0, frame - 260), config: SPRING_CFG });

  const showMsg = frame >= 220;

  return (
    <div
      style={{
        width: 440,
        padding: "40px 48px 40px 24px",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        opacity: panelIn,
        transform: `translateX(${(1 - panelIn) * 60}px)`,
      }}
    >
      {/* Phone shell */}
      <div
        style={{
          width: 340,
          height: 680,
          borderRadius: 44,
          border: "8px solid #2a2a2a",
          background: WA_DARK,
          overflow: "hidden",
          boxShadow: "0 40px 120px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.06)",
          display: "flex",
          flexDirection: "column",
        }}
      >
        {/* Status bar */}
        <div style={{ background: WA_HEADER, padding: "10px 20px 8px", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <div style={{ fontFamily: FONT, color: "white", fontSize: 13, fontWeight: 600 }}>9:41</div>
          <div style={{ display: "flex", gap: 6, alignItems: "center" }}>
            {/* Signal bars */}
            <div style={{ display: "flex", gap: 2, alignItems: "flex-end" }}>
              {[8, 12, 16, 20].map((h, i) => (
                <div key={i} style={{ width: 4, height: h, background: "white", borderRadius: 2, opacity: 0.9 }} />
              ))}
            </div>
            {/* Battery */}
            <div style={{ width: 22, height: 11, border: "1.5px solid white", borderRadius: 3, padding: 1.5, display: "flex" }}>
              <div style={{ flex: 1, background: WA_GREEN, borderRadius: 1 }} />
            </div>
          </div>
        </div>

        {/* Chat header */}
        <div
          style={{
            background: WA_HEADER,
            borderBottom: "1px solid rgba(255,255,255,0.05)",
            padding: "12px 16px",
            display: "flex",
            alignItems: "center",
            gap: 12,
          }}
        >
          <div style={{ width: 40, height: 40, borderRadius: 999, background: WA_GREEN, display: "flex", alignItems: "center", justifyContent: "center" }}>
            <div style={{ fontFamily: FONT, color: "white", fontSize: 18, fontWeight: 700 }}>S</div>
          </div>
          <div>
            <div style={{ fontFamily: FONT, color: "white", fontSize: 15, fontWeight: 600 }}>SquareMCP</div>
            <div style={{ fontFamily: FONT, color: "rgba(255,255,255,0.45)", fontSize: 12 }}>Business Account</div>
          </div>
        </div>

        {/* Chat body */}
        <div
          style={{
            flex: 1,
            background: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23182229' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
            backgroundColor: "#0b141a",
            padding: "16px 12px",
            display: "flex",
            flexDirection: "column",
            justifyContent: "flex-end",
          }}
        >
          {/* Incoming message bubble */}
          {showMsg && (
            <div
              style={{
                alignSelf: "flex-end",
                maxWidth: "82%",
                opacity: msgIn,
                transform: `translateY(${(1 - msgIn) * 24}px) scale(${0.9 + msgIn * 0.1})`,
              }}
            >
              <div
                style={{
                  background: WA_BUBBLE,
                  borderRadius: "18px 4px 18px 18px",
                  padding: "10px 14px 22px",
                  position: "relative",
                }}
              >
                <div style={{ fontFamily: FONT, color: "white", fontSize: 15, lineHeight: 1.45 }}>
                  Hello from SquareMCP!
                </div>
                {/* Timestamp + checks */}
                <div
                  style={{
                    position: "absolute",
                    bottom: 6,
                    right: 10,
                    display: "flex",
                    alignItems: "center",
                    gap: 4,
                  }}
                >
                  <div style={{ fontFamily: FONT, color: "rgba(255,255,255,0.5)", fontSize: 11 }}>9:41 AM</div>
                  {/* Double check marks */}
                  <div style={{ opacity: checkIn, display: "flex" }}>
                    <svg width="16" height="11" viewBox="0 0 16 11" fill="none">
                      <path d="M1 5.5L5 9.5L10 1" stroke={WA_GREEN} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
                      <path d="M6 5.5L10 9.5L15 1" stroke={WA_GREEN} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
                    </svg>
                  </div>
                </div>
              </div>
            </div>
          )}
        </div>

        {/* Input bar */}
        <div
          style={{
            background: WA_HEADER,
            padding: "8px 12px",
            display: "flex",
            alignItems: "center",
            gap: 8,
          }}
        >
          <div
            style={{
              flex: 1,
              background: "#2a3942",
              borderRadius: 24,
              padding: "8px 16px",
              fontFamily: FONT,
              color: "rgba(255,255,255,0.3)",
              fontSize: 14,
            }}
          >
            Message
          </div>
          <div
            style={{
              width: 38,
              height: 38,
              borderRadius: 999,
              background: WA_GREEN,
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
            }}
          >
            <svg width="18" height="18" viewBox="0 0 24 24" fill="white">
              <path d="M2 21l21-9L2 3v7l15 2-15 2v7z" />
            </svg>
          </div>
        </div>
      </div>
    </div>
  );
};

// ── Divider ───────────────────────────────────────────────────────────────────

const Divider = () => (
  <div
    style={{
      width: 1,
      alignSelf: "stretch",
      background: "linear-gradient(to bottom, transparent, rgba(37,211,102,0.25), transparent)",
      margin: "40px 0",
    }}
  />
);

// ── Split screen scene ────────────────────────────────────────────────────────

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

  return (
    <AbsoluteFill style={{ display: "flex", flexDirection: "row", alignItems: "stretch" }}>
      <LeftPanel frame={frame} fps={fps} />
      <Divider />
      <RightPanel frame={frame} fps={fps} />
    </AbsoluteFill>
  );
};
