// Authoritative slide template catalog — sourced from the deployed gnommoplayer vendor bundle.
//
// Do NOT add template definitions here. The player bundle is the single source of truth.
// To add or modify a template, edit packages/slide-contracts/src/metadata.ts in gnommoplayer,
// then run:  npm run deploy:editor  (from the gnommoplayer directory)
//
// What each export is for:
//   SLIDE_TEMPLATES      availability list — one entry per (template × displayMode), use for template picker UI
//   getTemplate(key)     look up one template's definition (label, displayMode, fields)
//   SLIDE_TEMPLATE_DRAFTS[key]  default props when creating a new slide of that type

import {
  slideTemplateAvailabilityList,
  slideTemplateDefinitions,
  slideTemplateDrafts,
} from '../vendor/gnommoplayer/gnommoplayer.js';

// Each entry has { componentKey, label, description, displayMode, fields }.
// Templates with multiple supported display modes (e.g. EquationFocus) appear once per mode.
export const SLIDE_TEMPLATES = slideTemplateAvailabilityList;

export const SLIDE_TEMPLATE_DRAFTS = slideTemplateDrafts;

export function getTemplate(componentKey) {
  return slideTemplateDefinitions[componentKey] ?? null;
}

// Rich placeholder content for each template.
// Used for: (1) thumbnail previews in the template picker, (2) initial props on new slide creation.
// The header/eyebrow field is intentionally left empty — it gets filled from user input.
export const SLIDE_TEMPLATE_RICH_DEFAULTS = {
  SquareYellow: {
    header: '', imageSrc: '', imageAlt: '',
  },
  FullscreenSplit: {
    header: '', eyebrow: '', title: 'Section Title',
    body: 'Supporting explanation text goes here.',
    imageSrc: '', imageAlt: '', imagePosition: 'left',
  },
  EquationFocus: {
    header: '', eyebrow: '', title: "Euler's Formula",
    latexString: 'e^{i\\pi} + 1 = 0',
    annotation: "Where e is Euler's number, i is the imaginary unit, and π is pi.",
  },
  QuoteImage: {
    eyebrow: '', quote: 'A meaningful quote that illustrates the concept at hand.',
    attribution: '— Author Name', imageSrc: '', imageAlt: '', imagePosition: 'left',
  },
  ChartSingle: {
    header: '', eyebrow: '', title: 'Key Metrics',
    body: 'Overview of the most important data points.',
    points: ['Category A: 42', 'Category B: 28', 'Category C: 15', 'Category D: 10'],
  },
  ProcessFlow: {
    eyebrow: '', title: 'How It Works',
    steps: ['Step 1: Begin the process', 'Step 2: Apply the method', 'Step 3: Achieve the result'],
  },
  DefinitionCard: {
    header: '', term: 'Key Term',
    definition: 'A clear and concise explanation of what this term means in context.',
    example: 'For example: this concept applies when…',
  },
  GlitchComponentFrame: {
    header: '', componentId: 'demo', componentUrl: '', caption: 'Interactive component',
  },
  SquareVideo: {
    header: '', videoSrc: '', posterSrc: '',
  },
  FullscreenVideo: {
    header: '', videoSrc: '', posterSrc: '', caption: '',
  },
  FullscreenVideoTitle: {
    title: '', videoSrc: '', posterSrc: '',
  },
  FullscreenVideoCenterCaption: {
    caption: '', videoSrc: '', posterSrc: '',
  },
};
