import { X } from 'lucide-react';
import { projectMap, prefixLabels } from '../data/materials';
import type { Material } from '../data/materials';

const lightCategoryColors: Record<string, string> = {
  '温控系统': '#0A7AFF',
  '气路系统': '#7B6CF7',
  '阀件系统': '#F07830',
  '结构件':   '#28A866',
};
const lightAgingColors: Record<string, string> = {
  '60-90':  '#28A866',
  '90-120': '#E08C00',
  '120-150':'#D94040',
};
const darkCategoryColors: Record<string, string> = {
  '温控系统': '#38b8ff',
  '气路系统': '#a78bfa',
  '阀件系统': '#fb923c',
  '结构件':   '#34d399',
};
const darkAgingColors: Record<string, string> = {
  '60-90':  '#34d399',
  '90-120': '#fbbf24',
  '120-150':'#f87171',
};

interface NodeDetailPanelProps {
  node: {
    id: string;
    label: string;
    type: string;
    color: string;
    material?: Material;
    count?: number;
    agingRange?: string;
  } | null;
  onClose: () => void;
  darkMode?: boolean;
}

function Row({ label, children, darkMode }: { label: string; children: React.ReactNode; darkMode: boolean }) {
  return (
    <div style={{
      display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start',
      padding: '10px 0',
      borderBottom: `1px solid ${darkMode ? 'rgba(0,212,255,0.08)' : '#f2f2f7'}`,
      gap: 12,
    }}>
      <span style={{ fontSize: 13, color: darkMode ? '#4a7fa8' : '#8e8e93', letterSpacing: '-0.01em', flexShrink: 0 }}>{label}</span>
      <span style={{ fontSize: 13, fontWeight: 500, color: darkMode ? '#a8d8ff' : '#1c1c1e', letterSpacing: '-0.01em', textAlign: 'right' }}>{children}</span>
    </div>
  );
}

