import { useEffect, useRef, useState } from 'react';
import * as pdfjsLib from 'pdfjs-dist';
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.min.mjs?url';

import { getDaojiandanPdf as getDaojiandanPdfApi, submitDaojiandanSign, editDaojiandanPrintStatus } from '../../api';
import type { ExamClient } from '../../data/mockData';
import { setExamActionRecord, setDaojiandanPdf, getDaojiandanPdf } from '../../utils/examActions';
import type { SignaturePadHandle } from '../ui';
import { Button, SignaturePad } from '../ui';

// Polyfill for Promise.withResolvers
if (typeof (Promise as any).withResolvers === 'undefined') {
  (Promise as any).withResolvers = function <T>() {
    let resolve!: (value: T | PromiseLike<T>) => void;
    let reject!: (reason?: any) => void;
    const promise = new Promise<T>((res, rej) => {
      resolve = res;
      reject = rej;
    });
    return { promise, resolve, reject };
  };
}

// 配置 PDF.js worker
pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;

export const ExamPrintPanel = ({ client }: { client: ExamClient }) => {
  const [pdfUrl, setPdfUrl] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [pdfReady, setPdfReady] = useState(false);
  const [pdfBlobUrl, setPdfBlobUrl] = useState<string | null>(null);
  const [signatureSubmitted, setSignatureSubmitted] = useState(false);
  const [submitLoading, setSubmitLoading] = useState(false);
  const [submitMessage, setSubmitMessage] = useState<string | null>(null);
  const [showPreview, setShowPreview] = useState(false);
  const [fetchLoading, setFetchLoading] = useState(false);
  const [pdfData, setPdfData] = useState<ArrayBuffer | null>(null);
  const signaturePadRef = useRef<SignaturePadHandle | null>(null);
  const printRef = useRef<HTMLDivElement>(null);
  const canvasContainerRef = useRef<HTMLDivElement>(null);

  const handleSubmitSign = async () => {
    const examId = Number(client.id);
    if (!examId) {
      setSubmitMessage('无效的体检ID');
      return;
    }

    const dataUrl = signaturePadRef.current?.toDataURL('image/png');
    if (!dataUrl) {
      setSubmitMessage('请先完成签名');
      return;
    }

    setSubmitLoading(true);
    setSubmitMessage(null);
    try {
      // 将 base64 转换为 Blob
      const blob = await fetch(dataUrl).then(r => r.blob());

      // 提交签名生成导检单PDF
      const res = await submitDaojiandanSign({
        exam_id: examId,
        sign_file: blob,
      });

      if (res.Status === 200 && res.Data?.pdf_url) {
        setSubmitMessage('签名提交成功，正在加载导检单...');
        setSignatureSubmitted(true);
        const pdfUrlValue = res.Data.pdf_url;
        const pdfNameValue = res.Data.pdf_name || '导检单';
        setPdfUrl(pdfUrlValue);
        // 保存导检单PDF信息到localStorage
        setDaojiandanPdf(examId, {
          pdf_name: pdfNameValue,
          pdf_url: pdfUrlValue,
        });
        // 记录打印导检单是否签名操作
        setExamActionRecord(examId, 'printSign', true);

        // 更新导检单打印状态
        try {
          await editDaojiandanPrintStatus({ exam_id: examId });
        } catch (err) {
          console.error('更新导检单打印状态失败', err);
          // 不阻塞主流程，仅记录错误
        }
      } else {
        setSubmitMessage(res.Message || '签名提交失败');
      }
    } catch (err) {
      console.error('提交签名失败', err);
      setSubmitMessage('签名提交失败，请稍后重试');
    } finally {
      setSubmitLoading(false);
    }
  };

  // 组件加载时检查localStorage，如果有则直接展示
  useEffect(() => {
    const examId = Number(client.id);
    if (!examId) return;

    const storedPdf = getDaojiandanPdf(examId);
    if (storedPdf && storedPdf.pdf_url) {
      setPdfUrl(storedPdf.pdf_url);
      setShowPreview(true);
    }
  }, [client.id]);

  // 获取导检单PDF（优先使用localStorage，没有则调用接口）
  const handleFetchPdf = async () => {
    const examId = Number(client.id);
    if (!examId) {
      setError('无效的体检ID');
      return;
    }

    setFetchLoading(true);
    setError(null);

    try {
      // 先尝试从localStorage获取
      const storedPdf = getDaojiandanPdf(examId);
      if (storedPdf && storedPdf.pdf_url) {
        setPdfUrl(storedPdf.pdf_url);
        setShowPreview(true);
        setFetchLoading(false);
        return;
      }

      // 如果没有存储的，则调用接口获取
      const res = await getDaojiandanPdfApi({ exam_id: examId });
      if (res.Status === 200 && res.Data?.pdf_url) {
        const pdfUrlValue = res.Data.pdf_url;
        const pdfNameValue = res.Data.pdf_name || '导检单';
        setPdfUrl(pdfUrlValue);
        // 保存到localStorage
        setDaojiandanPdf(examId, {
          pdf_name: pdfNameValue,
          pdf_url: pdfUrlValue,
        });
        setShowPreview(true);
      } else {
        setError(res.Message || '获取导检单失败');
      }
    } catch (err) {
      console.error('获取导检单失败', err);
      setError('获取导检单失败，请稍后重试');
    } finally {
      setFetchLoading(false);
    }
  };

  // 第一步：加载 PDF 数据
  useEffect(() => {
    if (!pdfUrl) return;

    let objectUrl: string | null = null;
    setPdfReady(false);
    setLoading(true);
    setPdfData(null);

    fetch(pdfUrl)
      .then((resp) => {
        if (!resp.ok) throw new Error('获取PDF文件失败');
        return resp.blob();
      })
      .then((blob) => {
        objectUrl = URL.createObjectURL(blob);
        setPdfBlobUrl(objectUrl);
        return blob.arrayBuffer();
      })
      .then((arrayBuffer) => {
        setPdfData(arrayBuffer);
        setLoading(false);
      })
      .catch((err) => {
        console.error('PDF 拉取失败', err);
        setError('PDF 加载失败，请稍后重试');
        setLoading(false);
      });

    return () => {
      if (objectUrl) {
        URL.revokeObjectURL(objectUrl);
      }
    };
  }, [pdfUrl]);

  // 第二步：渲染 PDF
  useEffect(() => {
    if (!pdfData || !canvasContainerRef.current) return;

    console.log('开始渲染 PDF');
    setPdfReady(false);

    const renderAllPages = async () => {
      try {
        const pdf = await pdfjsLib.getDocument({ data: pdfData }).promise;
        console.log('PDF 加载成功，共 ' + pdf.numPages + ' 页');

        if (!canvasContainerRef.current) {
          console.log('canvasContainerRef 仍为 null');
          return;
        }

        // 清空容器
        canvasContainerRef.current.innerHTML = '';

        const scale = 1.2;

        for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
          const page = await pdf.getPage(pageNum);
          const viewport = page.getViewport({ scale });

          const canvas = document.createElement('canvas');
          const context = canvas.getContext('2d');

          if (!context) {
            console.log('无法获取 canvas context');
            continue;
          }

          canvas.height = viewport.height;
          canvas.width = viewport.width;
          canvas.style.display = 'block';
          canvas.style.marginBottom = '10px';
          canvas.className = 'mx-auto border rounded-lg shadow-sm';

          canvasContainerRef.current.appendChild(canvas);

          const renderContext = {
            canvasContext: context,
            viewport: viewport,
          } as any;

          await page.render(renderContext).promise;
          console.log('渲染完成第 ' + pageNum + ' 页');
        }

        setPdfReady(true);
        console.log('所有页面渲染完成');
      } catch (err) {
        console.error('PDF 渲染失败', err);
        setError('PDF 渲染失败，请稍后重试: ' + err);
      }
    };

    renderAllPages();
  }, [pdfData]);

  const handlePrint = () => {
    if (!pdfBlobUrl || !pdfReady || !canvasContainerRef.current) return;

    // 创建打印窗口
    const printWindow = window.open('', '_blank');
    if (!printWindow) return;

    // 获取所有的 canvas
    const canvases = canvasContainerRef.current.querySelectorAll('canvas');

    // 构建打印页面
    printWindow.document.write(`
      <!DOCTYPE html>
      <html>
        <head>
          <title>导检单打印</title>
          <style>
            @media print {
              body {
                margin: 0;
                padding: 0;
              }
              img {
                max-width: 100%;
                page-break-after: always;
                page-break-inside: avoid;
              }
              img:last-child {
                page-break-after: auto;
              }
            }
            body {
              margin: 0;
              padding: 0;
            }
            img {
              display: block;
              width: 100%;
              height: auto;
            }
          </style>
        </head>
        <body>
    `);

    // 将每个 canvas 转换为图片并添加到打印窗口
    canvases.forEach((canvas) => {
      const imgData = (canvas as HTMLCanvasElement).toDataURL('image/png');
      printWindow.document.write(`<img src="${imgData}" />`);
    });

    printWindow.document.write(`
        </body>
      </html>
    `);

    printWindow.document.close();

    // 等待图片加载完成后执行打印
    printWindow.onload = () => {
      printWindow.focus();
      setTimeout(() => {
        printWindow.print();
      }, 1000);
    };
  };

  return (
    <div className='flex justify-center'>
      <div className='w-full max-w-[95%] bg-white rounded-2xl border shadow-sm px-6 py-4 text-xs text-gray-800'>
        <div className='flex items-center justify-between border-b pb-3 mb-3'>
          <div>
            <div className='text-sm font-semibold'>圆和医疗体检中心 · 导检单预览</div>
            <div className='text-[11px] text-gray-500 mt-1'>
              {signatureSubmitted || showPreview
                ? '此为预览页面，实际打印效果以院内打印机为准。'
                : '请先完成签名，签名后将生成导检单PDF'}
            </div>
          </div>
          <div className='flex items-center gap-3'>
            <div className='text-right text-[11px] text-gray-500'>
              <div>体检号：{client.id}</div>
              <div>日期：{new Date().toLocaleDateString('zh-CN')}</div>
            </div>
            {!showPreview && !signatureSubmitted && (
              <Button
                className='px-4 py-1.5 text-xs bg-blue-600 hover:bg-blue-700 text-white disabled:opacity-50 disabled:cursor-not-allowed'
                onClick={handleFetchPdf}
                disabled={fetchLoading}
              >
                {fetchLoading ? '加载中...' : '查看'}
              </Button>
            )}
            {showPreview && !signatureSubmitted && (
              <>
                <Button
                  className='px-4 py-1.5 text-xs bg-gray-600 hover:bg-gray-700 text-white'
                  onClick={() => {
                    setShowPreview(false);
                    setPdfUrl(null);
                    setPdfBlobUrl(null);
                    setPdfReady(false);
                    setError(null);
                  }}
                >
                  签名
                </Button>
                <Button
                  className='px-4 py-1.5 text-xs bg-blue-600 hover:bg-blue-700 text-white disabled:opacity-50 disabled:cursor-not-allowed'
                  onClick={handlePrint}
                  disabled={loading || !pdfReady || !pdfUrl}
                >
                  打印
                </Button>
              </>
            )}
            {signatureSubmitted && (
              <Button
                className='px-4 py-1.5 text-xs bg-blue-600 hover:bg-blue-700 text-white disabled:opacity-50 disabled:cursor-not-allowed'
                onClick={handlePrint}
                disabled={loading || !pdfReady || !pdfUrl}
              >
                打印
              </Button>
            )}
          </div>
        </div>

        {!signatureSubmitted && !showPreview ? (
          <div className='flex flex-col gap-4'>
            <div className='text-sm font-medium text-gray-900'>请在下方区域签名</div>
            <div className='ui7-signature-wrapper border rounded-xl overflow-hidden bg-gray-50'>
              <SignaturePad
                ref={signaturePadRef}
                className='ui7-signature-canvas w-full h-72 bg-white touch-none'
              />
              <div className='flex items-center justify-between px-3 py-2 bg-gray-50 border-t'>
                <div className='text-xs text-gray-500'>请在上方区域签名</div>
                <Button
                  className='ui7-clear-button py-1 px-3'
                  onClick={() => signaturePadRef.current?.clear()}
                  disabled={submitLoading}
                >
                  清除
                </Button>
              </div>
            </div>
            {submitMessage && (
              <div
                className={`text-sm text-center ${submitMessage.includes('成功') ? 'text-green-600' : 'text-amber-600'
                  }`}
              >
                {submitMessage}
              </div>
            )}
            <div className='flex items-center justify-end gap-3'>
              <Button
                className='py-2 px-6 bg-blue-600 text-white hover:bg-blue-700'
                onClick={handleSubmitSign}
                disabled={submitLoading}
              >
                {submitLoading ? '提交中...' : '提交签名'}
              </Button>
            </div>
          </div>
        ) : fetchLoading ? (
          <div className='flex items-center justify-center py-12 text-gray-500'>
            <div>正在加载导检单...</div>
          </div>
        ) : loading ? (
          <div className='flex items-center justify-center py-12 text-gray-500'>
            <div>正在加载PDF...</div>
          </div>
        ) : error ? (
          <div className='flex flex-col items-center justify-center py-12 text-gray-500'>
            <div className='mb-2'>{error}</div>
            {signatureSubmitted ? (
              <Button
                className='px-4 py-1.5 text-xs'
                onClick={() => {
                  setError(null);
                  setPdfUrl(null);
                  setSignatureSubmitted(false);
                  setShowPreview(false);
                  signaturePadRef.current?.clear();
                }}
              >
                重新签名
              </Button>
            ) : (
              <Button
                className='px-4 py-1.5 text-xs'
                onClick={() => {
                  setError(null);
                  setShowPreview(false);
                }}
              >
                关闭
              </Button>
            )}
          </div>
        ) : pdfUrl ? (
          <div className='w-full'>
            <div ref={printRef} className='print-content'>
              <div className='flex justify-center border rounded-lg p-4 bg-gray-50 overflow-auto max-h-[600px]'>
                <div ref={canvasContainerRef} className='w-full' />
              </div>
            </div>
          </div>
        ) : null}
      </div>
    </div>
  );
};