/**
 * skeleton-slots — 骨架屏槽位尺寸表（与真实组件 DOM 盒模型 1:1 对齐）
 *
 * **原位替换原则**：loading 时每个骨条占据的 box（宽高、圆角、间距、flex 槽位）
 * 必须与 content 就绪后对应节点一致；数据到达后在同一槽位内替换，禁止布局跳动。
 *
 * **禁止**：用 Skeleton size=sm/md/lg 抽象档代替已定义的业务槽位；
 * **允许**：文本行在「宽度未知」时使用 w-3/4、w-full 等比例占位，但行高必须与 typography token 一致。
 *
 * 事实源对照：Card.tokens.js、Tag.jsx SIZE_CONFIG、Avatar sizes、Table 单元格行高。
 */

/** 通用 typography / 控件槽位（Tailwind 类名） */
export const SKELETON_SLOT = {
  cardTitle: 'h-[var(--leading-card-title,22px)]',
  cardCopy: 'h-[var(--leading-card-copy,21px)]',
  /** 2× leading-card-copy（21px）· 数据卡 / info2 描述 line-clamp-2 */
  lineClamp2CardCopy: 'h-[42px]',
  /** 2× leading-5（20px）· 信息卡片1 描述 line-clamp-2 */
  lineClamp2Leading5: 'h-10',
  /** 2× leading-6（24px）· 信息卡片3 标题 line-clamp-2 */
  lineClamp2Leading6: 'h-12',
  /** 2× 22px 行高 · 信息卡片3 描述 line-clamp-2 */
  lineClamp2Leading22: 'h-[44px]',
  textSmLeading5: 'h-5',
  textSmLeading6: 'h-6',
  textXsLeading4: 'h-4',
  icon14: 'size-[14px]',
  /** Icon size=12 · ConversationList META 单号图标 */
  icon12: 'size-3 shrink-0',
  /** 信息卡片1 / 信息卡片2 主图标盒 48×48 · rounded-lg / 12px */
  iconBox48: 'size-12 rounded-[var(--radius-lg,12px)]',
  /** 数据卡片右上可选图标盒 48×48 · rounded-xl / 16px */
  dataIconBox48: 'size-12 rounded-xl',
  productImage56: 'size-14 rounded-[var(--radius-lg,12px)]',
  tagL: 'h-6 rounded-md',
  tagLMid: 'h-6 w-12 rounded-md',
  tagLWide: 'h-6 w-14 rounded-md',
  tagLLong: 'h-6 w-16 rounded-md',
  tagStatus: 'h-6 w-10 rounded-md',
  /** Tag size=m · ConversationList 列表项标签 · 20px（与 Tag.jsx SIZE_CONFIG 一致） */
  tagM: 'h-[20px] rounded-md',
  tagMSm: 'h-[20px] w-12 rounded-md',
  tagMMid: 'h-[20px] w-14 rounded-md',
  actionCircle: 'size-7 rounded-full',
  avatarXxs: 'size-4 rounded-full',
  /** Avatar size=s · ConversationList 行内头像 · 32px */
  avatarS: 'size-8 shrink-0 rounded-full',
  avatarMd: 'size-8 rounded-full',
  statValue: 'h-4 w-11',
  statValueWide: 'h-4 w-12',
  tableCellText: 'h-5',
  /** ConversationList 默认行 · text-sm leading-6 标题槽 */
  conversationTitle: 'min-w-0 flex-1 h-6',
  conversationUser: 'block h-4 w-[50px] shrink-0',
  conversationOrder: 'min-w-0 flex-1 h-4',
  conversationTime: 'ml-auto h-4 w-10 shrink-0 pl-2',
  cardTitleLeading5: 'h-5 min-w-0 flex-1',
  ticketUser: 'block h-4 max-w-[52px] shrink-0',
  ticketProgressClamp2: 'h-10 w-full',
};

/** 场景间距 — 与 Card / ConversationList 布局 class 一致 */
export const SKELETON_SLOT_GAP = {
  copy: 'gap-2',
  block: 'gap-4',
  stats: 'gap-5',
  infoBody: 'gap-5',
  infoIcon: 'gap-6',
  cardMain: 'gap-7',
  productRow: 'gap-[12px]',
  dataIconRow: 'gap-5',
  listRow: 'gap-3',
  listSection: 'gap-4',
  /** ConversationList 默认列表 · SECTION_CONTENT / LIST · gap-1 */
  conversationListRows: 'gap-1',
};

