import { X, Ruler, Activity } from 'lucide-react';
import type { CelestialBody } from '../types';

interface FocusInfoProps {
  body: CelestialBody | null;
  onClose: () => void;
}

export function FocusInfo({ body, onClose }: FocusInfoProps) {
  if (!body) return null;

  // Calculate distance if position is available
  const pos = body.positions[0];
  const distance = pos ? Math.sqrt(pos.x ** 2 + pos.y ** 2 + pos.z ** 2).toFixed(2) : '---';
  
  const isProbe = body.type === 'probe';
  const isActive = body.is_active !== false;

  return (
    // Remove fixed positioning, now handled by parent container (Html component in 3D)
    <div className="flex flex-col items-center pointer-events-none -translate-y-24">
      {/* Main Info Card */}
      <div className="bg-black/80 backdrop-blur-xl border border-white/10 rounded-2xl p-5 min-w-[280px] max-w-sm shadow-2xl pointer-events-auto relative group mb-2">
        
        {/* Close Button */}
        <button 
          onClick={(e) => {
            e.stopPropagation();
            onClose();
          }}
          className="absolute top-3 right-3 text-gray-400 hover:text-white transition-colors p-1 rounded-full hover:bg-white/10"
        >
          <X size={16} />
        </button>

        {/* Header */}
        <div className="flex items-start justify-between mb-3 pr-6">
          <div>
            <div className="flex items-center gap-2 mb-1">
              <h2 className="text-xl font-bold text-white tracking-tight">
                {body.name_zh || body.name}
              </h2>
              <span className={`px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider border ${
                isProbe 
                  ? 'bg-purple-500/20 border-purple-500/40 text-purple-300' 
                  : 'bg-blue-500/20 border-blue-500/40 text-blue-300'
              }`}>
                {isProbe ? '探测器' : '天体'}
              </span>
            </div>
            <p className="text-xs text-gray-400 line-clamp-2 leading-relaxed">
              {body.description || '暂无描述'}
            </p>
          </div>
        </div>

        {/* Stats Grid */}
        <div className="grid grid-cols-2 gap-2">
          <div className="bg-white/5 rounded-lg p-2 flex items-center gap-2.5 border border-white/5">
            <div className="p-1.5 rounded-full bg-blue-500/20 text-blue-400">
              <Ruler size={14} />
            </div>
            <div>
              <div className="text-[9px] text-gray-500 uppercase">日心距离</div>
              <div className="text-xs font-mono text-gray-200">{distance} AU</div>
            </div>
          </div>

          {isProbe && (
            <div className="bg-white/5 rounded-lg p-2 flex items-center gap-2.5 border border-white/5">
              <div className={`p-1.5 rounded-full ${isActive ? 'bg-green-500/20 text-green-400' : 'bg-red-500/20 text-red-400'}`}>
                <Activity size={14} />
              </div>
              <div>
                <div className="text-[9px] text-gray-500 uppercase">状态</div>
                <div className={`text-xs font-medium ${isActive ? 'text-green-300' : 'text-red-300'}`}>
                  {isActive ? '运行中' : '已失效'}
                </div>
              </div>
            </div>
          )}
        </div>
      </div>

      {/* Connecting Line/Triangle pointing down to the body */}
      <div className="w-0 h-0 border-l-[8px] border-l-transparent border-r-[8px] border-r-transparent border-t-[8px] border-t-black/80 backdrop-blur-xl mt-[-1px]"></div>
    </div>
  );
}