import { mkdirSync, readFileSync, writeFileSync } from 'fs'
import path from 'path'
import { launchReapedChrome } from '../../../../scripts/lib/reap-browser'
import {
  DEFAULT_FRAME_SHADOW,
  toAssetKey,
  type BackgroundSpec,
  type CanvasPreset,
  type FrameComposeSpec,
  type PosePresetName,
  type TextPresetName,
} from './registry'
import type { NormalizedComposePlan, NormalizedScreenshotSlide } from './schema'

export interface ComposeSlideSource {
  slide: NormalizedScreenshotSlide
  imagePath: string
}

export interface ComposeManifestEntry {
  slideId: string
  canvas: string
  locale: string
  outputPath: string
  sourcePath: string
}

export interface ComposeResult {
  manifestPath: string
  outputs: string[]
  entries: ComposeManifestEntry[]
}

export type MarketingBrowserLike = {
  newContext: (opts: { viewport: { width: number; height: number } }) => Promise<{
    newPage: () => Promise<{
      setViewportSize: (size: { width: number; height: number }) => Promise<void>
      setContent: (html: string, opts: { waitUntil: 'load' }) => Promise<void>
      waitForTimeout: (ms: number) => Promise<void>
      screenshot: (opts: {
        type: 'png'
        clip: { x: number; y: number; width: number; height: number }
      }) => Promise<Buffer>
      close: () => Promise<void>
    }>
    close: () => Promise<void>
  }>
  close?: () => Promise<void>
}

function escapeHtml(value: string): string {
  return value
    .replaceAll('&', '&amp;')
    .replaceAll('<', '&lt;')
    .replaceAll('>', '&gt;')
    .replaceAll('"', '&quot;')
}

function normalizeHexColor(color: string): string {
  const value = color.trim()
  if (/^#[0-9a-f]{3}$/i.test(value)) {
    return `#${value[1]}${value[1]}${value[2]}${value[2]}${value[3]}${value[3]}`
  }
  return value
}

