import type { FriendLite } from '../home/types'
import { loadImage } from './image'
import { getAvatarBgColor, getAvatarText } from './user'

/** 默认群名生成：所选好友前 4 个名字拼接，超过补「等 N 人」；为空兜底「群聊」 */
export function buildDefaultGroupName(members: FriendLite[]): string {
  if (members.length === 0) {
    return '群聊'
  }
  const names = members.slice(0, 4).map((m) => m.displayName || m.nickname || '')
  const head = names.filter(Boolean).join('、')
  if (members.length > 4) {
    return `${head}等${members.length}人`
  }
  return head || '群聊'
}

/** 群头像单格的输入：头像 URL + 名字 ，至少给一个，二者都缺时走灰底空格 */
export interface GroupAvatarMember {
  /** 头像 URL；缺失或加载失败时按 name 画色卡 */
  avatar?: string
  /** 显示名（昵称 / 备注）；色卡文字 + 底色 hash 来源 */
  name?: string
}

/** 群头像拼接的可选参数 */
export interface BuildGroupAvatarOptions {
  /** 输出画布边长（像素）；默认 64 */
  targetSize?: number
  /** 单格之间的间隔（像素）；默认 1 */
  divider?: number
  /** 画布底色；默认透明，让上下留白透出宿主容器底色 */
  background?: string
}

/** 单格在画布上的位置 + 尺寸 */
interface CellRect {
  x: number
  y: number
  w: number
  h: number
}

/** 单格的最终绘制内容 */
type Cell =
  | { kind: 'image'; img: HTMLImageElement }
  | { kind: 'color'; text: string; bg: string }

/**
 * 把群成员头像拼成一张方形群头像 dataURL，按 1 ~ 9 张走九宫格变体布局
 *
 * - 仅取前 9 个成员
 * - 单格 avatar 为空 / 加载失败：按 name 在 canvas 上画色卡兜底
 * - 跨域要求图片源开启 CORS（img.crossOrigin = 'anonymous'）
 */
export async function buildGroupAvatar(
  members: GroupAvatarMember[],
  options: BuildGroupAvatarOptions = {}
): Promise<string> {
  const targetSize = options.targetSize ?? 64
  const divider = options.divider ?? 1
  const background = options.background

  const top = members.slice(0, 9)
  if (top.length === 0) {
    return ''
  }

  const cells = await Promise.all(top.map((m) => resolveCell(m)))
  const rects = computeCellRects(cells.length, targetSize, divider)

  const canvas = document.createElement('canvas')
  canvas.width = targetSize
  canvas.height = targetSize
  const ctx = canvas.getContext('2d')
  if (!ctx) {
    return ''
  }
  if (background) {
    ctx.fillStyle = background
    ctx.fillRect(0, 0, targetSize, targetSize)
  }
  cells.forEach((cell, idx) => {
    const rect = rects[idx]
    if (!rect) {
      return
    }
    drawCell(ctx, rect, cell)
  })
  return canvas.toDataURL('image/png')
}

/** 群头像 dataURL 缓存上限：每条约 5 ~ 30KB，200 条软封顶约 5MB 常驻 */
const MERGED_AVATAR_CACHE_MAX = 200
const mergedAvatarCache = new Map<string, string>()

/** 取群头像 dataURL 缓存；命中时按 LRU 提到末尾 */
export function getCachedGroupAvatar(key: string): string | undefined {
  const cached = mergedAvatarCache.get(key)
  if (cached === undefined) {
    return undefined
  }
  mergedAvatarCache.delete(key)
  mergedAvatarCache.set(key, cached)
  return cached
}

/** 写群头像 dataURL 缓存；超上限时丢弃最早一条（Map 迭代顺序 = 插入顺序，配合 get 的提升即 LRU） */
export function setCachedGroupAvatar(key: string, value: string): void {
  if (mergedAvatarCache.has(key)) {
    mergedAvatarCache.delete(key)
  } else if (mergedAvatarCache.size >= MERGED_AVATAR_CACHE_MAX) {
    const oldest = mergedAvatarCache.keys().next().value
    if (oldest !== undefined) {
      mergedAvatarCache.delete(oldest)
    }
  }
  mergedAvatarCache.set(key, value)
}

