import type { CSSProperties } from "react";
import { cn } from "@/lib/utils";

export type ReferenceIconName =
  | "home"
  | "folder"
  | "skill"
  | "brand"
  | "plus"
  | "model-auto"
  | "arrow-up"
  | "commerce"
  | "social"
  | "branding"
  | "creativity"
  | "website"
  | "connections"
  | "clipper"
  | "cursor"
  | "pan"
  | "text"
  | "sparkles"
  | "style-controls"
  | "image-enhance"
  | "tutorial"
  | "video"
  | "toolbox"
  | "settings"
  | "profile"
  | "comment"
  | "draw"
  | "image"
  | "layers"
  | "history"
  | "expand"
  | "collapse"
  | "reference"
  | "skill-filled"
  | "brand-filled"
  | "pinterest"
  | "close"
  | "reference-image"
  | "chevron-down"
  | "points"
  | "page"
  | "model-banana"
  | "model-gpt"
  | "model-seedream"
  | "model-luma"
  | "model-flux"
  | "model-midjourney"
  | "model-ideogram"
  | "model-recraft"
  | "image-local-edit"
  | "image-layout-replace"
  | "image-mark"
  | "image-upscale"
  | "image-remove-background"
  | "image-erase"
  | "image-extract-layer"
  | "image-edit-text"
  | "image-angle"
  | "image-motion"
  | "image-more"
  | "image-download"
  | "image-move-object"
  | "image-mockup"
  | "image-outpaint"
  | "image-adjust"
  | "image-crop"
  | "image-vector"
  | "image-flip-rotate"
  | "toolbar-pin-outline"
  | "toolbar-pin-filled"
  | "toolbar-reset"
  | "toolbar-close";

type ReferenceIconProps = {
  name: ReferenceIconName;
  size?: number;
  className?: string;
  style?: CSSProperties;
};

export function ReferenceIcon({
  name,
  size = 18,
  className,
  style,
}: ReferenceIconProps) {
  const source = `url("/icons/lovart/${name}.svg")`;
  return (
    <span
      aria-hidden="true"
      data-reference-icon={name}
      className={cn("inline-block shrink-0 align-middle", className)}
      style={{
        width: size,
        height: size,
        backgroundColor: "currentColor",
        WebkitMaskImage: source,
        maskImage: source,
        WebkitMaskRepeat: "no-repeat",
        maskRepeat: "no-repeat",
        WebkitMaskPosition: "center",
        maskPosition: "center",
        WebkitMaskSize: "contain",
        maskSize: "contain",
        ...style,
      }}
    />
  );
}

export function getReferenceModelIcon(name: string): ReferenceIconName | null {
  if (/nano[\s-]*banana|gemini|imagen/i.test(name)) return "model-banana";
  if (/gpt|openai|dall[\s-]*e/i.test(name)) return "model-gpt";
  if (/seedream|doubao/i.test(name)) return "model-seedream";
  if (/flux/i.test(name)) return "model-flux";
  if (/luma|uni[\s-]*1/i.test(name)) return "model-luma";
  if (/midjourney/i.test(name)) return "model-midjourney";
  if (/ideogram|p[\s-]*image/i.test(name)) return "model-ideogram";
  if (/recraft/i.test(name)) return "model-recraft";
  return null;
}