import {
  LEGACY_BOTTOM_BEZEL,
  LEGACY_FRAME_RADIUS,
  LEGACY_HOME_BUTTON_RING,
  LEGACY_HOME_BUTTON_SIZE,
  LEGACY_SIDE_BEZEL,
  LEGACY_TOP_BEZEL,
  SIDE_BUTTON_RESERVE,
} from 'sootsim-engine/ios/chrome-metrics'
import {
  housingLayerHtml,
  resolveHousingArt,
  type HousingLayer,
} from 'sootsim-engine/ios/duo-housing'
import {
  cornerRadii,
  formatCornerRadii,
  getDevice,
  resolveDeviceFrameGeometry,
  type CornerRadii,
  type DeviceModel,
} from 'sootsim-engine/settings'
import { launchReapedChrome } from '../../../../scripts/lib/reap-browser'

const METALLIC_RING_SHADOW =
  'inset 0 0 0 0.5px #000, inset 0 0 0 2px #757575, inset 0 0 0 5px #212121'
const FRAME_OUTLINE_BLEED = 1

type FrameButtonLayout = {
  side: 'left' | 'right'
  top: number
  height: number
  width: number
}

type LegacyHomeButtonLayout = {
  top: number
  left: number
  size: number
  ring: number
}

export interface FramedScreenshotLayout {
  model: DeviceModel
  renderScale: number
  outerWidth: number
  outerHeight: number
  logicalOuterWidth: number
  logicalOuterHeight: number
  logicalFrameWidth: number
  logicalFrameHeight: number
  logicalFrameLeft: number
  logicalFrameTop: number
  logicalScreenWidth: number
  logicalScreenHeight: number
  logicalScreenLeft: number
  logicalScreenTop: number
  logicalScreenRadius: CornerRadii
  logicalFrameRadius: CornerRadii
  // folding body art, painted before the screen; null draws one black body
  housingLayers: HousingLayer[] | null
  frameBackground: string
  frameOutline: string
  metallicRingShadow: string | null
  buttons: FrameButtonLayout[]
  legacyHomeButton: LegacyHomeButtonLayout | null
  showHomeIndicator: boolean
  logicalHomeIndicatorStripHeight: number
}

