"use client";
import React from "react";
import Image from "next/image";
import { ImageOff, Sparkles } from "lucide-react";
import { cn } from "../lib/utils";

interface SafeImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src'> {
  src?: string;
  alt?: string;
  className?: string;
  imgClassName?: string;
  fallbackText?: string;
}

export default function SafeImage({ 
  src, 
  alt = "تصویر مکمل کانینا", 
  className, 
  imgClassName,
  fallbackText = "در حال بروزرسانی تصویر...", 
  ...props 
}: SafeImageProps) {
  const [error, setError] = React.useState(false);
  const [loading, setLoading] = React.useState(true);

  if (!src || error) {
    return (
      <div className={cn(
        "flex flex-col items-center justify-center bg-white border border-medical-gray-100 p-4 text-center min-h-[120px] rounded-3xl shadow-inner relative overflow-hidden",
        className
      )}>
        {/* Subtle Brand Pattern Background */}
        <div className="absolute inset-0 opacity-[0.03] pointer-events-none">
          <div className="grid grid-cols-6 h-full w-full">
            {Array.from({length: 24}).map((_, i) => (
              <div key={i} className="border border-canina-blue" />
            ))}
          </div>
        </div>
        
        <div className="w-16 h-16 bg-canina-blue rounded-2xl flex items-center justify-center text-white font-black text-3xl mb-4 shadow-xl shadow-canina-blue/20 italic transform -rotate-6">C</div>
        <div className="relative">
          <ImageOff className="w-5 h-5 text-medical-gray-200 mb-2" />
          <Sparkles className="w-3 h-3 text-canina-blue absolute -top-1 -right-1 animate-pulse" />
        </div>
        <span className="text-[9px] font-black text-canina-blue/60 uppercase tracking-[0.2em] font-vazir leading-relaxed">
          {fallbackText}
        </span>
      </div>
    );
  }

  return (
    <div className={cn("relative overflow-hidden group flex items-center justify-center", className)}>
      {loading && (
        <div className="absolute inset-0 bg-medical-gray-50 animate-pulse flex items-center justify-center z-10">
          <Sparkles className="w-6 h-6 text-canina-blue/20" />
        </div>
      )}
      <Image 
        src={src} 
        alt={alt} 
        width={500}
        height={500}
        unoptimized
        className={cn(
          "transition-all duration-700 w-full h-full",
          imgClassName,
          loading ? "opacity-0 scale-110" : "opacity-100 scale-100"
        )} 
        onLoad={() => setLoading(false)}
        onError={() => setError(true)}
      />
    </div>
  );
}