import type { ReactNode, SVGProps } from 'react';
import { Bot } from 'lucide-react';

import { Badge } from '../components/ui/badge';

type AgentIconComponent = (props: SVGProps<SVGSVGElement>) => ReactNode;

const CodexIcon: AgentIconComponent = (props) => (
  <svg viewBox="0 0 24 24" aria-hidden="true" {...props}>
    <path
      fill="currentColor"
      d="M11.794 3c0 2.74-.985 4.814-2.298 6.329c1.626-.992 3.303-2.355 4.71-4.124l1.004.75c-1.531 1.925-3.353 3.395-5.11 4.457c2.36-.554 4.699-1.339 6.203-2.383l.738 1c-1.5 1.04-3.636 1.805-5.752 2.357h8.55L20 12.594c-2.181.556-6.527 3.02-6.527 8.406h-1.267c0-2.74.985-4.814 2.298-6.329c-1.626.992-3.303 2.355-4.71 4.124l-1.004-.75c1.531-1.925 3.353-3.395 5.11-4.457c-2.36.554-4.699 1.339-6.203 2.383l-.738-1c1.5-1.04 3.636-1.805 5.752-2.357h-8.55L4 11.406c2.181-.555 6.527-3.02 6.527-8.406z"
    />
  </svg>
);

const ClaudeIcon: AgentIconComponent = (props) => (
  <svg viewBox="0 0 24 24" aria-hidden="true" {...props}>
    <path
      fill="currentColor"
      d="m4.714 15.956l4.718-2.648l.079-.23l-.08-.128h-.23l-.79-.048l-2.695-.073l-2.337-.097l-2.265-.122l-.57-.121l-.535-.704l.055-.353l.48-.321l.685.06l1.518.104l2.277.157l1.651.098l2.447.255h.389l.054-.158l-.133-.097l-.103-.098l-2.356-1.596l-2.55-1.688l-1.336-.972l-.722-.491L2 6.223l-.158-1.008l.656-.722l.88.06l.224.061l.893.686l1.906 1.476l2.49 1.833l.364.304l.146-.104l.018-.072l-.164-.274l-1.354-2.446l-1.445-2.49l-.644-1.032l-.17-.619a3 3 0 0 1-.103-.729L6.287.133L6.7 0l.995.134l.42.364l.619 1.415L9.735 4.14l1.555 3.03l.455.898l.243.832l.09.255h.159V9.01l.127-1.706l.237-2.095l.23-2.695l.08-.76l.376-.91l.747-.492l.583.28l.48.685l-.067.444l-.286 1.851l-.558 2.903l-.365 1.942h.213l.243-.242l.983-1.306l1.652-2.064l.728-.82l.85-.904l.547-.431h1.032l.759 1.129l-.34 1.166l-1.063 1.347l-.88 1.142l-1.263 1.7l-.79 1.36l.074.11l.188-.02l2.853-.606l1.542-.28l1.84-.315l.832.388l.09.395l-.327.807l-1.967.486l-2.307.462l-3.436.813l-.043.03l.049.061l1.548.146l.662.036h1.62l3.018.225l.79.522l.473.638l-.08.485l-1.213.62l-1.64-.389l-3.825-.91l-1.31-.329h-.183v.11l1.093 1.068l2.003 1.81l2.508 2.33l.127.578l-.321.455l-.34-.049l-2.204-1.657l-.85-.747l-1.925-1.62h-.127v.17l.443.649l2.343 3.521l.122 1.08l-.17.353l-.607.213l-.668-.122l-1.372-1.924l-1.415-2.168l-1.141-1.943l-.14.08l-.674 7.254l-.316.37l-.728.28l-.607-.461l-.322-.747l.322-1.476l.388-1.924l.316-1.53l.285-1.9l.17-.632l-.012-.042l-.14.018l-1.432 1.967l-2.18 2.945l-1.724 1.845l-.413.164l-.716-.37l.066-.662l.401-.589l2.386-3.036l1.439-1.882l.929-1.086l-.006-.158h-.055L4.138 18.56l-1.13.146l-.485-.456l.06-.746l.231-.243l1.907-1.312Z"
    />
  </svg>
);

