/**
 * Professional placeholder for blog post cards when no cover image is available.
 * Generates visually appealing gradients based on the post's category/tag.
 */

interface BlogPlaceholderProps {
  title: string;
  tag?: string;
  size?: "sm" | "md" | "lg";
  className?: string;
}

// Category-based gradient mappings for professional look
const categoryGradients: Record<
  string,
  { from: string; to: string; icon: string }
> = {
  healthcare: { from: "#10B981", to: "#059669", icon: "🏥" },
  ai: { from: "#6366F1", to: "#4F46E5", icon: "🤖" },
  "no-shows": { from: "#F59E0B", to: "#D97706", icon: "📅" },
  "digital transformation": { from: "#3B82F6", to: "#2563EB", icon: "🚀" },
  "scheduling software": { from: "#8B5CF6", to: "#7C3AED", icon: "⚙️" },
  whatsapp: { from: "#25D366", to: "#128C7E", icon: "💬" },
  appointments: { from: "#EC4899", to: "#DB2777", icon: "📋" },
  automation: { from: "#14B8A6", to: "#0D9488", icon: "⚡" },
  business: { from: "#0EA5E9", to: "#0284C7", icon: "💼" },
  technology: { from: "#6366F1", to: "#4F46E5", icon: "💻" },
  default: { from: "#10B981", to: "#047857", icon: "📝" },
};

// Generate a consistent hash from a string for visual variety
function hashString(str: string): number {
  let hash = 0;
  for (let i = 0; i < str.length; i++) {
    const char = str.charCodeAt(i);
    hash = (hash << 5) - hash + char;
    hash = hash & hash;
  }
  return Math.abs(hash);
}

// Get gradient based on tag or generate from title
function getGradient(
  tag?: string,
  title?: string,
): { from: string; to: string; icon: string } {
  if (tag) {
    const normalizedTag = tag.toLowerCase();
    if (categoryGradients[normalizedTag]) {
      return categoryGradients[normalizedTag];
    }
    // Check for partial matches
    for (const [key, value] of Object.entries(categoryGradients)) {
      if (normalizedTag.includes(key) || key.includes(normalizedTag)) {
        return value;
      }
    }
  }

  // Generate from title hash for variety
  if (title) {
    const hash = hashString(title);
    const keys = Object.keys(categoryGradients).filter((k) => k !== "default");
    const index = hash % keys.length;
    return categoryGradients[keys[index]];
  }

  return categoryGradients.default;
}

export default function BlogPlaceholder({
  title,
  tag,
  size = "md",
  className = "",
}: BlogPlaceholderProps) {
  const gradient = getGradient(tag, title);
  const firstLetter = title?.charAt(0).toUpperCase() || "M";

  // Size-based styling
  const sizeClasses = {
    sm: "text-3xl",
    md: "text-5xl",
    lg: "text-7xl",
  };

  return (
    <div
      className={`absolute inset-0 flex items-center justify-center overflow-hidden ${className}`}
      style={{
        background: `linear-gradient(135deg, ${gradient.from} 0%, ${gradient.to} 100%)`,
      }}
    >
      {/* Decorative pattern overlay */}
      <div
        className="absolute inset-0 opacity-10"
        style={{
          backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
        }}
      />

      {/* Radial gradient overlay for depth */}
      <div
        className="absolute inset-0"
        style={{
          background:
            "radial-gradient(circle at 30% 30%, rgba(255,255,255,0.15) 0%, transparent 60%)",
        }}
      />

      {/* Content */}
      <div className="relative z-10 flex flex-col items-center justify-center text-white/90">
        {/* Category icon */}
        <span
          className={`${sizeClasses[size]} mb-2 opacity-80`}
          role="img"
          aria-hidden="true"
        >
          {gradient.icon}
        </span>

        {/* First letter of title */}
        <span
          className="font-bold tracking-tight opacity-40"
          style={{
            fontSize:
              size === "lg" ? "6rem" : size === "md" ? "4rem" : "2.5rem",
          }}
        >
          {firstLetter}
        </span>
      </div>

      {/* Bottom gradient fade for text overlay */}
      <div className="absolute bottom-0 left-0 right-0 h-1/3 bg-gradient-to-t from-black/20 to-transparent" />
    </div>
  );
}