import * as React from 'react'
import { useMemo } from 'react'
import Box from '@mui/material/Box'
import type { SxProps, Theme } from '@mui/material/styles'

const DEFAULT_WIDTHS = [320, 640, 1024, 1600]

type OptimizedImageProps = {
  src: string
  alt: string
  widths?: number[]
  sizes?: string
  sx?: SxProps<Theme>
  priority?: boolean
}

/** Extract UUID and subdir from a /uploads/... URL */
function parseUploadUrl(src: string): { uuid: string; ext: string; subdir: string } | null {
  const match = src.match(/^\/uploads(?:\/(reviews))?\/([^.\\/]+)\.(png|jpe?g|webp)/i)
  if (!match) return null
  return { subdir: match[1] || '', uuid: match[2], ext: match[3].toLowerCase() }
}

function buildSrcSet(src: string, widths: number[]): string | null {
  const parsed = parseUploadUrl(src)
  if (!parsed) return null

  const pathPrefix = parsed.subdir ? `${parsed.subdir}/` : ''
  return widths.map((w) => `/uploads-resized/${pathPrefix}${parsed.uuid}.avif?w=${w} ${w}w`).join(', ')
}

function buildFallbackSrc(src: string, width: number): string {
  const parsed = parseUploadUrl(src)
  if (!parsed) return src
  const pathPrefix = parsed.subdir ? `${parsed.subdir}/` : ''
  return `/uploads-resized/${pathPrefix}${parsed.uuid}.webp?w=${width}`
}

export const OptimizedImage = React.memo(function OptimizedImage({
  src,
  alt,
  widths = DEFAULT_WIDTHS,
  sizes,
  sx,
  priority = false,
}: OptimizedImageProps) {
  const srcSet = useMemo(() => buildSrcSet(src, widths), [src, widths])
  const fallbackSrc = useMemo(() => buildFallbackSrc(src, widths[0]), [src, widths])

  // If src is not an upload URL, render a plain img
  if (!srcSet) {
    return (
      <Box
        component="img"
        src={src}
        alt={alt}
        loading={priority ? 'eager' : 'lazy'}
        fetchPriority={priority ? 'high' : undefined}
        decoding="async"
        sx={sx}
      />
    )
  }

  const sizesAttr = sizes ?? '(max-width: 600px) 320px, (max-width: 1024px) 640px, 1024px'

  return (
    <Box component="picture" sx={{ display: 'block', lineHeight: 0, ...sx }}>
      <Box component="source" type="image/avif" srcSet={srcSet} sizes={sizesAttr} />
      <Box component="source" type="image/webp" srcSet={fallbackSrc} sizes={sizesAttr} />
      <Box
        component="img"
        src={fallbackSrc}
        alt={alt}
        loading={priority ? 'eager' : 'lazy'}
        fetchPriority={priority ? 'high' : undefined}
        decoding="async"
        sx={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
      />
    </Box>
  )
})