const CursorIcon: AgentIconComponent = (props) => (
  <svg viewBox="0 0 24 24" aria-hidden="true" {...props}>
    <path
      fill="currentColor"
      d="M11.503.131L1.891 5.678a.84.84 0 0 0-.42.726v11.188c0 .3.162.575.42.724l9.609 5.55a1 1 0 0 0 .998 0l9.61-5.55a.84.84 0 0 0 .42-.724V6.404a.84.84 0 0 0-.42-.726L12.497.131a1.01 1.01 0 0 0-.996 0M2.657 6.338h18.55c.263 0 .43.287.297.515L12.23 22.918c-.062.107-.229.064-.229-.06V12.335a.59.59 0 0 0-.295-.51l-9.11-5.257c-.109-.063-.064-.23.061-.23"
    />
  </svg>
);

const GeminiIcon: AgentIconComponent = (props) => (
  <svg viewBox="0 0 24 24" aria-hidden="true" {...props}>
    <path
      fill="currentColor"
      d="M9.946 14.052h4.11V9.948h-4.11zm-5.475.002h4.057V9.998a4.8 4.8 0 0 0-2.698 1.365a4.8 4.8 0 0 0-1.36 2.691m4.057 1.417H4.471a4.8 4.8 0 0 0 1.36 2.692a4.78 4.78 0 0 0 3.39 1.414h.032c1.32 0 2.52-.542 3.391-1.414a4.82 4.82 0 0 0 1.359-2.69H8.528zM19.53 9.948h-4.057V14a4.8 4.8 0 0 0 2.699-1.364a4.82 4.82 0 0 0 1.358-2.69m0-1.422a4.8 4.8 0 0 0-1.359-2.69a4.78 4.78 0 0 0-3.39-1.414h-.033c-1.32 0-2.52.542-3.39 1.415a4.8 4.8 0 0 0-1.36 2.689zm-4.094 6.913a6.24 6.24 0 0 1-1.79 3.73A6.2 6.2 0 0 1 9.253 21h-.032a6.2 6.2 0 0 1-4.393-1.832a6.226 6.226 0 0 1 0-8.81A6.2 6.2 0 0 1 8.564 8.56a6.23 6.23 0 0 1 1.79-3.73A6.2 6.2 0 0 1 14.747 3h.032a6.2 6.2 0 0 1 4.393 1.832a6.227 6.227 0 0 1 0 8.81a6.2 6.2 0 0 1-3.737 1.797"
    />
  </svg>
);

const CopilotIcon: AgentIconComponent = (props) => (
  <svg viewBox="0 0 16 16" aria-hidden="true" {...props}>
    <path
      fill="currentColor"
      d="M7.998 15.035c-4.562 0-7.873-2.914-7.998-3.749V9.338c.085-.628.677-1.686 1.588-2.065q.019-.105.036-.218c.029-.183.06-.384.126-.612c-.201-.508-.254-1.084-.254-1.656c0-.87.128-1.769.693-2.484c.579-.733 1.494-1.124 2.724-1.261c1.206-.134 2.262.034 2.944.765q.075.08.139.165q.068-.085.143-.165c.682-.731 1.738-.899 2.944-.765c1.23.137 2.145.528 2.724 1.261c.566.715.693 1.614.693 2.484c0 .572-.053 1.148-.254 1.656c.066.228.098.429.126.612q.018.113.037.218c.924.385 1.522 1.471 1.591 2.095v1.872c0 .766-3.351 3.795-8.002 3.795m0-1.485c2.28 0 4.584-1.11 5.002-1.433V7.862l-.023-.116c-.49.21-1.075.291-1.727.291c-1.146 0-2.059-.327-2.71-.991A3.2 3.2 0 0 1 8 6.303a3.2 3.2 0 0 1-.544.743c-.65.664-1.563.991-2.71.991c-.652 0-1.236-.081-1.727-.291l-.023.116v4.255c.419.323 2.722 1.433 5.002 1.433M6.762 2.83c-.193-.206-.637-.413-1.682-.297c-1.019.113-1.479.404-1.713.7c-.247.312-.369.789-.369 1.554c0 .793.129 1.171.308 1.371c.162.181.519.379 1.442.379c.853 0 1.339-.235 1.638-.54c.315-.322.527-.827.617-1.553c.117-.935-.037-1.395-.241-1.614m4.155-.297c-1.044-.116-1.488.091-1.681.297c-.204.219-.359.679-.242 1.614c.091.726.303 1.231.618 1.553c.299.305.784.54 1.638.54c.922 0 1.28-.198 1.442-.379c.179-.2.308-.578.308-1.371c0-.765-.123-1.242-.37-1.554c-.233-.296-.693-.587-1.713-.7"
    />
    <path
      fill="currentColor"
      d="M6.25 9.037a.75.75 0 0 1 .75.75v1.501a.75.75 0 0 1-1.5 0V9.787a.75.75 0 0 1 .75-.75m4.25.75v1.501a.75.75 0 0 1-1.5 0V9.787a.75.75 0 0 1 1.5 0"
    />
  </svg>
);

