import { Breadcrumb, Card, Empty, Space, Title } from '@stash/ui'
import {
  categoryCount,
  type AppItem,
  type ArticleItem,
  type Category,
  type PosterItem,
} from '../../data/types'
import { viewPath } from '../../data/view'
import { AppGrid } from './AppGrid'
import { CesCardGrid } from './CesCardGrid'
import { GroupBlock } from './GroupBlock'
import { PosterGrid } from './PosterGrid'

/**
 * 分类明细视图：面包屑 + hero（图标 / 标题 / 数量）+ 内容区。
 *
 * 内容区按分类类型切换：
 * - apps：指定分组时只渲染该组，否则单组扁平渲染、多组带小标题分组渲染；
 * - posters：6 列海报；
 * - articles：上图下文白卡网格。
 */
type DetailViewProps = {
  category: Category
  /** 从侧栏子菜单进入时指定的分组 */
  groupId?: string
  /** 点击面包屑中间项（SPA 路由） */
  onNavigate: (href: string) => void
  /** 点击卡片 / 海报进入条目详情 */
  onOpenItem: (itemId: string) => void
}

export function DetailView({ category, groupId, onNavigate, onOpenItem }: DetailViewProps) {
  // 三种类型共用「分区 → 分组 → 条目」结构；这里抹平联合类型，渲染时再按 kind 分派
  type RenderItem = AppItem | PosterItem | ArticleItem
  const groups = category.groups as {
    id: string
    name: string
    items: RenderItem[]
  }[]
  const activeGroup =
    groupId !== undefined ? groups.find((group) => group.id === groupId) : undefined

  const title = activeGroup?.name ?? category.title
  const count = activeGroup !== undefined ? activeGroup.items.length : categoryCount(category)
  const crumbs =
    activeGroup !== undefined
      ? [
          { label: '首页', href: '/' },
          { label: category.title, href: viewPath({ type: 'detail', categoryId: category.id }) },
          { label: activeGroup.name },
        ]
      : [
          { label: '首页', href: '/' },
          { label: category.title, href: viewPath({ type: 'detail', categoryId: category.id }) },
        ]

  /** 按类型渲染一组条目 */
  function renderItems(items: RenderItem[]) {
    if (category.kind === 'posters') {
      return <PosterGrid items={items as PosterItem[]} variant="detail" onOpen={onOpenItem} />
    }

    if (category.kind === 'articles') {
      return <CesCardGrid items={items as ArticleItem[]} onOpen={onOpenItem} />
    }

    return <AppGrid items={items as AppItem[]} variant="detail" onOpen={onOpenItem} />
  }

  function renderBody() {
    if (activeGroup !== undefined) {
      return renderItems(activeGroup.items)
    }

    const direct = (category.items ?? []) as RenderItem[]
    // 空分组不占篇幅（管理后台仍然保留，之后可以往里加条目）
    const filledGroups = groups.filter((group) => group.items.length > 0)

    if (filledGroups.length === 0) {
      return direct.length > 0 ? (
        renderItems(direct)
      ) : (
        <Empty text={'emptyText' in category ? (category.emptyText ?? '暂无内容') : '暂无内容'} />
      )
    }

    if (filledGroups.length === 1 && direct.length === 0) {
      return renderItems(filledGroups[0].items)
    }

    return (
      <Space direction="column" gap="lg" align="stretch">
        {filledGroups.map((group) => (
          <GroupBlock
            key={group.id}
            name={group.name}
            barColor={category.barColor !== '' ? category.barColor : undefined}
          >
            {renderItems(group.items)}
          </GroupBlock>
        ))}
        {direct.length > 0 && (
          <GroupBlock
            name="未分组"
            barColor={category.barColor !== '' ? category.barColor : undefined}
          >
            {renderItems(direct)}
          </GroupBlock>
        )}
      </Space>
    )
  }

  return (
    <div className="detail-view">
      <Card padding="none" className="detail-nav">
        <Breadcrumb
          className="detail-breadcrumb"
          items={crumbs}
          onNavigate={onNavigate}
        />
      </Card>

      <div className="detail-hero">
        <span className="detail-hero-icon" aria-hidden="true">
          {category.icon}
        </span>
        <Title level={1} as="h2" weight="strong" className="detail-hero-title">
          {title}
        </Title>
        <span className="detail-hero-count">[{count}]</span>
      </div>

      {renderBody()}
    </div>
  )
}