/** 单成员 → Cell：有 avatar 且加载成功走 image，否则走 color */
async function resolveCell(member: GroupAvatarMember): Promise<Cell> {
  if (member.avatar) {
    const img = await loadImage(member.avatar)
    if (img) {
      return { kind: 'image', img }
    }
  }
  return {
    kind: 'color',
    text: getAvatarText(member.name),
    bg: getAvatarBgColor(member.name)
  }
}

/** 把单个 Cell 画到 ctx 上指定格子里；image 走 cover 裁剪保比例，color 走 fillRect + 居中文字 */
function drawCell(
  ctx: CanvasRenderingContext2D,
  rect: CellRect,
  cell: Cell
): void {
  const { x, y, w, h } = rect
  if (cell.kind === 'image') {
    drawImageCover(ctx, cell.img, x, y, w, h)
    return
  }
  ctx.fillStyle = cell.bg
  ctx.fillRect(x, y, w, h)
  if (!cell.text) {
    return
  }
  // 字号按短边算；单字 0.42、双字 0.34
  const baseSize = Math.min(w, h)
  const fontSize = Math.floor(baseSize * (cell.text.length > 1 ? 0.34 : 0.42))
  ctx.fillStyle = '#FFFFFF'
  ctx.font = `500 ${fontSize}px -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif`
  ctx.textAlign = 'center'
  ctx.textBaseline = 'middle'
  ctx.fillText(cell.text, x + w / 2, y + h / 2)
}

/** cover 裁剪：从源图中心裁出与目标矩形同比例的子区域，画到目标矩形（保持比例不变形） */
function drawImageCover(
  ctx: CanvasRenderingContext2D,
  img: HTMLImageElement,
  dx: number,
  dy: number,
  dw: number,
  dh: number
): void {
  const srcAspect = img.width / img.height
  const dstAspect = dw / dh
  let sx = 0
  let sy = 0
  let sw = img.width
  let sh = img.height
  if (srcAspect > dstAspect) {
    sw = sh * dstAspect
    sx = (img.width - sw) / 2
  } else if (srcAspect < dstAspect) {
    sh = sw / dstAspect
    sy = (img.height - sh) / 2
  }
  ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh)
}

/**
 * 按张数计算每格的位置 + 尺寸
 *
 * - 1 张：占满画布
 * - 2~4 张：2 列 2 行正方形单格
 * - 5~6 张：3 列 2 行正方形单格 + 垂直居中
 * - 7~9 张：3 列 3 行正方形单格
 */
function computeCellRects(count: number, target: number, divider: number): CellRect[] {
  if (count <= 0) {
    return []
  }
  if (count === 1) {
    return [{ x: 0, y: 0, w: target, h: target }]
  }
  if (count <= 4) {
    return computeCellRectsSmall(count, target, divider)
  }
  if (count <= 6) {
    return computeCellRectsMedium(count, target, divider)
  }
  return computeCellRectsLarge(count, target, divider)
}

/** 2~4 张：2 列 2 行正方形 */
function computeCellRectsSmall(count: number, target: number, divider: number): CellRect[] {
  const s = (target - 3 * divider) / 2
  const step = s + divider
  const rects: CellRect[] = []
  switch (count) {
    case 2: {
      // 居中 1 行（留上下空白）
      const y = target / 4
      rects.push({ x: divider, y, w: s, h: s })
      rects.push({ x: divider + step, y, w: s, h: s })
      break
    }
    case 3: {
      // 上 1 居中 + 下 2
      rects.push({ x: target / 4, y: divider, w: s, h: s })
      const y1 = divider + step
      rects.push({ x: divider, y: y1, w: s, h: s })
      rects.push({ x: divider + step, y: y1, w: s, h: s })
      break
    }
    case 4: {
      // 2×2 满铺
      rects.push({ x: divider, y: divider, w: s, h: s })
      rects.push({ x: divider + step, y: divider, w: s, h: s })
      const y1 = divider + step
      rects.push({ x: divider, y: y1, w: s, h: s })
      rects.push({ x: divider + step, y: y1, w: s, h: s })
      break
    }
  }
  return rects
}

