/**
 * 49过程矩阵图组件
 * 展示知识领域(行) × 过程组(列) 的矩阵视图
 */
import { Link } from 'react-router-dom'
import { motion } from 'framer-motion'
import { clsx } from 'clsx'
import { Eye, EyeOff } from 'lucide-react'
import {
  knowledgeAreas,
  processGroups,
  processes,
} from '@/data'

interface ProcessMatrixProps {
  className?: string
  isFullScreen?: boolean
  hiddenKnowledgeAreaIds?: Set<string>
  hiddenProcessGroupIds?: Set<string>
  onToggleKnowledgeArea?: (id: string) => void
  onToggleProcessGroup?: (id: string) => void
}

export function ProcessMatrix({
  className,
  isFullScreen = false,
  hiddenKnowledgeAreaIds = new Set(),
  hiddenProcessGroupIds = new Set(),
  onToggleKnowledgeArea,
  onToggleProcessGroup,
}: ProcessMatrixProps) {
  // 构建矩阵数据：knowledgeAreaId -> processGroupId -> Process[]
  const matrix = new Map<string, Map<string, typeof processes>>()

  knowledgeAreas.forEach(ka => {
    const row = new Map<string, typeof processes>()
    processGroups.forEach(pg => {
      row.set(pg.id, [])
    })
    matrix.set(ka.id, row)
  })

  processes.forEach(p => {
    const row = matrix.get(p.knowledgeAreaId)
    if (row) {
      const cell = row.get(p.processGroupId)
      if (cell) {
        cell.push(p)
      }
    }
  })

  return (
    <div className={clsx("overflow-x-auto", className)}>
      <table className="w-full border-collapse min-w-[900px]">
        {/* 表头：过程组 */}
        <thead>
          <tr>
            <th className="sticky left-0 z-10 bg-gray-100 dark:bg-gray-800 p-3 text-left text-sm font-semibold text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-gray-700 min-w-[160px]">
              知识领域 / 过程组
            </th>
            {processGroups.map(pg => {
              const isHidden = hiddenProcessGroupIds.has(pg.id)
              return (
                <th
                  key={pg.id}
                  className="p-3 text-center text-sm font-semibold text-white border border-gray-200 dark:border-gray-700 min-w-[140px]"
                  style={{ backgroundColor: pg.color }}
                >
                  <div className="flex flex-col items-center gap-2">
                    <div className={clsx("transition-opacity duration-150", isHidden && "opacity-30")}>
                      <div>{pg.name}</div>
                      <div className="text-xs opacity-80 font-normal mt-1">
                        {pg.processCount} 个过程
                      </div>
                    </div>
                    {onToggleProcessGroup && (
                      <button
                        type="button"
                        onClick={() => onToggleProcessGroup(pg.id)}
                        aria-label={isHidden ? `显示${pg.name}` : `隐藏${pg.name}`}
                        aria-pressed={!isHidden}
                        className="flex items-center gap-1 px-2 py-1 rounded text-xs font-medium bg-white/20 hover:bg-white/30 transition-colors"
                      >
                        {isHidden ? <Eye size={12} /> : <EyeOff size={12} />}
                        <span>{isHidden ? '显示' : '隐藏'}</span>
                      </button>
                    )}
                  </div>
                </th>
              )
            })}
          </tr>
        </thead>

        {/* 表体：知识领域 × 过程 */}
        <tbody>
          {knowledgeAreas.map((ka, kaIndex) => {
            const isKaHidden = hiddenKnowledgeAreaIds.has(ka.id)
            return (
              <motion.tr
                key={ka.id}
                initial={{ opacity: 0, y: 10 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: kaIndex * 0.05 }}
              >
                {/* 知识领域名称 */}
                <td
                  className="sticky left-0 z-10 p-3 border border-gray-200 dark:border-gray-700 font-medium"
                  style={{
                    backgroundColor: `${ka.color}15`,
                    borderLeftWidth: 4,
                    borderLeftColor: ka.color,
                  }}
                >
                  <div className="flex items-center justify-between gap-2">
                    <Link
                      to={`/knowledge-areas/${ka.id}`}
                      className={clsx(
                        "hover:underline text-gray-900 dark:text-white transition-opacity duration-150",
                        isKaHidden && "opacity-30"
                      )}
                    >
                      <span className="font-bold mr-2" style={{ color: ka.color }}>
                        {ka.order}
                      </span>
                      {ka.name}
                    </Link>
                    {onToggleKnowledgeArea && (
                      <button
                        type="button"
                        onClick={() => onToggleKnowledgeArea(ka.id)}
                        aria-label={isKaHidden ? `显示${ka.name}` : `隐藏${ka.name}`}
                        aria-pressed={!isKaHidden}
                        className="flex items-center gap-1 px-1.5 py-0.5 rounded text-xs font-medium hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors shrink-0"
                        style={{ color: ka.color }}
                      >
                        {isKaHidden ? <Eye size={12} /> : <EyeOff size={12} />}
                      </button>
                    )}
                  </div>
                </td>

              {/* 每个过程组的单元格 */}
              {processGroups.map(pg => {
                const cellProcesses = matrix.get(ka.id)?.get(pg.id) || []
                const isCellHidden = isKaHidden || hiddenProcessGroupIds.has(pg.id)
                return (
                  <td
                    key={pg.id}
                    className="p-2 border border-gray-200 dark:border-gray-700 align-top bg-white dark:bg-gray-800"
                  >
                    <div
                      className={clsx(
                        "gap-1 transition-opacity duration-150",
                        isFullScreen ? "grid grid-cols-2" : "space-y-1",
                        isCellHidden && "opacity-0 pointer-events-none"
                      )}
                      style={isCellHidden ? { visibility: 'hidden' } : undefined}
                    >
                      {cellProcesses.map(p => (
                        <Link
                          key={p.id}
                          to={`/process/${p.id}`}
                          state={{ from: 'matrix' }}
                          className={clsx(
                            "block px-2 py-1.5 rounded text-xs hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors",
                            isFullScreen && "h-full"
                          )}
                          title={p.name}
                        >
                          <div className={clsx("flex items-center gap-1 min-w-0", isFullScreen && "h-full")}>
                            <span
                              className="inline-block px-1.5 py-0.5 rounded text-white font-medium shrink-0"
                              style={{ backgroundColor: ka.color, fontSize: '10px' }}
                            >
                              {p.code}
                            </span>
                            <span
                              className={clsx(
                                "block min-w-0 text-gray-700 dark:text-gray-300",
                                isFullScreen ? "line-clamp-2" : "truncate"
                              )}
                            >
                              {p.name}
                            </span>
                          </div>
                        </Link>
                      ))}
                      {cellProcesses.length === 0 && (
                        <div className="text-gray-300 dark:text-gray-600 text-xs text-center py-2">
                          -
                        </div>
                      )}
                    </div>
                  </td>
                )
              })}
            </motion.tr>
          )})}
        </tbody>

        {/* 表尾：统计 */}
        <tfoot>
          <tr className="bg-gray-50 dark:bg-gray-800/50">
            <td className="sticky left-0 z-10 p-3 border border-gray-200 dark:border-gray-700 font-semibold text-gray-700 dark:text-gray-300 bg-gray-50 dark:bg-gray-800/50">
              合计：{processes.length} 个过程
            </td>
            {processGroups.map(pg => (
              <td
                key={pg.id}
                className="p-3 border border-gray-200 dark:border-gray-700 text-center font-semibold"
                style={{ color: pg.color }}
              >
                {pg.processCount}
              </td>
            ))}
          </tr>
        </tfoot>
      </table>
    </div>
  )
}