// Exact shell device frame layout for still exports.
// Mirrors DeviceFrame's bezel/button geometry while intentionally excluding:
// - the electron simulator top bar
// - the browser rail / gutter
// The screen bitmap itself still comes from the raw bridge screenshot.
export function getFramedScreenshotLayout(model: DeviceModel): FramedScreenshotLayout {
  const spec = getDevice(model)
  const renderScale = spec.scale
  // legacy = home-button iPhone (SE). the canvas workspace also has no island /
  // home indicator / corner radius, but no status bar, so gate on statusBar > 0
  // to keep it out of the SE shell (mirrors DeviceFrame.isLegacyHardware).
  const isLegacyHardware =
    spec.statusBarHeight > 0 &&
    !spec.dynamicIsland &&
    spec.homeIndicatorHeight === 0 &&
    // home-button iphones have a square display, so any corner reads 0
    spec.cornerRadius.topLeft === 0
  const logicalScreenWidth = spec.width
  const logicalScreenHeight = spec.height
  const modernGeometry = resolveDeviceFrameGeometry(spec)
  const housingLayers = isLegacyHardware
    ? null
    : resolveHousingArt(spec.posture ?? 'closed', modernGeometry)
  const logicalFrameWidth = isLegacyHardware
    ? spec.width + LEGACY_SIDE_BEZEL * 2
    : modernGeometry.frameWidth
  const logicalFrameHeight = isLegacyHardware
    ? spec.height + LEGACY_TOP_BEZEL + LEGACY_BOTTOM_BEZEL
    : modernGeometry.frameHeight
  const logicalFrameLeft = SIDE_BUTTON_RESERVE
  const logicalFrameTop = FRAME_OUTLINE_BLEED
  const logicalOuterWidth = logicalFrameWidth + logicalFrameLeft * 2
  const logicalOuterHeight = logicalFrameHeight + FRAME_OUTLINE_BLEED * 2
  const logicalScreenLeft =
    logicalFrameLeft + (isLegacyHardware ? LEGACY_SIDE_BEZEL : modernGeometry.screenLeft)
  const logicalScreenTop = isLegacyHardware ? LEGACY_TOP_BEZEL : modernGeometry.screenTop
  const logicalFrameRadius = isLegacyHardware
    ? cornerRadii(LEGACY_FRAME_RADIUS)
    : modernGeometry.frameRadius
  const buttons: FrameButtonLayout[] = [
    {
      side: spec.hardwareButtons.lock.side,
      top: spec.hardwareButtons.lock.top,
      height: spec.hardwareButtons.lock.height,
      width: spec.hardwareButtons.width,
    },
    {
      side: spec.hardwareButtons.ringToggle.side,
      top: spec.hardwareButtons.ringToggle.top,
      height: spec.hardwareButtons.ringToggle.height,
      width: spec.hardwareButtons.width,
    },
    {
      side: spec.hardwareButtons.volumeUp.side,
      top: spec.hardwareButtons.volumeUp.top,
      height: spec.hardwareButtons.volumeUp.height,
      width: spec.hardwareButtons.width,
    },
    {
      side: spec.hardwareButtons.volumeDown.side,
      top: spec.hardwareButtons.volumeDown.top,
      height: spec.hardwareButtons.volumeDown.height,
      width: spec.hardwareButtons.width,
    },
  ]

  return {
    model,
    renderScale,
    outerWidth: Math.round(logicalOuterWidth * renderScale),
    outerHeight: Math.round(logicalOuterHeight * renderScale),
    logicalOuterWidth,
    logicalOuterHeight,
    logicalFrameWidth,
    logicalFrameHeight,
    logicalFrameLeft,
    logicalFrameTop,
    logicalScreenWidth,
    logicalScreenHeight,
    logicalScreenLeft,
    logicalScreenTop,
    logicalScreenRadius: isLegacyHardware ? cornerRadii(0) : modernGeometry.screenRadius,
    logicalFrameRadius,
    housingLayers,
    // the housing paints its own body layer, shadow included: its frame box is
    // wider than the body, because the hinge barrel protrudes past the spine.
    frameBackground: isLegacyHardware
      ? 'linear-gradient(180deg, #1b1c20 0%, #0f1012 42%, #050608 100%)'
      : housingLayers
        ? 'transparent'
        : '#000000',
    frameOutline: isLegacyHardware
      ? '0 0 0 1px #1f2125'
      : housingLayers
        ? 'none'
        : '0 0 0 1px #333',
    metallicRingShadow: isLegacyHardware || housingLayers ? null : METALLIC_RING_SHADOW,
    buttons,
    legacyHomeButton: isLegacyHardware
      ? {
          top:
            LEGACY_TOP_BEZEL +
            spec.height +
            (LEGACY_BOTTOM_BEZEL - LEGACY_HOME_BUTTON_SIZE) / 2,
          left: spec.width / 2 - LEGACY_HOME_BUTTON_SIZE / 2 + LEGACY_SIDE_BEZEL,
          size: LEGACY_HOME_BUTTON_SIZE,
          ring: LEGACY_HOME_BUTTON_RING,
        }
      : null,
    showHomeIndicator: spec.homeIndicatorHeight > 0,
    logicalHomeIndicatorStripHeight: spec.homeIndicatorHeight,
  }
}