/** 5~6 张：3 列 2 行正方形单格 + 垂直居中；上下留白由透明背景透出 GroupAvatar 容器底色 */
function computeCellRectsMedium(count: number, target: number, divider: number): CellRect[] {
  const s = (target - 4 * divider) / 3
  const step = s + divider
  const xs = [divider, divider + step, divider + 2 * step]
  // 2 行高 + 1 行间 div
  const totalH = 2 * s + divider
  const y0 = (target - totalH) / 2
  const y1 = y0 + step
  const rects: CellRect[] = []
  if (count === 5) {
    // 上 2 居中（左右对称留白） + 下 3 左右贴边
    const upX0 = (target - 2 * s - divider) / 2
    rects.push({ x: upX0, y: y0, w: s, h: s })
    rects.push({ x: upX0 + step, y: y0, w: s, h: s })
    rects.push({ x: xs[0], y: y1, w: s, h: s })
    rects.push({ x: xs[1], y: y1, w: s, h: s })
    rects.push({ x: xs[2], y: y1, w: s, h: s })
    return rects
  }
  // count === 6：上 3 + 下 3 满铺
  rects.push({ x: xs[0], y: y0, w: s, h: s })
  rects.push({ x: xs[1], y: y0, w: s, h: s })
  rects.push({ x: xs[2], y: y0, w: s, h: s })
  rects.push({ x: xs[0], y: y1, w: s, h: s })
  rects.push({ x: xs[1], y: y1, w: s, h: s })
  rects.push({ x: xs[2], y: y1, w: s, h: s })
  return rects
}

/** 7~9 张：3 列 3 行正方形单格 */
function computeCellRectsLarge(count: number, target: number, divider: number): CellRect[] {
  const s = (target - 4 * divider) / 3
  const step = s + divider
  const xs = [divider, divider + step, divider + 2 * step]
  const ys = [divider, divider + step, divider + 2 * step]
  const rects: CellRect[] = []
  if (count === 7) {
    // 上 1 居中 + 中 3 + 下 3
    rects.push({ x: xs[1], y: ys[0], w: s, h: s })
    rects.push({ x: xs[0], y: ys[1], w: s, h: s })
    rects.push({ x: xs[1], y: ys[1], w: s, h: s })
    rects.push({ x: xs[2], y: ys[1], w: s, h: s })
    rects.push({ x: xs[0], y: ys[2], w: s, h: s })
    rects.push({ x: xs[1], y: ys[2], w: s, h: s })
    rects.push({ x: xs[2], y: ys[2], w: s, h: s })
    return rects
  }
  if (count === 8) {
    // 上 2 居中 + 中 3 + 下 3
    const upX0 = (target - 2 * s - divider) / 2
    rects.push({ x: upX0, y: ys[0], w: s, h: s })
    rects.push({ x: upX0 + step, y: ys[0], w: s, h: s })
    rects.push({ x: xs[0], y: ys[1], w: s, h: s })
    rects.push({ x: xs[1], y: ys[1], w: s, h: s })
    rects.push({ x: xs[2], y: ys[1], w: s, h: s })
    rects.push({ x: xs[0], y: ys[2], w: s, h: s })
    rects.push({ x: xs[1], y: ys[2], w: s, h: s })
    rects.push({ x: xs[2], y: ys[2], w: s, h: s })
    return rects
  }
  // count === 9：3×3 满铺
  for (let row = 0; row < 3; row++) {
    for (let col = 0; col < 3; col++) {
      rects.push({ x: xs[col], y: ys[row], w: s, h: s })
    }
  }
  return rects
}