/** A layer definition without an `id` — fresh ids are assigned when the template is applied. */
export interface SceneTemplateLayer {
  type: "text" | "image" | "video" | "shape" | "draw";
  name?: string;
  visible?: boolean;
  x: number;
  y: number;
  width: number;
  height: number;
  rotation: number;
  opacity: number;
  zIndex: number;
  props: Record<string, unknown>;
}

export const SCENE_BROWSER_CATEGORIES = [
  { id: "all", label: "All Scenes" },
  { id: "characters", label: "Characters" },
  { id: "business", label: "Business" },
  { id: "technology", label: "Technology" },
  { id: "nature", label: "Nature" },
  { id: "abstract", label: "Abstract" },
  { id: "sports", label: "Sports" },
  { id: "food", label: "Food" },
] as const;

export type SceneBrowserCategoryId =
  (typeof SCENE_BROWSER_CATEGORIES)[number]["id"];

export type SceneBrowserContentCategory = Exclude<
  SceneBrowserCategoryId,
  "all"
>;

export type SceneBrowserMediaFilter = "all" | "video" | "photo";

export interface BrowserSceneItem {
  id: string;
  name: string;
  category: SceneBrowserContentCategory;
  mediaType: "video" | "photo";
  characterCount: number;
  durationLabel: string;
  gradientFrom: string;
  gradientTo: string;
  /** Pre-built layers that populate the scene when selected. */
  templateLayers: SceneTemplateLayer[];
}

// ---------------------------------------------------------------------------
// Layout helpers — canvas is 1280 × 720
// ---------------------------------------------------------------------------

/** Two-column layout: solid colour left, image placeholder right. */
function splitLayout(
  bg: string,
  titleColor = "#FFFFFF",
  subtitleColor = "#94a3b8"
): SceneTemplateLayer[] {
  return [
    {
      type: "shape",
      x: 0,
      y: 0,
      width: 1280,
      height: 720,
      rotation: 0,
      opacity: 1,
      zIndex: 0,
      props: { shape: "rect", fill: bg, stroke: bg, strokeWidth: 0, cornerRadius: 0 },
    },
    {
      type: "image",
      x: 660,
      y: 60,
      width: 540,
      height: 600,
      rotation: 0,
      opacity: 1,
      zIndex: 1,
      props: { src: "", cornerRadius: 12 },
    },
    {
      type: "text",
      x: 80,
      y: 230,
      width: 530,
      height: 120,
      rotation: 0,
      opacity: 1,
      zIndex: 2,
      props: {
        text: "Your Main Title",
        fontSize: 60,
        fill: titleColor,
        fontFamily: "Inter, sans-serif",
        align: "left",
        letterSpacing: 0,
        lineHeight: 1.2,
        animation: "none",
      },
    },
    {
      type: "text",
      x: 80,
      y: 380,
      width: 530,
      height: 80,
      rotation: 0,
      opacity: 1,
      zIndex: 3,
      props: {
        text: "Your Subtitle Here",
        fontSize: 36,
        fill: subtitleColor,
        fontFamily: "Inter, sans-serif",
        align: "left",
        letterSpacing: 0,
        lineHeight: 1.2,
        animation: "none",
      },
    },
  ];
}

/** Centred title + subtitle, no image placeholder. */
function centeredLayout(
  bg: string,
  titleColor = "#FFFFFF",
  subtitleColor = "#94a3b8"
): SceneTemplateLayer[] {
  return [
    {
      type: "shape",
      x: 0,
      y: 0,
      width: 1280,
      height: 720,
      rotation: 0,
      opacity: 1,
      zIndex: 0,
      props: { shape: "rect", fill: bg, stroke: bg, strokeWidth: 0, cornerRadius: 0 },
    },
    {
      type: "text",
      x: 80,
      y: 265,
      width: 1120,
      height: 135,
      rotation: 0,
      opacity: 1,
      zIndex: 1,
      props: {
        text: "Your Main Title",
        fontSize: 72,
        fill: titleColor,
        fontFamily: "Inter, sans-serif",
        align: "center",
        letterSpacing: 0,
        lineHeight: 1.2,
        animation: "none",
      },
    },
    {
      type: "text",
      x: 80,
      y: 430,
      width: 1120,
      height: 80,
      rotation: 0,
      opacity: 1,
      zIndex: 2,
      props: {
        text: "Your Subtitle Here",
        fontSize: 40,
        fill: subtitleColor,
        fontFamily: "Inter, sans-serif",
        align: "center",
        letterSpacing: 0,
        lineHeight: 1.2,
        animation: "none",
      },
    },
  ];
}