/** ConversationList loading 外壳 class — 与 ConversationList.jsx 布局常量 1:1 */
export const SKELETON_CONVERSATION_LIST = {
  listWrap: 'flex w-full flex-col gap-1',
  /** ITEM_BASE · p-3 gap-3 · 内容区 44px + 上下 padding 24px = 68px */
  item: 'relative flex min-h-[68px] w-full items-center gap-3 overflow-hidden rounded-lg p-3',
  itemBody: 'flex min-w-0 flex-1 flex-col gap-1',
  titleRow: 'flex min-w-0 items-start justify-between gap-2',
  tags: 'flex shrink-0 items-center gap-1',
  meta: 'flex min-w-0 items-center gap-1 text-xs leading-4',
  orderWrap: 'flex min-w-0 items-center gap-1',
  section: 'flex flex-col gap-1',
  sectionHeader: [
    'flex h-5 w-full items-center justify-between gap-2 rounded-md p-0.5',
    'text-xs leading-4 text-foreground-muted',
  ].join(' '),
  sectionTitle: 'flex min-w-0 items-center gap-1',
  sectionContent: 'flex flex-col gap-1',
  ticketSection: 'flex flex-col gap-4',
  ticketSectionHeader: 'flex items-center gap-1 text-xs leading-4 text-foreground-muted',
  cardShell: 'flex w-full flex-col rounded-xl bg-surface shadow-list',
  cardHeader: 'flex items-start gap-3 px-4 pt-3 pb-2',
  cardHeaderMain: 'flex min-w-0 flex-1 flex-wrap items-center gap-1',
  cardMessage: 'flex h-[196px] flex-col gap-3 overflow-hidden px-4 pb-2',
  cardMessageRowUser: 'flex w-full justify-start',
  cardMessageRowOutgoing: 'flex w-full justify-end',
  cardFooter: 'px-4 py-4',
  ticketShell: 'flex w-full flex-col gap-3 overflow-hidden rounded-xl bg-surface px-3 py-3',
  ticketHead: 'flex min-w-0 items-start gap-3',
  ticketBody: 'flex min-w-0 flex-1 flex-col gap-1',
  ticketTitleRow: 'flex min-w-0 items-center gap-2',
  ticketTitleTags: 'flex shrink-0 items-center gap-1.5',
  ticketProgress: 'rounded-lg bg-blueGrey-100 px-3 py-2',
  ticketMetaTags: 'flex min-w-0 flex-wrap items-center gap-1.5',
  ticketMetaRow: 'flex min-w-0 items-center gap-2',
};

/**
 * 场景骨条元数据 — 平台 Token 面板与 AI 规范引用
 * className 必须与 SKELETON_SLOT 或 scene renderer 内实际渲染一致
 */
