import type { JSX } from "react";
import React from "react";
import AnthropicLogoSvg from "../../assets/logos/anthropic.svg";
import OpenAILogoSvg from "../../assets/logos/openai.svg";
import DeepSeekLogoSvg from "../../assets/logos/deepseek.svg";
import MiniMaxLogoSvg from "../../assets/logos/minimax.jpeg";
import AlibabaLogoSvg from "../../assets/logos/alibaba.svg";
import QwenLogoSvg from "../../assets/logos/qwen.png";
import ZhipuAILogoSvg from "../../assets/logos/zhipuai.svg";

export type Provider =
  | "anthropic"
  | "openai"
  | "deepseek"
  | "minimax"
  | "alibaba"
  | "qwen"
  | "zhipuai"
  | "unknown";

const PROVIDER_MAP: Record<string, Provider> = {
  "claude-": "anthropic",
  "gpt-": "openai",
  "o1-": "openai",
  "o3-": "openai",
  "deepseek-": "deepseek",
  MiniMax: "minimax",
  qwen: "qwen",
  "glm-": "zhipuai",
};

export function detectProvider(model: string | null): Provider {
  if (model === null) return "unknown";
  const modelLower = model.toLowerCase();
  for (const [prefix, provider] of Object.entries(PROVIDER_MAP)) {
    if (modelLower.startsWith(prefix.toLowerCase())) {
      return provider;
    }
  }
  return "unknown";
}

const sizeStyle = { width: 24, height: 24, objectFit: "contain" as const };

const AnthropicLogo = React.memo(
  ({ className }: { className?: string }): JSX.Element => (
    <img src={AnthropicLogoSvg} alt="Anthropic" className={className} style={sizeStyle} />
  ),
);

const OpenAILogo = React.memo(
  ({ className }: { className?: string }): JSX.Element => (
    <img
      src={OpenAILogoSvg}
      alt="OpenAI"
      className={className}
      style={{ ...sizeStyle, background: "white", borderRadius: "4px" }}
    />
  ),
);

const DeepSeekLogo = React.memo(
  ({ className }: { className?: string }): JSX.Element => (
    <img src={DeepSeekLogoSvg} alt="DeepSeek" className={className} style={sizeStyle} />
  ),
);

const MiniMaxLogo = React.memo(
  ({ className }: { className?: string }): JSX.Element => (
    <img src={MiniMaxLogoSvg} alt="MiniMax" className={className} style={sizeStyle} />
  ),
);

const AlibabaLogo = React.memo(
  ({ className }: { className?: string }): JSX.Element => (
    <img src={AlibabaLogoSvg} alt="Alibaba" className={className} style={sizeStyle} />
  ),
);

const QwenLogo = React.memo(
  ({ className }: { className?: string }): JSX.Element => (
    <img src={QwenLogoSvg} alt="Qwen" className={className} style={sizeStyle} />
  ),
);

const ZhipuAILogo = React.memo(
  ({ className }: { className?: string }): JSX.Element => (
    <img src={ZhipuAILogoSvg} alt="ZhipuAI" className={className} style={sizeStyle} />
  ),
);

export function ProviderLogo({
  provider,
  className,
}: {
  provider: Provider;
  className?: string;
}): JSX.Element | null {
  switch (provider) {
    case "anthropic":
      return <AnthropicLogo className={className} />;
    case "openai":
      return <OpenAILogo className={className} />;
    case "deepseek":
      return <DeepSeekLogo className={className} />;
    case "minimax":
      return <MiniMaxLogo className={className} />;
    case "alibaba":
      return <AlibabaLogo className={className} />;
    case "qwen":
      return <QwenLogo className={className} />;
    case "zhipuai":
      return <ZhipuAILogo className={className} />;
    case "unknown":
      return null;
  }
}
