frontend/src/components/ResultsPanel.tsx

import { useState } from "react";
import { FileTextIcon, Loader2Icon } from "lucide-react";
import { ImageWithFallback } from "./ImageWithFallback";
import { ReportModal } from "./ReportModal";
import axios from "axios";

interface ResultsPanelProps {
  uploadedImage: string | null;
  result?: any;
  loading?: boolean;
}

export function ResultsPanel({ uploadedImage, result, loading }: ResultsPanelProps) {
  const [showReportModal, setShowReportModal] = useState(false);
  // Make loading detection robust: sometimes values arrive as the string "true" from deployed envs
  const isLoading = loading === true || String(loading) === "true";

  // Helpful debug information when checking issues on deployed spaces (open browser devtools)
  // Keep as debug (console.debug) so it doesn't clutter normal logs.
  console.debug("ResultsPanel: props", { loading, isLoading, result });
  
  const handleGenerateReport = async (formData: FormData) => {
    try {
      const baseURL = import.meta.env.MODE === "development"
        ? "http://127.0.0.1:7860"
        : window.location.origin;
      const response = await axios.post(`${baseURL}/reports/`, formData, {
        headers: { "Content-Type": "multipart/form-data" },
      });

      if (response.data.html_url) {
        // Open report in new tab
        window.open(`${baseURL}${response.data.html_url}`, "_blank");
      }
      if (response.data.pdf_url) {
        // Open PDF in new tab when available
        window.open(`${baseURL}${response.data.pdf_url}`, "_blank");
      }
      
      setShowReportModal(false);
    } catch (err: any) {
      console.error("Failed to generate report:", err);
      alert(err.response?.data?.error || "Failed to generate report");
    }
  };

  // Safely destructure result (keep undefined values when result is null) so we can render
  // a stable panel while loading and avoid early returns that change layout.
  const {
    model_used,
    detections,
    annotated_image_url,
    summary,
    // prediction (not used here)
    confidence,
  } = (result || {}) as any;

  

  return (
    <div className="bg-white rounded-lg shadow-sm p-6">
      {/* Header */}
      <div className="flex items-center justify-between mb-6">
        <div>
          <h2 className="text-2xl font-bold text-gray-800">
            {model_used || "Analysis Result"}
          </h2>
          <p className="text-sm text-gray-500">Automated Image Analysis</p>
        </div>

        {/* header actions intentionally empty; Generate Report button moved below analysis details */}
      </div>

      {/* If we're loading, show a centered loader inside the panel */}
      {isLoading ? (
        <div className="bg-white rounded-lg shadow-sm p-6 flex flex-col items-center justify-center"> 
          <Loader2Icon className="w-10 h-10 text-blue-600 animate-spin mb-3" /> 
          <p className="text-teal-700 font-medium">Analysing Image...</p> 
        </div>
      ) : (
        // Image
        <div className="relative mb-6 rounded-lg overflow-hidden border border-gray-200">
          <ImageWithFallback
            src={annotated_image_url || uploadedImage || "/ui.jpg"}
            alt="Analysis Result"
            className="w-full h-64 object-cover"
          />
        </div>
      )}

    {/* Summary Section */}
    {summary && (
      <div className="bg-gray-50 p-4 rounded-lg mb-6">
        <h3 className="text-lg font-semibold text-gray-800 mb-2">
          AI Summary
        </h3>
        <p className="text-gray-700 text-sm leading-relaxed">
          <strong>Abnormal Cells:</strong> {summary.abnormal_cells} <br />
          <strong>Normal Cells:</strong> {summary.normal_cells} <br />
          <strong>Average Confidence:</strong> {summary.avg_confidence?.toFixed(2)}% <br />
        </p>
        <div className="mt-3 text-gray-800 text-sm italic border-t pt-2">
          {summary.ai_interpretation || "No AI interpretation available."}
        </div>
      </div>
    )}

    {/* Detection list */}
    {detections && detections.length > 0 && (
      <div className="mb-6">
        <h4 className="font-semibold text-gray-900 mb-3">
          Detected Objects
        </h4>
        <ul className="text-sm text-gray-700 list-disc list-inside space-y-1">
          {detections.map((det: any, i: number) => (
            <li key={i}>
              {det.name || "Object"} – {(det.confidence * 100).toFixed(1)}%
            </li>
          ))}
        </ul>
      </div>
    )}

    {/* Probability / MWT visualization */}
    {confidence && (
      <div className="mb-6">
        <h4 className="font-semibold text-gray-900 mb-3">Confidence Levels</h4>

        {/* If MWT, CIN, or Histopathology classifier, show a visual bar for average confidence and per-class bars */}
        {model_used && /mwt|cin|histopathology/i.test(model_used) ? (
          <div>
            {/* Average confidence bar */}
            <div className="mb-3">
              <div className="flex items-center justify-between mb-1">
                <span className="text-sm font-medium text-gray-700">Average confidence</span>
                <span className="text-sm font-mono text-gray-600">
                  {summary?.avg_confidence ? `${summary.avg_confidence.toFixed(2)}%` : "-"}
                </span>
              </div>
              <div className="w-full bg-gray-200 rounded-full h-4 overflow-hidden">
                <div
                  className="h-4 bg-gradient-to-r from-amber-600 to-amber-400"
                  style={{ width: `${summary?.avg_confidence ?? 0}%` }}
                />
              </div>
            </div>

            {/* Per-class bars */}
            <div className="space-y-2">
              {Object.entries(confidence).map(([cls, val]) => {
                const num = Number(val as any) || 0;
                const pct = (num * 100);
                
                // Color coding: Positive/Malignant/High-grade = red, Negative/Benign/Low-grade = green
                const isNegative = cls.toLowerCase().includes("negative") || 
                                  cls.toLowerCase().includes("benign") || 
                                  cls.toLowerCase().includes("low-grade");
                
                return (
                  <div key={cls}>
                    <div className="flex items-center justify-between text-sm mb-1">
                      <span className="text-gray-700">{cls}</span>
                      <span className="text-gray-600">{pct.toFixed(2)}%</span>
                    </div>
                    <div className="w-full bg-gray-100 rounded-full h-3">
                      <div
                        className={`h-3 rounded-full ${isNegative ? "bg-green-500" : "bg-red-500"}`}
                        style={{ width: `${pct.toFixed(2)}%` }}
                      />
                    </div>
                  </div>
                );
              })}
            </div>

            {/* Mistral comment */}
            <div className="mt-4 bg-gray-50 p-3 rounded-lg text-sm italic text-gray-800 border-t">
              {summary?.ai_interpretation || "No AI interpretation available."}
            </div>
          </div>
        ) : (
          // Fallback display for non-MWT models
          <pre className="bg-gray-100 rounded-lg p-3 text-sm overflow-x-auto">
            {JSON.stringify(confidence, null, 2)}
          </pre>
        )}
      </div>
    )}

    {/* Report Generation Modal */}
    {/* Move Generate Report button here so it's shown after analysis details. */}
    {/* Show only when not loading and we have analysis data (summary or confidence) */}
    {!isLoading && (summary || confidence) && (
      <div className="flex items-center justify-end mb-6">
        <button
          onClick={() => setShowReportModal(true)}
          className="flex items-center gap-2 bg-gradient-to-r from-teal-700 via-teal-600 to-teal-700 text-white px-4 py-2 rounded-lg hover:opacity-90 transition-all"
        >
          <FileTextIcon className="w-4 h-4" />
          Generate Report
        </button>
      </div>
    )}
    <ReportModal 
      isOpen={showReportModal}
      onClose={() => setShowReportModal(false)}
      onSubmit={handleGenerateReport}
      analysisId={annotated_image_url || ""}
      analysisSummaryJson={summary ? JSON.stringify({ ...summary, model_used, confidence }) : "{}"}
    />
  </div>
  );
}