frontend/src/components/ExplainabilityPanel.tsx

import React, { useState } from "react";
import { apiClient, ExplanationResult, SpectrumData } from "../apiClient";
import "../static/style.css";

interface ExplainabilityPanelProps {
  spectrumData: SpectrumData | null;
  selectedModel: string;
  modality: "raman" | "ftir";
  onExplainabilityResult: (result: ExplanationResult) => void;
}

const ExplainabilityPanel: React.FC<ExplainabilityPanelProps> = ({

  spectrumData,

  selectedModel,

  modality,

  onExplainabilityResult,

}) => {
  const [isLoading, setIsLoading] = useState(false);
  const [explanation, setExplanation] = useState<ExplanationResult | null>(
    null
  );
  const [error, setError] = useState<string | null>(null);

  const analyzeWithExplanation = async () => {
    if (!spectrumData) {
      setError("No spectrum data is available for analysis.");
      return;
    }
    setIsLoading(true);
    setError(null);
    try {
      const result = await apiClient.explainSpectrum({
        spectrum: spectrumData,
        model_name: selectedModel,
        modality: modality,
        include_provenance: true, // Added the missing property
      });
      setExplanation(result);
      onExplainabilityResult(result);
    } catch (err) {
      setError(
        err instanceof Error
          ? err.message
          : "An unknown error occurred during analysis."
      );
    } finally {
      setIsLoading(false);
    }
  };

  const renderFeatureImportance = () => {
    if (!explanation?.feature_importance) return null;

    const { feature_importance, prediction, class_labels } = explanation;
    const {
      method = "",
      summary = {
        max_importance: 0,
        mean_importance: 0,
        important_region_start: 0,
        important_region_end: 0,
      },
      top_features = { indices: [], values: [] },
    } = feature_importance;

    // Combine indices and values, sort by importance, and take the top 10 for safe rendering
    const topFeaturesData = top_features.indices
      .map((index: number, i: number) => ({
        index,
        value: top_features.values[i],
      }))
      .sort((a, b) => b.value - a.value)
      .slice(0, 10);

    const maxImportance =
      summary.max_importance > 0 ? summary.max_importance : 1;

    return (
      <div className="feature-importance-content">

        <div className="importance-summary">

          <div className="summary-item">

            <label>Method:</label>

            <span>{method.replace(/_/g, " ")}</span>

          </div>

          <div className="summary-item">

            <label>Max Importance:</label>

            <span>{summary.max_importance?.toFixed(4) ?? "N/A"}</span>

          </div>

          <div className="summary-item">

            <label>Mean Importance:</label>

            <span>{summary.mean_importance?.toFixed(4) ?? "N/A"}</span>

          </div>

          <div className="summary-item">

            <label>Key Region:</label>

            <span>

              {summary.important_region_start} - {summary.important_region_end}

            </span>

          </div>

        </div>



        <h4 className="top-features-title">Top 10 Most Important Features</h4>

        <div className="features-grid">

          {topFeaturesData.map(({ index, value }) => (

            <div key={index} className="feature-item">

              <span className="feature-index">#{index}</span>

              <div className="importance-bar">

                <div

                  className="importance-fill"

                  style={{ width: `${(value / maxImportance) * 100}%` }}

                />

              </div>

              <span className="importance-value">{value.toFixed(3)}</span>

            </div>

          ))}

        </div>



        <div className="interpretation-guide model-info__callout">

          <h4>Interpretation Guide</h4>

          <ul>

            <li>

              <strong>Feature Index:</strong> The position (wavenumber) in the

              processed spectrum.

            </li>

            <li>

              <strong>Importance Score:</strong> How much a feature contributed

              to the final prediction.

            </li>

            <li>

              High scores indicate features that strongly influenced the model's

              decision towards **{class_labels[prediction]}**.

            </li>

          </ul>

        </div>

      </div>
    );
  };

  const renderPredictionSummary = () => {
    if (!explanation) return null;

    const {
      prediction,
      confidence,
      probabilities,
      class_labels,
      model_used,
      spectrum_filename,
    } = explanation;
    const predictedClass = class_labels[prediction].toLowerCase();
    const confidencePercent = (confidence * 100).toFixed(1);

    return (
      <div className="prediction-summary-content">

        <div className={`prediction-badge ${predictedClass}`}>

          {predictedClass.toUpperCase()}

        </div>

        <div className="confidence-score">{confidencePercent}% Confidence</div>



        <div className="probability-breakdown">

          {Object.entries(class_labels).map(([index, label]) => {

            const numericIndex = Number(index);

            return (

              <div key={label} className="probability-item">

                <span className="class-label">{label}</span>

                <div className="probability-bar">

                  <div

                    className={`probability-fill ${label.toLowerCase()}`}

                    style={{ width: `${probabilities[numericIndex] * 100}%` }}

                  />

                </div>

                <span className="probability-value">

                  {(probabilities[numericIndex] * 100).toFixed(1)}%

                </span>

              </div>

            );

          })}

        </div>

        <div className="model-info-footer">

          <p>

            Model: {model_used} | File: {spectrum_filename || "N/A"}

          </p>

        </div>

      </div>
    );
  };

  return (
    <div className="explainability-panel">

      <div className="card">

        <div className="panel-header">

          <h2 className="card__title">AI Explainability</h2>

          <p className="card__subtitle">

            Understand the "why" behind the model's prediction by identifying

            which spectral features were most influential.

          </p>

        </div>

        <div className="button-group">

          <button

            onClick={analyzeWithExplanation}

            disabled={!spectrumData || isLoading}

            className="btn btn--primary"

          >

            {isLoading ? "Analyzing..." : "Explain Prediction"}

          </button>

        </div>

      </div>



      {error && <div className="error-message">{error}</div>}



      {explanation ? (

        <div className="explanation-layout">

          <div className="card">

            <h3 className="card__title">Prediction Summary</h3>

            {renderPredictionSummary()}

          </div>

          <div className="card">

            <h3 className="card__title">Feature Importance</h3>

            {renderFeatureImportance()}

          </div>

        </div>

      ) : (

        !isLoading &&

        !error && (

          <div className="placeholder">

            <p>

              {spectrumData

                ? "Click 'Explain Prediction' to begin analysis."

                : "Upload a spectrum on the 'Standard Analysis' tab to enable explainability."}

            </p>

          </div>

        )

      )}

    </div>
  );
};

export default ExplainabilityPanel;