export const SKELETON_SCENE_BONES = {
  card: {
    label: '卡片场景（ConversationList 卡片 / 通用封面卡）',
    ref: 'Card variant=card 消息卡、无 Card 壳的纯占位',
    layout: '封面 16:9 + 标题行 + 副标题行',
    bones: [
      { variant: 'rounded', className: 'aspect-[16/9] w-full rounded-lg', ref: '消息卡封面区 16:9' },
      { variant: 'text', className: `${SKELETON_SLOT.textSmLeading5} w-3/4`, ref: '标题 text-sm leading-5 · 20px' },
      { variant: 'text', className: `${SKELETON_SLOT.textXsLeading4} w-1/2`, ref: '副文案 text-xs leading-4 · 16px' },
    ],
  },
  list: {
    label: '列表场景（ConversationList 默认行）',
    ref: 'ConversationList.Item · ITEM_BASE',
    layout: 'Avatar s 32px + ITEM_BODY gap-1：标题行 leading-6 + Tag m×2 + META 用户 50px + icon12 + 单号 + 时间',
    row: [
      { variant: 'circle', className: SKELETON_SLOT.avatarS, ref: 'Avatar size=s · 32px' },
      { variant: 'text', className: SKELETON_SLOT.conversationTitle, ref: 'h3 ITEM_TITLE · text-sm leading-6' },
      { variant: 'text', className: SKELETON_SLOT.tagMMid, ref: 'Tag m · 辅助 grey' },
      { variant: 'text', className: SKELETON_SLOT.tagMSm, ref: 'Tag m · 主状态' },
      { variant: 'text', className: SKELETON_SLOT.conversationUser, ref: 'USER · w-[50px] text-xs leading-4' },
      { variant: 'circle', className: SKELETON_SLOT.icon12, ref: 'Icon file-05 · 12px' },
      { variant: 'text', className: SKELETON_SLOT.conversationOrder, ref: 'ORDER · flex-1 truncate' },
      { variant: 'text', className: SKELETON_SLOT.conversationTime, ref: 'TIME · ml-auto pl-2' },
    ],
  },
  'conversation-list-row': {
    label: 'ConversationList 默认列表项',
    ref: 'ConversationList.Item',
    layout: '同 list · ITEM_BASE p-3 gap-3 · 列表区 gap-1',
  },
  'conversation-list-card-im': {
    label: 'ConversationList IM 卡片',
    ref: 'ConversationList.CardItem · CARD_ITEM',
    layout: 'HEADER px-4 pt-3 pb-2 + MESSAGE h-196px + FOOTER px-4 py-4',
  },
  'conversation-list-card-ticket': {
    label: 'ConversationList 工单卡片',
    ref: 'ConversationList.TicketCardItem · TICKET_CARD_RICH',
    layout: 'HEAD gap-3 + PROGRESS 40px + META tags + META row',
  },
  'table-row': {
    label: '表格行场景',
    ref: 'Table 标准表 tbody 行 · text-sm leading-5',
    layout: '多列文本槽 · 行高 44px',
    bones: [
      { variant: 'text', className: `${SKELETON_SLOT.tableCellText} w-[120px] shrink-0`, ref: '首列 link/text · 20px 行高' },
      { variant: 'text', className: `${SKELETON_SLOT.tableCellText} min-w-0 flex-1`, ref: '主列 flex-1' },
      { variant: 'text', className: `${SKELETON_SLOT.tableCellText} w-20 shrink-0`, ref: '状态/标签列' },
      { variant: 'text', className: `${SKELETON_SLOT.tableCellText} w-16 shrink-0`, ref: '时间/操作前列' },
    ],
  },
  'card-data': {
    label: 'Card type=data 加载槽',
    ref: 'Card.jsx DATA_CARD · CONTENT(gap-4) + FOOTER(gap-4)',
    layout: 'justify-between gap-7；上块 gap-4：COPY(gap-2) 标题 22px + 描述 42px + STATS(gap-5) 3×(icon14+数值)；下块 Tag l×2 + actionCircle 28px',
    bones: [
      { variant: 'text', className: SKELETON_SLOT.cardTitle, ref: 'h3 TITLE · leading-card-title 22px' },
      { variant: 'text', className: `${SKELETON_SLOT.lineClamp2CardCopy} w-full`, ref: 'p DESCRIPTION · 2 行 leading-card-copy' },
      { variant: 'circle', className: SKELETON_SLOT.icon14, ref: 'stats Icon 14px ×3' },
      { variant: 'text', className: SKELETON_SLOT.statValue, ref: 'stats 数值 h-4' },
      { variant: 'text', className: SKELETON_SLOT.tagLMid, ref: 'Tag l 左下 ×2' },
      { variant: 'circle', className: SKELETON_SLOT.actionCircle, ref: 'ACTION 28px 圆形箭头' },
      { variant: 'rounded', className: SKELETON_SLOT.dataIconBox48, ref: '可选 dataIcon 48px rounded-xl' },
    ],
  },
  'card-product': {
    label: 'Card type=product 加载槽',
    ref: 'Card.jsx PRODUCT_CARD · p-3 rounded-md · 横排 gap-3',
    layout: 'p-3 gap-3：productImage56 56px + PRODUCT_BODY h-14 gap-2：标题行(标题+Tag l) + 副标题 21px',
    bones: [
      { variant: 'rounded', className: SKELETON_SLOT.productImage56, ref: 'PRODUCT_IMAGE_FRAME 56px' },
      { variant: 'text', className: `${SKELETON_SLOT.cardTitle} flex-1`, ref: 'PRODUCT_TITLE 22px' },
      { variant: 'text', className: SKELETON_SLOT.tagLMid, ref: '状态 Tag l 24px' },
      { variant: 'text', className: `${SKELETON_SLOT.cardCopy} w-full`, ref: 'PRODUCT_DESCRIPTION 21px 单行' },
    ],
  },
  'card-info': {
    label: 'Card type=info 加载槽',
    ref: 'Card.jsx INFO_BODY gap-5 · icon-left gap-6 / icon-right grid',
    layout: 'iconBox48 + 标题行(标题+Tag l) + lineClamp2Leading5 40px 描述 + 底栏 avatarXxs+昵称 + 3×stat',
    bones: [
      { variant: 'rounded', className: SKELETON_SLOT.iconBox48, ref: 'INFO 主图标 48px rounded-lg' },
      { variant: 'text', className: `${SKELETON_SLOT.cardTitle} w-2/3`, ref: 'INFO_TITLE 22px' },
      { variant: 'text', className: SKELETON_SLOT.tagLWide, ref: 'infoMetaBadge Tag l' },
      { variant: 'text', className: `${SKELETON_SLOT.lineClamp2Leading5} w-full`, ref: 'INFO_DESCRIPTION line-clamp-2' },
      { variant: 'circle', className: SKELETON_SLOT.avatarXxs, ref: 'Avatar xxs 16px' },
      { variant: 'text', className: `${SKELETON_SLOT.textXsLeading4} w-16`, ref: 'infoMetaLabel 12px' },
    ],
  },
  'card-info2': {
    label: 'Card type=info2 加载槽',
    ref: 'Card.jsx ANIMATED_CONTENT · min-h 180px',
    layout: 'ANIMATED_HEADER 图标 + ANIMATED_COPY(gap-2) 标题+描述42px + ANIMATED_FOOTER Tag l + actionCircle',
    bones: [
      { variant: 'rounded', className: SKELETON_SLOT.iconBox48, ref: 'ANIMATED_ICON_FRAME 48px' },
      { variant: 'text', className: `${SKELETON_SLOT.cardTitle} w-2/3`, ref: 'ANIMATED_TITLE 22px' },
      { variant: 'text', className: `${SKELETON_SLOT.lineClamp2CardCopy} w-full`, ref: 'ANIMATED_DESCRIPTION line-clamp-2' },
      { variant: 'text', className: SKELETON_SLOT.tagLWide, ref: 'animatedBadge Tag white l' },
      { variant: 'circle', className: SKELETON_SLOT.actionCircle, ref: 'ACTION 28px' },
    ],
  },
  'card-info3': {
    label: 'Card type=info3 加载槽',
    ref: 'Card.jsx INFO3_CARD · p-[16px] rounded-lg · gap-2 · h-auto',
    layout: '标题 lineClamp2Leading6 48px + tagStatus + lineClamp2Leading22 44px + meta gap-3(icon14+文案)×2',
    bones: [
      { variant: 'text', className: `${SKELETON_SLOT.lineClamp2Leading6} flex-1`, ref: 'INFO3_TITLE line-clamp-2 leading-6' },
      { variant: 'text', className: SKELETON_SLOT.tagStatus, ref: 'status Tag 右上' },
      { variant: 'text', className: `${SKELETON_SLOT.lineClamp2Leading22} w-full`, ref: 'INFO3_DESCRIPTION line-clamp-2' },
      { variant: 'circle', className: SKELETON_SLOT.icon14, ref: 'metaItems Icon 14px' },
      { variant: 'text', className: `${SKELETON_SLOT.textXsLeading4} w-24`, ref: 'meta 文案 12px' },
    ],
  },
};

