import { placeholderSrc } from "@/lib/placeholder";

export const FILTER_TABS = [
  "All",
  "Videos",
  "Images",
  "Social Media",
  "Business",
] as const;

export type FilterTab = (typeof FILTER_TABS)[number];

export type TemplateCategory = Exclude<FilterTab, "All">;

export interface TemplateItem {
  id: string;
  name: string;
  category: TemplateCategory;
  /** Mixkit CDN clip for hover preview on landing gallery cards */
  previewVideoUrl?: string;
  /** Cover image — overrides the picsum fallback when set (e.g. from admin API) */
  imageSrc?: string;
}

const MIXKIT = {
  sunsetPlateaus:
    "https://assets.mixkit.co/videos/preview/mixkit-set-of-plateaus-seen-from-the-heights-in-a-sunset-26070-large.mp4",
  cloudsRunner:
    "https://assets.mixkit.co/videos/preview/mixkit-woman-running-above-the-clouds-34096-large.mp4",
  cityTraffic:
    "https://assets.mixkit.co/videos/preview/mixkit-aerial-view-of-city-traffic-at-night-11-large.mp4",
  meadow:
    "https://assets.mixkit.co/videos/preview/mixkit-countryside-meadow-4075-large.mp4",
  skyscrapers:
    "https://assets.mixkit.co/videos/preview/mixkit-young-woman-walking-among-the-skyscrapers-42300-large.mp4",
} as const;

export const TEMPLATES: TemplateItem[] = [
  {
    id: "promo-reel",
    name: "Promo Reel",
    category: "Videos",
    previewVideoUrl: MIXKIT.cityTraffic,
  },
  {
    id: "product-launch",
    name: "Product Launch",
    category: "Videos",
    previewVideoUrl: MIXKIT.cloudsRunner,
  },
  {
    id: "brand-story",
    name: "Brand Story",
    category: "Videos",
    previewVideoUrl: MIXKIT.sunsetPlateaus,
  },
  { id: "hero-banner", name: "Hero Banner", category: "Images" },
  { id: "catalog-spread", name: "Catalog Spread", category: "Images" },
  {
    id: "instagram-carousel",
    name: "Instagram Carousel",
    category: "Social Media",
    previewVideoUrl: MIXKIT.meadow,
  },
  {
    id: "tiktok-hook",
    name: "TikTok Hook",
    category: "Social Media",
    previewVideoUrl: MIXKIT.skyscrapers,
  },
  { id: "pitch-deck", name: "Pitch Deck", category: "Business" },
];

export function filterTemplates(
  tab: FilterTab,
  items: TemplateItem[] = TEMPLATES
): TemplateItem[] {
  if (tab === "All") return items;
  return items.filter((template) => template.category === tab);
}

export function getTemplateImageSrc(id: string): string {
  return placeholderSrc(id, 400, 300);
}

/** Video presets for /studio/video/new onboarding */
export interface TemplateGalleryItem {
  id: string;
  name: string;
  imageSrc: string;
  /** Mixkit CDN clip for muted hover preview */
  previewVideoUrl?: string;
}

export const TEMPLATE_GALLERY_ITEMS: TemplateGalleryItem[] = [
  {
    id: "promo-reel",
    name: "Animated Inspirational Video",
    imageSrc: placeholderSrc("promo-reel", 400, 280),
    previewVideoUrl: MIXKIT.sunsetPlateaus,
  },
  {
    id: "product-launch",
    name: "Cybersecurity Company Promo",
    imageSrc: placeholderSrc("product-launch", 400, 280),
    previewVideoUrl: MIXKIT.cityTraffic,
  },
  {
    id: "brand-story",
    name: "Get to Know Your Customers Day",
    imageSrc: placeholderSrc("brand-story", 400, 280),
    previewVideoUrl: MIXKIT.cloudsRunner,
  },
  {
    id: "instagram-carousel",
    name: "SEO Agency Introduction",
    imageSrc: placeholderSrc("instagram", 400, 280),
    previewVideoUrl: MIXKIT.meadow,
  },
  {
    id: "tiktok-hook",
    name: "Tech Startup Promo",
    imageSrc: placeholderSrc("tiktok", 400, 280),
    previewVideoUrl: MIXKIT.skyscrapers,
  },
  {
    id: "pitch-deck",
    name: "Corporate Explainer",
    imageSrc: placeholderSrc("pitch-deck", 400, 280),
    previewVideoUrl: MIXKIT.cityTraffic,
  },
  {
    id: "hero-promo",
    name: "Hero Product Launch",
    imageSrc: placeholderSrc("hero-promo", 400, 280),
    previewVideoUrl: MIXKIT.sunsetPlateaus,
  },
  {
    id: "event-recap",
    name: "Event Recap Highlight",
    imageSrc: placeholderSrc("event-recap", 400, 280),
    previewVideoUrl: MIXKIT.meadow,
  },
];
