frontend/src/components/ResultsPanel.tsx

import { DownloadIcon, InfoIcon, Loader2Icon } from "lucide-react";

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

export function ResultsPanel({ uploadedImage, result, loading }: ResultsPanelProps) {
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 {
prediction,
confidence,
probabilities,
detections,
summary,
annotated_image_url,
model_name,
analysis_type,
} = 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_name ? model_name.toUpperCase() : "Analysis Result"} </h2> <p className="text-sm text-gray-500 capitalize">
{analysis_type || "Test Type"} </p> </div>
{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>
)} </div>


  {/* Image */}
  <div className="relative mb-6 rounded-lg overflow-hidden border border-gray-200">
    <img
      src={annotated_image_url || uploadedImage || "/ui.jpg"}
      alt="Analysis Result"
      className="w-full h-64 object-cover"
    />
  </div>

  {/* Results Summary */}
  <div className="mb-6">
    {prediction && (
      <h3
        className={`text-3xl font-bold ${
          prediction.toLowerCase().includes("malignant") ||
          prediction.toLowerCase().includes("abnormal")
            ? "text-red-600"
            : "text-green-600"
        }`}
      >
        {prediction}
      </h3>
    )}

    {confidence && (
      <div className="mt-2">
        <div className="flex items-center justify-between mb-1">
          <span className="font-semibold text-gray-900">
            Confidence: {(confidence * 100).toFixed(2)}%
          </span>
          <InfoIcon className="w-4 h-4 text-gray-400" />
        </div>
        <div className="w-full h-3 bg-gray-200 rounded-full overflow-hidden">
          <div
            className={`h-full ${
              confidence > 0.7
                ? "bg-green-500"
                : confidence > 0.4
                ? "bg-yellow-500"
                : "bg-red-500"
            }`}
            style={{ width: `${confidence * 100}%` }}
          />
        </div>
      </div>
    )}

    {summary && (
      <p className="mt-4 text-gray-700 text-sm leading-relaxed">
        {summary}
      </p>
    )}
  </div>

  {/* Detections / Probabilities */}
  {detections && detections.length > 0 && (
    <div className="mb-6">
      <h4 className="font-semibold text-gray-900 mb-3">
        Detected Regions:
      </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>
  )}

  {probabilities && (
    <div className="mb-6">
      <h4 className="font-semibold text-gray-900 mb-3">
        Class Probabilities:
      </h4>
      <pre className="bg-gray-100 rounded-lg p-3 text-sm">
        {JSON.stringify(probabilities, null, 2)}
      </pre>
    </div>
  )}

  {/* Report Button */}
  <button className="w-full bg-blue-600 text-white py-3 rounded-lg font-medium hover:bg-blue-700 transition-colors flex items-center justify-center gap-2">
    <DownloadIcon className="w-5 h-5" />
    Generate Report
  </button>
</div>


);
}