// File: src/components/UIX/CollectionIcon/CollectionIcon.jsx
// Component for rendering collection icons (emoji, predefined icon, or default folder)
import React from "react";
import { FolderIcon, PhotoIcon } from "@heroicons/react/24/outline";
import { ICON_MAP } from "../IconPicker/IconPicker";

// Size configurations for different use cases
const SIZES = {
  xs: { icon: "h-4 w-4", emoji: "text-sm", container: "h-4 w-4" },
  sm: { icon: "h-5 w-5", emoji: "text-base", container: "h-5 w-5" },
  md: { icon: "h-6 w-6", emoji: "text-xl", container: "h-6 w-6" },
  lg: { icon: "h-8 w-8", emoji: "text-2xl", container: "h-8 w-8" },
  xl: { icon: "h-10 w-10", emoji: "text-3xl", container: "h-10 w-10" },
  "2xl": { icon: "h-12 w-12", emoji: "text-4xl", container: "h-12 w-12" },
};

/**
 * CollectionIcon renders the appropriate icon for a collection
 *
 * @param {string} customIcon - The custom icon value (emoji, "icon:id", or empty for default)
 * @param {string} collectionType - "folder" or "album" (determines default icon)
 * @param {string} size - Size variant: "xs", "sm", "md", "lg", "xl", "2xl"
 * @param {string} className - Additional CSS classes
 * @param {string} iconClassName - CSS classes specifically for the icon element
 */
const CollectionIcon = ({
  customIcon = "",
  collectionType = "folder",
  size = "md",
  className = "",
  iconClassName = "",
}) => {
  const sizeConfig = SIZES[size] || SIZES.md;

  // No custom icon - show default folder or album icon
  if (!customIcon || customIcon === "") {
    const DefaultIcon = collectionType === "album" ? PhotoIcon : FolderIcon;
    return (
      <DefaultIcon
        className={`${sizeConfig.icon} ${iconClassName} ${className}`}
      />
    );
  }

  // Predefined icon (format: "icon:identifier")
  if (customIcon.startsWith("icon:")) {
    const iconId = customIcon.replace("icon:", "");
    const IconComponent = ICON_MAP[iconId];

    if (IconComponent) {
      return (
        <IconComponent
          className={`${sizeConfig.icon} ${iconClassName} ${className}`}
        />
      );
    }

    // Fallback to default if icon ID not found
    const DefaultIcon = collectionType === "album" ? PhotoIcon : FolderIcon;
    return (
      <DefaultIcon
        className={`${sizeConfig.icon} ${iconClassName} ${className}`}
      />
    );
  }

  // Emoji character
  return (
    <span
      className={`${sizeConfig.emoji} leading-none ${className}`}
      role="img"
      aria-label="collection icon"
    >
      {customIcon}
    </span>
  );
};

/**
 * CollectionIconPreview renders the icon in a styled container (for edit forms)
 */
export const CollectionIconPreview = ({
  customIcon = "",
  collectionType = "folder",
  size = "xl",
  className = "",
}) => {
  const hasCustomIcon = customIcon && customIcon !== "";

  return (
    <div
      className={`flex items-center justify-center rounded-xl ${
        hasCustomIcon
          ? "bg-gray-100"
          : collectionType === "album"
          ? "bg-pink-100 text-pink-600"
          : "bg-blue-100 text-blue-600"
      } ${className}`}
      style={{
        width: size === "xl" ? "4rem" : size === "2xl" ? "5rem" : "3rem",
        height: size === "xl" ? "4rem" : size === "2xl" ? "5rem" : "3rem",
      }}
    >
      <CollectionIcon
        customIcon={customIcon}
        collectionType={collectionType}
        size={size}
        iconClassName={
          hasCustomIcon
            ? "text-gray-700"
            : collectionType === "album"
            ? "text-pink-600"
            : "text-blue-600"
        }
      />
    </div>
  );
};

export default CollectionIcon;