function renderSideButtonHtml(button: FrameButtonLayout): string {
  const isRight = button.side === 'right'
  const clip = isRight ? 'inset(-3px -3px -3px 0)' : 'inset(-3px 0 -3px -3px)'
  return `
      <div
        aria-hidden="true"
        style="
          position:absolute;
          ${isRight ? `right:-${button.width}px;` : `left:-${button.width}px;`}
          top:${button.top}px;
          width:${button.width}px;
          height:${button.height}px;
          background-color:#212121;
          border-top-left-radius:${isRight ? 0 : 1.5}px;
          border-bottom-left-radius:${isRight ? 0 : 1.5}px;
          border-top-right-radius:${isRight ? 1.5 : 0}px;
          border-bottom-right-radius:${isRight ? 1.5 : 0}px;
          box-shadow:
            inset 0 0.5px 0 #616161,
            inset 0 -0.5px 0 #3F3F3F,
            ${isRight ? 'inset -0.5px 0 0 #3F3F3F,' : 'inset 0.5px 0 0 #3F3F3F,'}
            0 0 0 0.5px #676767,
            0 0 0 1.5px #000;
          clip-path:${clip};
          pointer-events:none;
          z-index:2;
        "
      ></div>
    `
}

function renderFrameHtml(
  layout: FramedScreenshotLayout,
  rawImageDataUrl: string,
): string {
  const buttonsHtml = layout.buttons.map(renderSideButtonHtml).join('')

  const ringHtml = layout.metallicRingShadow
    ? `
      <div
        aria-hidden="true"
        style="
          position:absolute;
          inset:0;
          border-radius:${formatCornerRadii(layout.logicalFrameRadius)};
          box-shadow:${layout.metallicRingShadow};
          pointer-events:none;
          z-index:10;
        "
      ></div>
    `
    : ''

  // the folding body's rail, glass ring, corner art, and hinge barrel. no
  // z-index, so the screen div after it paints on top.
  const housingHtml = (layout.housingLayers ?? []).map(housingLayerHtml).join('')

  const legacyHomeButtonHtml = layout.legacyHomeButton
    ? `
      <div
        aria-hidden="true"
        style="
          position:absolute;
          top:${layout.legacyHomeButton.top}px;
          left:${layout.legacyHomeButton.left}px;
          width:${layout.legacyHomeButton.size}px;
          height:${layout.legacyHomeButton.size}px;
          border-radius:50%;
          background:
            radial-gradient(circle at 35% 32%, rgba(62,64,68,0.35) 0%, rgba(17,18,20,0.98) 72%, rgba(8,9,11,1) 100%);
          box-shadow:
            inset 0 0 0 1px rgba(255,255,255,0.06),
            inset 0 0 0 ${layout.legacyHomeButton.ring}px rgba(184,192,204,0.45),
            0 0 0 1px rgba(0,0,0,0.5);
          z-index:3;
          pointer-events:none;
          display:flex;
          align-items:center;
          justify-content:center;
        "
      >
        <div
          style="
            width:16px;
            height:16px;
            border-radius:4px;
            box-shadow:inset 0 0 0 1.5px rgba(188,194,202,0.5);
          "
        ></div>
      </div>
    `
    : ''

  const homeIndicatorHtml = layout.showHomeIndicator
    ? `
      <div
        aria-hidden="true"
        style="
          position:absolute;
          left:0;
          right:0;
          bottom:4px;
          height:${layout.logicalHomeIndicatorStripHeight}px;
          display:flex;
          align-items:center;
          justify-content:center;
          pointer-events:none;
          z-index:10;
        "
      >
        <div
          style="
            width:134px;
            height:5px;
            border-radius:2.5px;
            background-color:rgb(150, 150, 150);
            opacity:0.5;
          "
        ></div>
      </div>
    `
    : ''

  return `<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      html, body {
        margin: 0;
        width: ${layout.outerWidth}px;
        height: ${layout.outerHeight}px;
        background: transparent;
      }
      body {
        overflow: hidden;
      }
      img {
        display: block;
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div
      id="frame-export-root"
      style="
        position:relative;
        width:${layout.outerWidth}px;
        height:${layout.outerHeight}px;
        overflow:hidden;
        background:transparent;
      "
    >
      <div
        id="frame-scale-layer"
        style="
          position:absolute;
          top:0;
          left:0;
          width:${layout.logicalOuterWidth}px;
          height:${layout.logicalOuterHeight}px;
          transform:scale(${layout.renderScale});
          transform-origin:top left;
          overflow:visible;
        "
      >
        <div
          id="frame"
          style="
          position:absolute;
          top:${layout.logicalFrameTop}px;
          left:${layout.logicalFrameLeft}px;
          width:${layout.logicalFrameWidth}px;
          height:${layout.logicalFrameHeight}px;
            border-radius:${layout.housingLayers ? '0' : formatCornerRadii(layout.logicalFrameRadius)};
            box-sizing:border-box;
            overflow:visible;
            background:${layout.frameBackground};
            box-shadow:${layout.frameOutline};
          "
        >
          ${buttonsHtml}
          ${ringHtml}
          ${housingHtml}
          ${legacyHomeButtonHtml}
          <div
            id="screen"
            style="
              position:absolute;
              top:${layout.logicalScreenTop}px;
              left:${layout.logicalScreenLeft - layout.logicalFrameLeft}px;
              width:${layout.logicalScreenWidth}px;
              height:${layout.logicalScreenHeight}px;
              border-radius:${formatCornerRadii(layout.logicalScreenRadius)};
              overflow:hidden;
              background:#000;
            "
          >
            <img src="${rawImageDataUrl}" alt="" />
            ${homeIndicatorHtml}
          </div>
        </div>
      </div>
    </div>
  </body>
</html>`
}

