import type { ProviderId } from "@/lib/ai/core/types";
import { cn } from "@/lib/utils";

/** Monochrome provider glyphs drawn from scratch (no trademarked logos). */
export function ProviderIcon({ provider, className, size = 16 }: { provider: ProviderId | string | null | undefined; className?: string; size?: number }) {
  const common = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.8, strokeLinecap: "round" as const, strokeLinejoin: "round" as const, "aria-hidden": true };
  const color = (p: string) => ({ color: `var(--p-${p})` });
  switch (provider) {
    case "openai":
      return (
        <svg {...common} className={cn("shrink-0", className)} style={color("openai")}>
          <path d="M12 3.5 19 7.6v8.8L12 20.5 5 16.4V7.6z" />
          <path d="M12 3.5v17M5 7.6l14 8.8M19 7.6 5 16.4" opacity="0.55" />
        </svg>
      );
    case "anthropic":
      return (
        <svg {...common} className={cn("shrink-0", className)} style={color("anthropic")}>
          <path d="M4 19 10.2 5h1.6L18 19h-2.6l-1.3-3.2H9.9L8.6 19z" />
          <path d="M10.6 13.6h3l-1.5-3.8z" opacity="0.55" />
        </svg>
      );
    case "gemini":
      return (
        <svg {...common} className={cn("shrink-0", className)} style={color("gemini")}>
          <path d="M12 3c.6 4.9 4.1 8.4 9 9-4.9.6-8.4 4.1-9 9-.6-4.9-4.1-8.4-9-9 4.9-.6 8.4-4.1 9-9z" />
        </svg>
      );
    case "xai":
      return (
        <svg {...common} className={cn("shrink-0", className)} style={color("xai")}>
          <path d="M5 5l14 14M19 5 5 19" />
          <path d="M12 12l7-7" opacity="0.4" />
        </svg>
      );
    case "mistral":
      // stepped "M" — evokes Mistral's blocky mark without copying it
      return (
        <svg {...common} className={cn("shrink-0", className)} style={color("mistral")} strokeWidth={0} fill="currentColor">
          <rect x="3" y="5" width="3.6" height="14" rx="0.6" />
          <rect x="17.4" y="5" width="3.6" height="14" rx="0.6" />
          <rect x="6.6" y="8" width="3.6" height="4" rx="0.6" opacity="0.8" />
          <rect x="13.8" y="8" width="3.6" height="4" rx="0.6" opacity="0.8" />
          <rect x="10.2" y="11.5" width="3.6" height="4" rx="0.6" opacity="0.6" />
        </svg>
      );
    case "deepseek":
      // a whale-like wave arc
      return (
        <svg {...common} className={cn("shrink-0", className)} style={color("deepseek")}>
          <path d="M3 14c2.5-5 6.5-7 11-6 3.2.7 5.2 2.7 7 5.5-2.2-.4-4 .3-5.4 1.8-1.6-1.4-3.6-2-6-1.6-1.9.3-3.6 1.3-6.6.3z" />
          <path d="M17 11.2h.01" strokeWidth="2.6" />
          <path d="M5 17.5c1.6 1 3.4 1 5.2 0" opacity="0.6" />
        </svg>
      );
    case "kimi":
      // crescent + spark ("moon"shot)
      return (
        <svg {...common} className={cn("shrink-0", className)} style={color("kimi")}>
          <path d="M14.5 3.5a8.5 8.5 0 1 0 6 14.3A9 9 0 0 1 14.5 3.5z" />
          <path d="M6 5.5v3M4.5 7h3" opacity="0.7" />
        </svg>
      );
    case "openrouter":
      // routes converging into one node
      return (
        <svg {...common} className={cn("shrink-0", className)} style={color("openrouter")}>
          <path d="M3 7h5c3 0 3.5 5 6.5 5H21M3 17h5c3 0 3.5-5 6.5-5" />
          <path d="M18.5 9.5 21 12l-2.5 2.5" />
        </svg>
      );
    case "cerebras":
      // wafer / chip
      return (
        <svg {...common} className={cn("shrink-0", className)} style={color("cerebras")}>
          <rect x="6" y="6" width="12" height="12" rx="2" />
          <path d="M9 9h6v6H9z" opacity="0.6" />
          <path d="M9 3v3M15 3v3M9 18v3M15 18v3M3 9h3M3 15h3M18 9h3M18 15h3" />
        </svg>
      );
    case "custom":
      // plug / socket — a server you bring yourself
      return (
        <svg {...common} className={cn("shrink-0", className)} style={color("custom")}>
          <path d="M9 3v4M15 3v4" />
          <path d="M6 7h12v3a6 6 0 0 1-12 0z" />
          <path d="M12 16v5" opacity="0.7" />
        </svg>
      );
    default:
      return (
        <svg {...common} className={cn("shrink-0 text-fg-subtle", className)}>
          <circle cx="12" cy="12" r="8" />
        </svg>
      );
  }
}