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);
  
  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");
    }
  };

  if (loading) {
    return ( 
      <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-gray-600 font-medium">Analyzing image...</p> 
      </div>
    );
  }

  if (!result) {
    return ( 
      <div className="bg-white rounded-lg shadow-sm p-6 text-center text-gray-500">
        No analysis result available yet. 
      </div>
    );
}

const {
model_used,
detections,
annotated_image_url,
summary,
  // prediction (not used here)
confidence,
} = result;

const handleDownload = () => {
if (annotated_image_url) {
const link = document.createElement("a");
link.href = annotated_image_url;
link.download = "analysis_result.jpg";
link.click();
}
};

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>

    <div className="flex items-center gap-3">
      {annotated_image_url && (
        <button
          onClick={handleDownload}
          className="flex items-center gap-2 bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition-colors"
        >
          <DownloadIcon className="w-4 h-4" />
          Download Image
        </button>
      )}
      <button
        onClick={() => setShowReportModal(true)}
        className="flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors"
      >
        <FileTextIcon className="w-4 h-4" />
        Generate Report
      </button>
    </div>
  </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 */}
  <ReportModal 
    isOpen={showReportModal}
    onClose={() => setShowReportModal(false)}
    onSubmit={handleGenerateReport}
    analysisId={annotated_image_url || ""}
    analysisSummaryJson={summary ? JSON.stringify({ ...summary, model_used, confidence }) : "{}"}
  />
</div>
);
}