/**
 * 49过程矩阵页面
 */
import { useEffect } from 'react'
import { ProcessMatrix } from '@/components/visualize'
import { Maximize2, Minimize2 } from 'lucide-react'
import { useAppStore } from '@/stores/useAppStore'
import { clsx } from 'clsx'

export function ProcessMatrixPage() {
  const isFullScreen = useAppStore((s) => s.matrixFullScreen)
  const setMatrixFullScreen = useAppStore((s) => s.setMatrixFullScreen)
  const setSidebarOpen = useAppStore((s) => s.setSidebarOpen)

  const toggleFullScreen = () => {
    if (!isFullScreen) {
      setSidebarOpen(false)
    }
    setMatrixFullScreen(!isFullScreen)
  }

  // Handle Escape key to exit full screen
  useEffect(() => {
    const handleEsc = (e: KeyboardEvent) => {
      if (e.key === 'Escape' && isFullScreen) {
        setMatrixFullScreen(false)
      }
    }
    window.addEventListener('keydown', handleEsc)
    return () => window.removeEventListener('keydown', handleEsc)
  }, [isFullScreen, setMatrixFullScreen])

  return (
    <div className={clsx(isFullScreen ? "fixed inset-0 z-50 bg-white dark:bg-gray-900 p-0 m-0" : "space-y-6")}>
      {/* 隐藏滚动条的样式 */}
      {isFullScreen && (
        <style>{`
          .no-scrollbar::-webkit-scrollbar {
            display: none;
          }
          .no-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
          }
        `}</style>
      )}

      {!isFullScreen && (
        <div className="flex justify-between items-end">
          <div>
            <h1 className="text-2xl font-bold text-gray-900 dark:text-white">49过程矩阵</h1>
            <p className="text-gray-500 dark:text-gray-400 mt-1">
              知识领域 × 过程组 的全景矩阵视图，点击过程可查看详情
            </p>
          </div>
          <button
            onClick={toggleFullScreen}
            className="flex items-center gap-2 px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors shadow-sm"
          >
            <Maximize2 className="w-4 h-4" />
            全屏查看
          </button>
        </div>
      )}

      <div className={clsx(
        "bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden transition-all duration-300",
        !isFullScreen && "p-4",
        isFullScreen && "h-full w-full border-0 rounded-none shadow-none flex flex-col"
      )}>
        {isFullScreen && (
           <div className="flex justify-between items-center px-4 py-2 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 shrink-0">
             <span className="font-medium text-gray-900 dark:text-white">49过程矩阵全景图</span>
             <button
                onClick={toggleFullScreen}
                className="flex items-center gap-2 px-3 py-1.5 text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
             >
               <Minimize2 className="w-4 h-4" />
               退出全屏
             </button>
           </div>
        )}
        
        <div className={clsx("relative", isFullScreen ? "flex-1 overflow-hidden" : "")}>
            <ProcessMatrix
              className={clsx(isFullScreen && "h-full w-full overflow-auto no-scrollbar")}
              isFullScreen={isFullScreen}
            />
        </div>
      </div>
    </div>
  )
}