import {
  siAlmalinux,
  siAlpinelinux,
  siApple,
  siArchlinux,
  siCentos,
  siDebian,
  siFedora,
  siFreebsd,
  siKalilinux,
  siLinux,
  siLinuxmint,
  siNixos,
  siOpensuse,
  siOpenwrt,
  siRaspberrypi,
  siRedhat,
  siRockylinux,
  siUbuntu,
} from 'simple-icons'

interface Glyph {
  /** 24×24 的图形路径。 */
  path: string
  /** 品牌色（6 位十六进制）；黑色的图标不填，用文字颜色。 */
  color?: string
}

const fromSimple = (icon: { path: string; hex: string }, useBrandColor = true): Glyph => ({ path: icon.path, color: useBrandColor ? icon.hex : undefined })

/** Windows 的四个窗格（simple-icons 没有收，自己画的最简形状）。 */
const WINDOWS: Glyph = { path: 'M2 4.6 10.4 3.4v7.8H2zM11.6 3.2 22 1.8v9.4H11.6zM2 12.8h8.4v7.8L2 19.4zM11.6 12.8H22v9.4l-10.4-1.4z', color: '0078D4' }

/** 按系统名挑图标：先看 Windows、macOS，再按发行版名字找，认不出的 Linux 用企鹅。 */
function pickGlyph(os: string | null | undefined, name: string | null | undefined): Glyph | undefined {
  if (os === 'windows') return WINDOWS
  if (os === 'macos') return fromSimple(siApple, false)
  const n = (name ?? '').toLowerCase()
  if (n.includes('debian')) return fromSimple(siDebian)
  if (n.includes('ubuntu')) return fromSimple(siUbuntu)
  if (n.includes('alpine')) return fromSimple(siAlpinelinux)
  if (n.includes('openwrt')) return fromSimple(siOpenwrt)
  if (n.includes('raspbian') || n.includes('raspberry')) return fromSimple(siRaspberrypi)
  if (n.includes('kali')) return fromSimple(siKalilinux)
  if (n.includes('mint')) return fromSimple(siLinuxmint)
  if (n.includes('rocky')) return fromSimple(siRockylinux)
  if (n.includes('alma')) return fromSimple(siAlmalinux, false)
  if (n.includes('centos')) return fromSimple(siCentos)
  if (n.includes('fedora')) return fromSimple(siFedora)
  if (n.includes('red hat') || n.includes('rhel')) return fromSimple(siRedhat)
  if (n.includes('arch')) return fromSimple(siArchlinux)
  if (n.includes('suse')) return fromSimple(siOpensuse)
  if (n.includes('nixos')) return fromSimple(siNixos)
  if (n.includes('freebsd')) return fromSimple(siFreebsd)
  if (os === 'linux') return fromSimple(siLinux, false)
  return undefined
}

/** 系统的小图标（Debian、Ubuntu、Windows、macOS……）。认不出的系统不画。 */
export function OsIcon({ os, name }: { os: string | null | undefined; name: string | null | undefined }) {
  const glyph = pickGlyph(os, name)
  if (!glyph) return null
  return (
    <svg className="os-icon" viewBox="0 0 24 24" role="img" aria-label={name ?? os ?? ''} style={glyph.color ? ({ '--os-c': `#${glyph.color}` } as React.CSSProperties) : undefined}>
      <title>{name ?? os ?? ''}</title>
      <path d={glyph.path} className={glyph.color ? 'brand' : 'plain'} />
    </svg>
  )
}