export default function NodeDetailPanel({ node, onClose, darkMode = false }: NodeDetailPanelProps) {
  if (!node) return null;

  const catColors = darkMode ? darkCategoryColors : lightCategoryColors;
  const agColors  = darkMode ? darkAgingColors    : lightAgingColors;

  const mat = node.material;
  const catColor = mat ? (catColors[mat.category] || '#94a3b8') : node.color;
  const agColor  = mat ? (agColors[mat.aging]     || '#94a3b8') : node.color;

  const typeLabel: Record<string, string> = {
    material: '物料节点', project: '项目节点', category: '分类节点', aging: '账龄节点',
  };

  // ── 深色主题变量 ──────────────────────────────
  const panelBg      = darkMode ? 'rgba(0,15,45,0.92)'        : '#ffffff';
  const panelBorder  = darkMode ? '1px solid rgba(0,212,255,0.2)'  : '1px solid #e5e5ea';
  const panelShadow  = darkMode ? '0 0 30px rgba(0,212,255,0.12)'  : '0 4px 28px rgba(0,0,0,0.09)';
  const headerBorder = darkMode ? 'rgba(0,212,255,0.1)'        : '#f2f2f7';
  const titleColor   = darkMode ? '#e8f4ff'                   : '#1c1c1e';
  const subtitleColor= darkMode ? '#4a7fa8'                   : '#8e8e93';
  const closeBtnBg   = darkMode ? 'rgba(0,212,255,0.1)'       : '#f2f2f7';
  const closeBtnColor= darkMode ? '#00d4ff'                   : '#6d6d72';
  const specBg       = darkMode ? 'rgba(0,30,70,0.6)'         : '#f9f9fb';
  const specBorder   = darkMode ? 'rgba(0,212,255,0.12)'      : '#e8e8ed';
  const specText     = darkMode ? '#7aadcc'                   : '#3a3a3c';
  const sectionLabel = darkMode ? '#3a6080'                   : '#aeaeb2';
  const projBg       = darkMode ? 'rgba(100,80,200,0.12)'     : '#f5f0ff';
  const projBorder   = darkMode ? 'rgba(167,139,250,0.25)'    : 'rgba(123,108,247,0.18)';
  const projTitle    = darkMode ? '#a78bfa'                   : '#7B6CF7';
  const projDesc     = darkMode ? '#4a7fa8'                   : '#6d6d72';
  const projId       = darkMode ? '#3a6080'                   : '#aeaeb2';
  const groupBg      = darkMode ? 'rgba(0,30,70,0.5)'         : '#f9f9fb';

  return (
    <div style={{
      backgroundColor: panelBg,
      backdropFilter: darkMode ? 'blur(20px)' : undefined,
      WebkitBackdropFilter: darkMode ? 'blur(20px)' : undefined,
      borderRadius: 18, height: '100%', overflowY: 'auto',
      border: panelBorder,
      boxShadow: panelShadow,
      display: 'flex', flexDirection: 'column',
    }}>
      {/* Header */}
      <div style={{ padding: '18px 18px 14px', borderBottom: `1px solid ${headerBorder}`, flexShrink: 0 }}>
        {/* 深色模式顶部扫光线 */}
        {darkMode && (
          <div style={{
            position: 'absolute', top: 0, left: 0, right: 0, height: 1,
            background: 'linear-gradient(90deg, transparent, rgba(0,212,255,0.5) 50%, transparent)',
            borderRadius: '18px 18px 0 0',
          }} />
        )}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{
              width: 42, height: 42, borderRadius: 12, flexShrink: 0,
              backgroundColor: `${catColor}${darkMode ? '20' : '14'}`,
              border: `1.5px solid ${catColor}${darkMode ? '50' : '30'}`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              boxShadow: darkMode ? `0 0 12px ${catColor}30` : 'none',
            }}>
              <div style={{
                width: 14, height: 14, borderRadius: '50%', backgroundColor: catColor,
                boxShadow: darkMode ? `0 0 8px ${catColor}` : 'none',
              }} />
            </div>
            <div>
              <p style={{ fontSize: 12, color: subtitleColor, marginBottom: 3, letterSpacing: '-0.01em' }}>
                {typeLabel[node.type] || node.type}
              </p>
              <h3 style={{ fontSize: 16, fontWeight: 700, color: titleColor, letterSpacing: '-0.03em', lineHeight: 1.2, margin: 0 }}>
                {node.label}
              </h3>
            </div>
          </div>
          <button onClick={onClose} style={{
            width: 28, height: 28, borderRadius: 8,
            backgroundColor: closeBtnBg, border: 'none', cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
            color: closeBtnColor, transition: 'all 0.15s ease',
          }}>
            <X size={14} />
          </button>
        </div>
      </div>

      {/* Body */}
      <div style={{ padding: '14px 18px', flex: 1 }}>
        {mat ? (
          <div>
            {/* 技术规格 */}
            <div style={{ marginBottom: 16 }}>
              <p style={{ fontSize: 11, fontWeight: 600, color: sectionLabel, marginBottom: 8, letterSpacing: '0.06em', textTransform: 'uppercase' }}>
                技术规格
              </p>
              <div style={{ backgroundColor: specBg, borderRadius: 12, padding: '12px 14px', border: `1px solid ${specBorder}` }}>
                <p style={{ fontSize: 13, color: specText, lineHeight: 1.8, letterSpacing: '-0.01em', margin: 0 }}>
                  {mat.spec}
                </p>
              </div>
            </div>

            {/* 字段列表 */}
            <div style={{ marginBottom: 16 }}>
              <Row label="料号" darkMode={darkMode}>
                <span style={{ fontFamily: 'SF Mono,Menlo,Monaco,monospace', fontSize: 12, color: darkMode ? '#6aaccc' : undefined }}>
                  {mat.id}
                </span>
              </Row>
              <Row label="数量" darkMode={darkMode}>
                <strong style={{ fontWeight: 700, fontSize: 15, color: darkMode ? '#e8f4ff' : '#1c1c1e' }}>{mat.qty}</strong>
                <span style={{ fontSize: 12, color: subtitleColor, marginLeft: 3 }}>件</span>
              </Row>
              <Row label="物料分类" darkMode={darkMode}>
                <span style={{
                  color: catColor, fontWeight: 600,
                  textShadow: darkMode ? `0 0 8px ${catColor}60` : 'none',
                }}>{mat.category}</span>
              </Row>
              <Row label="前缀类型" darkMode={darkMode}>
                <span style={{ color: darkMode ? '#a8d8ff' : '#1c1c1e' }}>
                  {prefixLabels[mat.prefix] || mat.prefix}
                </span>
              </Row>
              {/* 账龄行 */}
              <div style={{
                display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                padding: '10px 0',
                borderBottom: `1px solid ${darkMode ? 'rgba(0,212,255,0.08)' : '#f2f2f7'}`,
              }}>
                <span style={{ fontSize: 13, color: darkMode ? '#4a7fa8' : '#8e8e93' }}>账龄</span>
                <span style={{
                  fontSize: 13, fontWeight: 600, padding: '4px 12px', borderRadius: 20,
                  backgroundColor: `${agColor}${darkMode ? '20' : '12'}`,
                  color: agColor,
                  border: `1px solid ${agColor}${darkMode ? '50' : '30'}`,
                  boxShadow: darkMode ? `0 0 8px ${agColor}30` : 'none',
                }}>{mat.aging} 天</span>
              </div>
            </div>

            {/* 关联项目卡片 */}
            <div style={{
              backgroundColor: projBg, borderRadius: 12,
              padding: '12px 14px', border: `1px solid ${projBorder}`,
              boxShadow: darkMode ? '0 0 16px rgba(167,139,250,0.08)' : 'none',
            }}>
              <p style={{ fontSize: 12, color: sectionLabel, marginBottom: 5 }}>关联项目</p>
              <p style={{ fontSize: 16, fontWeight: 700, color: projTitle, letterSpacing: '-0.03em', margin: 0,
                textShadow: darkMode ? `0 0 12px ${projTitle}50` : 'none',
              }}>
                {projectMap[mat.projectId]?.name || mat.projectId}
              </p>
              <p style={{ fontSize: 13, color: projDesc, marginTop: 4 }}>
                {projectMap[mat.projectId]?.desc || ''}
              </p>
              <p style={{ fontSize: 11, fontFamily: 'SF Mono,Menlo,Monaco,monospace', color: projId, marginTop: 6 }}>
                {mat.projectId}
              </p>
            </div>
          </div>
        ) : (
          <div>
            {/* 分组节点：物料数量 */}
            {node.count !== undefined && (
              <div style={{
                backgroundColor: groupBg, borderRadius: 12,
                padding: '18px', border: `1px solid ${specBorder}`,
                marginBottom: 14, textAlign: 'center',
                boxShadow: darkMode ? `0 0 20px ${catColor}15` : 'none',
              }}>
                <p style={{ fontSize: 13, color: subtitleColor, marginBottom: 6 }}>关联物料数</p>
                <p style={{
                  fontSize: 40, fontWeight: 800, color: catColor,
                  letterSpacing: '-0.05em', lineHeight: 1, margin: 0,
                  textShadow: darkMode ? `0 0 20px ${catColor}70` : 'none',
                }}>
                  {node.count}
                </p>
              </div>
            )}

            {node.type === 'category' && (
              <p style={{ fontSize: 14, color: darkMode ? '#7aadcc' : '#6d6d72', lineHeight: 1.7, letterSpacing: '-0.01em' }}>
                该分类下包含所有归属于{' '}
                <strong style={{ color: catColor, textShadow: darkMode ? `0 0 8px ${catColor}60` : 'none' }}>
                  {node.label}
                </strong>{' '}
                的采购物料，点击物料节点查看详细规格。
              </p>
            )}

            {node.type === 'aging' && node.agingRange && (
              <div style={{
                backgroundColor: groupBg, borderRadius: 12,
                padding: '14px', border: `1px solid ${specBorder}`,
              }}>
                <p style={{ fontSize: 13, color: subtitleColor, marginBottom: 8 }}>账龄区间</p>
                <span style={{
                  fontSize: 14, fontWeight: 600, padding: '5px 14px', borderRadius: 20,
                  backgroundColor: `${agColors[node.agingRange] || '#94a3b8'}${darkMode ? '20' : '12'}`,
                  color: agColors[node.agingRange] || '#94a3b8',
                  border: `1px solid ${agColors[node.agingRange] || '#94a3b8'}${darkMode ? '50' : '30'}`,
                  boxShadow: darkMode ? `0 0 8px ${agColors[node.agingRange] || '#94a3b8'}30` : 'none',
                }}>
                  {node.agingRange} 天
                </span>
                <p style={{ fontSize: 13, color: darkMode ? '#7aadcc' : '#6d6d72', marginTop: 12, lineHeight: 1.7 }}>
                  该账龄段物料需关注资金占用，建议优先推进采购收货。
                </p>
              </div>
            )}
          </div>
        )}
      </div>
    </div>
  );
}