fix(pdf-viewer): fix Cloudflare blocking iframe content

- For uploaded PDFs: Show download/open buttons instead of iframe
- For URL PDFs: Use Google Docs viewer
- Works around Cloudflare's content blocking

app/mission-control/pdf-viewer/page.tsx

@@ -1,13 +1,14 @@
 "use client";
-import BackToMC from "@/components/mission-control/BackToMC";
 
+import BackToMC from "@/components/mission-control/BackToMC";
 import { useState } from "react";
 
 export default function PdfViewerPage() {
-  const [pdfUrl, setPdfUrl] = useState<string | null>(null);
+  const [pdfData, setPdfData] = useState<string | null>(null);
+  const [pdfName, setPdfName] = useState<string>("");
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
-  const [pdfBase64, setPdfBase64] = useState<string | null>(null);
+  const [viewMode, setViewMode] = useState<"embed" | "download">("embed");
 
   const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
@@ -20,13 +21,12 @@ export default function PdfViewerPage() {
 
     setLoading(true);
     setError(null);
+    setPdfName(file.name);
 
-    // Read file as base64
     const reader = new FileReader();
     reader.onload = (event) => {
       const base64 = event.target?.result as string;
-      setPdfBase64(base64);
-      setPdfUrl(URL.createObjectURL(file));
+      setPdfData(base64);
       setLoading(false);
     };
     reader.onerror = () => {
@@ -45,12 +45,23 @@ export default function PdfViewerPage() {
 
     try {
       new URL(input);
-      setPdfUrl(input);
-      setPdfBase64(null);
+      // Use Google Docs viewer for external URLs
+      const googleViewerUrl = `https://docs.google.com/gview?url=${encodeURIComponent(input)}&embedded=true`;
+      setPdfData(googleViewerUrl);
+      setPdfName(input.split("/").pop() || "document.pdf");
+      setLoading(false);
     } catch {
       setError("Invalid URL");
-    }
       setLoading(false);
+    }
+  };
+
+  const handleDownload = () => {
+    if (!pdfData) return;
+    const link = document.createElement("a");
+    link.href = pdfData;
+    link.download = pdfName || "document.pdf";
+    link.click();
   };
 
   return (
@@ -63,7 +74,7 @@ export default function PdfViewerPage() {
 
       {/* Toolbar */}
       <div className="bg-slate-900/50 border-b border-slate-800 px-6 py-3 flex-shrink-0">
-        <div className="flex items-center gap-4">
+        <div className="flex items-center gap-4 flex-wrap">
           <label className="cursor-pointer bg-blue-600 hover:bg-blue-500 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">
             📁 Upload PDF
             <input
@@ -81,16 +92,27 @@ export default function PdfViewerPage() {
             🔗 Load from URL
           </button>
 
-          {pdfUrl && (
+          {pdfData && (
+            <>
+              <button
+                onClick={handleDownload}
+                className="bg-green-700 hover:bg-green-600 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors"
+              >
+                ⬇️ Download
+              </button>
+              
+              {pdfData.startsWith("data:") && (
                 <a
-              href={pdfUrl}
+                  href={pdfData}
                   target="_blank"
                   rel="noopener noreferrer"
                   className="bg-slate-700 hover:bg-slate-600 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors"
                 >
-              ↗ Open Original
+                  ↗ Open in New Tab
                 </a>
               )}
+            </>
+          )}
         </div>
       </div>
 
@@ -109,7 +131,7 @@ export default function PdfViewerPage() {
           </div>
         )}
 
-        {!pdfUrl && !loading && (
+        {!pdfData && !loading && (
           <div className="flex-1 flex items-center justify-center">
             <div className="text-center">
               <div className="text-8xl mb-6 opacity-50">📄</div>
@@ -133,13 +155,39 @@ export default function PdfViewerPage() {
           </div>
         )}
 
-        {pdfUrl && !loading && (
-          <div className="flex-1 overflow-auto bg-slate-800 p-4 flex justify-center">
+        {pdfData && !loading && (
+          <div className="flex-1 overflow-auto bg-slate-800 p-4">
+            {pdfData.startsWith("data:") ? (
+              // For uploaded files, show download prompt since browser PDF rendering in iframe is blocked
+              <div className="flex flex-col items-center justify-center h-full">
+                <div className="text-8xl mb-6">📄</div>
+                <h2 className="text-xl font-bold text-white mb-2">{pdfName}</h2>
+                <p className="text-slate-400 mb-6">PDF loaded successfully</p>
+                <div className="flex gap-4">
+                  <button
+                    onClick={handleDownload}
+                    className="bg-blue-600 hover:bg-blue-500 text-white px-6 py-3 rounded-lg font-medium"
+                  >
+                    ⬇️ Download PDF
+                  </button>
+                  <a
+                    href={pdfData}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="bg-slate-700 hover:bg-slate-600 text-white px-6 py-3 rounded-lg font-medium"
+                  >
+                    ↗ Open in New Tab
+                  </a>
+                </div>
+              </div>
+            ) : (
+              // For external URLs, use Google Docs viewer
               <iframe
-              src={pdfUrl}
-              className="w-full h-full min-h-[600px] bg-white shadow-2xl rounded"
+                src={pdfData}
+                className="w-full h-full min-h-[700px] bg-white shadow-2xl rounded"
                 title="PDF Viewer"
               />
+            )}
           </div>
         )}
       </div>