import * as React from 'react';

type IconProps = React.SVGAttributes<SVGElement> & { size?: number };

const base = (size: number) => ({
  width: size,
  height: size,
  viewBox: '0 0 24 24',
  xmlns: 'http://www.w3.org/2000/svg',
  'aria-hidden': true as const,
});

export function GithubIcon({ size = 16, ...rest }: IconProps) {
  return (
    <svg {...base(size)} {...rest}>
      <path
        fill="currentColor"
        d="M12 .5C5.65.5.5 5.65.5 12c0 5.08 3.29 9.39 7.86 10.92.57.1.78-.25.78-.55v-1.93c-3.2.69-3.87-1.54-3.87-1.54-.52-1.32-1.28-1.67-1.28-1.67-1.05-.72.08-.7.08-.7 1.16.08 1.77 1.19 1.77 1.19 1.03 1.76 2.7 1.25 3.36.96.1-.75.4-1.26.73-1.55-2.55-.29-5.24-1.28-5.24-5.7 0-1.26.45-2.29 1.19-3.1-.12-.29-.52-1.47.11-3.06 0 0 .97-.31 3.19 1.18.92-.26 1.91-.39 2.9-.39s1.98.13 2.9.39c2.21-1.49 3.18-1.18 3.18-1.18.63 1.59.23 2.77.11 3.06.74.81 1.19 1.84 1.19 3.1 0 4.43-2.69 5.41-5.26 5.69.41.36.77 1.06.77 2.13v3.16c0 .31.21.66.79.55C20.21 21.38 23.5 17.08 23.5 12 23.5 5.65 18.35.5 12 .5Z"
      />
    </svg>
  );
}

export function SupabaseIcon({ size = 16, ...rest }: IconProps) {
  return (
    <svg {...base(size)} {...rest}>
      <defs>
        <linearGradient id="sb-a" x1="0" x2="1" y1="0" y2="1">
          <stop offset="0" stopColor="#3ECF8E" />
          <stop offset="1" stopColor="#249361" />
        </linearGradient>
      </defs>
      <path
        fill="url(#sb-a)"
        d="M13.4 22.6c-.6.8-1.9.3-1.9-.7v-7.4H5.8c-1 0-1.5-1.1-.9-1.9L10.6 1.4c.6-.8 1.9-.3 1.9.7v7.4h5.7c1 0 1.5 1.1.9 1.9L13.4 22.6Z"
      />
    </svg>
  );
}

export function VercelIcon({ size = 16, ...rest }: IconProps) {
  return (
    <svg {...base(size)} {...rest}>
      <path fill="currentColor" d="M12 2 22 20H2L12 2Z" />
    </svg>
  );
}

export function ResendIcon({ size = 16, ...rest }: IconProps) {
  return (
    <svg {...base(size)} {...rest}>
      <path
        fill="currentColor"
        d="M3 3h7.5c2.9 0 5 1.9 5 4.7 0 1.9-1 3.4-2.7 4.1l3.7 5.5c.4.6 0 1.5-.8 1.5h-2c-.4 0-.8-.2-1-.5l-3.3-5.1H7v4.6c0 .5-.4 1-1 1H4c-.6 0-1-.5-1-1V3Zm4 6.2h3.3c1.3 0 2.1-.7 2.1-1.8s-.8-1.7-2.1-1.7H7v3.5Z"
      />
    </svg>
  );
}

export function GmailIcon({ size = 16, ...rest }: IconProps) {
  return (
    <svg {...base(size)} {...rest}>
      <path fill="#4285F4" d="M2 6.5C2 5.7 2.7 5 3.5 5h.7L12 11l7.8-6h.7c.8 0 1.5.7 1.5 1.5V18c0 .8-.7 1.5-1.5 1.5h-2V10l-6.5 5L5 10v9.5H3.5C2.7 19.5 2 18.8 2 18V6.5Z" />
      <path fill="#34A853" d="M5 10v9.5H3.5C2.7 19.5 2 18.8 2 18V6.5L5 10Z" />
      <path fill="#FBBC04" d="M22 6.5V18c0 .8-.7 1.5-1.5 1.5H19V10l3-3.5Z" />
      <path fill="#EA4335" d="M2 6.5C2 5.7 2.7 5 3.5 5h.7L12 11 4.2 5h-.7C2.7 5 2 5.7 2 6.5Z" />
    </svg>
  );
}

