import type { CellInfo } from '@/utils/practice'
import { knowledgeAreaMap, processMap } from '@/data'

interface HintInfoProps {
  currentCell: CellInfo | undefined
}

export function HintInfo({ currentCell }: HintInfoProps) {
  if (!currentCell) return null

  if (currentCell.type === 'knowledge-area') {
    const ka = knowledgeAreaMap.get(currentCell.knowledgeAreaId)
    if (!ka?.tailoringFactors || ka.tailoringFactors.length === 0) {
      return (
        <div className="text-sm text-gray-500 dark:text-gray-400">
          暂无裁剪因素信息
        </div>
      )
    }

    return (
      <div className="space-y-2">
        <h3 className="text-sm font-semibold text-gray-900 dark:text-gray-100">
          敏捷裁剪因素
        </h3>
        <div className="space-y-1.5 text-xs">
          {ka.tailoringFactors.slice(0, 2).map((factor, index) => (
            <div key={index} className="flex gap-2">
              <span className="font-medium text-gray-700 dark:text-gray-300 shrink-0">
                {factor.title}：
              </span>
              <span className="text-gray-600 dark:text-gray-400 line-clamp-1">
                {factor.description}
              </span>
            </div>
          ))}
          {ka.tailoringFactors.length > 2 && (
            <div className="text-gray-500 dark:text-gray-500">
              +{ka.tailoringFactors.length - 2} 个因素...
            </div>
          )}
        </div>
      </div>
    )
  } else {
    const process = processMap.get(currentCell.processId!)
    const purpose = process?.purpose

    return (
      <div>
        <h3 className="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-1">
          主要作用
        </h3>
        {purpose ? (
          <p className="text-xs text-gray-700 dark:text-gray-300 line-clamp-2">
            {purpose}
          </p>
        ) : (
          <p className="text-xs text-gray-500 dark:text-gray-400">暂无主要作用说明</p>
        )}
      </div>
    )
  }
}