import React, { useState } from 'react';
import { 
  Layers, 
  Activity,
  Settings,
  Zap,
  Cpu,
  MousePointer2,
  Anchor,
  ChevronUp,
  ChevronDown
} from 'lucide-react';

/**
 * 工业草稿风格 v7.2.0 (视觉增强版)
 * 核心优化：
 * 1. 视觉聚焦：显著放大底部组件图标，提升细节可见度。
 * 2. 极致简约：移除底部元数据标签，精简文字层次，聚焦核心名称。
 * 3. 比例优化：维持 V 型交错布局，优化大尺寸图标下的物理连接感。
 */

const styles = `
  @keyframes scanline {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
  }
  @keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(300%); }
  }
  .blueprint-grid {
    background-color: #ffffff;
    background-image: 
      linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px), 
      linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
    background-size: 30px 30px;
  }
  .blueprint-grid::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: 
      linear-gradient(rgba(0, 0, 0, 0.02) 1px, transparent 1px), 
      linear-gradient(90deg, rgba(0, 0, 0, 0.02) 1px, transparent 1px);
    background-size: 10px 10px;
    pointer-events: none;
  }
  .assembly-view {
    filter: drop-shadow(0 15px 30px rgba(0,0,0,0.1)) contrast(1.05);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .assembly-view:hover {
    filter: drop-shadow(0 20px 40px rgba(0,0,0,0.15)) contrast(1.1);
  }
  .leader-line-svg {
    transition: all 0.4s ease;
  }
  .text-label-container {
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  }
  .scan-effect {
    position: absolute;
    top: 0; left: 0; right: 0; height: 100%;
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.01), transparent);
    animation: scanline 15s linear infinite;
    pointer-events: none;
  }
`;

const SYSTEM_PARTS = [
  { id: 'p1', name: '环境监控', code: 'ENV-X', img: 'https://images.unsplash.com/photo-1555680202-c86f0e12f086?auto=format&fit=crop&q=80&w=200', link: '#' },
  { id: 'p2', name: '能源模组', code: 'BATT-V8', img: 'https://images.unsplash.com/photo-1619641259501-c88f28c6e355?auto=format&fit=crop&q=80&w=200', link: '#' },
  { id: 'p3', name: '雷达阵列', code: 'LDR-07', img: 'https://images.unsplash.com/photo-1555680202-c86f0e12f086?auto=format&fit=crop&q=80&w=200', link: '#' },
  { id: 'p4', name: '核心总成', code: 'CORE-MAX', img: 'https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&q=80&w=200', link: '#' },
  { id: 'p5', name: '液压单元', code: 'HYD-02', img: 'https://images.unsplash.com/photo-1635350736475-c8cef4b21906?auto=format&fit=crop&q=80&w=200', link: '#' },
  { id: 'p6', name: '散热单元', code: 'COOL-F2', img: 'https://images.unsplash.com/photo-1635350736475-c8cef4b21906?auto=format&fit=crop&q=80&w=200', link: '#' },
  { id: 'p7', name: '存储阵列', code: 'DATA-2T', img: 'https://images.unsplash.com/photo-1544006659-f0b21f04cb1d?auto=format&fit=crop&q=80&w=200', link: '#' }
];

const ASSEMBLY_IMAGE = "https://images.unsplash.com/photo-1581092160562-40aa08e78837?auto=format&fit=crop&q=80&w=1600";