const WarpIcon: AgentIconComponent = (props) => (
  <svg viewBox="0 0 24 24" aria-hidden="true" {...props}>
    <path
      fill="currentColor"
      d="M12.035 2.723h9.253A2.71 2.71 0 0 1 24 5.435v10.529a2.71 2.71 0 0 1-2.712 2.713H8.047Zm-1.681 2.6L6.766 19.677h5.598l-.399 1.6H2.712A2.71 2.71 0 0 1 0 18.565V8.036a2.71 2.71 0 0 1 2.712-2.712Z"
    />
  </svg>
);

const ClineIcon: AgentIconComponent = (props) => (
  <svg viewBox="0 0 24 24" aria-hidden="true" {...props}>
    <path
      fill="currentColor"
      d="m23.365 13.556l-1.442-2.895V8.994c0-2.764-2.218-5.002-4.954-5.002h-2.464c.178-.367.276-.779.276-1.213A2.77 2.77 0 0 0 12.018 0a2.77 2.77 0 0 0-2.763 2.779c0 .434.098.846.276 1.213H7.067c-2.736 0-4.954 2.238-4.954 5.002v1.667L.64 13.549c-.149.29-.149.636 0 .927l1.472 2.855v1.667C2.113 21.762 4.33 24 7.067 24h9.902c2.736 0 4.954-2.238 4.954-5.002V17.33l1.44-2.865c.143-.286.143-.622.002-.91m-12.854 2.36a2.27 2.27 0 0 1-2.261 2.273a2.27 2.27 0 0 1-2.261-2.273v-4.042A2.27 2.27 0 0 1 8.249 9.6a2.267 2.267 0 0 1 2.262 2.274zm7.285 0a2.27 2.27 0 0 1-2.26 2.273a2.27 2.27 0 0 1-2.262-2.273v-4.042A2.267 2.267 0 0 1 15.535 9.6a2.267 2.267 0 0 1 2.261 2.274z"
    />
  </svg>
);

const AntigravityIcon: AgentIconComponent = (props) => (
  <svg viewBox="0 0 24 24" aria-hidden="true" {...props}>
    <path
      fill="currentColor"
      d="M19.94 20.59c1.09.82 2.73.27 1.23-1.23C16.67 15 17.62 3 12.03 3S7.39 15 2.89 19.36c-1.64 1.64.14 2.05 1.23 1.23c4.23-2.86 3.95-7.91 7.91-7.91s3.68 5.05 7.91 7.91"
    />
  </svg>
);

const AmpIcon: AgentIconComponent = (props) => (
  <svg viewBox="0 0 24 24" aria-hidden="true" {...props}>
    <path
      fill="currentColor"
      d="M12 0c6.628 0 12 5.373 12 12s-5.372 12-12 12C5.373 24 0 18.627 0 12S5.373 0 12 0m-.92 19.278l5.034-8.377a.44.44 0 0 0 .097-.268a.455.455 0 0 0-.455-.455l-2.851.004l.924-5.468l-.927-.003l-5.018 8.367s-.1.183-.1.291c0 .251.204.455.455.455l2.831-.004l-.901 5.458z"
    />
  </svg>
);

const getAgentIcon = (agent: string): AgentIconComponent | null => {
  const normalized = agent.toLowerCase();
  const hasToken = (token: string) =>
    new RegExp(`(^|[^a-z0-9])${token}([^a-z0-9]|$)`).test(normalized);

  if (normalized.includes('codex') || normalized.includes('openai')) {
    return CodexIcon;
  }

  if (normalized.includes('claude')) {
    return ClaudeIcon;
  }

  if (normalized.includes('cursor')) {
    return CursorIcon;
  }

  if (normalized.includes('gemini')) {
    return GeminiIcon;
  }

  if (normalized.includes('copilot')) {
    return CopilotIcon;
  }

  if (normalized.includes('warp')) {
    return WarpIcon;
  }

  if (normalized.includes('cline')) {
    return ClineIcon;
  }

  if (normalized.includes('antigravity')) {
    return AntigravityIcon;
  }

  if (hasToken('amp')) {
    return AmpIcon;
  }

  return null;
};

export function AgentBadge({ agent }: { agent: string }) {
  const Icon = getAgentIcon(agent) ?? Bot;

  return (
    <Badge variant="outline" title={agent}>
      <Icon className="size-3" />
      {agent}
    </Badge>
  );
}