/**
 * Parallel Coordinates Plot - Enhanced Multi-Objective Visualization
 * Shows design variables → objectives → constraints in proper research format
 * Light theme with high visibility
 */

import { useState } from 'react';

interface ParetoTrial {
  trial_number: number;
  values: number[];
  params: Record<string, number>;
  user_attrs?: Record<string, any>;
  constraint_satisfied?: boolean;
}

interface Objective {
  name: string;
  type: 'minimize' | 'maximize';
  unit?: string;
}

interface DesignVariable {
  name: string;
  unit?: string;
  min: number;
  max: number;
}

interface Constraint {
  name: string;
  threshold: number;
  type: 'less_than' | 'greater_than';
  unit?: string;
}

interface ParallelCoordinatesPlotProps {
  paretoData: ParetoTrial[];
  objectives: Objective[];
  designVariables: DesignVariable[];
  constraints?: Constraint[];
  paretoFront?: ParetoTrial[];
}

export function ParallelCoordinatesPlot({
  paretoData,
  objectives,
  designVariables,
  constraints = [],
  paretoFront = []
}: ParallelCoordinatesPlotProps) {
  const [hoveredTrial, setHoveredTrial] = useState<number | null>(null);
  const [selectedTrials, setSelectedTrials] = useState<Set<number>>(new Set());

  // Create set of Pareto front trial numbers for easy lookup
  const paretoTrialNumbers = new Set(paretoFront.map(t => t.trial_number));

  // Safety checks
  if (!paretoData || paretoData.length === 0) {
    return (
      <div className="bg-white rounded-lg p-6 border border-gray-300 shadow-sm">
        <h3 className="text-lg font-semibold mb-4 text-gray-900">Parallel Coordinates Plot</h3>
        <div className="h-96 flex items-center justify-center text-gray-500">
          No Pareto front data available
        </div>
      </div>
    );
  }

  if (!objectives || objectives.length === 0 || !designVariables || designVariables.length === 0) {
    return (
      <div className="bg-white rounded-lg p-6 border border-gray-300 shadow-sm">
        <h3 className="text-lg font-semibold mb-4 text-gray-900">Parallel Coordinates Plot</h3>
        <div className="h-96 flex items-center justify-center text-gray-500">
          Missing objectives or design variables metadata
        </div>
      </div>
    );
  }

  // Structure axes: Design Variables → Objectives → Constraints
  const axes: Array<{
    name: string;
    label: string;
    type: 'design_var' | 'objective' | 'constraint';
    unit?: string;
  }> = [];

  // Add design variables
  designVariables.forEach(dv => {
    const paramName = dv.parameter || dv.name;  // Support both formats
    axes.push({
      name: paramName,
      label: dv.unit ? `${paramName}\n(${dv.unit})` : paramName,
      type: 'design_var',
      unit: dv.unit
    });
  });

  // Add objectives
  objectives.forEach((obj, i) => {
    axes.push({
      name: `objective_${i}`,
      label: obj.unit ? `${obj.name}\n(${obj.unit})` : obj.name,
      type: 'objective',
      unit: obj.unit
    });
  });

  // Add constraints (extract from user_attrs)
  const constraintNames = new Set<string>();
  paretoData.forEach(trial => {
    if (trial.user_attrs) {
      // Common constraint metrics
      if (trial.user_attrs.max_stress !== undefined) constraintNames.add('max_stress');
      if (trial.user_attrs.max_displacement !== undefined) constraintNames.add('max_displacement');
      if (trial.user_attrs.frequency !== undefined && objectives.findIndex(obj => obj.name.toLowerCase().includes('freq')) === -1) {
        constraintNames.add('frequency');
      }
      if (trial.user_attrs.mass !== undefined && objectives.findIndex(obj => obj.name.toLowerCase().includes('mass')) === -1) {
        constraintNames.add('mass');
      }
    }
  });

  constraintNames.forEach(name => {
    const unit = name.includes('stress') ? 'MPa' :
                 name.includes('displacement') ? 'mm' :
                 name.includes('frequency') ? 'Hz' :
                 name.includes('mass') ? 'g' : '';
    axes.push({
      name: `constraint_${name}`,
      label: unit ? `${name}\n(${unit})` : name,
      type: 'constraint',
      unit
    });
  });

  // Extract values for each axis
  const trialData = paretoData.map(trial => {
    const values: number[] = [];

    // Design variables - use .parameter field from metadata
    designVariables.forEach(dv => {
      const paramName = dv.parameter || dv.name;  // Support both formats
      values.push(trial.params[paramName] ?? 0);
    });

    // Objectives
    trial.values.forEach(val => {
      values.push(val);
    });

    // Constraints
    constraintNames.forEach(name => {
      values.push(trial.user_attrs?.[name] ?? 0);
    });

    return {
      trial_number: trial.trial_number,
      values,
      feasible: trial.constraint_satisfied !== false,
      objectiveValues: trial.values || []
    };
  });

  // Rank trials by their first objective (for multi-objective, this is just one metric)
  // For proper multi-objective ranking, we use Pareto dominance
  const rankedTrials = [...trialData].sort((a, b) => {
    // Primary: Pareto front members come first
    const aIsPareto = paretoTrialNumbers.has(a.trial_number);
    const bIsPareto = paretoTrialNumbers.has(b.trial_number);
    if (aIsPareto && !bIsPareto) return -1;
    if (!aIsPareto && bIsPareto) return 1;

    // Secondary: Sort by first objective value (minimize assumed)
    const aObj = a.objectiveValues[0] ?? Infinity;
    const bObj = b.objectiveValues[0] ?? Infinity;
    return aObj - bObj;
  });

  // Create ranking map: trial_number -> rank (0-indexed)
  const trialRanks = new Map<number, number>();
  rankedTrials.forEach((trial, index) => {
    trialRanks.set(trial.trial_number, index);
  });

  // Calculate min/max for normalization
  const ranges = axes.map((_, axisIdx) => {
    const values = trialData.map(d => d.values[axisIdx]);
    return {
      min: Math.min(...values),
      max: Math.max(...values)
    };
  });

  // Normalize to [0, 1]
  const normalize = (value: number, axisIdx: number): number => {
    const range = ranges[axisIdx];
    if (range.max === range.min) return 0.5;
    return (value - range.min) / (range.max - range.min);
  };

  // Chart dimensions
  const width = 1400;
  const height = 500;
  const margin = { top: 100, right: 50, bottom: 60, left: 50 };
  const plotWidth = width - margin.left - margin.right;
  const plotHeight = height - margin.top - margin.bottom;

  const axisSpacing = plotWidth / (axes.length - 1);

  // Toggle trial selection
  const toggleTrial = (trialNum: number) => {
    const newSelected = new Set(selectedTrials);
    if (newSelected.has(trialNum)) {
      newSelected.delete(trialNum);
    } else {
      newSelected.add(trialNum);
    }
    setSelectedTrials(newSelected);
  };

  // Color scheme - gradient grayscale for top 10, light gray for rest
  const getLineColor = (trial: typeof trialData[0], isHovered: boolean, isSelected: boolean) => {
    if (isSelected) return '#FF6B00'; // Bright orange for selected
    if (isHovered) return '#2563EB'; // Blue for hover
    if (!trial.feasible) return '#DC2626'; // Red for infeasible

    const rank = trialRanks.get(trial.trial_number) ?? 999;

    // Top 10: Gradient from dark gray (#374151) to light gray (#9CA3AF)
    if (rank < 10) {
      // Interpolate: rank 0 = darkest, rank 9 = lighter
      const t = rank / 9; // 0 to 1
      const r = Math.round(55 + t * (156 - 55));  // 55 to 156
      const g = Math.round(65 + t * (163 - 65));  // 65 to 163
      const b = Math.round(81 + t * (175 - 81));  // 81 to 175
      return `rgb(${r}, ${g}, ${b})`;
    }

    // Remaining trials: Very light gray
    return '#D1D5DB'; // Very light gray
  };

  return (
    <div className="bg-white rounded-lg p-6 border border-gray-300 shadow-sm">
      <div className="flex items-center justify-between mb-4">
        <div>
          <h3 className="text-lg font-semibold text-gray-900">
            Parallel Coordinates Plot ({paretoData.length} solutions)
          </h3>
          <p className="text-sm text-gray-600 mt-1">
            Design Variables → Objectives → Constraints
          </p>
        </div>
        {selectedTrials.size > 0 && (
          <button
            onClick={() => setSelectedTrials(new Set())}
            className="text-xs px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded text-gray-800 font-medium transition-colors"
          >
            Clear Selection ({selectedTrials.size})
          </button>
        )}
      </div>

      <div className="overflow-x-auto">
        <svg width={width} height={height} className="overflow-visible">
          <g transform={`translate(${margin.left}, ${margin.top})`}>
            {/* Draw axes */}
            {axes.map((axis, i) => {
              const x = i * axisSpacing;
              const bgColor = axis.type === 'design_var' ? '#EFF6FF' :
                             axis.type === 'objective' ? '#F0FDF4' : '#FEF3C7';

              return (
                <g key={axis.name} transform={`translate(${x}, 0)`}>
                  {/* Background highlight */}
                  <rect
                    x={-15}
                    y={-20}
                    width={30}
                    height={plotHeight + 40}
                    fill={bgColor}
                    opacity={0.3}
                  />

                  {/* Axis line */}
                  <line
                    y1={0}
                    y2={plotHeight}
                    stroke="#374151"
                    strokeWidth={2.5}
                  />

                  {/* Axis label */}
                  <text
                    y={-30}
                    textAnchor="middle"
                    fill="#111827"
                    fontSize={12}
                    fontWeight="600"
                    className="select-none"
                  >
                    {(axis.label || '').split('\n').map((line, idx) => (
                      <tspan key={idx} x={0} dy={idx === 0 ? 0 : 14}>{line}</tspan>
                    ))}
                  </text>

                  {/* Type badge */}
                  <text
                    y={-55}
                    textAnchor="middle"
                    fill="#6B7280"
                    fontSize={9}
                    fontWeight="500"
                    className="select-none"
                  >
                    {axis.type === 'design_var' ? 'DESIGN VAR' :
                     axis.type === 'objective' ? 'OBJECTIVE' : 'CONSTRAINT'}
                  </text>

                  {/* Min/max labels */}
                  <text
                    y={plotHeight + 20}
                    textAnchor="middle"
                    fill="#374151"
                    fontSize={10}
                    fontWeight="500"
                  >
                    {ranges[i].min.toFixed(2)}
                  </text>
                  <text
                    y={-10}
                    textAnchor="middle"
                    fill="#374151"
                    fontSize={10}
                    fontWeight="500"
                  >
                    {ranges[i].max.toFixed(2)}
                  </text>
                </g>
              );
            })}

            {/* Draw polylines for each trial */}
            {trialData.map(trial => {
              const isHovered = hoveredTrial === trial.trial_number;
              const isSelected = selectedTrials.has(trial.trial_number);
              const isHighlighted = isHovered || isSelected;

              // Build path
              const pathData = axes.map((_, i) => {
                const x = i * axisSpacing;
                const normalizedY = normalize(trial.values[i], i);
                const y = plotHeight * (1 - normalizedY);
                return i === 0 ? `M ${x} ${y}` : `L ${x} ${y}`;
              }).join(' ');

              return (
                <path
                  key={trial.trial_number}
                  d={pathData}
                  fill="none"
                  stroke={getLineColor(trial, isHovered, isSelected)}
                  strokeWidth={isHighlighted ? 3 : 1.5}
                  opacity={
                    selectedTrials.size > 0
                      ? (isSelected ? 0.95 : 0.1)
                      : (isHighlighted ? 0.95 : 0.5)
                  }
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  className="transition-all duration-150 cursor-pointer"
                  style={{
                    filter: isHighlighted ? 'drop-shadow(0 2px 4px rgba(0,0,0,0.2))' : 'none'
                  }}
                  onMouseEnter={() => setHoveredTrial(trial.trial_number)}
                  onMouseLeave={() => setHoveredTrial(null)}
                  onClick={() => toggleTrial(trial.trial_number)}
                />
              );
            })}

            {/* Hover tooltip */}
            {hoveredTrial !== null && (
              <g transform={`translate(${plotWidth + 20}, 20)`}>
                <rect
                  x={0}
                  y={0}
                  width={140}
                  height={70}
                  fill="white"
                  stroke="#D1D5DB"
                  strokeWidth={2}
                  rx={6}
                  style={{ filter: 'drop-shadow(0 4px 6px rgba(0,0,0,0.1))' }}
                />
                <text x={12} y={24} fill="#111827" fontSize={13} fontWeight="700">
                  Trial #{hoveredTrial}
                </text>
                <text x={12} y={44} fill="#6B7280" fontSize={11}>
                  Click to select/deselect
                </text>
                <text x={12} y={60} fill="#374151" fontSize={10} fontWeight="600">
                  {selectedTrials.has(hoveredTrial) ? '✓ Selected' : '○ Not selected'}
                </text>
              </g>
            )}
          </g>
        </svg>
      </div>

      {/* Legend */}
      <div className="flex gap-8 justify-center mt-6 text-sm border-t border-gray-200 pt-4">
        <div className="flex items-center gap-2">
          <div className="w-10 h-1" style={{ background: 'linear-gradient(to right, #374151, #9CA3AF)' }} />
          <span className="text-gray-700 font-medium">Top 10 (gradient)</span>
        </div>
        <div className="flex items-center gap-2">
          <div className="w-10 h-1" style={{ backgroundColor: '#D1D5DB' }} />
          <span className="text-gray-700 font-medium">Others</span>
        </div>
        <div className="flex items-center gap-2">
          <div className="w-10 h-1" style={{ backgroundColor: '#DC2626' }} />
          <span className="text-gray-700 font-medium">Infeasible</span>
        </div>
        <div className="flex items-center gap-2">
          <div className="w-10 h-1.5" style={{ backgroundColor: '#FF6B00' }} />
          <span className="text-gray-700 font-medium">Selected</span>
        </div>
        <div className="flex items-center gap-2">
          <div className="w-10 h-1" style={{ backgroundColor: '#2563EB' }} />
          <span className="text-gray-700 font-medium">Hover</span>
        </div>
      </div>

      {/* Axis type legend */}
      <div className="flex gap-6 justify-center mt-3 text-xs">
        <div className="flex items-center gap-2">
          <div className="w-4 h-4 rounded" style={{ backgroundColor: '#EFF6FF' }} />
          <span className="text-gray-600">Design Variables</span>
        </div>
        <div className="flex items-center gap-2">
          <div className="w-4 h-4 rounded" style={{ backgroundColor: '#F0FDF4' }} />
          <span className="text-gray-600">Objectives</span>
        </div>
        <div className="flex items-center gap-2">
          <div className="w-4 h-4 rounded" style={{ backgroundColor: '#FEF3C7' }} />
          <span className="text-gray-600">Constraints</span>
        </div>
      </div>
    </div>
  );
}
