import { useState } from "react";
import { DownloadIcon, 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;

  const handleDownload = () => {
    if (annotated_image_url) {
      const link = document.createElement("a");
      link.href = annotated_image_url;
      link.download = "analysis_result.jpg";
      // For Firefox it is necessary to add the link to the DOM
      document.body.appendChild(link);
      link.click();
      link.remove();
    }
  };

  

  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">Analyzing 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 - model-specific rendering (colposcopy, cytology, histopathology) */}
    {summary && (() => {
      const model = (model_used || "").toString();
      const isColpo = /colpo|colposcopy/i.test(model);
      const isCyto = /cyto|cytology/i.test(model);
      const isHistoLike = /mwt|cin|histopath/i.test(model);

      // helper values
      const abnormalCount = Number(summary.abnormal_cells) || 0;
      const pred = (summary.prediction || summary.result || "").toString().toLowerCase();
      const isAbnormal = abnormalCount > 0 || /abnormal|positive|high-grade|malignant/.test(pred);

      // Colposcopy: show only Abnormal / Normal (based on abnormal_cells count or prediction)
      if (isColpo) {
        return (
          <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">
              <strong>Result:</strong> {isAbnormal ? "Abnormal" : "Normal"}
            </p>
            <div className="mt-3 text-gray-800 text-sm italic border-t pt-2">
              {summary.ai_interpretation || "No AI interpretation available."}
            </div>
          </div>
        );
      }

      // Cytology: keep existing detailed summary (abnormal/normal counts + avg confidence + interpretation)
      if (isCyto) {
        return (
          <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">
              {typeof summary.abnormal_cells !== 'undefined' && (
                <><strong>Abnormal Cells:</strong> {summary.abnormal_cells} <br /></>
              )}
              {typeof summary.normal_cells !== 'undefined' && (
                <><strong>Normal Cells:</strong> {summary.normal_cells} <br /></>
              )}
              {/* average confidence removed */}
            </p>
            <div className="mt-3 text-gray-800 text-sm italic border-t pt-2">
              {summary.ai_interpretation || "No AI interpretation available."}
            </div>
          </div>
        );
      }

      // Histopathology / CIN / MWT: show average confidence prominently + interpretation
      if (isHistoLike) {
        return (
          <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>
            <div className="mt-3 text-gray-800 text-sm italic border-t pt-2">
              {summary.ai_interpretation || "No AI interpretation available."}
            </div>
          </div>
        );
      }

      // Fallback: render only the fields that exist to avoid empty labels
      return (
        <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">
            {typeof summary.abnormal_cells !== 'undefined' && (
              <><strong>Abnormal Cells:</strong> {summary.abnormal_cells} <br /></>
            )}
            {typeof summary.normal_cells !== 'undefined' && (
              <><strong>Normal Cells:</strong> {summary.normal_cells} <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 */}
            {/* Average confidence removed from visualization */}

            {/* 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 at least a result (so Generate Report is available even if summary/confidence are missing) */}
    {!isLoading && result && (
      <div className="flex items-center justify-end mb-6">
        {annotated_image_url && (
          <button
            onClick={handleDownload}
            className="flex items-center gap-2 mr-3 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"
          >
            <DownloadIcon className="w-4 h-4" />
            Download Image
          </button>
        )}
        <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 || ""}
      // Include annotated_image_url in the analysis summary so the backend can embed it
      analysisSummaryJson={summary ? JSON.stringify({ ...summary, model_used, confidence, annotated_image_url }) : "{}"}
    />
  </div>
  );
}