import React, { useEffect, useState } from "react";
import { apiRequest } from "@/lib/queryClient";
import { toast } from "@/hooks/use-toast";
import { Maximize2, Minimize2, Download, X } from "lucide-react";
import { viewDocument } from "@/lib/api/documents";

type Props = {
  fileId: number | null;
  isOpen: boolean;
  onClose: () => void;
  initialFileName?: string | null;
  isPatientDocument?: boolean;
  directImageUrl?: string; // Add prop for direct image URL
};

export default function DocumentsFilePreviewModal({
  fileId,
  isOpen,
  onClose,
  initialFileName,
  isPatientDocument = false,
  directImageUrl,
}: Props) {
  const [loading, setLoading] = useState(false);
  const [mime, setMime] = useState<string | null>(null);
  const [fileName, setFileName] = useState<string | null>(
    initialFileName ?? null
  );
  const [blobUrl, setBlobUrl] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [isFullscreen, setIsFullscreen] = useState(false);

  useEffect(() => {
    if (!isOpen || !fileId) return;
    let cancelled = false;
    let createdUrl: string | null = null;

    async function load() {
      setLoading(true);
      setError(null);
      setMime(null);
      setFileName(initialFileName ?? null);
      setBlobUrl(null);

      try {
        let res: Response;

        if (directImageUrl) {
          // Use direct image URL without API call
          setBlobUrl(directImageUrl);
          // Try to determine MIME type from file extension
          const extension = directImageUrl.split('.').pop()?.toLowerCase();
          if (extension) {
            if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg'].includes(extension)) {
              setMime(`image/${extension === 'jpg' ? 'jpeg' : extension}`);
            } else if (extension === 'pdf') {
              setMime('application/pdf');
            }
          }
          setLoading(false);
          return;
        } else if (isPatientDocument && fileId) {
          // For patient documents, use the viewDocument API to get the URL
          const documentUrl = viewDocument(fileId);
          res = await fetch(documentUrl);
        } else {
          // For PDF files, use the existing endpoint
          res = await apiRequest(
            "GET",
            `/api/documents/pdf-files/${fileId}`
          );
        }

        if (!res.ok) {
          // try to parse error message from JSON body
          let msg = `Preview request failed (${res.status})`;
          try {
            const j = await res.json();
            msg = j?.message ?? msg;
          } catch { }
          throw new Error(msg);
        }

        // try to infer MIME from headers; fallback to application/pdf
        const contentType =
          res.headers.get("content-type") ?? "application/pdf";
        setMime(contentType);
        // If server provided filename in headers (Content-Disposition), we could parse it here.
        // Use initialFileName if provided, otherwise keep unset until download.
        if (!fileName && initialFileName) setFileName(initialFileName);

        const arrayBuffer = await res.arrayBuffer();
        if (cancelled) return;
        const blob = new Blob([arrayBuffer], { type: contentType });
        createdUrl = URL.createObjectURL(blob);
        setBlobUrl(createdUrl);
      } catch (err: any) {
        if (!cancelled) setError(err?.message ?? String(err));
      } finally {
        if (!cancelled) setLoading(false);
      }
    }

    load();

    return () => {
      cancelled = true;
      if (createdUrl) URL.revokeObjectURL(createdUrl);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isOpen, fileId]);

  useEffect(() => {
    function onKey(e: KeyboardEvent) {
      if (e.key === "Escape") onClose();
    }
    if (isOpen) {
      window.addEventListener("keydown", onKey);
      return () => window.removeEventListener("keydown", onKey);
    }
  }, [isOpen, onClose]);

  if (!isOpen) return null;

  async function handleDownload() {
    if (!fileId) return;
    try {
      let downloadUrl: string;

      if (directImageUrl) {
        // Use the direct image URL and fetch as blob to force download
        const response = await fetch(directImageUrl);
        const blob = await response.blob();
        const url = window.URL.createObjectURL(blob);
        const link = window.document.createElement("a");
        link.href = url;
        link.download = fileName ?? `file-${fileId}`;
        window.document.body.appendChild(link);
        link.click();
        window.document.body.removeChild(link);
        window.URL.revokeObjectURL(url);
        return;
      } else {
        // For PDF files, use the existing endpoint
        const res = await apiRequest("GET", `/api/documents/pdf-files/${fileId}`);
        if (!res.ok) {
          const j = await res.json().catch(() => ({}));
          throw new Error(j?.message || `Download failed (${res.status})`);
        }
        const arrayBuffer = await res.arrayBuffer();
        const blob = new Blob([arrayBuffer], {
          type: mime ?? "application/octet-stream",
        });
        const url = URL.createObjectURL(blob);
        const a = document.createElement("a");
        a.href = url;
        a.download = fileName ?? `file-${fileId}`;
        document.body.appendChild(a);
        a.click();
        a.remove();
        setTimeout(() => URL.revokeObjectURL(url), 5000);
        return;
      }

      // For download API URLs, create download link
      const a = document.createElement("a");
      a.href = downloadUrl;
      a.download = fileName ?? `file-${fileId}`;
      document.body.appendChild(a);
      a.click();
      a.remove();
    } catch (err: any) {
      toast({
        title: "Download failed",
        description: err?.message ?? String(err),
        variant: "destructive",
      });
    }
  }

  const containerBase =
    "bg-white rounded-md p-3 flex flex-col overflow-hidden shadow-xl";
  const sizeClass = isFullscreen
    ? "w-[95vw] h-[95vh]"
    : "w-[min(1200px,95vw)] h-[85vh]";

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-60 p-4">
      <div className={`${containerBase} ${sizeClass} max-w-full max-h-full`}>
        <div className="flex items-start justify-between gap-3 pb-2 border-b">
          <div className="min-w-0">
            <h3 className="text-lg font-semibold truncate">
              {fileName ?? `File #${fileId}`}
            </h3>
            <div className="text-sm text-gray-500 truncate">{mime ?? ""}</div>
          </div>

          <div className="flex items-center gap-2">
            <button
              onClick={() => setIsFullscreen((s) => !s)}
              title={isFullscreen ? "Exit fullscreen" : "Fullscreen"}
              className="p-2 rounded hover:bg-gray-100"
            >
              {isFullscreen ? (
                <Minimize2 className="w-4 h-4" />
              ) : (
                <Maximize2 className="w-4 h-4" />
              )}
            </button>

            <button
              onClick={handleDownload}
              title="Download"
              className="p-2 rounded hover:bg-gray-100"
            >
              <Download className="w-4 h-4" />
            </button>

            <button
              onClick={onClose}
              title="Close"
              className="p-2 rounded hover:bg-gray-100"
            >
              <X className="w-4 h-4" />
            </button>
          </div>
        </div>

        <div className="flex-1 overflow-auto mt-3">
          {loading && (
            <div className="w-full h-full flex items-center justify-center">
              Loading preview…
            </div>
          )}
          {error && <div className="text-red-600">{error}</div>}

          {!loading && !error && blobUrl && mime?.startsWith("image/") && (
            <div className="flex items-center justify-center w-full h-full">
              <img
                src={blobUrl}
                alt={fileName ?? ""}
                className="max-w-full max-h-full object-contain"
              />
            </div>
          )}

          {!loading &&
            !error &&
            blobUrl &&
            (mime === "application/pdf" || mime?.endsWith("/pdf")) && (
              <div className="w-full h-full">
                <iframe
                  src={blobUrl}
                  title={fileName ?? `PDF ${fileId}`}
                  className="w-full h-full border-0"
                />
              </div>
            )}

          {!loading &&
            !error &&
            blobUrl &&
            !mime?.startsWith("image/") &&
            !mime?.includes("pdf") && (
              <div className="p-4">
                <p>Preview not available for this file type.</p>
                <p className="mt-2">
                  <a
                    href={blobUrl}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="underline"
                  >
                    Open raw
                  </a>
                </p>
              </div>
            )}
        </div>
      </div>
    </div>
  );
}