candle-annotator/src/components/PredictionPanel.tsx

'use client';

import type { PredictionState, ModelInfoResponse, PredictionSummary } from '@/types/predictions';

interface PredictionPanelProps {
  predictionState: PredictionState;
  onToggleVisibility: () => void;
  onFetchPredictions: () => void;
  onFetchBatchPredictions: () => void;
  onConfidenceChange: (threshold: number) => void;
  onToggleLabelSelection: (label: string) => void;
  predictionSummary: PredictionSummary | null;
  isModelOnline: boolean;
  showOnlyDisagreements?: boolean;
  onToggleShowOnlyDisagreements?: () => void;
}

export default function PredictionPanel({
  predictionState,
  onToggleVisibility,
  onFetchPredictions,
  onFetchBatchPredictions,
  onConfidenceChange,
  onToggleLabelSelection,
  predictionSummary,
  isModelOnline,
  showOnlyDisagreements = false,
  onToggleShowOnlyDisagreements,
}: PredictionPanelProps) {

  const {
    visible,
    isLoading,
    error,
    modelInfo,
    confidenceThreshold,
    selectedLabels,
    spans,
  } = predictionState;

  if (!isModelOnline) {
    return (
      <div className="p-4 border-t border-border bg-card">
        <div className="flex items-center gap-2 mb-3">
          <div className="w-2 h-2 rounded-full bg-red-500" />
          <h3 className="text-sm font-semibold text-foreground">Model Server Offline</h3>
        </div>
        <p className="text-xs text-muted-foreground">
          Prediction service is unavailable. Annotation tools continue to work normally.
        </p>
      </div>
    );
  }

  return (
    <div className="p-4 border-t border-border bg-card">
      {/* Header with master toggle */}
      <div className="flex items-center justify-between mb-3">
        <div className="flex items-center gap-2">
          <div className={`w-2 h-2 rounded-full ${isModelOnline ? 'bg-green-500' : 'bg-red-500'}`} />
          <h3 className="text-sm font-semibold text-foreground">Predictions</h3>
        </div>
        <button
          onClick={onToggleVisibility}
          className={`px-3 py-1 text-xs rounded ${
            visible
              ? 'bg-primary text-primary-foreground'
              : 'bg-muted text-muted-foreground hover:bg-muted/80'
          }`}
        >
          {visible ? 'Hide' : 'Show'}
        </button>
      </div>

      {/* Model Info */}
      {modelInfo && (
        <div className="mb-3 p-2 bg-muted/50 rounded text-xs">
          <div className="flex justify-between">
            <span className="text-muted-foreground">Model:</span>
            <span className="font-mono text-foreground">{modelInfo.model_name}</span>
          </div>
          <div className="flex justify-between">
            <span className="text-muted-foreground">Version:</span>
            <span className="font-mono text-foreground">{modelInfo.model_version || 'N/A'}</span>
          </div>
          <div className="flex justify-between">
            <span className="text-muted-foreground">Type:</span>
            <span className="text-foreground">{modelInfo.model_type}</span>
          </div>
        </div>
      )}

      {/* Action Buttons */}
      <div className="flex gap-2 mb-3">
        <button
          onClick={onFetchPredictions}
          disabled={isLoading || !isModelOnline}
          className="flex-1 px-3 py-2 text-xs bg-primary text-primary-foreground rounded hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed"
        >
          {isLoading ? 'Loading...' : 'Run on Visible'}
        </button>
        <button
          onClick={onFetchBatchPredictions}
          disabled={isLoading || !isModelOnline}
          className="flex-1 px-3 py-2 text-xs bg-secondary text-secondary-foreground rounded hover:bg-secondary/90 disabled:opacity-50 disabled:cursor-not-allowed"
        >
          Predict All
        </button>
      </div>

      {/* Error Display */}
      {error && (
        <div className="mb-3 p-2 bg-destructive/10 border border-destructive/20 rounded text-xs text-destructive">
          {error}
        </div>
      )}

      {/* Confidence Slider */}
      <div className="mb-3">
        <div className="flex justify-between items-center mb-1">
          <label className="text-xs text-muted-foreground">Confidence Threshold</label>
          <span className="text-xs font-mono text-foreground">{(confidenceThreshold * 100).toFixed(0)}%</span>
        </div>
        <input
          type="range"
          min="0"
          max="100"
          value={confidenceThreshold * 100}
          onChange={(e) => onConfidenceChange(Number(e.target.value) / 100)}
          className="w-full h-1 bg-muted rounded-lg appearance-none cursor-pointer"
        />
      </div>

      {/* Label Filter Checkboxes */}
      {modelInfo && (
        <div className="mb-3">
          <label className="text-xs text-muted-foreground mb-2 block">Filter by Label</label>
          <div className="space-y-1 max-h-32 overflow-y-auto">
            {modelInfo.labels.map((label) => {
              const metrics = modelInfo.per_class_metrics.find((m) => m.label === label);
              const isSelected = selectedLabels.has(label);
              
              return (
                <label
                  key={label}
                  className="flex items-center gap-2 p-1 rounded hover:bg-muted/50 cursor-pointer"
                >
                  <input
                    type="checkbox"
                    checked={isSelected}
                    onChange={() => onToggleLabelSelection(label)}
                    className="w-3 h-3"
                  />
                  <span className="text-xs text-foreground flex-1">{label}</span>
                  {metrics && (
                    <span className="text-xs text-muted-foreground font-mono">
                      F1: {(metrics.f1_score * 100).toFixed(0)}%
                    </span>
                  )}
                </label>
              );
            })}
          </div>
        </div>
      )}

      {/* Disagreement Filter */}
      {predictionSummary && predictionSummary.disagreements.length > 0 && onToggleShowOnlyDisagreements && (
        <div className="mb-3">
          <label className="flex items-center gap-2 p-2 bg-muted/50 rounded cursor-pointer hover:bg-muted">
            <input
              type="checkbox"
              checked={showOnlyDisagreements}
              onChange={onToggleShowOnlyDisagreements}
              className="w-3 h-3"
            />
            <span className="text-xs text-foreground">Show only disagreements</span>
          </label>
        </div>
      )}

      {/* Prediction Summary */}
      {visible && spans.length > 0 && predictionSummary && (
        <div className="p-2 bg-muted/30 rounded text-xs space-y-1">
          <div className="flex justify-between">
            <span className="text-muted-foreground">Predictions:</span>
            <span className="text-foreground font-mono">{predictionSummary.total_predictions}</span>
          </div>
          <div className="flex justify-between">
            <span className="text-muted-foreground">Human annotations:</span>
            <span className="text-foreground font-mono">{predictionSummary.total_human_annotations}</span>
          </div>
          <div className="flex justify-between">
            <span className="text-muted-foreground">Agreements:</span>
            <span className="text-green-600 font-mono">{predictionSummary.agreements}</span>
          </div>
          <div className="flex justify-between">
            <span className="text-muted-foreground">Disagreements:</span>
            <span className="text-orange-600 font-mono">{predictionSummary.disagreements.length}</span>
          </div>
        </div>
      )}
    </div>
  );
}