"use client";

import Image from "next/image";
import { useMemo, useState } from "react";
import {
  Baby,
  Coffee,
  Dumbbell,
  Flower2,
  Footprints,
  Gamepad2,
  Gem,
  GraduationCap,
  HeartPulse,
  House,
  PawPrint,
  Settings,
  Shirt,
  ShoppingBasket,
  Smartphone,
  Sofa,
  Sparkles,
  SprayCan,
  Truck,
  User,
  UtensilsCrossed,
  Plane,
} from "lucide-react";
import type { LucideIcon } from "lucide-react";
import { cn } from "@/lib/utils/cn";

type CategoryIconProps = {
  image?: string | null;
  nameAr?: string | null;
  nameEn?: string | null;
  containerClassName?: string;
  imageClassName?: string;
  iconClassName?: string;
  iconSize?: number;
};

const keywordIconMap: Array<{ keywords: string[]; icon: LucideIcon }> = [
  { keywords: ["أزياء", "fashion", "ملابس"], icon: Shirt },
  { keywords: ["مطاعم", "restaurant", "food", "burger"], icon: UtensilsCrossed },
  { keywords: ["إلكترون", "electronics", "tech"], icon: Smartphone },
  { keywords: ["توصيل", "delivery", "shipping"], icon: Truck },
  { keywords: ["جمال", "beauty", "makeup"], icon: Sparkles },
  { keywords: ["أطفال", "babies", "baby", "kids"], icon: Baby },
  { keywords: ["عطور", "perfume", "perfumes", "fragrance"], icon: SprayCan },
  { keywords: ["زهور", "flowers", "flower"], icon: Flower2 },
  { keywords: ["عبا", "abaya"], icon: User },
  { keywords: ["أثاث", "furniture"], icon: Sofa },
  { keywords: ["حيوان", "pet"], icon: PawPrint },
  { keywords: ["أحذية", "shoes"], icon: Footprints },
  { keywords: ["رياض", "sports", "fitness"], icon: Dumbbell },
  { keywords: ["بقال", "grocer", "grocery", "supermarket"], icon: ShoppingBasket },
  { keywords: ["رجال", "men", "man"], icon: User },
  { keywords: ["صحة", "health", "medical"], icon: HeartPulse },
  { keywords: ["منزل", "home"], icon: House },
  { keywords: ["قهوة", "coffee", "sweet"], icon: Coffee },
  { keywords: ["خدمات", "services", "service"], icon: Settings },
  { keywords: ["مجوهر", "jewelry", "jewel"], icon: Gem },
  { keywords: ["سفر", "travel"], icon: Plane },
  { keywords: ["تعليم", "education"], icon: GraduationCap },
  { keywords: ["ألعاب", "gaming", "game"], icon: Gamepad2 },
];

function getCategoryIcon(nameAr?: string | null, nameEn?: string | null): LucideIcon {
  const normalized = `${nameAr || ""} ${nameEn || ""}`.toLowerCase();
  const match = keywordIconMap.find(({ keywords }) => keywords.some((keyword) => normalized.includes(keyword.toLowerCase())));
  return match?.icon || Shirt;
}

function renderIcon(nameAr: string | null | undefined, nameEn: string | null | undefined, iconSize: number, iconClassName?: string) {
  const iconClass = cn("text-[var(--primary)]", iconClassName);
  const Icon = getCategoryIcon(nameAr, nameEn);

  if (Icon === Baby) return <Baby size={iconSize} className={iconClass} />;
  if (Icon === Coffee) return <Coffee size={iconSize} className={iconClass} />;
  if (Icon === Dumbbell) return <Dumbbell size={iconSize} className={iconClass} />;
  if (Icon === Flower2) return <Flower2 size={iconSize} className={iconClass} />;
  if (Icon === Footprints) return <Footprints size={iconSize} className={iconClass} />;
  if (Icon === Gamepad2) return <Gamepad2 size={iconSize} className={iconClass} />;
  if (Icon === Gem) return <Gem size={iconSize} className={iconClass} />;
  if (Icon === GraduationCap) return <GraduationCap size={iconSize} className={iconClass} />;
  if (Icon === HeartPulse) return <HeartPulse size={iconSize} className={iconClass} />;
  if (Icon === House) return <House size={iconSize} className={iconClass} />;
  if (Icon === PawPrint) return <PawPrint size={iconSize} className={iconClass} />;
  if (Icon === Settings) return <Settings size={iconSize} className={iconClass} />;
  if (Icon === ShoppingBasket) return <ShoppingBasket size={iconSize} className={iconClass} />;
  if (Icon === Smartphone) return <Smartphone size={iconSize} className={iconClass} />;
  if (Icon === Sofa) return <Sofa size={iconSize} className={iconClass} />;
  if (Icon === Sparkles) return <Sparkles size={iconSize} className={iconClass} />;
  if (Icon === SprayCan) return <SprayCan size={iconSize} className={iconClass} />;
  if (Icon === Truck) return <Truck size={iconSize} className={iconClass} />;
  if (Icon === User) return <User size={iconSize} className={iconClass} />;
  if (Icon === UtensilsCrossed) return <UtensilsCrossed size={iconSize} className={iconClass} />;
  if (Icon === Plane) return <Plane size={iconSize} className={iconClass} />;

  return <Shirt size={iconSize} className={iconClass} />;
}

export function CategoryIcon({
  image,
  nameAr,
  nameEn,
  containerClassName,
  imageClassName,
  iconClassName,
  iconSize = 60,
}: CategoryIconProps) {
  const normalizedImage = useMemo(() => {
    const value = image?.trim();
    if (!value) {
      return "";
    }
    if (value.startsWith("http://") || value.startsWith("https://") || value.startsWith("/")) {
      return value;
    }
    return `/${value.replace(/^\/+/, "")}`;
  }, [image]);

  const [failedImageSrc, setFailedImageSrc] = useState<string>("");
  const imageFailed = normalizedImage !== "" && failedImageSrc === normalizedImage;

  return (
    <span className={cn("inline-flex items-center justify-center rounded-2xl border border-[#d5e2ff] bg-[#eef4ff]", containerClassName)}>
      {normalizedImage && !imageFailed ? (
        <Image
          src={normalizedImage}
          alt={nameAr || nameEn || "Category"}
          width={iconSize}
          height={iconSize}
          unoptimized
          onError={() => setFailedImageSrc(normalizedImage)}
          className={cn("object-contain", imageClassName)}
        />
      ) : (
        renderIcon(nameAr, nameEn, iconSize, iconClassName)
      )}
    </span>
  );
}