"use client"

import { useLayoutEffect, useRef, useState } from "react"
import { ProductDemoFrame } from "@/components/landing/product/product-demo-frame"
import { ScaledPreviewIframe } from "@/components/landing/product/scaled-preview-iframe"

// Viewport logique réduit : l'explorateur est rendu plus petit puis agrandi
// dans le cadre — zoom ~25 % par rapport à la référence 1440×900.
export const ULTIDRIVE_BROWSER_DEMO_VIEWPORT_WIDTH = 1080
export const ULTIDRIVE_BROWSER_DEMO_VIEWPORT_HEIGHT = 675
export const ULTIDRIVE_BROWSER_DEMO_ASPECT_RATIO =
  ULTIDRIVE_BROWSER_DEMO_VIEWPORT_WIDTH / ULTIDRIVE_BROWSER_DEMO_VIEWPORT_HEIGHT

function isInDemoViewport(node: HTMLElement, margin = 120): boolean {
  const rect = node.getBoundingClientRect()
  return rect.top < window.innerHeight + margin && rect.bottom > -margin
}

export function UltidriveBrowserDemo() {
  const ref = useRef<HTMLDivElement>(null)
  const [visible, setVisible] = useState(false)

  useLayoutEffect(() => {
    const node = ref.current
    if (!node) return

    if (isInDemoViewport(node)) {
      setVisible(true)
      return
    }

    const observer = new IntersectionObserver(
      (entries) => {
        if (entries.some((entry) => entry.isIntersecting)) {
          setVisible(true)
          observer.disconnect()
        }
      },
      { rootMargin: "120px 0px" }
    )
    observer.observe(node)
    return () => observer.disconnect()
  }, [])

  return (
    <div ref={ref}>
      <ProductDemoFrame
        fakeUrl="suite.votre-domaine.fr/drive"
        fullscreenHref="/demo/drive"
        hint="Démo interactive — parcourez, uploadez, prévisualisez. Zéro rétention."
        aspectRatio={ULTIDRIVE_BROWSER_DEMO_ASPECT_RATIO}
      >
        <div className="absolute inset-0 bg-[var(--landing-bg)]">
          <ScaledPreviewIframe
            src="/demo/drive"
            title="Démo explorateur UltiDrive"
            viewportWidth={ULTIDRIVE_BROWSER_DEMO_VIEWPORT_WIDTH}
            viewportHeight={ULTIDRIVE_BROWSER_DEMO_VIEWPORT_HEIGHT}
            fit="cover"
            ready={visible}
          />
        </div>
      </ProductDemoFrame>
    </div>
  )
}