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

const DEFAULT_SERVICES: JobServiceItem[] = [
  { icon: "🏠", title: "Valuation", sub: "Know your property's true worth", image: "house1.jpg" },
  { icon: "🏦", title: "Mortgages", sub: "Financing that fits your budget", image: "house2.jpg" },
  { icon: "⚖️", title: "Legal", sub: "Verified title checks & conveyancing", image: "house3.jpg" },
  { icon: "🚚", title: "Moving", sub: "We help you settle in smoothly", image: "house4.jpg" },
];

/** Shared copy + data for every services-scene media treatment. */
function useServicesScene(index: number) {
  const script = useJobScript();
  const design = useJobDesign();
  const palette = usePalette();
  const sd = useSceneDesign(index);
  const scene = script?.scenes[index];

  const kicker = scene?.kicker ?? "Beyond the listing";
  const headline = scene?.headline ?? "The whole journey.";
  const headlineAccent = scene?.subline ?? "One platform.";
  const services: JobServiceItem[] =
    scene?.type === "services" && scene.items && scene.items.length > 0
      ? (scene.items as JobServiceItem[]).slice(0, 4)
      : DEFAULT_SERVICES;
  return { script, design, palette, sd, kicker, headline, headlineAccent, services };
}

/** "cards" treatment — the classic row of tall photo cards. */
const ServicesSceneCards: React.FC<{ index?: number }> = ({ index = 0 }) => {
  const frame = useCurrentFrame();
  const script = useJobScript();
  const design = useJobDesign();
  const palette = usePalette();
  const sd = useSceneDesign(index);
  const scene = script?.scenes[index];

  const kicker = scene?.kicker ?? "Beyond the listing";
  const headline = scene?.headline ?? "The whole journey.";
  const headlineAccent = scene?.subline ?? "One platform.";
  const services: JobServiceItem[] =
    scene?.type === "services" && scene.items && scene.items.length > 0
      ? (scene.items as JobServiceItem[]).slice(0, 4)
      : DEFAULT_SERVICES;

  return (
    <SceneShell motion={sd.motion}>
      <AbsoluteFill style={{ justifyContent: "center", alignItems: "center", padding: "0 110px" }}>
        <div style={{ textAlign: "center", marginBottom: 54 }}>
          <div style={{ display: "flex", justifyContent: "center" }}>
            <Kicker center variant={sd.kicker} delay={2}>
              {kicker}
            </Kicker>
          </div>
          <div
            style={{
              fontFamily: FONTS.display,
              fontWeight: 800,
              fontSize: sd.size === "large" ? 72 : sd.size === "compact" ? 52 : 62,
              color: palette.ink,
              marginTop: 16,
            }}
          >
            <FadeUp delay={8}>
              {applyCase(headline, design)}{" "}
              <span style={{ color: palette.accent, fontStyle: "italic" }}>
                {applyCase(headlineAccent, design)}
              </span>
            </FadeUp>
          </div>
        </div>

        <div style={{ display: "flex", gap: 22 }}>
          {services.map((s, i) => {
            const f = pop(frame, 30, 14 + i * 7);
            const lift = Math.sin(frame / 30 * 1.2 + i * 2) * 4;
            return (
              <div
                key={s.title}
                style={{
                  width: 380,
                  height: 430,
                  borderRadius: 26,
                  overflow: "hidden",
                  position: "relative",
                  background: palette.card,
                  border: `1px solid ${palette.line}`,
                  boxShadow: `0 26px 54px ${palette.shadow}`,
                  opacity: f,
                  transform: `translateY(${(1 - f) * 60 + lift}px) scale(${0.92 + f * 0.08})`,
                }}
              >
                <Img
                  src={staticFile(`images/${s.image || "house1.jpg"}`)}
                  style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", filter: "saturate(0.95) contrast(1.02)" }}
                />
                <div
                  style={{
                    position: "absolute",
                    inset: 0,
                    background:
                      "linear-gradient(180deg, rgba(255,253,248,0.06) 0%, rgba(36,26,15,0.28) 50%, rgba(36,26,15,0.82) 100%)",
                  }}
                />
                <div
                  style={{
                    position: "absolute",
                    left: 24,
                    top: 22,
                    width: 54,
                    height: 54,
                    borderRadius: 16,
                    background: palette.accent,
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                    fontSize: 26,
                    boxShadow: `0 10px 28px ${palette.accent}73`,
                  }}
                >
                  {s.icon || "✦"}
                </div>
                <div style={{ position: "absolute", left: 24, right: 24, bottom: 24 }}>
                  <div
                    style={{
                      fontFamily: FONTS.display,
                      fontWeight: 800,
                      fontSize: 34,
                      color: "#ffffff",
                    }}
                  >
                    {s.title}
                  </div>
                  <div
                    style={{
                      width: 46,
                      height: 4,
                      borderRadius: 2,
                      background: palette.accentSoft,
                      marginTop: 8,
                    }}
                  />
                  <div
                    style={{
                      fontFamily: FONTS.sans,
                      fontSize: 16,
                      color: "rgba(255,253,248,0.85)",
                      marginTop: 8,
                      lineHeight: 1.5,
                    }}
                  >
                    {s.sub}
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </AbsoluteFill>
    </SceneShell>
  );
};

/** "stack" media treatment — a staggered 2×2 grid of compact cards. */
const ServicesSceneStack: React.FC<{ index?: number }> = ({ index = 0 }) => {
  const frame = useCurrentFrame();
  const { design, palette, sd, kicker, headline, headlineAccent, services } =
    useServicesScene(index);

  return (
    <SceneShell motion={sd.motion}>
      <AbsoluteFill style={{ justifyContent: "center", alignItems: "center", padding: "0 150px" }}>
        <div style={{ textAlign: "center", marginBottom: 40 }}>
          <div style={{ display: "flex", justifyContent: "center" }}>
            <Kicker center variant={sd.kicker} delay={2}>
              {kicker}
            </Kicker>
          </div>
          <div
            style={{
              fontFamily: FONTS.display,
              fontWeight: 800,
              fontSize: 58,
              color: palette.ink,
              marginTop: 14,
            }}
          >
            <FadeUp delay={8}>
              {applyCase(headline, design)}{" "}
              <span style={{ color: palette.accent, fontStyle: "italic" }}>
                {applyCase(headlineAccent, design)}
              </span>
            </FadeUp>
          </div>
        </div>
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "1fr 1fr",
            gap: "26px 30px",
          }}
        >
          {services.slice(0, 4).map((s, i) => {
            const f = pop(frame, 30, 14 + i * 7);
            const stagger = i % 2 === 1 ? 34 : 0;
            return (
              <div
                key={s.title}
                style={{
                  width: 700,
                  display: "flex",
                  gap: 20,
                  alignItems: "center",
                  background: palette.card,
                  border: `1px solid ${palette.line}`,
                  borderRadius: 20,
                  padding: "18px 24px",
                  boxShadow: `0 22px 46px ${palette.shadow}`,
                  opacity: f,
                  transform: `translateY(${(1 - f) * 46}px) translateX(${stagger}px)`,
                }}
              >
                <Img
                  src={staticFile(`images/${s.image || "house1.jpg"}`)}
                  style={{
                    width: 110,
                    height: 110,
                    borderRadius: 16,
                    objectFit: "cover",
                    filter: "sepia(0.15) saturate(1.05)",
                    flexShrink: 0,
                  }}
                />
                <div style={{ flex: 1 }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                    <span
                      style={{
                        width: 44,
                        height: 44,
                        borderRadius: 12,
                        background: palette.accent,
                        display: "inline-flex",
                        alignItems: "center",
                        justifyContent: "center",
                        fontSize: 22,
                        boxShadow: `0 8px 20px ${palette.accent}66`,
                      }}
                    >
                      {s.icon || "✦"}
                    </span>
                    <span
                      style={{
                        fontFamily: FONTS.display,
                        fontWeight: 800,
                        fontSize: 28,
                        color: palette.ink,
                      }}
                    >
                      {s.title}
                    </span>
                  </div>
                  <div
                    style={{
                      fontFamily: FONTS.sans,
                      fontSize: 17,
                      color: palette.textDim,
                      marginTop: 8,
                      lineHeight: 1.5,
                    }}
                  >
                    {s.sub}
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </AbsoluteFill>
    </SceneShell>
  );
};

/** "filmstrip" media treatment — edge-to-edge photo band with caption plates. */
const ServicesSceneFilmstrip: React.FC<{ index?: number }> = ({ index = 0 }) => {
  const frame = useCurrentFrame();
  const { script, design, palette, sd, kicker, headline, headlineAccent, services } =
    useServicesScene(index);

  return (
    <SceneShell motion={sd.motion}>
      <AbsoluteFill style={{ flexDirection: "column", justifyContent: "flex-end" }}>
        {/* copy plate */}
        <div style={{ textAlign: "center", padding: "80px 120px 0" }}>
          <div style={{ display: "flex", justifyContent: "center" }}>
            <Kicker center variant={sd.kicker} delay={2}>
              {kicker}
            </Kicker>
          </div>
          <div
            style={{
              fontFamily: FONTS.display,
              fontWeight: 800,
              fontSize: 60,
              color: palette.ink,
              marginTop: 16,
            }}
          >
            <FadeUp delay={8}>
              {applyCase(headline, design)}{" "}
              <span style={{ color: palette.accent, fontStyle: "italic" }}>
                {applyCase(headlineAccent, design)}
              </span>
            </FadeUp>
          </div>
        </div>
        {/* edge-to-edge band */}
        <div
          style={{
            display: "flex",
            gap: 8,
            marginTop: 48,
            paddingBottom: 96,
            width: "110%",
            marginLeft: "-5%",
          }}
        >
          {services.slice(0, 4).map((s, i) => {
            const f = pop(frame, 30, 12 + i * 8);
            return (
              <div key={s.title} style={{ flex: 1, opacity: f, transform: `translateY(${(1 - f) * 60}px)` }}>
                <div style={{ position: "relative", height: 470 }}>
                  <Img
                    src={staticFile(`images/${s.image || "house1.jpg"}`)}
                    style={{
                      position: "absolute",
                      inset: 0,
                      width: "100%",
                      height: "100%",
                      objectFit: "cover",
                      filter: "sepia(0.12) contrast(1.02)",
                    }}
                  />
                  <div
                    style={{
                      position: "absolute",
                      inset: 0,
                      background:
                        "linear-gradient(180deg, rgba(36,26,15,0.05) 30%, rgba(36,26,15,0.85) 100%)",
                    }}
                  />
                  <div style={{ position: "absolute", left: 24, top: 20, fontSize: 34 }}>
                    {s.icon || "✦"}
                  </div>
                  <div style={{ position: "absolute", left: 24, right: 24, bottom: 22 }}>
                    <div
                      style={{
                        fontFamily: FONTS.display,
                        fontWeight: 800,
                        fontSize: 30,
                        color: "#ffffff",
                      }}
                    >
                      {s.title}
                    </div>
                    <div
                      style={{
                        width: 40,
                        height: 4,
                        borderRadius: 2,
                        background: palette.accentSoft,
                        marginTop: 8,
                      }}
                    />
                    <div
                      style={{
                        fontFamily: FONTS.sans,
                        fontSize: 15,
                        color: "rgba(255,253,248,0.85)",
                        marginTop: 8,
                        lineHeight: 1.45,
                      }}
                    >
                      {s.sub}
                    </div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
        {/* band footer */}
        <div
          style={{
            position: "absolute",
            bottom: 40,
            left: 0,
            right: 0,
            textAlign: "center",
            fontFamily: FONTS.sans,
            fontSize: 16,
            letterSpacing: 6,
            fontWeight: 800,
            color: palette.textDim,
            textTransform: "uppercase",
          }}
        >
          {script?.brand.website ?? "propertyfinder.ke"}
        </div>
      </AbsoluteFill>
    </SceneShell>
  );
};

/**
 * Scripted services scene. The presentation (cards / stack / filmstrip),
 * layout, kicker treatment and entrance motion are directed per scene by
 * the AI via the scene's `design`.
 */
export const ServicesScene: React.FC<{ index?: number }> = ({ index = 0 }) => {
  const { sd } = useServicesScene(index);
  if (sd.media === "stack") return <ServicesSceneStack index={index} />;
  if (sd.media === "filmstrip") return <ServicesSceneFilmstrip index={index} />;
  return <ServicesSceneCards index={index} />;
};