import { ExpressTemplate } from '../types';

/**
 * EXPRESS_TEMPLATES — Scene-based storyboard templates.
 * Each template is a sequence of scenes that the user fills in.
 * Brand fields like {brandName} auto-resolve from DesignMD.
 */
export const EXPRESS_TEMPLATES: ExpressTemplate[] = [
  // ═══ SOCIAL — Reel Promocional ═══
  {
    id: 'social-reel-promo',
    name: 'Reel Promocional',
    description: 'Video vertical: intro de marca → producto → CTA → outro',
    category: 'social',
    icon: '📱',
    aspectRatio: '9:16',
    format: 'video',
    usesBrandAudio: true,
    scenes: [
      {
        id: 'scene-intro',
        type: 'intro',
        name: 'Introducción',
        durationSeconds: 3,
        layout: 'fullscreen-media',
        background: { type: 'brand' },
        transition: { type: 'fade', duration: 10 },
        editableFields: [
          {
            id: 'brand-logo',
            type: 'logo',
            label: 'Logo de marca',
            placeholder: '',
            required: false,
            brandSource: 'logo',
            position: { x: 50, y: 45, w: 30, h: 20 },
            style: { opacity: 100 },
          },
          {
            id: 'brand-name',
            type: 'text',
            label: 'Nombre de marca',
            placeholder: '{brandName}',
            required: false,
            brandSource: 'brand-name',
            position: { x: 50, y: 70, w: 80, h: 10 },
            style: { fontSize: 32, fontWeight: 700, textAlign: 'center' },
          },
        ],
      },
      {
        id: 'scene-product',
        type: 'content',
        name: 'Producto',
        durationSeconds: 5,
        layout: 'overlay',
        transition: { type: 'slideUp', duration: 12 },
        editableFields: [
          {
            id: 'product-media',
            type: 'media',
            label: 'Foto o Video del producto',
            placeholder: 'Arrastra tu imagen aquí',
            required: true,
            position: { x: 50, y: 50, w: 100, h: 100 },
            style: { opacity: 100 },
          },
          {
            id: 'product-title',
            type: 'text',
            label: 'Título del producto',
            placeholder: '¡Descubre lo nuevo!',
            required: true,
            position: { x: 50, y: 25, w: 80, h: 15 },
            style: { fontSize: 42, fontWeight: 800, textAlign: 'center' },
          },
          {
            id: 'product-desc',
            type: 'text',
            label: 'Descripción',
            placeholder: 'Tu mensaje aquí',
            required: false,
            position: { x: 50, y: 75, w: 80, h: 10 },
            style: { fontSize: 18, fontWeight: 400, textAlign: 'center', opacity: 80 },
          },
        ],
      },
      {
        id: 'scene-cta',
        type: 'content',
        name: 'Call to Action',
        durationSeconds: 4,
        layout: 'text-only',
        background: { type: 'brand' },
        transition: { type: 'bounce', duration: 15 },
        editableFields: [
          {
            id: 'cta-text',
            type: 'text',
            label: 'Texto CTA',
            placeholder: '¡Compra Ahora!',
            required: true,
            position: { x: 50, y: 40, w: 80, h: 20 },
            style: { fontSize: 36, fontWeight: 700, textAlign: 'center' },
          },
          {
            id: 'cta-link',
            type: 'text',
            label: 'URL o código',
            placeholder: 'www.tumarca.com',
            required: false,
            position: { x: 50, y: 65, w: 60, h: 8 },
            style: { fontSize: 16, fontWeight: 400, textAlign: 'center', opacity: 70 },
          },
        ],
      },
      {
        id: 'scene-outro',
        type: 'outro',
        name: 'Cierre',
        durationSeconds: 3,
        layout: 'fullscreen-media',
        background: { type: 'brand' },
        transition: { type: 'fade', duration: 15 },
        editableFields: [
          {
            id: 'outro-logo',
            type: 'logo',
            label: 'Logo',
            placeholder: '',
            required: false,
            brandSource: 'logo',
            position: { x: 50, y: 40, w: 25, h: 15 },
            style: { opacity: 100 },
          },
          {
            id: 'outro-tagline',
            type: 'text',
            label: 'Tagline',
            placeholder: '{tagline}',
            required: false,
            brandSource: 'tagline',
            position: { x: 50, y: 65, w: 70, h: 10 },
            style: { fontSize: 20, fontWeight: 400, textAlign: 'center', opacity: 80 },
          },
        ],
      },
    ],
  },

  // ═══ SOCIAL — Story Anuncio ═══
  {
    id: 'social-story-announce',
    name: 'Story Anuncio',
    description: 'Story vertical rápido: gancho → visual → swipe up',
    category: 'social',
    icon: '📢',
    aspectRatio: '9:16',
    format: 'video',
    usesBrandAudio: true,
    scenes: [
      {
        id: 'scene-hook',
        type: 'content',
        name: 'Gancho',
        durationSeconds: 3,
        layout: 'text-only',
        background: { type: 'brand' },
        transition: { type: 'bounce', duration: 10 },
        editableFields: [
          {
            id: 'hook-text',
            type: 'text',
            label: 'Texto gancho',
            placeholder: '¡NUEVO!',
            required: true,
            position: { x: 50, y: 45, w: 80, h: 25 },
            style: { fontSize: 56, fontWeight: 800, textAlign: 'center' },
          },
        ],
      },
      {
        id: 'scene-visual',
        type: 'content',
        name: 'Visual',
        durationSeconds: 5,
        layout: 'fullscreen-media',
        transition: { type: 'scale', duration: 12 },
        editableFields: [
          {
            id: 'visual-media',
            type: 'media',
            label: 'Imagen del producto',
            placeholder: 'Foto del producto',
            required: true,
            position: { x: 50, y: 50, w: 100, h: 100 },
            style: { opacity: 100 },
          },
          {
            id: 'visual-label',
            type: 'text',
            label: 'Etiqueta',
            placeholder: '-30% OFF',
            required: false,
            position: { x: 50, y: 20, w: 50, h: 10 },
            style: { fontSize: 24, fontWeight: 700, textAlign: 'center' },
          },
        ],
      },
      {
        id: 'scene-swipe',
        type: 'content',
        name: 'Swipe Up',
        durationSeconds: 2,
        layout: 'text-only',
        background: { type: 'brand' },
        transition: { type: 'slideUp', duration: 8 },
        editableFields: [
          {
            id: 'swipe-text',
            type: 'text',
            label: 'CTA',
            placeholder: 'Desliza para más →',
            required: false,
            position: { x: 50, y: 80, w: 70, h: 10 },
            style: { fontSize: 18, fontWeight: 400, textAlign: 'center', opacity: 80 },
          },
        ],
      },
    ],
  },

  // ═══ SOCIAL — Post Cuadrado (Imagen) ═══
  {
    id: 'social-post-square',
    name: 'Post Cuadrado',
    description: 'Imagen cuadrada para Instagram/Facebook',
    category: 'social',
    icon: '🖼️',
    aspectRatio: '1:1',
    format: 'image',
    usesBrandAudio: false,
    scenes: [
      {
        id: 'scene-main',
        type: 'content',
        name: 'Contenido',
        durationSeconds: 1,
        layout: 'overlay',
        editableFields: [
          {
            id: 'bg-media',
            type: 'media',
            label: 'Imagen de fondo',
            placeholder: 'Foto o gráfico',
            required: false,
            position: { x: 50, y: 50, w: 100, h: 100 },
            style: { opacity: 100 },
          },
          {
            id: 'title',
            type: 'text',
            label: 'Título',
            placeholder: 'Tu mensaje principal',
            required: true,
            position: { x: 50, y: 35, w: 80, h: 15 },
            style: { fontSize: 38, fontWeight: 800, textAlign: 'center' },
          },
          {
            id: 'subtitle',
            type: 'text',
            label: 'Subtítulo',
            placeholder: 'Detalle adicional',
            required: false,
            position: { x: 50, y: 65, w: 70, h: 10 },
            style: { fontSize: 18, fontWeight: 400, textAlign: 'center', opacity: 85 },
          },
          {
            id: 'logo',
            type: 'logo',
            label: 'Logo',
            placeholder: '',
            required: false,
            brandSource: 'logo',
            position: { x: 85, y: 90, w: 12, h: 8 },
            style: { opacity: 80 },
          },
        ],
      },
    ],
  },

  // ═══ AD — Video 15s ═══
  {
    id: 'ad-video-15',
    name: 'Video Ad 15s',
    description: 'Intro marca → Gancho → Producto → CTA → Outro',
    category: 'ad',
    icon: '🎯',
    aspectRatio: '9:16',
    format: 'video',
    usesBrandAudio: true,
    scenes: [
      {
        id: 'scene-hook',
        type: 'content',
        name: 'Gancho',
        durationSeconds: 3,
        layout: 'text-only',
        background: { type: 'brand' },
        transition: { type: 'slideUp', duration: 10 },
        editableFields: [
          {
            id: 'hook',
            type: 'text',
            label: 'Gancho',
            placeholder: '¿Sabías que...?',
            required: true,
            position: { x: 50, y: 45, w: 80, h: 20 },
            style: { fontSize: 40, fontWeight: 800, textAlign: 'center' },
          },
        ],
      },
      {
        id: 'scene-demo',
        type: 'content',
        name: 'Demostración',
        durationSeconds: 5,
        layout: 'overlay',
        transition: { type: 'fade', duration: 12 },
        editableFields: [
          {
            id: 'demo-media',
            type: 'media',
            label: 'Visual principal',
            placeholder: 'Producto o escena',
            required: true,
            position: { x: 50, y: 50, w: 100, h: 100 },
            style: { opacity: 100 },
          },
          {
            id: 'demo-benefit',
            type: 'text',
            label: 'Beneficio',
            placeholder: 'Ahorra hasta 50%',
            required: false,
            position: { x: 50, y: 78, w: 80, h: 10 },
            style: { fontSize: 22, fontWeight: 600, textAlign: 'center' },
          },
        ],
      },
      {
        id: 'scene-cta',
        type: 'content',
        name: 'CTA',
        durationSeconds: 4,
        layout: 'text-only',
        background: { type: 'brand' },
        transition: { type: 'bounce', duration: 15 },
        editableFields: [
          {
            id: 'cta',
            type: 'text',
            label: 'Call to Action',
            placeholder: 'Comprar Ahora',
            required: true,
            position: { x: 50, y: 45, w: 80, h: 15 },
            style: { fontSize: 32, fontWeight: 700, textAlign: 'center' },
          },
        ],
      },
    ],
  },

  // ═══ PROMO — Lanzamiento ═══
  {
    id: 'promo-launch',
    name: 'Lanzamiento',
    description: 'Intro → Reveal → Features → CTA → Outro',
    category: 'promo',
    icon: '🚀',
    aspectRatio: '9:16',
    format: 'video',
    usesBrandAudio: true,
    scenes: [
      {
        id: 'scene-reveal',
        type: 'content',
        name: 'Reveal',
        durationSeconds: 5,
        layout: 'overlay',
        transition: { type: 'scale', duration: 15 },
        editableFields: [
          {
            id: 'product-media',
            type: 'media',
            label: 'Hero shot',
            placeholder: 'Foto del producto',
            required: true,
            position: { x: 50, y: 50, w: 100, h: 100 },
            style: { opacity: 100 },
          },
          {
            id: 'product-name',
            type: 'text',
            label: 'Nombre del producto',
            placeholder: 'Producto XYZ',
            required: true,
            position: { x: 50, y: 22, w: 80, h: 12 },
            style: { fontSize: 40, fontWeight: 800, textAlign: 'center' },
          },
        ],
      },
      {
        id: 'scene-features',
        type: 'content',
        name: 'Características',
        durationSeconds: 5,
        layout: 'split',
        background: { type: 'brand' },
        transition: { type: 'slideUp', duration: 12 },
        editableFields: [
          {
            id: 'feature-media',
            type: 'media',
            label: 'Imagen de detalle',
            placeholder: 'Close-up o diagrama',
            required: false,
            position: { x: 50, y: 30, w: 60, h: 35 },
            style: { opacity: 100 },
          },
          {
            id: 'feature-text',
            type: 'text',
            label: 'Características',
            placeholder: 'El futuro empieza hoy',
            required: true,
            position: { x: 50, y: 75, w: 80, h: 15 },
            style: { fontSize: 22, fontWeight: 400, textAlign: 'center', opacity: 85 },
          },
        ],
      },
      {
        id: 'scene-cta',
        type: 'content',
        name: 'Disponibilidad',
        durationSeconds: 4,
        layout: 'text-only',
        background: { type: 'brand' },
        transition: { type: 'bounce', duration: 15 },
        editableFields: [
          {
            id: 'cta',
            type: 'text',
            label: 'CTA',
            placeholder: 'Disponible ahora',
            required: true,
            position: { x: 50, y: 50, w: 80, h: 15 },
            style: { fontSize: 28, fontWeight: 700, textAlign: 'center' },
          },
        ],
      },
    ],
  },

  // ═══ STORY — Testimonio ═══
  {
    id: 'story-testimonial',
    name: 'Testimonio',
    description: 'Avatar → Cita → Nombre del cliente',
    category: 'story',
    icon: '💬',
    aspectRatio: '9:16',
    format: 'video',
    usesBrandAudio: false,
    scenes: [
      {
        id: 'scene-quote',
        type: 'content',
        name: 'Testimonio',
        durationSeconds: 8,
        layout: 'overlay',
        background: { type: 'brand' },
        transition: { type: 'fade', duration: 15 },
        editableFields: [
          {
            id: 'avatar',
            type: 'media',
            label: 'Foto del cliente',
            placeholder: 'Avatar o foto',
            required: false,
            position: { x: 50, y: 28, w: 25, h: 18 },
            style: { opacity: 100 },
          },
          {
            id: 'quote',
            type: 'text',
            label: 'Testimonio',
            placeholder: '"Este producto cambió mi vida"',
            required: true,
            position: { x: 50, y: 55, w: 80, h: 20 },
            style: { fontSize: 22, fontWeight: 400, textAlign: 'center', opacity: 90 },
          },
          {
            id: 'client-name',
            type: 'text',
            label: 'Nombre del cliente',
            placeholder: '— María García',
            required: false,
            position: { x: 50, y: 78, w: 60, h: 8 },
            style: { fontSize: 16, fontWeight: 600, textAlign: 'center', opacity: 70 },
          },
        ],
      },
    ],
  },
];