export async function composeFramedScreenshot(
  rawPng: Buffer,
  model: DeviceModel,
): Promise<Buffer> {
  const { chromium } = await import('playwright')
  const browser = await launchReapedChrome((options) => chromium.launch(options), {
    headless: true,
  })
  try {
    const composer = await createFramedScreenshotComposer(browser)
    try {
      return await composer.compose(rawPng, model)
    } finally {
      await composer.close()
    }
  } finally {
    await browser.close()
  }
}

type BrowserLike = {
  newContext: (opts: {
    viewport: { width: number; height: number }
    deviceScaleFactor: number
  }) => Promise<{
    newPage: () => Promise<{
      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 }
        omitBackground: true
      }) => Promise<Buffer>
    }>
    close: () => Promise<void>
  }>
}

type CachedFramePage = {
  layout: FramedScreenshotLayout
  context: Awaited<ReturnType<BrowserLike['newContext']>>
  page: Awaited<ReturnType<Awaited<ReturnType<BrowserLike['newContext']>>['newPage']>>
}

export async function createFramedScreenshotComposer(browser: BrowserLike) {
  const cache = new Map<DeviceModel, CachedFramePage>()

  async function getCachedPage(model: DeviceModel): Promise<CachedFramePage> {
    const existing = cache.get(model)
    if (existing) return existing
    const layout = getFramedScreenshotLayout(model)
    const context = await browser.newContext({
      viewport: { width: layout.outerWidth, height: layout.outerHeight },
      deviceScaleFactor: 1,
    })
    const page = await context.newPage()
    const created = { layout, context, page }
    cache.set(model, created)
    return created
  }

  return {
    async compose(rawPng: Buffer, model: DeviceModel): Promise<Buffer> {
      const cached = await getCachedPage(model)
      const rawImageDataUrl = `data:image/png;base64,${rawPng.toString('base64')}`
      await cached.page.setContent(renderFrameHtml(cached.layout, rawImageDataUrl), {
        waitUntil: 'load',
      })
      await cached.page.waitForTimeout(20)
      return (await cached.page.screenshot({
        type: 'png',
        clip: {
          x: 0,
          y: 0,
          width: cached.layout.outerWidth,
          height: cached.layout.outerHeight,
        },
        omitBackground: true,
      })) as Buffer
    },
    async close(): Promise<void> {
      for (const entry of cache.values()) {
        await entry.context.close()
      }
      cache.clear()
    },
  }
}