'use client'

import React from 'react'
import { cn } from '@/lib/utils'

/**
 * Iframe Component for MDX Documentation
 * 
 * Embed external content like videos, demos, or interactive widgets.
 */

interface IframeProps {
  src: string
  title?: string
  width?: string | number
  height?: string | number
  aspectRatio?: '16/9' | '4/3' | '1/1' | '9/16' | string
  allowFullScreen?: boolean
  allow?: string
  className?: string
  frameBorder?: string | number
}

export function Iframe({
  src,
  title = 'Embedded content',
  width,
  height,
  aspectRatio,
  allowFullScreen = true,
  allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture',
  className,
  frameBorder = 0,
}: IframeProps) {
  // Determine sizing approach
  const hasFixedSize = width || height
  const useAspectRatio = aspectRatio && !hasFixedSize

  // Convert numeric values to pixels
  const getSize = (value: string | number | undefined) => {
    if (value === undefined) return undefined
    if (typeof value === 'number') return `${value}px`
    return value
  }

  const containerStyle: React.CSSProperties = useAspectRatio
    ? { aspectRatio }
    : {}

  const iframeStyle: React.CSSProperties = {
    width: getSize(width) || (useAspectRatio ? '100%' : undefined),
    height: getSize(height) || (useAspectRatio ? '100%' : undefined),
  }

  return (
    <div
      className={cn(
        'docs-iframe my-4 overflow-hidden rounded-lg border border-border',
        useAspectRatio && 'w-full',
        className
      )}
      style={containerStyle}
    >
      <iframe
        src={src}
        title={title}
        style={iframeStyle}
        frameBorder={frameBorder}
        allowFullScreen={allowFullScreen}
        allow={allow}
        className={cn(
          'docs-iframe-content',
          useAspectRatio && 'w-full h-full'
        )}
      />
    </div>
  )
}

// Video embed component - convenience wrapper for common video platforms
interface VideoProps {
  src: string
  title?: string
  aspectRatio?: '16/9' | '4/3'
  className?: string
}

export function Video({ src, title = 'Video', aspectRatio = '16/9', className }: VideoProps) {
  // Convert YouTube watch URLs to embed URLs
  let embedSrc = src
  if (src.includes('youtube.com/watch')) {
    const videoId = new URL(src).searchParams.get('v')
    if (videoId) {
      embedSrc = `https://www.youtube.com/embed/${videoId}`
    }
  } else if (src.includes('youtu.be/')) {
    const videoId = src.split('youtu.be/')[1]?.split('?')[0]
    if (videoId) {
      embedSrc = `https://www.youtube.com/embed/${videoId}`
    }
  } else if (src.includes('vimeo.com/') && !src.includes('player.vimeo.com')) {
    const videoId = src.split('vimeo.com/')[1]?.split('?')[0]
    if (videoId) {
      embedSrc = `https://player.vimeo.com/video/${videoId}`
    }
  }

  return (
    <Iframe
      src={embedSrc}
      title={title}
      aspectRatio={aspectRatio}
      className={cn('docs-video', className)}
    />
  )
}

// Loom embed component
interface LoomProps {
  id: string
  title?: string
  className?: string
}

export function Loom({ id, title = 'Loom video', className }: LoomProps) {
  return (
    <Iframe
      src={`https://www.loom.com/embed/${id}`}
      title={title}
      aspectRatio="16/9"
      className={cn('docs-loom', className)}
    />
  )
}
