import { Breadcrumb, Card, Paragraph, Text, Title } from '@stash/ui'
import type { ArticleItem } from '../../data/types'
import { viewPath } from '../../data/view'
import { ArticleBody } from './ArticleBody'

/**
 * 文章详情页（对应模板图二）：
 * 面包屑 + 大标题 + [编辑] + 元信息行 + 白色正文卡。
 *
 * 正文是一整段 Markdown，交给 ArticleBody 解析渲染；
 * 渲染细节（支持哪些语法）都收在那一个组件里。
 */
type ArticleDetailViewProps = {
  article: ArticleItem
  categoryId: string
  categoryTitle: string
  onNavigate: (href: string) => void
  onEdit: () => void
  /** 只有登录后才显示 [编辑] */
  canEdit: boolean
}

export function ArticleDetailView({
  article,
  categoryId,
  categoryTitle,
  onNavigate,
  onEdit,
  canEdit,
}: ArticleDetailViewProps) {
  const meta = article.meta ?? ['2 年前', categoryTitle]
  const crumbs = [
    { label: '首页', href: '/' },
    { label: categoryTitle, href: viewPath({ type: 'detail', categoryId }) },
    { label: '文章' },
  ]

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

      <header className="article-head">
        <Title level={1} as="h2" className="article-heading">
          {article.title}
          {canEdit && (
            <button type="button" className="item-edit" title="编辑文章" onClick={onEdit}>
              [编辑]
            </button>
          )}
        </Title>

        <div className="article-meta">
          {meta.map((text, index) => (
            <span className="article-meta-item" key={text}>
              {index > 0 && <i className="article-meta-dot" aria-hidden="true" />}
              <Text size="xs" tone="muted">
                {text}
              </Text>
            </span>
          ))}
        </div>
      </header>

      <Card padding="none" className="article-body-card">
        <div className="article-body">
          <Paragraph tone="main" size="md" leading="relaxed" className="article-lead">
            {article.desc}
          </Paragraph>
          <ArticleBody markdown={article.body} />
        </div>
      </Card>
    </div>
  )
}