import { IranianBank } from "~/utils/iranian-banks";

interface BankLogoProps {
  bank: IranianBank;
  size?: number;
  className?: string;
}

export function BankLogo({ bank, size = 24, className = "" }: BankLogoProps) {
  // Map of bank names to their logo image paths
  const bankLogoPath: Record<string, string> = {
    "ملی ایران": "/images/banks/melli.png",
    ملت: "/images/banks/mellat.png",
    سپه: "/images/banks/sepah.png",
    پارسیان: "/images/banks/parsian.png",
    پاسارگاد: "/images/banks/pasargad.png",
    تجارت: "/images/banks/tejarat.png",
    سامان: "/images/banks/saman.png",
    کشاورزی: "/images/banks/keshavarzi.png",
    "صادرات ایران": "/images/banks/saderat.png",
    "رفاه کارگران": "/images/banks/refah.png",
    "اقتصاد نوین": "/images/banks/eghtesad-novin.png",
    "توسعه صادرات ایران": "/images/banks/edbi.png",
    انصار: "/images/banks/ansar.png",
    "ایران زمین": "/images/banks/iran-zamin.png",
    شهر: "/images/banks/shahr.png",
    "توسعه تعاون": "/images/banks/tosee-taavon.png",
    کارآفرین: "/images/banks/karafarin.png",
    دی: "/images/banks/dey.png",
    گردشگری: "/images/banks/gardeshgari.png",
    آینده: "/images/banks/ayandeh.png",
    "موسسه اعتباری کوثر": "/images/banks/kosar.png",
    "قرض الحسنه مهر ایران": "/images/banks/mehr-iran.png",
    سرمایه: "/images/banks/sarmayeh.png",
    سینا: "/images/banks/sina.png",
    "صنعت و معدن": "/images/banks/sanat-madan.png",
    قوامین: "/images/banks/ghavamin.png",
    "پست ایران": "/images/banks/post-bank.png",
    مسکن: "/images/banks/maskan.png",
    "موسسه اعتباری توسعه": "/images/banks/tosee.png",
    مرکزی: "/images/banks/markazi.png",
    "حکمت ایرانیان": "/images/banks/hekmat.png",
    "مهر اقتصاد": "/images/banks/mehr-eghtesad.png",
  };

  // Check if we have a logo image for this bank
  const logoPath = bankLogoPath[bank.name];

  if (logoPath) {
    return (
      <img
        src={logoPath}
        alt={`لوگوی بانک ${bank.name}`}
        width={size}
        height={size}
        className={`rounded ${className}`}
        onError={(e) => {
          // If image fails to load, hide it and show fallback
          e.currentTarget.style.display = "none";
          const fallback = e.currentTarget.nextElementSibling as HTMLElement;
          if (fallback) fallback.style.display = "block";
        }}
      />
    );
  }

  // Fallback: Use old SVG icons as backup
  const bankIcons: Record<string, JSX.Element> = {
    "ملی ایران": (
      <svg
        width={size}
        height={size}
        viewBox="0 0 24 24"
        fill="none"
        className={className}
      >
        <rect width="24" height="24" rx="4" fill="url(#melli-gradient)" />
        <path
          d="M12 6L6 10V18H10V14H14V18H18V10L12 6Z"
          fill="white"
          opacity="0.9"
        />
        <defs>
          <linearGradient
            id="melli-gradient"
            x1="0"
            y1="0"
            x2="24"
            y2="24"
            gradientUnits="userSpaceOnUse"
          >
            <stop stopColor="#1e3a8a" />
            <stop offset="1" stopColor="#60a5fa" />
          </linearGradient>
        </defs>
      </svg>
    ),
    ملت: (
      <svg
        width={size}
        height={size}
        viewBox="0 0 24 24"
        fill="none"
        className={className}
      >
        <rect width="24" height="24" rx="4" fill="url(#mellat-gradient)" />
        <circle cx="12" cy="12" r="6" fill="white" opacity="0.9" />
        <path d="M12 8L14 12L12 16L10 12L12 8Z" fill="url(#mellat-gradient)" />
        <defs>
          <linearGradient
            id="mellat-gradient"
            x1="0"
            y1="0"
            x2="24"
            y2="24"
            gradientUnits="userSpaceOnUse"
          >
            <stop stopColor="#b91c1c" />
            <stop offset="1" stopColor="#f87171" />
          </linearGradient>
        </defs>
      </svg>
    ),
    سپه: (
      <svg
        width={size}
        height={size}
        viewBox="0 0 24 24"
        fill="none"
        className={className}
      >
        <rect width="24" height="24" rx="4" fill="url(#sepah-gradient)" />
        <path
          d="M8 6H16V10H8V6Z M6 11H18V15H6V11Z M9 16H15V20H9V16Z"
          fill="white"
          opacity="0.9"
        />
        <defs>
          <linearGradient
            id="sepah-gradient"
            x1="0"
            y1="0"
            x2="24"
            y2="24"
            gradientUnits="userSpaceOnUse"
          >
            <stop stopColor="#1e40af" />
            <stop offset="1" stopColor="#3b82f6" />
          </linearGradient>
        </defs>
      </svg>
    ),
    پارسیان: (
      <svg
        width={size}
        height={size}
        viewBox="0 0 24 24"
        fill="none"
        className={className}
      >
        <rect width="24" height="24" rx="4" fill="url(#parsian-gradient)" />
        <path
          d="M12 5L17 9V19H7V9L12 5Z M10 12H14V16H10V12Z"
          fill="white"
          opacity="0.9"
        />
        <defs>
          <linearGradient
            id="parsian-gradient"
            x1="0"
            y1="0"
            x2="24"
            y2="24"
            gradientUnits="userSpaceOnUse"
          >
            <stop stopColor="#1e40af" />
            <stop offset="1" stopColor="#60a5fa" />
          </linearGradient>
        </defs>
      </svg>
    ),
    پاسارگاد: (
      <svg
        width={size}
        height={size}
        viewBox="0 0 24 24"
        fill="none"
        className={className}
      >
        <rect width="24" height="24" rx="4" fill="url(#pasargad-gradient)" />
        <path
          d="M12 4L6 8L12 12L18 8L12 4Z M6 10L12 14L18 10V16L12 20L6 16V10Z"
          fill="white"
          opacity="0.9"
        />
        <defs>
          <linearGradient
            id="pasargad-gradient"
            x1="0"
            y1="0"
            x2="24"
            y2="24"
            gradientUnits="userSpaceOnUse"
          >
            <stop stopColor="#4c1d95" />
            <stop offset="1" stopColor="#8b5cf6" />
          </linearGradient>
        </defs>
      </svg>
    ),
    تجارت: (
      <svg
        width={size}
        height={size}
        viewBox="0 0 24 24"
        fill="none"
        className={className}
      >
        <rect width="24" height="24" rx="4" fill="url(#tejarat-gradient)" />
        <path
          d="M6 8H18V11H6V8Z M8 12H16V15H8V12Z M10 16H14V19H10V16Z"
          fill="white"
          opacity="0.9"
        />
        <defs>
          <linearGradient
            id="tejarat-gradient"
            x1="0"
            y1="0"
            x2="24"
            y2="24"
            gradientUnits="userSpaceOnUse"
          >
            <stop stopColor="#15803d" />
            <stop offset="1" stopColor="#22c55e" />
          </linearGradient>
        </defs>
      </svg>
    ),
    سامان: (
      <svg
        width={size}
        height={size}
        viewBox="0 0 24 24"
        fill="none"
        className={className}
      >
        <rect width="24" height="24" rx="4" fill="url(#saman-gradient)" />
        <circle cx="12" cy="9" r="3" fill="white" opacity="0.9" />
        <path
          d="M7 16C7 13.5 9 12 12 12C15 12 17 13.5 17 16V19H7V16Z"
          fill="white"
          opacity="0.9"
        />
        <defs>
          <linearGradient
            id="saman-gradient"
            x1="0"
            y1="0"
            x2="24"
            y2="24"
            gradientUnits="userSpaceOnUse"
          >
            <stop stopColor="#1e40af" />
            <stop offset="1" stopColor="#3b82f6" />
          </linearGradient>
        </defs>
      </svg>
    ),
    کشاورزی: (
      <svg
        width={size}
        height={size}
        viewBox="0 0 24 24"
        fill="none"
        className={className}
      >
        <rect width="24" height="24" rx="4" fill="url(#keshavarzi-gradient)" />
        <path
          d="M12 4C9 4 7 6 7 9C7 11 8 12 9 13L12 19L15 13C16 12 17 11 17 9C17 6 15 4 12 4Z"
          fill="white"
          opacity="0.9"
        />
        <circle cx="12" cy="9" r="2" fill="url(#keshavarzi-gradient)" />
        <defs>
          <linearGradient
            id="keshavarzi-gradient"
            x1="0"
            y1="0"
            x2="24"
            y2="24"
            gradientUnits="userSpaceOnUse"
          >
            <stop stopColor="#15803d" />
            <stop offset="1" stopColor="#4ade80" />
          </linearGradient>
        </defs>
      </svg>
    ),
    "صادرات ایران": (
      <svg
        width={size}
        height={size}
        viewBox="0 0 24 24"
        fill="none"
        className={className}
      >
        <rect width="24" height="24" rx="4" fill="url(#saderat-gradient)" />
        <path
          d="M4 12L12 4L20 12L12 20L4 12Z M12 8L8 12L12 16L16 12L12 8Z"
          fill="white"
          opacity="0.9"
        />
        <defs>
          <linearGradient
            id="saderat-gradient"
            x1="0"
            y1="0"
            x2="24"
            y2="24"
            gradientUnits="userSpaceOnUse"
          >
            <stop stopColor="#065f46" />
            <stop offset="1" stopColor="#34d399" />
          </linearGradient>
        </defs>
      </svg>
    ),
    "رفاه کارگران": (
      <svg
        width={size}
        height={size}
        viewBox="0 0 24 24"
        fill="none"
        className={className}
      >
        <rect width="24" height="24" rx="4" fill="url(#refah-gradient)" />
        <path d="M12 6L8 10H11V18H13V10H16L12 6Z" fill="white" opacity="0.9" />
        <defs>
          <linearGradient
            id="refah-gradient"
            x1="0"
            y1="0"
            x2="24"
            y2="24"
            gradientUnits="userSpaceOnUse"
          >
            <stop stopColor="#9f1239" />
            <stop offset="1" stopColor="#fb7185" />
          </linearGradient>
        </defs>
      </svg>
    ),
  };

  // Get specific icon or use a generic one
  const icon = bankIcons[bank.name] || (
    <svg
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      className={className}
    >
      <rect
        width="24"
        height="24"
        rx="4"
        fill={`url(#generic-gradient-${bank.name})`}
      />
      <path
        d="M12 4L4 8V10H20V8L12 4Z M5 11H7V19H5V11Z M9 11H11V19H9V11Z M13 11H15V19H13V11Z M17 11H19V19H17V11Z M4 20H20V22H4V20Z"
        fill="white"
        opacity="0.9"
      />
      <defs>
        <linearGradient
          id={`generic-gradient-${bank.name}`}
          x1="0"
          y1="0"
          x2="24"
          y2="24"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor={bank.color.from} />
          <stop offset="1" stopColor={bank.color.to} />
        </linearGradient>
      </defs>
    </svg>
  );

  return icon;
}