chatkit/frontend/src/components/step3/ReportViewer.tsx

import { useRef } from "react";

interface ReportViewerProps {
  reportHtml: string;
  onBack: () => void;
  onExportPdf: () => void;
  onExportPng: () => void;
}

export function ReportViewer({ reportHtml, onBack, onExportPdf, onExportPng }: ReportViewerProps) {
  const iframeRef = useRef<HTMLIFrameElement>(null);

  const handleDownloadHtml = () => {
    const blob = new Blob([reportHtml], { type: "text/html" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = "classlens-report.html";
    a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <div className="space-y-4">
      {/* Action bar */}
      <div className="flex flex-wrap items-center gap-3">
        <button onClick={onBack} className="btn btn-outline text-sm">
          ← 返回修改提示詞
        </button>
        <div className="flex-1" />
        <button onClick={handleDownloadHtml} className="btn btn-outline text-sm">
          下載 HTML
        </button>
        <button onClick={onExportPdf} className="btn btn-outline text-sm">
          匯出 PDF
        </button>
        <button onClick={onExportPng} className="btn btn-outline text-sm">
          匯出 PNG
        </button>
      </div>

      {/* Report iframe */}
      <div className="card overflow-hidden" style={{ height: "75vh" }}>
        <iframe
          ref={iframeRef}
          srcDoc={reportHtml}
          title="Report"
          className="w-full h-full border-0"
          sandbox="allow-scripts allow-same-origin"
        />
      </div>
    </div>
  );
}