/** Full-bleed image background with a dark overlay + centred text on top. */
function overlayLayout(
  bg: string,
  titleColor = "#FFFFFF",
  subtitleColor = "#e2e8f0"
): SceneTemplateLayer[] {
  return [
    {
      type: "shape",
      x: 0,
      y: 0,
      width: 1280,
      height: 720,
      rotation: 0,
      opacity: 1,
      zIndex: 0,
      props: { shape: "rect", fill: bg, stroke: bg, strokeWidth: 0, cornerRadius: 0 },
    },
    {
      type: "image",
      x: 0,
      y: 0,
      width: 1280,
      height: 720,
      rotation: 0,
      opacity: 1,
      zIndex: 1,
      props: { src: "", cornerRadius: 0 },
    },
    {
      type: "shape",
      x: 0,
      y: 0,
      width: 1280,
      height: 720,
      rotation: 0,
      opacity: 0.55,
      zIndex: 2,
      props: { shape: "rect", fill: "#000000", stroke: "#000000", strokeWidth: 0, cornerRadius: 0 },
    },
    {
      type: "text",
      x: 80,
      y: 265,
      width: 1120,
      height: 135,
      rotation: 0,
      opacity: 1,
      zIndex: 3,
      props: {
        text: "Your Main Title",
        fontSize: 72,
        fill: titleColor,
        fontFamily: "Inter, sans-serif",
        align: "center",
        letterSpacing: 0,
        lineHeight: 1.2,
        animation: "none",
      },
    },
    {
      type: "text",
      x: 80,
      y: 430,
      width: 1120,
      height: 80,
      rotation: 0,
      opacity: 1,
      zIndex: 4,
      props: {
        text: "Your Subtitle Here",
        fontSize: 40,
        fill: subtitleColor,
        fontFamily: "Inter, sans-serif",
        align: "center",
        letterSpacing: 0,
        lineHeight: 1.2,
        animation: "none",
      },
    },
  ];
}

// ---------------------------------------------------------------------------
// Scene catalog
// ---------------------------------------------------------------------------