export default function App() {
  const [hoveredId, setHoveredId] = useState(null);

  return (
    <div className="h-screen w-screen bg-[#ffffff] text-neutral-900 font-mono flex flex-col overflow-hidden select-none">
      <style>{styles}</style>

      {/* 顶部标题栏 */}
      <header className="h-16 border-b border-neutral-200 bg-white flex items-center justify-between px-10 z-50">
        <div className="flex items-center gap-4">
          <div className="p-2 bg-neutral-900 rounded-sm">
             <Cpu size={20} className="text-white" />
          </div>
          <div className="flex flex-col">
            <h1 className="text-[13px] font-black uppercase tracking-[0.4em] leading-none text-neutral-900">Linear_Draft_Nav</h1>
            <p className="text-[9px] text-neutral-400 mt-1 font-bold tracking-tighter">V7.2.0 // ENHANCED_VISUAL_ALIGN</p>
          </div>
        </div>

        <div className="flex items-center gap-8 text-neutral-400">
          <div className="flex flex-col items-end text-[9px] font-black uppercase tracking-widest">
            <span className="flex items-center gap-2">
              <div className="w-1.5 h-1.5 bg-neutral-900 rounded-full animate-pulse"></div> 
              STATUS: NOMINAL
            </span>
          </div>
          <div className="h-8 w-[1px] bg-neutral-100"></div>
          <Settings size={18} className="hover:text-neutral-900 cursor-pointer transition-colors" />
        </div>
      </header>

      {/* 主画布区域 */}
      <main className="flex-1 relative flex flex-col items-center justify-center p-12 overflow-hidden">
        <div className="absolute inset-0 blueprint-grid"></div>
        <div className="scan-effect"></div>
        
        {/* 中心工业总成图 */}
        <div className="relative w-full flex-1 max-w-4xl max-h-[35vh] flex items-center justify-center z-10">
          
          {/* 适配型角标 */}
          <div className="absolute -inset-4 pointer-events-none opacity-40">
            <div className="absolute top-0 left-0 w-12 h-12 border-t border-l border-neutral-600"></div>
            <div className="absolute bottom-0 right-0 w-12 h-12 border-b border-r border-neutral-600"></div>
          </div>

          <img 
            src={ASSEMBLY_IMAGE} 
            className="max-w-full max-h-full object-contain assembly-view" 
            alt="Central Assembly System" 
          />
        </div>

        {/* 底部组件导航集 */}
        <div className="w-full max-w-[1300px] mt-12 flex justify-between z-20 pb-72 px-10">
          {SYSTEM_PARTS.map((part, index) => {
            const isHovered = hoveredId === part.id;
            const isUp = index % 2 === 0; 
            
            // --- 物理常量：优化后的图标与交错位移 ---
            const ICON_SIZE = 80;           // 放大图标容器 (原 64)
            const CENTER_AXIS_Y = 180; 
            const OFFSET_Y = 40;       
            const boxTop = isUp ? CENTER_AXIS_Y - OFFSET_Y : CENTER_AXIS_Y + OFFSET_Y;

            // --- 垂直引导线逻辑 ---
            const SVG_CENTER_X = 50; 
            const SVG_CENTER_Y = 40; // 适配大尺寸图标的起始点

            return (
              <div 
                key={part.id}
                onMouseEnter={() => setHoveredId(part.id)}
                onMouseLeave={() => setHoveredId(null)}
                className="group flex flex-col items-center cursor-pointer relative flex-1"
                style={{ minWidth: '0' }}
              >
                {/* 垂直引导线 */}
                <svg 
                  className="absolute top-0 left-1/2 -translate-x-1/2 w-[100px] h-[400px] overflow-visible pointer-events-none z-0" 
                  viewBox={`0 0 100 400`}
                >
                  <path 
                    d={`M ${SVG_CENTER_X} ${SVG_CENTER_Y} L ${SVG_CENTER_X} ${boxTop}`} 
                    fill="none" 
                    stroke={isHovered ? "#000" : "#f5f5f5"} 
                    strokeWidth={isHovered ? "2.5" : "1"} 
                    strokeDasharray={isHovered ? "none" : "3,3"}
                    className="leader-line-svg"
                  />
                  <circle cx={SVG_CENTER_X} cy={SVG_CENTER_Y} r="2.5" fill={isHovered ? "#000" : "#e0e0e0"} />
                  <circle cx={SVG_CENTER_X} cy={boxTop} r={isHovered ? "4" : "2"} fill={isHovered ? "#000" : "#e0e0e0"} />
                </svg>

                {/* 图标节点 - 已放大图片尺寸 */}
                <div 
                  className={`relative flex items-center justify-center transition-all duration-500 z-10
                    ${isHovered ? 'scale-110 -translate-y-2' : 'opacity-100 hover:opacity-100'}`}
                  style={{ width: `${ICON_SIZE}px`, height: `${ICON_SIZE}px` }}
                >
                  <img src={part.img} className="w-16 h-16 object-contain relative z-10" alt={part.name} />
                  {isHovered && (
                    <div className="absolute inset-0 bg-neutral-900/5 blur-2xl rounded-full scale-125" />
                  )}
                </div>

                {/* 标签容器 - 移除底部元数据 */}
                <div 
                  className={`absolute flex flex-col items-center whitespace-nowrap text-label-container z-30
                    ${isHovered ? (isUp ? '-translate-y-1' : 'translate-y-1') : ''}`}
                  style={{ 
                    top: `${boxTop}px`,
                    left: '50%',
                    transform: 'translateX(-50%)'
                  }}
                >
                  {/* 接线端子 */}
                  <div className={`w-2.5 h-2.5 rounded-full border-2 border-white mb-3 transition-all
                    ${isHovered ? 'bg-neutral-900 scale-125' : 'bg-neutral-200'}`} 
                  />

                  {/* 顶部指示器 */}
                  <div className="flex items-center gap-1.5 mb-1.5 opacity-60">
                    {isUp ? <ChevronUp size={8} /> : <div className="w-[8px]" />}
                    <div className={`text-[8px] font-black uppercase tracking-widest transition-colors
                      ${isHovered ? 'text-neutral-900' : 'text-neutral-300'}`}>
                      CODE.0{index + 1}
                    </div>
                    {!isUp ? <ChevronDown size={8} /> : <div className="w-[8px]" />}
                  </div>
                  
                  {/* 大字名称 */}
                  <div className={`text-2xl font-black uppercase tracking-tighter transition-all duration-300
                    ${isHovered ? 'text-neutral-900 scale-105' : 'text-neutral-400'}`}>
                    {part.name}
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </main>

      {/* 页脚 */}
      <footer className="h-10 bg-white border-t border-neutral-100 flex items-center justify-between px-10 text-[9px] font-bold text-neutral-300 uppercase tracking-[0.4em]">
        <div className="flex gap-10 items-center">
          <div className="flex items-center gap-2 text-neutral-900">
            <Anchor size={14} className="opacity-10" />
            <span className="tracking-widest opacity-80 italic">Visual_Enhanced_Array</span>
          </div>
          <span className="opacity-10">|</span>
          <span className="opacity-40 tracking-tighter">DESIGN_LOCK_V7.2.0</span>
        </div>
        <div className="flex gap-4 items-center">
          <span className="text-neutral-900 font-black px-3 py-1 bg-neutral-50 border border-neutral-100">B_7.2.0</span>
        </div>
      </footer>
    </div>
  );
}