Atomizer/atomizer-dashboard/frontend/src/components/canvas/panels/IntrospectionPanel.tsx

/**
 * Introspection Panel - Shows discovered expressions and extractors from NX model
 */

import { useState, useEffect, useCallback } from 'react';
import {
  X,
  Search,
  RefreshCw,
  Plus,
  ChevronDown,
  ChevronRight,
  FileBox,
  Cpu,
  FlaskConical,
  SlidersHorizontal,
  AlertTriangle,
} from 'lucide-react';
import { useCanvasStore } from '../../../hooks/useCanvasStore';

interface IntrospectionPanelProps {
  filePath: string;
  onClose: () => void;
}

interface Expression {
  name: string;
  value: number;
  min?: number;
  max?: number;
  unit: string;
  type: string;
  source?: string;
}

interface Extractor {
  id: string;
  name: string;
  description?: string;
  always?: boolean;
}

interface DependentFile {
  path: string;
  type: string;
  name: string;
}

interface IntrospectionResult {
  file_path: string;
  file_type: string;
  expressions: Expression[];
  solver_type: string | null;
  dependent_files: DependentFile[];
  extractors_available: Extractor[];
  warnings: string[];
}

export function IntrospectionPanel({ filePath, onClose }: IntrospectionPanelProps) {
  const [result, setResult] = useState<IntrospectionResult | null>(null);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [expandedSections, setExpandedSections] = useState<Set<string>>(
    new Set(['expressions', 'extractors'])
  );
  const [searchTerm, setSearchTerm] = useState('');

  const { addNode, nodes } = useCanvasStore();

  const runIntrospection = useCallback(async () => {
    if (!filePath) return;

    setIsLoading(true);
    setError(null);
    try {
      const res = await fetch('/api/nx/introspect', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ file_path: filePath }),
      });
      if (!res.ok) throw new Error('Introspection failed');
      const data = await res.json();
      setResult(data);
    } catch (e) {
      setError('Failed to introspect model');
      console.error(e);
    } finally {
      setIsLoading(false);
    }
  }, [filePath]);

  useEffect(() => {
    runIntrospection();
  }, [runIntrospection]);

  const toggleSection = (section: string) => {
    setExpandedSections((prev) => {
      const next = new Set(prev);
      if (next.has(section)) next.delete(section);
      else next.add(section);
      return next;
    });
  };

  const addExpressionAsDesignVar = (expr: Expression) => {
    // Find a good position (left of model node)
    const modelNode = nodes.find((n) => n.data.type === 'model');
    const existingDvars = nodes.filter((n) => n.data.type === 'designVar');

    const position = {
      x: (modelNode?.position.x || 300) - 250,
      y: (modelNode?.position.y || 100) + existingDvars.length * 100,
    };

    // Calculate min/max based on value if not provided
    const minValue = expr.min ?? expr.value * 0.5;
    const maxValue = expr.max ?? expr.value * 1.5;

    addNode('designVar', position, {
      label: expr.name,
      expressionName: expr.name,
      minValue,
      maxValue,
      unit: expr.unit,
      configured: true,
    });
  };

  const addExtractorNode = (extractor: Extractor) => {
    // Find a good position (right of solver node)
    const solverNode = nodes.find((n) => n.data.type === 'solver');
    const existingExtractors = nodes.filter((n) => n.data.type === 'extractor');

    const position = {
      x: (solverNode?.position.x || 400) + 200,
      y: (solverNode?.position.y || 100) + existingExtractors.length * 100,
    };

    addNode('extractor', position, {
      label: extractor.name,
      extractorId: extractor.id,
      extractorName: extractor.name,
      configured: true,
    });
  };

  const filteredExpressions =
    result?.expressions.filter((e) =>
      e.name.toLowerCase().includes(searchTerm.toLowerCase())
    ) || [];

  return (
    <div className="bg-dark-850 border border-dark-700 rounded-xl w-80 max-h-[70vh] flex flex-col shadow-xl">
      {/* Header */}
      <div className="flex items-center justify-between px-4 py-3 border-b border-dark-700">
        <div className="flex items-center gap-2">
          <Search size={16} className="text-primary-400" />
          <span className="font-medium text-white text-sm">Model Introspection</span>
        </div>
        <div className="flex items-center gap-1">
          <button
            onClick={runIntrospection}
            disabled={isLoading}
            className="p-1.5 text-dark-400 hover:text-white hover:bg-dark-700 rounded transition-colors"
            title="Refresh"
          >
            <RefreshCw size={14} className={isLoading ? 'animate-spin' : ''} />
          </button>
          <button
            onClick={onClose}
            className="p-1.5 text-dark-400 hover:text-white hover:bg-dark-700 rounded transition-colors"
          >
            <X size={14} />
          </button>
        </div>
      </div>

      {/* Search */}
      <div className="px-4 py-2 border-b border-dark-700">
        <input
          type="text"
          placeholder="Filter expressions..."
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
          className="w-full px-3 py-1.5 bg-dark-800 border border-dark-600 rounded-lg
                     text-sm text-white placeholder-dark-500 focus:outline-none focus:border-primary-500"
        />
      </div>

      {/* Content */}
      <div className="flex-1 overflow-auto">
        {isLoading ? (
          <div className="flex items-center justify-center h-32 text-dark-500">
            <RefreshCw size={20} className="animate-spin mr-2" />
            Analyzing model...
          </div>
        ) : error ? (
          <div className="p-4 text-red-400 text-sm">{error}</div>
        ) : result ? (
          <div className="p-2 space-y-2">
            {/* Solver Type */}
            {result.solver_type && (
              <div className="p-2 bg-dark-800 rounded-lg">
                <div className="flex items-center gap-2 text-sm">
                  <Cpu size={14} className="text-violet-400" />
                  <span className="text-dark-300">Solver:</span>
                  <span className="text-white font-medium">{result.solver_type}</span>
                </div>
              </div>
            )}

            {/* Expressions Section */}
            <div className="border border-dark-700 rounded-lg overflow-hidden">
              <button
                onClick={() => toggleSection('expressions')}
                className="w-full flex items-center justify-between px-3 py-2 bg-dark-800 hover:bg-dark-750 transition-colors"
              >
                <div className="flex items-center gap-2">
                  <SlidersHorizontal size={14} className="text-emerald-400" />
                  <span className="text-sm font-medium text-white">
                    Expressions ({filteredExpressions.length})
                  </span>
                </div>
                {expandedSections.has('expressions') ? (
                  <ChevronDown size={14} className="text-dark-400" />
                ) : (
                  <ChevronRight size={14} className="text-dark-400" />
                )}
              </button>

              {expandedSections.has('expressions') && (
                <div className="p-2 space-y-1 max-h-48 overflow-y-auto">
                  {filteredExpressions.length === 0 ? (
                    <p className="text-xs text-dark-500 text-center py-2">
                      No expressions found
                    </p>
                  ) : (
                    filteredExpressions.map((expr) => (
                      <div
                        key={expr.name}
                        className="flex items-center justify-between p-2 bg-dark-850 rounded hover:bg-dark-750 group transition-colors"
                      >
                        <div className="flex-1 min-w-0">
                          <p className="text-sm text-white truncate">{expr.name}</p>
                          <p className="text-xs text-dark-500">
                            {expr.value} {expr.unit}
                            {expr.source === 'inferred' && (
                              <span className="ml-1 text-amber-500">(inferred)</span>
                            )}
                          </p>
                        </div>
                        <button
                          onClick={() => addExpressionAsDesignVar(expr)}
                          className="p-1.5 text-dark-500 hover:text-primary-400 hover:bg-dark-700 rounded
                                     opacity-0 group-hover:opacity-100 transition-all"
                          title="Add as Design Variable"
                        >
                          <Plus size={14} />
                        </button>
                      </div>
                    ))
                  )}
                </div>
              )}
            </div>

            {/* Extractors Section */}
            <div className="border border-dark-700 rounded-lg overflow-hidden">
              <button
                onClick={() => toggleSection('extractors')}
                className="w-full flex items-center justify-between px-3 py-2 bg-dark-800 hover:bg-dark-750 transition-colors"
              >
                <div className="flex items-center gap-2">
                  <FlaskConical size={14} className="text-cyan-400" />
                  <span className="text-sm font-medium text-white">
                    Available Extractors ({result.extractors_available.length})
                  </span>
                </div>
                {expandedSections.has('extractors') ? (
                  <ChevronDown size={14} className="text-dark-400" />
                ) : (
                  <ChevronRight size={14} className="text-dark-400" />
                )}
              </button>

              {expandedSections.has('extractors') && (
                <div className="p-2 space-y-1 max-h-48 overflow-y-auto">
                  {result.extractors_available.map((ext) => (
                    <div
                      key={ext.id}
                      className="flex items-center justify-between p-2 bg-dark-850 rounded hover:bg-dark-750 group transition-colors"
                    >
                      <div className="flex-1 min-w-0">
                        <p className="text-sm text-white">{ext.name}</p>
                        <p className="text-xs text-dark-500">
                          {ext.id}
                          {ext.description && ` - ${ext.description}`}
                        </p>
                      </div>
                      <button
                        onClick={() => addExtractorNode(ext)}
                        className="p-1.5 text-dark-500 hover:text-primary-400 hover:bg-dark-700 rounded
                                   opacity-0 group-hover:opacity-100 transition-all"
                        title="Add Extractor"
                      >
                        <Plus size={14} />
                      </button>
                    </div>
                  ))}
                </div>
              )}
            </div>

            {/* Dependent Files */}
            {result.dependent_files.length > 0 && (
              <div className="border border-dark-700 rounded-lg overflow-hidden">
                <button
                  onClick={() => toggleSection('files')}
                  className="w-full flex items-center justify-between px-3 py-2 bg-dark-800 hover:bg-dark-750 transition-colors"
                >
                  <div className="flex items-center gap-2">
                    <FileBox size={14} className="text-amber-400" />
                    <span className="text-sm font-medium text-white">
                      Dependent Files ({result.dependent_files.length})
                    </span>
                  </div>
                  {expandedSections.has('files') ? (
                    <ChevronDown size={14} className="text-dark-400" />
                  ) : (
                    <ChevronRight size={14} className="text-dark-400" />
                  )}
                </button>

                {expandedSections.has('files') && (
                  <div className="p-2 space-y-1 max-h-32 overflow-y-auto">
                    {result.dependent_files.map((file) => (
                      <div
                        key={file.path}
                        className="flex items-center gap-2 p-2 bg-dark-850 rounded"
                      >
                        <FileBox size={14} className="text-dark-400 flex-shrink-0" />
                        <div className="flex-1 min-w-0">
                          <p className="text-sm text-white truncate">{file.name}</p>
                          <p className="text-xs text-dark-500">{file.type}</p>
                        </div>
                      </div>
                    ))}
                  </div>
                )}
              </div>
            )}

            {/* Warnings */}
            {result.warnings.length > 0 && (
              <div className="p-2 bg-amber-500/10 border border-amber-500/30 rounded-lg">
                <div className="flex items-center gap-1.5 mb-1">
                  <AlertTriangle size={12} className="text-amber-400" />
                  <p className="text-xs text-amber-400 font-medium">Warnings</p>
                </div>
                {result.warnings.map((w, i) => (
                  <p key={i} className="text-xs text-amber-300">
                    {w}
                  </p>
                ))}
              </div>
            )}
          </div>
        ) : (
          <div className="flex items-center justify-center h-32 text-dark-500 text-sm">
            Select a model to introspect
          </div>
        )}
      </div>
    </div>
  );
}