/*
 *  icons.tsx
 *  Zyquo Cloud Web
 *
 *  Author: Simon-Pierre Boucher
 *  Mail: contact@spboucher.ai
 *
 *  Minimal inline SVG icon set (stroke-based, currentColor) — no icon
 *  dependency (every dependency is key-theft surface). 16×16 grid.
 */

import type { ReactNode } from 'react'

function I({ children, size = 14 }: { children: ReactNode; size?: number }) {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 16 16"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden="true"
    >
      {children}
    </svg>
  )
}

export const IconSend = ({ size = 13 }: { size?: number }) => (
  <I size={size}>
    <path d="M8 13V3M3.5 7.5 8 3l4.5 4.5" />
  </I>
)
export const IconStop = ({ size = 11 }: { size?: number }) => (
  <svg width={size} height={size} viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
    <rect x="3" y="3" width="10" height="10" rx="2" />
  </svg>
)
export const IconPlus = ({ size = 13 }: { size?: number }) => (
  <I size={size}>
    <path d="M8 3v10M3 8h10" />
  </I>
)
export const IconSearch = ({ size = 12 }: { size?: number }) => (
  <I size={size}>
    <circle cx="7" cy="7" r="4.5" />
    <path d="m10.5 10.5 3 3" />
  </I>
)
export const IconGear = ({ size = 14 }: { size?: number }) => (
  <I size={size}>
    <circle cx="8" cy="8" r="2.2" />
    <path d="M8 1.8v2M8 12.2v2M1.8 8h2M12.2 8h2M3.6 3.6l1.4 1.4M11 11l1.4 1.4M12.4 3.6 11 5M5 11l-1.4 1.4" />
  </I>
)
export const IconTrash = ({ size = 12 }: { size?: number }) => (
  <I size={size}>
    <path d="M2.5 4.5h11M6.5 2.5h3M4 4.5 4.8 13.5h6.4L12 4.5M6.5 7v4M9.5 7v4" />
  </I>
)
export const IconPin = ({ size = 11 }: { size?: number }) => (
  <I size={size}>
    <path d="M9.5 2 14 6.5l-3 1-2 4-1.5-1.5L3 14.5 1.5 13l4.5-4.5L4.5 7l4-2z" />
  </I>
)
export const IconCopy = ({ size = 11 }: { size?: number }) => (
  <I size={size}>
    <rect x="5.5" y="5.5" width="8" height="8" rx="1.5" />
    <path d="M10.5 3.5v-1h-8v8h1" />
  </I>
)
export const IconEdit = ({ size = 11 }: { size?: number }) => (
  <I size={size}>
    <path d="m2.5 13.5.6-3 8-8 2.4 2.4-8 8-3 .6zM9.5 4l2.5 2.5" />
  </I>
)
export const IconRefresh = ({ size = 11 }: { size?: number }) => (
  <I size={size}>
    <path d="M13 8a5 5 0 1 1-1.5-3.5M13 2v3h-3" />
  </I>
)
export const IconChevronDown = ({ size = 8 }: { size?: number }) => (
  <I size={size}>
    <path d="m3 5.5 5 5 5-5" strokeWidth="2.2" />
  </I>
)
export const IconChevronRight = ({ size = 8 }: { size?: number }) => (
  <I size={size}>
    <path d="m5.5 3 5 5-5 5" strokeWidth="2.2" />
  </I>
)
export const IconStar = ({ size = 11, filled = false }: { size?: number; filled?: boolean }) => (
  <svg
    width={size}
    height={size}
    viewBox="0 0 16 16"
    fill={filled ? 'currentColor' : 'none'}
    stroke="currentColor"
    strokeWidth="1.3"
    strokeLinejoin="round"
    aria-hidden="true"
  >
    <path d="M8 1.5 10 6l4.8.4-3.6 3.2 1 4.7L8 11.8l-4.2 2.5 1-4.7L1.2 6.4 6 6z" />
  </svg>
)
export const IconEye = ({ size = 10 }: { size?: number }) => (
  <I size={size}>
    <path d="M1.5 8s2.5-4.5 6.5-4.5S14.5 8 14.5 8 12 12.5 8 12.5 1.5 8 1.5 8z" />
    <circle cx="8" cy="8" r="2" />
  </I>
)
export const IconBrain = ({ size = 10 }: { size?: number }) => (
  <I size={size}>
    <path d="M8 2.5c-3 0-5 2-5 4.5 0 1.6.8 3 2 3.8V13c0 .8.7 1.5 1.5 1.5h3c.8 0 1.5-.7 1.5-1.5v-2.2c1.2-.8 2-2.2 2-3.8 0-2.5-2-4.5-5-4.5z" />
    <path d="M6 7.5h4M8 7.5v3" />
  </I>
)
export const IconWrench = ({ size = 10 }: { size?: number }) => (
  <I size={size}>
    <path d="M9.5 6.5 13 3a3.5 3.5 0 0 1-4.6 4.6L4 12a1.4 1.4 0 0 1-2-2l4.4-4.4A3.5 3.5 0 0 1 11 1l-2.5 2.5 1 2 2-1z" />
  </I>
)
export const IconPaperclip = ({ size = 14 }: { size?: number }) => (
  <I size={size}>
    <path d="m13 7.5-5 5a3.2 3.2 0 0 1-4.5-4.5l5.5-5.5a2.2 2.2 0 0 1 3 3L6.7 10.8a1.1 1.1 0 0 1-1.5-1.5L10 4.5" />
  </I>
)
export const IconX = ({ size = 11 }: { size?: number }) => (
  <I size={size}>
    <path d="m3.5 3.5 9 9M12.5 3.5l-9 9" />
  </I>
)
export const IconMenu = ({ size = 15 }: { size?: number }) => (
  <I size={size}>
    <path d="M2.5 4.5h11M2.5 8h11M2.5 11.5h11" />
  </I>
)
export const IconSliders = ({ size = 13 }: { size?: number }) => (
  <I size={size}>
    <path d="M2.5 5h11M2.5 11h11" />
    <circle cx="6" cy="5" r="1.6" fill="var(--z-surface)" />
    <circle cx="10" cy="11" r="1.6" fill="var(--z-surface)" />
  </I>
)
export const IconQuote = ({ size = 11 }: { size?: number }) => (
  <I size={size}>
    <path d="M3 10.5c0-4 1.5-6 4-7-1.5 2-1.5 3.5-1 4a2 2 0 1 1-3 3zM9 10.5c0-4 1.5-6 4-7-1.5 2-1.5 3.5-1 4a2 2 0 1 1-3 3z" />
  </I>
)
export const IconBranch = ({ size = 11 }: { size?: number }) => (
  <I size={size}>
    <circle cx="4" cy="4" r="1.8" />
    <circle cx="4" cy="12" r="1.8" />
    <circle cx="12" cy="7" r="1.8" />
    <path d="M4 5.8v4.4M4 8c0-2 6-1 8-1" />
  </I>
)
export const IconCheck = ({ size = 11 }: { size?: number }) => (
  <I size={size}>
    <path d="m2.5 8.5 3.5 3.5 7.5-8" />
  </I>
)
export const IconDownload = ({ size = 12 }: { size?: number }) => (
  <I size={size}>
    <path d="M8 2.5v8M4.5 7 8 10.5 11.5 7M2.5 13.5h11" />
  </I>
)
export const IconColumns = ({ size = 12 }: { size?: number }) => (
  <I size={size}>
    <rect x="2" y="2.5" width="12" height="11" rx="1.5" />
    <path d="M8 2.5v11" />
  </I>
)
export const IconInfo = ({ size = 12 }: { size?: number }) => (
  <I size={size}>
    <circle cx="8" cy="8" r="6" />
    <path d="M8 7.5V11M8 5.2v.1" />
  </I>
)
export const IconArrowDown = ({ size = 10 }: { size?: number }) => (
  <I size={size}>
    <path d="M8 3v10M3.5 8.5 8 13l4.5-4.5" />
  </I>
)
export const IconLightbulb = ({ size = 14 }: { size?: number }) => (
  <I size={size}>
    <path d="M8 1.5a4.5 4.5 0 0 1 2.5 8.2c-.5.4-.5 1-.5 1.8h-4c0-.8 0-1.4-.5-1.8A4.5 4.5 0 0 1 8 1.5zM6.5 13.5h3" />
  </I>
)
export const IconCode = ({ size = 14 }: { size?: number }) => (
  <I size={size}>
    <path d="m5 4.5-4 3.5 4 3.5M11 4.5l4 3.5-4 3.5" />
  </I>
)
export const IconDoc = ({ size = 14 }: { size?: number }) => (
  <I size={size}>
    <path d="M4 1.5h5.5L13 5v9.5H4zM9.5 1.5V5H13" />
    <path d="M6 8h5M6 10.5h5" />
  </I>
)
export const IconGlobe = ({ size = 14 }: { size?: number }) => (
  <I size={size}>
    <circle cx="8" cy="8" r="6" />
    <path d="M2 8h12M8 2c1.8 1.8 2.5 3.8 2.5 6S9.8 12.2 8 14c-1.8-1.8-2.5-3.8-2.5-6S6.2 3.8 8 2z" />
  </I>
)
export const IconMic = ({ size = 13 }: { size?: number }) => (
  <I size={size}>
    <rect x="6" y="1.5" width="4" height="8" rx="2" />
    <path d="M3.5 7.5a4.5 4.5 0 0 0 9 0M8 12v2.5" />
  </I>
)
export const IconSpeaker = ({ size = 11 }: { size?: number }) => (
  <I size={size}>
    <path d="M2.5 6v4h2.5L9 13V3L5 6zM11 5.5a3.5 3.5 0 0 1 0 5" />
  </I>
)
export const IconCommand = ({ size = 13 }: { size?: number }) => (
  <I size={size}>
    <path d="M5.5 5.5h5v5h-5zM5.5 5.5H4a2 2 0 1 1 2-2v1.5M10.5 5.5H12a2 2 0 1 0-2-2v1.5M5.5 10.5H4a2 2 0 1 0 2 2v-1.5M10.5 10.5H12a2 2 0 1 1-2 2v-1.5" />
  </I>
)

