"use client";

import { useEffect, useMemo, useState } from "react";

export default function PdfViewer({
  fileUrl,
  fileName,
}: {
  fileUrl: string;
  fileName?: string;
}) {
  const [pdfLib, setPdfLib] = useState<null | {
    Document: any;
    Page: any;
    pdfjs: any;
  }>(null);
  const [numPages, setNumPages] = useState(0);
  const [page, setPage] = useState(1);
  const [scale, setScale] = useState(1);
  const [fallbackMode, setFallbackMode] = useState<
    "react-pdf" | "google" | "iframe" | "object"
  >("react-pdf");

  useEffect(() => {
    let mounted = true;

    const load = async () => {
      if (typeof window === "undefined") return;
      try {
        const mod: any = await import("react-pdf");
        if (!mounted) return;

        try {
          mod.pdfjs.GlobalWorkerOptions.workerSrc = new URL(
            "pdfjs-dist/build/pdf.worker.min.mjs",
            import.meta.url,
          ).toString();
        } catch {
          // ignore
        }

        setPdfLib({ Document: mod.Document, Page: mod.Page, pdfjs: mod.pdfjs });
      } catch {
        if (mounted) setFallbackMode("google");
      }
    };

    load();
    return () => {
      mounted = false;
    };
  }, []);

  useEffect(() => {
    setNumPages(0);
    setPage(1);
    setScale(1);
    setFallbackMode("react-pdf");
  }, [fileUrl]);

  const canPrev = page > 1;
  const canNext = numPages ? page < numPages : false;

  const title = useMemo(() => {
    if (fileName) return fileName;
    try {
      const u = new URL(fileUrl, "http://localhost");
      const p = u.searchParams.get("filename");
      return p || "PDF";
    } catch {
      return "PDF";
    }
  }, [fileName, fileUrl]);

  const googleViewerUrl = useMemo(() => {
    const u = encodeURIComponent(fileUrl);
    return `https://docs.google.com/gview?embedded=1&url=${u}`;
  }, [fileUrl]);

  return (
    <div className="w-full">
      <div className="flex flex-wrap items-center justify-between gap-2">
        <div className="text-sm text-gray-600">{title}</div>

        <div className="flex items-center gap-2">
          <button
            type="button"
            onClick={() => setPage((p) => Math.max(1, p - 1))}
            disabled={!canPrev}
            className={`px-3 py-1 rounded text-sm border ${canPrev ? "hover:bg-gray-50" : "opacity-50 cursor-not-allowed"}`}
          >
            السابق
          </button>

          <div className="text-sm text-gray-700 min-w-[90px] text-center">
            {numPages ? `${page} / ${numPages}` : "—"}
          </div>

          <button
            type="button"
            onClick={() =>
              setPage((p) => (numPages ? Math.min(numPages, p + 1) : p + 1))
            }
            disabled={!canNext}
            className={`px-3 py-1 rounded text-sm border ${canNext ? "hover:bg-gray-50" : "opacity-50 cursor-not-allowed"}`}
          >
            التالي
          </button>

          <button
            type="button"
            onClick={() =>
              setScale((s) => Math.max(0.6, +(s - 0.2).toFixed(2)))
            }
            className="px-3 py-1 rounded text-sm border hover:bg-gray-50"
          >
            -
          </button>

          <div className="text-sm text-gray-700 min-w-[70px] text-center">
            {Math.round(scale * 100)}%
          </div>

          <button
            type="button"
            onClick={() =>
              setScale((s) => Math.min(2.5, +(s + 0.2).toFixed(2)))
            }
            className="px-3 py-1 rounded text-sm border hover:bg-gray-50"
          >
            +
          </button>
        </div>
      </div>

      <div className="mt-3 rounded-xl bg-gray-50 border overflow-auto">
        {fallbackMode === "react-pdf" ? (
          <div className="w-fit mx-auto p-3">
            {pdfLib ? (
              <pdfLib.Document
                file={fileUrl}
                loading={
                  <div className="p-10 text-center text-gray-600">
                    جاري تحميل الملف...
                  </div>
                }
                error={
                  <div className="p-10 text-center text-gray-600">
                    تعذر عرض ملف PDF داخل الصفحة.
                  </div>
                }
                onLoadSuccess={(info: any) => {
                  setNumPages(info.numPages);
                  setPage(1);
                }}
                onLoadError={() => {
                  setFallbackMode("google");
                }}
              >
                <pdfLib.Page
                  pageNumber={page}
                  scale={scale}
                  renderTextLayer={false}
                  renderAnnotationLayer={false}
                />
              </pdfLib.Document>
            ) : (
              <div className="p-10 text-center text-gray-600">
                جاري تحميل الملف...
              </div>
            )}
          </div>
        ) : (
          <div className="p-3">
            <div className="flex flex-wrap items-center justify-between gap-2 mb-3">
              <div className="text-sm text-gray-600">{title}</div>
              <div className="flex items-center gap-2">
                <a
                  href={fileUrl}
                  target="_blank"
                  rel="noreferrer"
                  className="px-3 py-1 rounded text-sm border hover:bg-gray-50"
                >
                  فتح
                </a>
                <a
                  href={fileUrl}
                  download
                  className="px-3 py-1 rounded text-sm border hover:bg-gray-50"
                >
                  تحميل
                </a>
                <button
                  type="button"
                  onClick={() =>
                    setFallbackMode((m) => {
                      if (m === "google") return "iframe";
                      if (m === "iframe") return "object";
                      return "google";
                    })
                  }
                  className="px-3 py-1 rounded text-sm border hover:bg-gray-50"
                >
                  {fallbackMode === "iframe" ? "بدّل العرض" : "بدّل العرض"}
                </button>
              </div>
            </div>

            <div className="bg-white rounded-xl border overflow-hidden">
              {fallbackMode === "google" ? (
                <iframe
                  title={title}
                  src={googleViewerUrl}
                  className="w-full"
                  style={{ height: 720 }}
                />
              ) : fallbackMode === "iframe" ? (
                <iframe
                  title={title}
                  src={fileUrl}
                  className="w-full"
                  style={{ height: 720 }}
                />
              ) : (
                <object
                  data={fileUrl}
                  type="application/pdf"
                  className="w-full"
                  style={{ height: 720 }}
                >
                  <div className="p-6 text-center text-gray-600">
                    تعذر عرض الملف داخل الصفحة.
                  </div>
                </object>
              )}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}