Atomizer/atomizer-dashboard/frontend/src/components/intake/ExpressionList.tsx

/**
 * ExpressionList - Display discovered expressions with selection capability
 *
 * Shows expressions from NX introspection, allowing users to:
 * - View all discovered expressions
 * - See which are design variable candidates (auto-detected)
 * - Select/deselect expressions to use as design variables
 * - View expression values and units
 */

import React, { useState } from 'react';
import {
  Check,
  Search,
  AlertTriangle,
  Sparkles,
  Info,
  Variable,
} from 'lucide-react';
import { ExpressionInfo } from '../../types/intake';

interface ExpressionListProps {
  /** Expression data from introspection */
  expressions: ExpressionInfo[];
  /** Mass from introspection (kg) */
  massKg?: number | null;
  /** Currently selected expressions (to become DVs) */
  selectedExpressions: string[];
  /** Callback when selection changes */
  onSelectionChange: (selected: string[]) => void;
  /** Whether in read-only mode */
  readOnly?: boolean;
  /** Compact display mode */
  compact?: boolean;
}

export const ExpressionList: React.FC<ExpressionListProps> = ({
  expressions,
  massKg,
  selectedExpressions,
  onSelectionChange,
  readOnly = false,
  compact = false,
}) => {
  const [filter, setFilter] = useState('');
  const [showCandidatesOnly, setShowCandidatesOnly] = useState(true);

  // Filter expressions based on search and candidate toggle
  const filteredExpressions = expressions.filter((expr) => {
    const matchesSearch = filter === '' || 
      expr.name.toLowerCase().includes(filter.toLowerCase());
    const matchesCandidate = !showCandidatesOnly || expr.is_candidate;
    return matchesSearch && matchesCandidate;
  });

  // Sort: candidates first, then by confidence, then alphabetically
  const sortedExpressions = [...filteredExpressions].sort((a, b) => {
    if (a.is_candidate !== b.is_candidate) {
      return a.is_candidate ? -1 : 1;
    }
    if (a.confidence !== b.confidence) {
      return b.confidence - a.confidence;
    }
    return a.name.localeCompare(b.name);
  });

  const toggleExpression = (name: string) => {
    if (readOnly) return;
    
    if (selectedExpressions.includes(name)) {
      onSelectionChange(selectedExpressions.filter(n => n !== name));
    } else {
      onSelectionChange([...selectedExpressions, name]);
    }
  };

  const selectAllCandidates = () => {
    const candidateNames = expressions
      .filter(e => e.is_candidate)
      .map(e => e.name);
    onSelectionChange(candidateNames);
  };

  const clearSelection = () => {
    onSelectionChange([]);
  };

  const candidateCount = expressions.filter(e => e.is_candidate).length;

  if (expressions.length === 0) {
    return (
      <div className="p-4 rounded-lg bg-dark-700/50 border border-dark-600">
        <div className="flex items-center gap-2 text-dark-400">
          <AlertTriangle className="w-4 h-4" />
          <span>No expressions found. Run introspection to discover model parameters.</span>
        </div>
      </div>
    );
  }

  return (
    <div className="space-y-3">
      {/* Header with stats */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-3">
          <h5 className="text-sm font-medium text-dark-300 flex items-center gap-2">
            <Variable className="w-4 h-4" />
            Discovered Expressions
          </h5>
          <span className="text-xs text-dark-500">
            {expressions.length} total, {candidateCount} candidates
          </span>
          {massKg && (
            <span className="text-xs text-primary-400">
              Mass: {massKg.toFixed(3)} kg
            </span>
          )}
        </div>
        {!readOnly && selectedExpressions.length > 0 && (
          <span className="text-xs text-green-400">
            {selectedExpressions.length} selected
          </span>
        )}
      </div>

      {/* Controls */}
      {!compact && (
        <div className="flex items-center gap-3">
          {/* Search */}
          <div className="relative flex-1 max-w-xs">
            <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-dark-500" />
            <input
              type="text"
              placeholder="Search expressions..."
              value={filter}
              onChange={(e) => setFilter(e.target.value)}
              className="w-full pl-8 pr-3 py-1.5 text-sm rounded-lg bg-dark-700 border border-dark-600
                         text-white placeholder-dark-500 focus:border-primary-500/50 focus:outline-none"
            />
          </div>

          {/* Show candidates only toggle */}
          <label className="flex items-center gap-2 text-xs text-dark-400 cursor-pointer">
            <input
              type="checkbox"
              checked={showCandidatesOnly}
              onChange={(e) => setShowCandidatesOnly(e.target.checked)}
              className="w-4 h-4 rounded border-dark-500 bg-dark-700 text-primary-500 
                         focus:ring-primary-500/30"
            />
            Candidates only
          </label>

          {/* Quick actions */}
          {!readOnly && (
            <div className="flex items-center gap-2">
              <button
                onClick={selectAllCandidates}
                className="px-2 py-1 text-xs rounded bg-primary-500/10 text-primary-400 
                           hover:bg-primary-500/20 transition-colors"
              >
                Select all candidates
              </button>
              <button
                onClick={clearSelection}
                className="px-2 py-1 text-xs rounded bg-dark-600 text-dark-400 
                           hover:bg-dark-500 transition-colors"
              >
                Clear
              </button>
            </div>
          )}
        </div>
      )}

      {/* Expression list */}
      <div className={`rounded-lg border border-dark-600 overflow-hidden ${
        compact ? 'max-h-48' : 'max-h-72'
      } overflow-y-auto`}>
        <table className="w-full text-sm">
          <thead className="bg-dark-700 sticky top-0">
            <tr>
              {!readOnly && (
                <th className="w-8 px-2 py-2"></th>
              )}
              <th className="px-3 py-2 text-left text-dark-400 font-medium">Name</th>
              <th className="px-3 py-2 text-right text-dark-400 font-medium w-24">Value</th>
              <th className="px-3 py-2 text-left text-dark-400 font-medium w-16">Units</th>
              <th className="px-3 py-2 text-center text-dark-400 font-medium w-20">Candidate</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-dark-700">
            {sortedExpressions.map((expr) => {
              const isSelected = selectedExpressions.includes(expr.name);
              return (
                <tr
                  key={expr.name}
                  onClick={() => toggleExpression(expr.name)}
                  className={`
                    ${readOnly ? '' : 'cursor-pointer hover:bg-dark-700/50'}
                    ${isSelected ? 'bg-primary-500/10' : ''}
                    transition-colors
                  `}
                >
                  {!readOnly && (
                    <td className="px-2 py-2">
                      <div className={`w-5 h-5 rounded border flex items-center justify-center
                        ${isSelected 
                          ? 'bg-primary-500 border-primary-500' 
                          : 'border-dark-500 bg-dark-700'
                        }`}
                      >
                        {isSelected && <Check className="w-3 h-3 text-white" />}
                      </div>
                    </td>
                  )}
                  <td className="px-3 py-2">
                    <div className="flex items-center gap-2">
                      <code className={`text-xs ${isSelected ? 'text-primary-300' : 'text-white'}`}>
                        {expr.name}
                      </code>
                      {expr.formula && (
                        <span className="text-xs text-dark-500" title={expr.formula}>
                          <Info className="w-3 h-3" />
                        </span>
                      )}
                    </div>
                  </td>
                  <td className="px-3 py-2 text-right font-mono text-xs text-dark-300">
                    {expr.value !== null ? expr.value.toFixed(3) : '-'}
                  </td>
                  <td className="px-3 py-2 text-xs text-dark-400">
                    {expr.units || '-'}
                  </td>
                  <td className="px-3 py-2 text-center">
                    {expr.is_candidate ? (
                      <span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs 
                                       bg-green-500/10 text-green-400">
                        <Sparkles className="w-3 h-3" />
                        {Math.round(expr.confidence * 100)}%
                      </span>
                    ) : (
                      <span className="text-xs text-dark-500">-</span>
                    )}
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
        
        {sortedExpressions.length === 0 && (
          <div className="px-4 py-8 text-center text-dark-500">
            No expressions match your filter
          </div>
        )}
      </div>

      {/* Help text */}
      {!readOnly && !compact && (
        <p className="text-xs text-dark-500">
          Select expressions to use as design variables. Candidates (marked with %) are 
          automatically identified based on naming patterns and units.
        </p>
      )}
    </div>
  );
};

export default ExpressionList;