/** Provider glyphs — simple distinctive marks per provider. */
export function ProviderGlyph({ provider, size = 11 }: { provider: string; size?: number }) {
  switch (provider) {
    case 'openai':
      return (
        <I size={size}>
          <circle cx="8" cy="8" r="5.5" />
          <path d="M8 2.5v11M3.2 5.2l9.6 5.6M3.2 10.8l9.6-5.6" />
        </I>
      )
    case 'anthropic':
      return (
        <I size={size}>
          <path d="M3 13 8 3l5 10M5.2 9.5h5.6" />
        </I>
      )
    case 'xai':
      return (
        <I size={size}>
          <path d="m3 3 10 10M13 3 3 13" />
        </I>
      )
    case 'mistral':
      return (
        <I size={size}>
          <path d="M2.5 12V5M8 12V3M13.5 12V5M2.5 5c2 0 3-2 5.5-2s3.5 2 5.5 2" />
        </I>
      )
    case 'gemini':
      return (
        <I size={size}>
          <path d="M8 1.5C8.5 5 11 7.5 14.5 8 11 8.5 8.5 11 8 14.5 7.5 11 5 8.5 1.5 8 5 7.5 7.5 5 8 1.5z" />
        </I>
      )
    case 'qwen':
      return (
        <I size={size}>
          <circle cx="8" cy="8" r="5.5" />
          <path d="m10.5 10.5 3 3" />
        </I>
      )
    case 'deepseek':
      return (
        <I size={size}>
          <path d="M2 9c1.5-4 4-6.5 8-6.5 2 0 3.5.8 4 2-1 .3-2 1-2.5 2.5C10.5 10 7.5 13 4 13c-1 0-1.7-.3-2-1z" />
        </I>
      )
    case 'kimi':
      return (
        <I size={size}>
          <path d="M12.5 10.5A5.5 5.5 0 1 1 5.5 3.5a4.5 4.5 0 0 0 7 7z" />
        </I>
      )
    case 'perplexity':
      return (
        <I size={size}>
          <circle cx="8" cy="8" r="5.5" />
          <path d="M6 6.5c0-2.5 4-2.5 4 0 0 1.5-2 1.5-2 3M8 11.5v.1" />
        </I>
      )
    case 'together':
      return (
        <I size={size}>
          <circle cx="5.5" cy="5.5" r="2.5" />
          <circle cx="10.5" cy="10.5" r="2.5" />
          <circle cx="10.5" cy="5.5" r="2.5" />
          <circle cx="5.5" cy="10.5" r="2.5" />
        </I>
      )
    case 'deepinfra':
      return (
        <I size={size}>
          <path d="M8 1.5 14 5v6l-6 3.5L2 11V5z" />
          <path d="M8 8v6.5M8 8 2 5M8 8l6-3" />
        </I>
      )
    case 'cerebras':
      return (
        <I size={size}>
          <circle cx="8" cy="8" r="5.5" />
          <path d="M8 4.5A3.5 3.5 0 1 0 11.5 8" />
        </I>
      )
    default:
      return (
        <I size={size}>
          <circle cx="8" cy="8" r="5.5" />
          <path d="M8 5v3.5" />
        </I>
      )
  }
}