import { useTabStore } from '../../stores/tabStore'
import { useEditorStore } from '../../stores/editorStore'
import { getFileName } from '../../lib/fileUtils'
import { useDocStats } from '../../hooks/useDocStats'
import { LoadingSpinner } from '../LoadingSpinner/LoadingSpinner'

/** 文件信息 — 文件名或"就绪" */
export function FileInfoItem() {
  const activeTab = useTabStore(s => s.getActiveTab())
  return (
    <span id="status-text">
      {activeTab ? (activeTab.filePath ? getFileName(activeTab.filePath) : '未命名') : '就绪'}
    </span>
  )
}

/** 加载指示器 — 打开文件/加载目录/渲染中 */
export function LoadingItem() {
  const loadingStates = useEditorStore(s => s.loadingStates)
  const hasLoading = Object.values(loadingStates).some(Boolean)
  if (!hasLoading) return null

  const label = loadingStates['file-open']
    ? '正在打开文件...'
    : loadingStates['dir-load']
      ? '正在加载目录...'
      : loadingStates['markdown-render']
        ? '正在渲染...'
        : ''

  return (
    <span className="status-loading" aria-busy="true">
      <LoadingSpinner size="small" />
      <span>{label}</span>
    </span>
  )
}

/** 文档统计 — 行数 / 词数 / 字符数 */
export function DocStatsItem() {
  const activeTab = useTabStore(s => s.getActiveTab())
  const stats = useDocStats(activeTab?.content)
  if (!activeTab) return null

  return (
    <>
      <span className="status-stat" title="行数" aria-label={`${stats.lines} 行`}>{stats.lines} 行</span>
      <span className="status-divider">|</span>
      <span className="status-stat" title="单词数" aria-label={`${stats.words} 个单词`}>{stats.words} 词</span>
      <span className="status-divider">|</span>
      <span className="status-stat" title="字符数（含空格）" aria-label={`${stats.chars} 个字符`}>{stats.chars} 字符</span>
    </>
  )
}

/** 静态项 — 编码 */
export function EncodingItem() {
  return <span id="status-encoding">UTF-8</span>
}

/** 静态项 — 语言 */
export function LangItem() {
  return <span id="status-lang">Markdown</span>
}
