'use client'

import * as React from 'react'
import { cn } from '@/lib/utils'
import { ProfileShape, getClipPathCSS, getSVGClipPath } from '@/lib/profile-shapes'

interface ShapedAvatarProps {
  src?: string
  alt?: string
  fallback?: React.ReactNode
  className?: string
  shape?: ProfileShape
  children?: React.ReactNode
}

// Custom Avatar component that supports clip-path shapes
// Integrates with existing Avatar component patterns but adds shape support
export function ShapedAvatar({ 
  src, 
  alt = "Profile", 
  fallback, 
  className, 
  shape,
  children 
}: ShapedAvatarProps) {
  const clipPathId = React.useId()
  
  // Default to circle if no shape provided
  const currentShape = shape || {
    type: 'predefined' as const,
    name: 'Circle',
    clipPath: {
      type: 'circle' as const,
      value: 'circle(50%)'
    }
  }
  
  const clipPathCSS = getClipPathCSS(currentShape)
  const svgClipPath = getSVGClipPath(currentShape, clipPathId)
  
  // For custom shapes, we need SVG fallback for better browser support
  const needsSVGFallback = currentShape.type === 'custom' && currentShape.clipPath.d
  
  if (needsSVGFallback) {
    return (
      <div className={cn('relative inline-block', className)}>
        <svg 
          className="w-full h-full" 
          viewBox="0 0 1 1"
          preserveAspectRatio="xMidYMid slice"
        >
          <defs>
            <clipPath id={clipPathId} clipPathUnits="objectBoundingBox">
              <path d={currentShape.clipPath.d} />
            </clipPath>
          </defs>
          {src ? (
            <image
              href={src}
              width="1"
              height="1"
              preserveAspectRatio="xMidYMid slice"
              clipPath={`url(#${clipPathId})`}
            />
          ) : (
            <rect 
              width="1" 
              height="1" 
              fill="currentColor"
              className="text-muted-foreground"
              clipPath={`url(#${clipPathId})`}
            />
          )}
        </svg>
        {!src && fallback && (
          <div className="absolute inset-0 flex items-center justify-center">
            {fallback}
          </div>
        )}
        {children}
      </div>
    )
  }
  
  // For predefined shapes, use CSS clip-path (better performance)
  return (
    <div 
      className={cn(
        'relative inline-block overflow-hidden bg-muted',
        className
      )}
      style={{ clipPath: clipPathCSS }}
    >
      {src ? (
        <img 
          src={src} 
          alt={alt}
          className="w-full h-full object-cover"
        />
      ) : (
        <div className="w-full h-full flex items-center justify-center text-muted-foreground">
          {fallback}
        </div>
      )}
      {children}
    </div>
  )
}

// Compatibility wrapper that works like the original Avatar but with shape support
export function ShapedAvatarRoot({ 
  className, 
  shape,
  children, 
  ...props 
}: React.ComponentProps<'div'> & { shape?: ProfileShape }) {
  return (
    <div
      className={cn(
        'relative flex size-8 shrink-0 overflow-hidden',
        // Remove rounded-full when using custom shapes
        !shape || shape.name === 'Circle' ? 'rounded-full' : '',
        className,
      )}
      {...props}
    >
      {children}
    </div>
  )
}

export function ShapedAvatarImage({
  className,
  shape,
  ...props
}: React.ComponentProps<'img'> & { shape?: ProfileShape }) {
  const clipPathCSS = shape ? getClipPathCSS(shape) : undefined
  
  return (
    <img
      className={cn('aspect-square size-full object-cover', className)}
      style={clipPathCSS && shape?.name !== 'Circle' ? { clipPath: clipPathCSS } : undefined}
      {...props}
    />
  )
}

export function ShapedAvatarFallback({
  className,
  shape,
  ...props
}: React.ComponentProps<'div'> & { shape?: ProfileShape }) {
  const clipPathCSS = shape ? getClipPathCSS(shape) : undefined
  
  return (
    <div
      className={cn(
        'bg-muted flex size-full items-center justify-center',
        // Remove rounded-full when using custom shapes  
        !shape || shape.name === 'Circle' ? 'rounded-full' : '',
        className,
      )}
      style={clipPathCSS && shape?.name !== 'Circle' ? { clipPath: clipPathCSS } : undefined}
      {...props}
    />
  )
}