function toRgba(color: string, alpha: number): string {
  const value = normalizeHexColor(color)
  const clampedAlpha = Math.max(0, Math.min(1, alpha))
  const hexMatch = value.match(/^#([0-9a-f]{6})$/i)
  if (hexMatch) {
    const hex = hexMatch[1]
    const r = Number.parseInt(hex.slice(0, 2), 16)
    const g = Number.parseInt(hex.slice(2, 4), 16)
    const b = Number.parseInt(hex.slice(4, 6), 16)
    return `rgba(${r}, ${g}, ${b}, ${clampedAlpha})`
  }
  if (value.startsWith('rgb(')) {
    return value.replace(/^rgb\((.+)\)$/i, `rgba($1, ${clampedAlpha})`)
  }
  return value
}

function backgroundCss(background: BackgroundSpec): string {
  if (background.type === 'solid') {
    return background.color || '#000000'
  }
  const direction = background.direction ?? 180
  const stops =
    background.stops?.map((stop) => `${stop.color} ${stop.offset}%`).join(', ') ||
    '#000000 0%, #111111 100%'
  return `linear-gradient(${direction}deg, ${stops})`
}

function glowCss(background: BackgroundSpec): string {
  const glow = background.glow
  if (!glow) return 'none'
  return `radial-gradient(circle at 50% 24%, ${toRgba(glow, 0.46)} 0%, ${toRgba(glow, 0.2)} 24%, rgba(0,0,0,0) 62%)`
}

function poseTransform(pose: PosePresetName): string {
  switch (pose) {
    case 'tilted-left':
      return 'perspective(2400px) rotateY(10deg) rotateZ(-2deg)'
    case 'tilted-right':
      return 'perspective(2400px) rotateY(-10deg) rotateZ(2deg)'
    case 'cut-bottom':
      return 'translateY(10%) scale(1.08)'
    case 'cut-top':
      return 'translateY(-16%) scale(1.08)'
    case 'straight':
    default:
      return 'none'
  }
}

function combineTransforms(...parts: string[]): string {
  const active = parts
    .map((part) => part.trim())
    .filter((part) => part.length > 0 && part !== 'none')
  return active.length > 0 ? active.join(' ') : 'none'
}

function shadowFilter(shadow: FrameComposeSpec['shadow']): string {
  const glowColor = toRgba(shadow.color, shadow.opacity)
  const lowerGlow = toRgba(shadow.color, shadow.opacity * 0.52)
  return `drop-shadow(0 34px ${shadow.spread}px ${lowerGlow}) drop-shadow(0 0 ${shadow.blur}px ${glowColor})`
}

function resolveSlideShadow(
  shadow: FrameComposeSpec['shadow'],
  background: BackgroundSpec,
): FrameComposeSpec['shadow'] {
  if (!background.glow) return shadow
  if (shadow.color && shadow.color !== DEFAULT_FRAME_SHADOW.color) return shadow
  return {
    ...shadow,
    color: background.glow,
  }
}

function textLayout(
  preset: TextPresetName,
  canvas: CanvasPreset,
): {
  copyStyle: string
  titleStyle: string
  subStyle: string
  eyebrowStyle: string
  deviceStyle: (
    frame: FrameComposeSpec,
    slide: NormalizedScreenshotSlide,
    background: BackgroundSpec,
  ) => string
} {
  if (preset === 'editorial-left') {
    const headline = Math.round(canvas.height * 0.056)
    const subhead = Math.round(canvas.height * 0.022)
    return {
      copyStyle: [
        'position:absolute',
        `top:${Math.round(canvas.height * 0.12)}px`,
        `left:${Math.round(canvas.width * 0.085)}px`,
        `width:${Math.round(canvas.width * 0.42)}px`,
        'text-align:left',
        'z-index:3',
      ].join(';'),
      titleStyle: `font-size:${headline}px;line-height:0.92;`,
      subStyle: `font-size:${subhead}px;line-height:1.36;max-width:${Math.round(canvas.width * 0.36)}px;`,
      eyebrowStyle: 'align-items:flex-start;',
      deviceStyle: (frame, slide, background) => {
        const width = Math.round(canvas.width * 0.68 * (slide.scale ?? frame.scale))
        const offsetY = Math.round(
          canvas.height * (0.03 + frame.offsetY + (slide.offsetY ?? 0)),
        )
        const pose = slide.pose || frame.pose || 'tilted-right'
        const shadow = resolveSlideShadow(frame.shadow, background)
        return [
          'position:absolute',
          `top:${Math.round(canvas.height * 0.18) + offsetY}px`,
          `left:${Math.round(canvas.width * 0.56)}px`,
          `width:${width}px`,
          'transform-origin:center center',
          `transform:${poseTransform(pose)}`,
          `filter:${shadowFilter(shadow)}`,
          'z-index:2',
        ].join(';')
      },
    }
  }

  if (preset === 'minimal-bottom') {
    const headline = Math.round(canvas.height * 0.041)
    const subhead = Math.round(canvas.height * 0.019)
    return {
      copyStyle: [
        'position:absolute',
        `left:${Math.round(canvas.width * 0.12)}px`,
        `right:${Math.round(canvas.width * 0.12)}px`,
        `bottom:${Math.round(canvas.height * 0.085)}px`,
        'text-align:center',
        'z-index:3',
      ].join(';'),
      titleStyle: `font-size:${headline}px;line-height:0.96;`,
      subStyle: `font-size:${subhead}px;line-height:1.34;max-width:${Math.round(canvas.width * 0.56)}px;margin:0 auto;`,
      eyebrowStyle: 'align-items:center;',
      deviceStyle: (frame, slide, background) => {
        const width = Math.round(canvas.width * 0.84 * (slide.scale ?? frame.scale))
        const offsetY = Math.round(canvas.height * (frame.offsetY + (slide.offsetY ?? 0)))
        const pose = slide.pose || frame.pose
        const shadow = resolveSlideShadow(frame.shadow, background)
        return [
          'position:absolute',
          `top:${Math.round(canvas.height * 0.075) + offsetY}px`,
          'left:50%',
          `width:${width}px`,
          'transform-origin:center center',
          `transform:${combineTransforms('translateX(-50%)', poseTransform(pose))}`,
          `filter:${shadowFilter(shadow)}`,
          'z-index:2',
        ].join(';')
      },
    }
  }

  const headline = Math.round(canvas.height * 0.04)
  const subhead = Math.round(canvas.height * 0.019)
  return {
    copyStyle: [
      'position:absolute',
      `top:${Math.round(canvas.height * 0.084)}px`,
      'left:50%',
      `width:${Math.round(canvas.width * 0.88)}px`,
      'transform:translateX(-50%)',
      'text-align:center',
      'z-index:3',
    ].join(';'),
    titleStyle: `font-size:${headline}px;line-height:0.92;`,
    subStyle: `font-size:${subhead}px;line-height:1.34;max-width:${Math.round(canvas.width * 0.6)}px;margin:0 auto;`,
    eyebrowStyle: 'align-items:center;',
    deviceStyle: (frame, slide, background) => {
      const width = Math.round(canvas.width * 0.64 * (slide.scale ?? frame.scale))
      const offsetY = Math.round(canvas.height * (frame.offsetY + (slide.offsetY ?? 0)))
      const pose = slide.pose || frame.pose
      const shadow = resolveSlideShadow(frame.shadow, background)
      return [
        'position:absolute',
        `top:${Math.round(canvas.height * 0.28) + offsetY}px`,
        'left:50%',
        `width:${width}px`,
        'transform-origin:center top',
        `transform:${combineTransforms('translateX(-50%)', poseTransform(pose))}`,
        `filter:${shadowFilter(shadow)}`,
        'z-index:2',
      ].join(';')
    },
  }
}

function renderSlideHtml({
  canvas,
  compose,
  slide,
  imageDataUrl,
}: {
  canvas: CanvasPreset
  compose: NormalizedComposePlan
  slide: NormalizedScreenshotSlide
  imageDataUrl: string
}): string {
  const background = slide.background ?? compose.background
  const layout = textLayout(compose.text.preset, canvas)
  const copyPresent =
    compose.text.preset !== 'none' &&
    Boolean(slide.eyebrow || slide.headline || slide.subheadline)
  const imageStyle = layout.deviceStyle(compose.frame, slide, background)
  const titleHtml = slide.headline
    ? `<div style="font-weight:780;white-space:pre-line;text-wrap:balance;${layout.titleStyle}">${escapeHtml(slide.headline)}</div>`
    : ''
  const subHtml = slide.subheadline
    ? `<div style="margin-top:${Math.round(canvas.height * 0.018)}px;color:${compose.text.subColor};white-space:pre-line;text-wrap:balance;${layout.subStyle}">${escapeHtml(slide.subheadline)}</div>`
    : ''
  const eyebrowHtml = slide.eyebrow
    ? `<div style="display:flex;${layout.eyebrowStyle}margin-bottom:${Math.round(canvas.height * 0.016)}px;"><div style="font-size:${Math.round(canvas.height * 0.014)}px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:${compose.text.eyebrowColor};">${escapeHtml(slide.eyebrow)}</div></div>`
    : ''

  return `<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      html, body {
        margin: 0;
        width: ${canvas.width}px;
        height: ${canvas.height}px;
        overflow: hidden;
        background: transparent;
      }
      body {
        font-family: "SF Pro Display", "Helvetica Neue", system-ui, sans-serif;
      }
      #canvas {
        position: relative;
        width: ${canvas.width}px;
        height: ${canvas.height}px;
        overflow: hidden;
        background: ${backgroundCss(background)};
        color: ${compose.text.color};
        isolation: isolate;
      }
      #glow {
        position: absolute;
        inset: 0;
        background: ${glowCss(background)};
        pointer-events: none;
      }
      #copy {
        ${layout.copyStyle};
      }
      #device {
        ${imageStyle};
      }
      #device img {
        display: block;
        width: 100%;
        height: auto;
      }
    </style>
  </head>
  <body>
    <div id="canvas">
      <div id="glow"></div>
      ${copyPresent ? `<div id="copy">${eyebrowHtml}${titleHtml}${subHtml}</div>` : ''}
      <div id="device"><img src="${imageDataUrl}" alt="" /></div>
    </div>
  </body>
</html>`
}

export async function composeMarketingScreenshots(
  compose: NormalizedComposePlan,
  slides: ComposeSlideSource[],
  browserOverride?: MarketingBrowserLike,
): Promise<ComposeResult> {
  const entries: ComposeManifestEntry[] = []
  const browser =
    browserOverride ??
    (await (async () => {
      const { chromium } = await import('playwright')
      return launchReapedChrome((options) => chromium.launch(options), {
        headless: true,
      })
    })())
  try {
    const context = await browser.newContext({ viewport: { width: 1280, height: 720 } })
    try {
      for (const slideSource of slides) {
        const buffer = readFileSync(slideSource.imagePath)
        const imageDataUrl = `data:image/png;base64,${buffer.toString('base64')}`
        for (const canvas of compose.canvases) {
          const page = await context.newPage()
          try {
            await page.setViewportSize({ width: canvas.width, height: canvas.height })
            await page.setContent(
              renderSlideHtml({
                canvas,
                compose,
                slide: slideSource.slide,
                imageDataUrl,
              }),
              { waitUntil: 'load' },
            )
            await page.waitForTimeout(20)
            const outputDir = path.join(compose.outDir, canvas.name, compose.locale)
            mkdirSync(outputDir, { recursive: true })
            const outputPath = path.join(outputDir, `${slideSource.slide.assetKey}.png`)
            const png = (await page.screenshot({
              type: 'png',
              clip: { x: 0, y: 0, width: canvas.width, height: canvas.height },
            })) as Buffer
            writeFileSync(outputPath, png)
            entries.push({
              slideId: slideSource.slide.id,
              canvas: canvas.name,
              locale: compose.locale,
              outputPath,
              sourcePath: slideSource.imagePath,
            })
          } finally {
            await page.close()
          }
        }
      }
    } finally {
      await context.close()
    }
  } finally {
    if (!browserOverride && typeof browser.close === 'function') {
      await browser.close()
    }
  }

  mkdirSync(compose.outDir, { recursive: true })
  const manifestPath = path.join(compose.outDir, 'manifest.json')
  writeFileSync(
    manifestPath,
    JSON.stringify(
      {
        generatedAt: new Date().toISOString(),
        locale: compose.locale,
        outputs: entries,
      },
      null,
      2,
    ),
  )
  return {
    manifestPath,
    outputs: entries.map((entry) => entry.outputPath),
    entries,
  }
}