export const BROWSER_SCENES: BrowserSceneItem[] = [
  // ── Characters ────────────────────────────────────────────────────────────
  {
    id: "man-waving",
    name: "Man waving hello",
    category: "characters",
    mediaType: "video",
    characterCount: 1,
    durationLabel: "3-10 sec.",
    gradientFrom: "from-sky-200",
    gradientTo: "to-blue-300",
    templateLayers: splitLayout("#0c1a3d"),
  },
  {
    id: "woman-presenting",
    name: "Woman presenting",
    category: "characters",
    mediaType: "video",
    characterCount: 1,
    durationLabel: "3-10 sec.",
    gradientFrom: "from-violet-200",
    gradientTo: "to-purple-300",
    templateLayers: splitLayout("#1a0a2e"),
  },
  {
    id: "friendly-greeting",
    name: "Friendly office greeting",
    category: "characters",
    mediaType: "photo",
    characterCount: 2,
    durationLabel: "3-10 sec.",
    gradientFrom: "from-rose-200",
    gradientTo: "to-pink-300",
    templateLayers: splitLayout("#2d0a14"),
  },
  {
    id: "customer-support",
    name: "Customer support agent",
    category: "characters",
    mediaType: "video",
    characterCount: 1,
    durationLabel: "3-10 sec.",
    gradientFrom: "from-cyan-200",
    gradientTo: "to-teal-300",
    templateLayers: splitLayout("#071a1a"),
  },

  // ── Business ──────────────────────────────────────────────────────────────
  {
    id: "team-meeting",
    name: "Team meeting",
    category: "business",
    mediaType: "video",
    characterCount: 4,
    durationLabel: "3-10 sec.",
    gradientFrom: "from-blue-200",
    gradientTo: "to-indigo-300",
    templateLayers: splitLayout("#0a1a3d"),
  },
  {
    id: "handshake-deal",
    name: "Handshake closing deal",
    category: "business",
    mediaType: "photo",
    characterCount: 2,
    durationLabel: "3-10 sec.",
    gradientFrom: "from-slate-200",
    gradientTo: "to-gray-300",
    templateLayers: splitLayout("#0f172a"),
  },
  {
    id: "startup-pitch",
    name: "Startup pitch deck",
    category: "business",
    mediaType: "video",
    characterCount: 1,
    durationLabel: "3-10 sec.",
    gradientFrom: "from-indigo-200",
    gradientTo: "to-violet-300",
    templateLayers: centeredLayout("#0f0f2e"),
  },
  {
    id: "office-collaboration",
    name: "Office collaboration",
    category: "business",
    mediaType: "video",
    characterCount: 3,
    durationLabel: "3-10 sec.",
    gradientFrom: "from-blue-200",
    gradientTo: "to-sky-300",
    templateLayers: splitLayout("#0a1428"),
  },

  // ── Technology ────────────────────────────────────────────────────────────
  {
    id: "city-skyline",
    name: "City skyline",
    category: "technology",
    mediaType: "video",
    characterCount: 0,
    durationLabel: "3-10 sec.",
    gradientFrom: "from-indigo-200",
    gradientTo: "to-blue-400",
    templateLayers: overlayLayout("#0a0f2e"),
  },
  {
    id: "tech-network",
    name: "Tech network",
    category: "technology",
    mediaType: "video",
    characterCount: 0,
    durationLabel: "3-10 sec.",
    gradientFrom: "from-cyan-200",
    gradientTo: "to-indigo-300",
    templateLayers: centeredLayout("#071a1a"),
  },
  {
    id: "coding-desk",
    name: "Developer at desk",
    category: "technology",
    mediaType: "photo",
    characterCount: 1,
    durationLabel: "3-10 sec.",
    gradientFrom: "from-emerald-200",
    gradientTo: "to-teal-300",
    templateLayers: splitLayout("#071c14"),
  },
  {
    id: "data-visualization",
    name: "Data visualization",
    category: "technology",
    mediaType: "video",
    characterCount: 0,
    durationLabel: "3-10 sec.",
    gradientFrom: "from-violet-200",
    gradientTo: "to-fuchsia-300",
    templateLayers: centeredLayout("#1a0a2e"),
  },

  // ── Nature ────────────────────────────────────────────────────────────────
  {
    id: "forest-path",
    name: "Forest morning path",
    category: "nature",
    mediaType: "video",
    characterCount: 0,
    durationLabel: "3-10 sec.",
    gradientFrom: "from-green-200",
    gradientTo: "to-emerald-300",
    templateLayers: overlayLayout("#071c0f"),
  },
  {
    id: "ocean-sunset",
    name: "Ocean sunset",
    category: "nature",
    mediaType: "video",
    characterCount: 0,
    durationLabel: "3-10 sec.",
    gradientFrom: "from-amber-200",
    gradientTo: "to-orange-300",
    templateLayers: overlayLayout("#1c0f07"),
  },
  {
    id: "mountain-aerial",
    name: "Mountain aerial",
    category: "nature",
    mediaType: "photo",
    characterCount: 0,
    durationLabel: "3-10 sec.",
    gradientFrom: "from-sky-200",
    gradientTo: "to-blue-300",
    templateLayers: overlayLayout("#0c1a2e"),
  },
  {
    id: "wildlife-meadow",
    name: "Wildlife meadow",
    category: "nature",
    mediaType: "video",
    characterCount: 0,
    durationLabel: "3-10 sec.",
    gradientFrom: "from-lime-200",
    gradientTo: "to-green-300",
    templateLayers: overlayLayout("#0a1c07"),
  },

  // ── Abstract ──────────────────────────────────────────────────────────────
  {
    id: "abstract-waves",
    name: "Abstract waves",
    category: "abstract",
    mediaType: "video",
    characterCount: 0,
    durationLabel: "3-10 sec.",
    gradientFrom: "from-fuchsia-200",
    gradientTo: "to-purple-300",
    templateLayers: centeredLayout("#1a0a2e"),
  },
  {
    id: "gradient-flow",
    name: "Gradient flow",
    category: "abstract",
    mediaType: "video",
    characterCount: 0,
    durationLabel: "3-10 sec.",
    gradientFrom: "from-pink-200",
    gradientTo: "to-rose-300",
    templateLayers: centeredLayout("#1c0a14"),
  },
  {
    id: "geometric-shapes",
    name: "Geometric shapes",
    category: "abstract",
    mediaType: "photo",
    characterCount: 0,
    durationLabel: "3-10 sec.",
    gradientFrom: "from-indigo-200",
    gradientTo: "to-violet-300",
    templateLayers: centeredLayout("#0f0a2e"),
  },
  {
    id: "particle-burst",
    name: "Particle burst",
    category: "abstract",
    mediaType: "video",
    characterCount: 0,
    durationLabel: "3-10 sec.",
    gradientFrom: "from-blue-200",
    gradientTo: "to-cyan-300",
    templateLayers: centeredLayout("#071628"),
  },

  // ── Sports ────────────────────────────────────────────────────────────────
  {
    id: "sports-celebration",
    name: "Sports celebration",
    category: "sports",
    mediaType: "video",
    characterCount: 3,
    durationLabel: "3-10 sec.",
    gradientFrom: "from-orange-200",
    gradientTo: "to-red-300",
    templateLayers: splitLayout("#1c0f07"),
  },
  {
    id: "soccer-goal",
    name: "Soccer goal moment",
    category: "sports",
    mediaType: "video",
    characterCount: 2,
    durationLabel: "3-10 sec.",
    gradientFrom: "from-green-200",
    gradientTo: "to-lime-300",
    templateLayers: splitLayout("#0a1c07"),
  },
  {
    id: "gym-workout",
    name: "Gym workout",
    category: "sports",
    mediaType: "photo",
    characterCount: 1,
    durationLabel: "3-10 sec.",
    gradientFrom: "from-amber-200",
    gradientTo: "to-yellow-300",
    templateLayers: splitLayout("#1c1007"),
  },
  {
    id: "running-track",
    name: "Running on track",
    category: "sports",
    mediaType: "video",
    characterCount: 1,
    durationLabel: "3-10 sec.",
    gradientFrom: "from-sky-200",
    gradientTo: "to-indigo-300",
    templateLayers: splitLayout("#0a1428"),
  },

  // ── Food ──────────────────────────────────────────────────────────────────
  {
    id: "food-preparation",
    name: "Food preparation",
    category: "food",
    mediaType: "video",
    characterCount: 1,
    durationLabel: "3-10 sec.",
    gradientFrom: "from-amber-200",
    gradientTo: "to-orange-300",
    templateLayers: splitLayout("#1c0f07"),
  },
  {
    id: "restaurant-plating",
    name: "Restaurant plating",
    category: "food",
    mediaType: "photo",
    characterCount: 0,
    durationLabel: "3-10 sec.",
    gradientFrom: "from-rose-200",
    gradientTo: "to-red-300",
    templateLayers: overlayLayout("#1c0a0f"),
  },
  {
    id: "coffee-pour",
    name: "Coffee pour slow-mo",
    category: "food",
    mediaType: "video",
    characterCount: 0,
    durationLabel: "3-10 sec.",
    gradientFrom: "from-yellow-200",
    gradientTo: "to-amber-300",
    templateLayers: overlayLayout("#0f0a07"),
  },
  {
    id: "fresh-ingredients",
    name: "Fresh ingredients",
    category: "food",
    mediaType: "photo",
    characterCount: 0,
    durationLabel: "3-10 sec.",
    gradientFrom: "from-lime-200",
    gradientTo: "to-green-300",
    templateLayers: overlayLayout("#0a1c07"),
  },
];

export function filterBrowserScenes(
  scenes: BrowserSceneItem[],
  options: {
    categoryId: SceneBrowserCategoryId;
    mediaFilter: SceneBrowserMediaFilter;
    search: string;
  }
): BrowserSceneItem[] {
  const query = options.search.trim().toLowerCase();

  return scenes.filter((scene) => {
    if (options.categoryId !== "all" && scene.category !== options.categoryId) {
      return false;
    }
    if (
      options.mediaFilter !== "all" &&
      scene.mediaType !== options.mediaFilter
    ) {
      return false;
    }
    if (query && !scene.name.toLowerCase().includes(query)) {
      return false;
    }
    return true;
  });
}
