frontend/src/components/ResultsPanel.tsx

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

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

export function ResultsPanel({ uploadedImage, result, loading }: ResultsPanelProps) {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [modalImage, setModalImage] = useState<string | null>(null);

  useEffect(() => {
    if (result?.annotated_image_url) {
      setModalImage(result.annotated_image_url);
    } else if (uploadedImage) {
      setModalImage(uploadedImage);
    } else {
      setModalImage(null);
    }
  }, [result, uploadedImage]);

  // Loading state UI
  if (loading) {
    return (
      <div className="bg-white rounded-lg shadow-sm p-8 flex flex-col items-center justify-center">
        <Loader2Icon className="w-12 h-12 text-transparent bg-clip-text bg-gradient-to-r from-blue-800 to-teal-600 animate-spin mb-4" />
        <p className="text-gray-700 font-medium mb-2">Analyzing image... Please wait</p>
        <div className="w-56 h-2 rounded-full overflow-hidden mt-2">
          <div className="h-full bg-gradient-to-r from-blue-800 to-teal-600 animate-pulse" />
        </div>
      </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();
    }
  };

  const openModal = (url?: string) => {
    setModalImage(url || annotated_image_url || uploadedImage);
    setIsModalOpen(true);
  };

  const closeModal = () => {
    setIsModalOpen(false);
  };

  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-gradient-to-r from-blue-800 to-teal-600 text-white px-4 py-2 rounded-lg hover:opacity-90 transition-all"
          >
            <DownloadIcon className="w-4 h-4" />
            Download Image
          </button>
        )}
      </div>

      {/* Image (click to zoom) */}
      <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 cursor-pointer transition-transform hover:scale-105"
          onClick={() => openModal()}
        />
      </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-gradient-to-r from-blue-800 to-teal-600 text-white py-3 rounded-lg font-medium hover:opacity-95 transition-colors flex items-center justify-center gap-2">
        <DownloadIcon className="w-5 h-5" />
        Generate Report
      </button>

      {/* Modal for zoom */}
      {isModalOpen && modalImage && (
        <div
          className="fixed inset-0 bg-black/70 z-50 flex items-center justify-center p-4"
          onClick={closeModal}
        >
          <div className="max-w-5xl max-h-[90vh] w-full" onClick={(e) => e.stopPropagation()}>
            <img src={modalImage} alt="Zoomed result" className="w-full h-auto object-contain rounded-lg shadow-2xl" />
            <div className="mt-3 text-right">
              <button onClick={closeModal} className="px-4 py-2 bg-white rounded-md">Close</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}