export function GlobeIcon({ size = 16, ...rest }: IconProps) {
  return (
    <svg {...base(size)} {...rest} fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="9" />
      <path d="M3 12h18M12 3a13 13 0 010 18M12 3a13 13 0 000 18" />
    </svg>
  );
}

export function TerminalIcon({ size = 16, ...rest }: IconProps) {
  return (
    <svg {...base(size)} {...rest} fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <rect x="2.5" y="4.5" width="19" height="15" rx="2.5" />
      <path d="m7 10 3 2-3 2M13 14h4" />
    </svg>
  );
}

export function PlaneIcon({ size = 16, ...rest }: IconProps) {
  return (
    <svg {...base(size)} {...rest} fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <path d="M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V18l-2 1.5V21l3.5-1L15 21v-1.5L13 18v-4.5l8 2.5Z" />
    </svg>
  );
}

export function ClaudeIcon({ size = 16, ...rest }: IconProps) {
  return (
    <svg {...base(size)} {...rest}>
      <path
        fill="#D97757"
        d="M5.9 16.6 9.4 8.6h.7l3.5 8h-1.6l-.9-2.2h-3l-.9 2.2H5.9Zm3-3.5h2.2l-1.1-2.7-1.1 2.7Zm5.8 3.5v-8h2.6c1.6 0 2.7 1 2.7 2.5 0 1.6-1.1 2.5-2.7 2.5h-1v3h-1.6Zm1.6-4.4h.9c.8 0 1.3-.4 1.3-1.1 0-.7-.5-1.1-1.3-1.1h-.9v2.2Z"
      />
    </svg>
  );
}

export function AnthropicIcon({ size = 16, ...rest }: IconProps) {
  return (
    <svg {...base(size)} {...rest}>
      <path
        fill="currentColor"
        d="M6 19 11 5h2l5 14h-2.3l-1.1-3.2H9.4L8.3 19H6Zm4-5h4l-2-5.9-2 5.9Z"
      />
    </svg>
  );
}

export function OllamaIcon({ size = 16, ...rest }: IconProps) {
  return (
    <svg {...base(size)} {...rest} fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 3c4 0 7 3.5 7 8v4a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3v-4c0-4.5 3-8 7-8Z" />
      <circle cx="9.5" cy="11.5" r="1" fill="currentColor" />
      <circle cx="14.5" cy="11.5" r="1" fill="currentColor" />
    </svg>
  );
}

/* Marketplace kind icons — Phosphor-bold style, 1.7px stroke. No emoji. */
export function SkillIcon({ size = 16, ...rest }: IconProps) {
  return (
    <svg
      {...base(size)}
      {...rest}
      fill="none"
      stroke="currentColor"
      strokeWidth="1.7"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="M4 5.5A1.5 1.5 0 0 1 5.5 4H11v15H5.5A1.5 1.5 0 0 1 4 17.5v-12Z" />
      <path d="M20 5.5A1.5 1.5 0 0 0 18.5 4H13v15h5.5a1.5 1.5 0 0 0 1.5-1.5v-12Z" />
      <path d="M7 8h1.5M7 11h1.5M15.5 8H17M15.5 11H17" />
    </svg>
  );
}

export function BundleIcon({ size = 16, ...rest }: IconProps) {
  return (
    <svg
      {...base(size)}
      {...rest}
      fill="none"
      stroke="currentColor"
      strokeWidth="1.7"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <rect x="3.5" y="3.5" width="9" height="9" rx="2" />
      <rect x="11.5" y="11.5" width="9" height="9" rx="2" />
      <rect x="7.5" y="7.5" width="9" height="9" rx="2" />
    </svg>
  );
}

export function AgentIcon({ size = 16, ...rest }: IconProps) {
  return (
    <svg
      {...base(size)}
      {...rest}
      fill="none"
      stroke="currentColor"
      strokeWidth="1.7"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <circle cx="12" cy="8" r="3.5" />
      <path d="M4.5 20c.7-3.8 3.8-6 7.5-6s6.8 2.2 7.5 6" />
    </svg>
  );
}

/* WorkflowIcon — staged-process glyph. Three nodes connected by a directed
   arrow, mirroring the intake → review → approve → package shape of a
   process_definitions row. */
export function WorkflowIcon({ size = 16, ...rest }: IconProps) {
  return (
    <svg
      {...base(size)}
      {...rest}
      fill="none"
      stroke="currentColor"
      strokeWidth="1.7"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <rect x="3" y="9" width="5" height="6" rx="1.4" />
      <rect x="9.5" y="9" width="5" height="6" rx="1.4" />
      <rect x="16" y="9" width="5" height="6" rx="1.4" />
      <path d="M8 12h1.5M14.5 12H16" />
    </svg>
  );
}