/**
 * AI 推荐内容面板骨架 — 与 AiSuggestionShared（SUGGESTION_LIST_CLASS）1:1
 * 骨条填充色固定 --gradient-ai-fill-1，与已加载面板的 AI Fill-1 容器一致。
 */
export const SKELETON_AI_BONE_FILL_STYLE = {
  backgroundImage: 'var(--gradient-ai-fill-1)',
};

export const SKELETON_AI_SUGGESTION = {
  listWrap: 'inline-flex w-full flex-col rounded-md p-1 gap-0.5',
  listSurface: { background: 'var(--gradient-ai-fill-1)' },
  itemWrap: 'flex w-full items-center rounded-[6px] px-3 py-1',
  /** 单条推荐文案槽 · text-sm leading-5 · 20px */
  lineBone: 'h-5 rounded-sm',
  lineWidthByIndex: ['w-full', 'w-11/12', 'w-4/5'],
};

export const SKELETON_SCENE_BONES_AI_SUGGESTION = {
  'ai-suggestion-panel': {
    label: 'AI 推荐内容面板',
    ref: 'AiSuggestionShared · Input/Select/TextArea 下方推荐区',
    layout: '列表容器 rounded-md p-1 gap-0.5 · 条目 rounded-[6px] px-3 py-1 · 文案 h-5 leading-5',
    bones: [
      { variant: 'text', className: `${SKELETON_AI_SUGGESTION.lineBone} w-full`, ref: '推荐文案行 20px' },
    ],
  },
};

/** Card loading preset 与 Card type 映射 */
export const SKELETON_CARD_PRESET_BY_TYPE = {
  data: 'card-data',
  product: 'card-product',
  info: 'card-info',
  info2: 'card-info2',
  info3: 'card-info3',
};
