import React from "react";
import { AbsoluteFill, useCurrentFrame } from "remotion";
import { SceneShell } from "../components/SceneShell";
import { FadeUp, Kicker, Words } from "../components/Text";
import { useJobDesign, useJobScript } from "../job/script";
import { applyCase, FONTS, usePalette, useSceneDesign } from "../theme";

/**
 * Generic "statement" scene — used for problem/solution-style beats in the
 * scripted (job) video. Falls back to the classic PropertyFinder problem copy
 * when no job script is active. Everything visual — layout (center / left /
 * split), headline treatment, type scale, kicker treatment and entrance
 * motion — is directed per scene by the AI via the scene's `design`.
 */
export const MessageScene: React.FC<{ index?: number }> = ({ index = 0 }) => {
  const script = useJobScript();
  const design = useJobDesign();
  const palette = usePalette();
  const frame = useCurrentFrame();
  const sd = useSceneDesign(index);
  const scene = script?.scenes[index];

  const kicker = scene?.kicker ?? "The problem";
  const headline =
    scene?.headline ?? "Searching for the right home shouldn't be this hard.";
  const subline =
    scene?.subline ?? "Endless scrolling. Conflicting listings. Sinking feeling.";

  const left = sd.layout === "left";
  const split = sd.layout === "split";
  const fontSize = sd.size === "large" ? 92 : sd.size === "compact" ? 64 : 78;

  // The "split" editorial layout: copy on the left, a full-height accent
  // panel on the right carrying an oversized display word from the copy.
  const splitWord =
    (subline || headline).replace(/[.!?]+$/, "").split(" ").slice(-1)[0] ||
    "Home";
  const panelIn = Math.min(1, Math.max(0, (frame - 12) / 18));

  if (split) {
    return (
      <SceneShell motion={sd.motion}>
        <AbsoluteFill>
          {/* copy column */}
          <AbsoluteFill
            style={{
              justifyContent: "center",
              alignItems: "flex-start",
              padding: "0 90px 0 150px",
              width: "58%",
            }}
          >
            <Kicker variant={sd.kicker} delay={4}>
              {kicker}
            </Kicker>
            <div
              style={{
                fontFamily: FONTS.display,
                fontWeight: 800,
                fontSize: sd.size === "large" ? 84 : sd.size === "compact" ? 60 : 72,
                lineHeight: 1.1,
                color: palette.ink,
                marginTop: 30,
                maxWidth: 900,
              }}
            >
              {sd.headline === "accent-word" ? (
                <Words text={applyCase(headline, design)} delay={10} stagger={4} accentLast />
              ) : (
                <Words text={applyCase(headline, design)} delay={10} stagger={4} />
              )}
            </div>
            {subline ? (
              <div style={{ marginTop: 30 }}>
                <FadeUp delay={34} dist={20}>
                  <div
                    style={{
                      fontFamily: FONTS.sans,
                      fontSize: 26,
                      color: palette.textDim,
                      lineHeight: 1.6,
                      maxWidth: 760,
                      fontWeight: 500,
                    }}
                  >
                    {subline}
                  </div>
                </FadeUp>
              </div>
            ) : null}
          </AbsoluteFill>
          {/* accent panel */}
          <div
            style={{
              position: "absolute",
              right: 0,
              top: 0,
              bottom: 0,
              width: "42%",
              background: `linear-gradient(160deg, ${palette.accentSoft}59 0%, ${palette.accent}2E 100%)`,
              borderLeft: `3px solid ${palette.accent}`,
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              overflow: "hidden",
            }}
          >
            <div
              style={{
                fontFamily: FONTS.display,
                fontStyle: "italic",
                fontWeight: 800,
                fontSize: 120,
                color: palette.accentDeep,
                opacity: panelIn,
                transform: `translateY(${(1 - panelIn) * 40}px) rotate(-4deg)`,
                maxWidth: "80%",
                textAlign: "center",
                lineHeight: 1.05,
              }}
            >
              &ldquo;{applyCase(splitWord, design)}&rdquo;
            </div>
            <div
              style={{
                position: "absolute",
                left: "50%",
                top: 60,
                bottom: 60,
                width: 2,
                marginLeft: -1,
                background: `linear-gradient(180deg, transparent, ${palette.accent}80, transparent)`,
              }}
            />
          </div>
        </AbsoluteFill>
      </SceneShell>
    );
  }

  return (
    <SceneShell motion={sd.motion}>
      <AbsoluteFill
        style={{
          justifyContent: "center",
          alignItems: left ? "flex-start" : "center",
          padding: left ? "0 190px" : "0 150px",
        }}
      >
        <div style={{ display: "flex", justifyContent: left ? "flex-start" : "center" }}>
          <Kicker center={!left} variant={sd.kicker} delay={4}>
            {kicker}
          </Kicker>
        </div>
        <div
          style={{
            fontFamily: FONTS.display,
            fontWeight: 800,
            fontSize,
            lineHeight: 1.12,
            color: palette.ink,
            marginTop: 30,
            maxWidth: 1500,
            textAlign: left ? "left" : "center",
            ...(sd.headline === "mark"
              ? {
                  background: `${palette.accentSoft}3D`,
                  transform: "skewX(-4deg)",
                  borderRadius: 18,
                  padding: "8px 38px",
                }
              : {}),
          }}
        >
          {sd.headline === "accent-word" ? (
            <Words text={applyCase(headline, design)} delay={10} stagger={4} accentLast />
          ) : (
            <Words text={applyCase(headline, design)} delay={10} stagger={4} />
          )}
        </div>
        {sd.headline === "underline" ? (
          <div
            style={{
              width: 150,
              height: 9,
              borderRadius: 5,
              background: palette.accent,
              marginTop: 28,
              opacity: Math.min(1, Math.max(0, (frame - 20) / 14)),
            }}
          />
        ) : null}
        {subline ? (
          <div style={{ marginTop: 34 }}>
            <FadeUp delay={34} dist={20}>
              <div
                style={{
                  fontFamily: FONTS.sans,
                  fontSize: 27,
                  color: palette.textDim,
                  lineHeight: 1.6,
                  maxWidth: 1100,
                  textAlign: left ? "left" : "center",
                  fontWeight: 500,
                }}
              >
                {subline}
              </div>
            </FadeUp>
          </div>
        ) : null}
        {/* accent rule */}
        <div
          style={{
            marginTop: 40,
            width: 120,
            height: 8,
            borderRadius: 4,
            background: palette.accent,
            opacity: Math.min(1, Math.max(0, (frame - 30) / 14)),
          }}
        />
      </AbsoluteFill>
    </SceneShell>
  );
};