export function CalendarIcon({ size = 16, ...rest }: IconProps) {
  return (
    <svg
      {...base(size)}
      {...rest}
      fill="none"
      stroke="currentColor"
      strokeWidth="1.7"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <rect x="3.5" y="5" width="17" height="15" rx="2" />
      <path d="M3.5 10h17M8 3v4M16 3v4" />
    </svg>
  );
}

export function CoreIcon({ size = 16, ...rest }: IconProps) {
  return (
    <svg
      {...base(size)}
      {...rest}
      fill="none"
      stroke="currentColor"
      strokeWidth="1.7"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <rect x="6" y="6" width="12" height="12" rx="2" />
      <rect x="9.5" y="9.5" width="5" height="5" />
      <path d="M9 3v3M15 3v3M9 18v3M15 18v3M3 9h3M3 15h3M18 9h3M18 15h3" />
    </svg>
  );
}

const CATEGORY_MAP: Record<string, { Icon: React.ElementType; label: string; tint: string }> = {
  github:        { Icon: GithubIcon,    label: 'GitHub',    tint: '#181717' },
  supabase:      { Icon: SupabaseIcon,  label: 'Supabase',  tint: '#3ECF8E' },
  vercel:        { Icon: VercelIcon,    label: 'Vercel',    tint: '#111318' },
  email:         { Icon: ResendIcon,    label: 'Resend',    tint: '#111318' },
  gmail:         { Icon: GmailIcon,     label: 'Gmail',     tint: '#EA4335' },
  web:           { Icon: GlobeIcon,     label: 'Web',       tint: '#5A7099' },
  local_machine: { Icon: TerminalIcon,  label: 'Local',     tint: '#1f242c' },
  travel:        { Icon: PlaneIcon,     label: 'Travel',    tint: '#2563EB' },
  calendar:      { Icon: CalendarIcon,  label: 'Calendar',  tint: '#1f6c9f' },
  core:          { Icon: CoreIcon,      label: 'Core',      tint: '#3a3f47' },
};

const ENGINE_MAP: Record<string, { Icon: React.ElementType; label: string; tint: string }> = {
  'claude-code': { Icon: ClaudeIcon,    label: 'Claude Code', tint: '#D97757' },
  anthropic:     { Icon: AnthropicIcon, label: 'Anthropic',   tint: '#1f1a12' },
  ollama:        { Icon: OllamaIcon,    label: 'Ollama',      tint: '#1f242c' },
};

export type ToolCategory = keyof typeof CATEGORY_MAP;

export function getToolIcon(category: string | undefined | null) {
  if (!category) return null;
  return CATEGORY_MAP[category] || null;
}

export function getEngineIcon(engineId: string | undefined | null) {
  if (!engineId) return null;
  return ENGINE_MAP[engineId] || null;
}

interface ToolIconProps {
  category: string;
  size?: number;
  className?: string;
}

export function ToolIcon({ category, size = 14, className }: ToolIconProps) {
  const entry = getToolIcon(category);
  if (!entry) return null;
  const { Icon, tint } = entry;
  return <Icon size={size} className={className} style={{ color: tint }} />;
}

/* Kind icon resolver — used by the marketplace shell to render the right mark
   for each item kind. Tool-kind items defer to the category-level brand icons
   (GitHub/Supabase/etc.) since those are the recognisable brands. */
const KIND_ICON_MAP: Record<string, { Icon: React.ElementType; label: string }> = {
  skill:    { Icon: SkillIcon,    label: 'Skill'    },
  bundle:   { Icon: BundleIcon,   label: 'Bundle'   },
  agent:    { Icon: AgentIcon,    label: 'Agent'    },
  workflow: { Icon: WorkflowIcon, label: 'Workflow' },
};

export type MarketplaceKind = 'tool' | 'skill' | 'bundle' | 'agent' | 'workflow';

export function getKindIcon(kind: string | undefined | null) {
  if (!kind) return null;
  return KIND_ICON_MAP[kind] || null;
}

interface KindIconProps {
  kind: MarketplaceKind;
  size?: number;
  className?: string;
}

export function KindIcon({ kind, size = 18, className }: KindIconProps) {
  const entry = KIND_ICON_MAP[kind];
  if (!entry) return null;
  const { Icon } = entry;
  return <Icon size={size} className={className} />;
}
