const downloadByUrl = (url: string) => {
  window.open(url, '_blank')
}

/**
 * 通過(guò) URL 下載文件
 * @param url 文件地址
 * @param fileName 自定義文件名
 */
export const downloadFileByUrl = (url: string, fileName?: string) => {
  const link = document.createElement('a')
  link.href = url

  // 如果提供了文件名，則設(shè)置 download 屬性
  if (fileName) {
    link.download = fileName
  }

  link.target = '_blank'
  link.style.display = 'none'
  document.body.appendChild(link)

  link.click()

  // 清理
  document.body.removeChild(link)
}

/**
 * 通過(guò)文件流下載文件
 * @param data 文件流數(shù)據(jù) (Blob | ArrayBuffer | string)
 * @param fileName 下載后的文件名
 * @param mimeType 文件的 MIME 類(lèi)型 (可選，如果不傳則嘗試從 data 中獲取或使用默認(rèn)值)
 */
export const downloadFileByStream = (data: any, fileName: string, mimeType?: string) => {
  // 1. 優(yōu)先獲取數(shù)據(jù)的類(lèi)型
  const type = mimeType || (data instanceof Blob ? data.type : 'application/octet-stream')

  // 2. 將數(shù)據(jù)封裝為 Blob 對(duì)象
  const blob = data instanceof Blob ? data : new Blob([data], { type })

  // 3. 創(chuàng)建一個(gè)臨時(shí)的 URL 指向該 Blob 對(duì)象
  const blobURL = window.URL.createObjectURL(blob)

  // 4. 創(chuàng)建虛擬錨點(diǎn)觸發(fā)下載
  const link = document.createElement('a')
  link.href = blobURL
  link.download = fileName
  link.style.display = 'none'
  document.body.appendChild(link)

  link.click()

  // 5. 下載執(zhí)行后釋放 URL 對(duì)象和 DOM 節(jié)點(diǎn)
  document.body.removeChild(link)
  // 不釋放可能導(dǎo)致內(nèi)存泄露，過(guò)早釋放可能會(huì)導(dǎo)致下載失敗，可以延遲觸發(fā)
  window.URL.revokeObjectURL(blobURL)
}

const handlePrint = () => {
  window.print()
}

@media print {
  /* 隱藏不需要打印的元素，如導(dǎo)航欄、側(cè)邊欄、按鈕 */
  .no-print {
    display: none !important;
  }
  /* 調(diào)整打印區(qū)域的寬度 */
  .print-container {
    width: 100%;
    margin: 0;
    padding: 0;
  }
  /* 強(qiáng)制分頁(yè) */
  .page-break {
    page-break-after: always;
  }
}

import html2canvas from 'html2canvas-pro' // 推薦使用 pro 版本無(wú)縫替代
import jsPDF from 'jspdf'

/**
 * 將指定 DOM 導(dǎo)出為 PDF
 * @param domId 目標(biāo) DOM 元素的 ID
 * @param title 導(dǎo)出的文件名
 */
export const exportPdf = async (domId: string, title?: string): Promise<void> => {
  const ele = document.getElementById(domId)
  if (!ele) throw new Error('未找到目標(biāo)元素')

  const scale = window.devicePixelRatio > 1 ? window.devicePixelRatio : 2

  // 獲取所有防截?cái)嘣兀ǚ乐乖乇环猪?yè)切開(kāi)，如表格行、標(biāo)題、段落等）
  const nodes = ele.querySelectorAll('tr, h2, h3, h4, h5, p, img')
  const containerRect = ele.getBoundingClientRect()

  // 同時(shí)收集元素的 top 和 bottom 坐標(biāo)
  const breakPointsPx = Array.from(nodes).map((node) => {
    const rect = node.getBoundingClientRect()
    return {
      top: rect.top - containerRect.top,
      bottom: rect.bottom - containerRect.top,
    }
  })

  // 生成畫(huà)布
  const canvas = await html2canvas(ele, {
    scale,
    useCORS: true, // 允許圖片跨域
    backgroundColor: '#ffffff',
  })

  const imgDataUrl = canvas.toDataURL('image/jpeg', 1.0)

  // 初始化 PDF 對(duì)象：p-豎向，pt-點(diǎn)(單位)，a4-紙張規(guī)格
  const pdf = new jsPDF('p', 'pt', 'a4')
  const a4Width = pdf.internal.pageSize.getWidth()
  const a4Height = pdf.internal.pageSize.getHeight()

  // 計(jì)算圖片縮放比例：根據(jù)寬度適配 A4
  const ratio = a4Width / canvas.width
  const imgWidth = a4Width
  const imgHeight = canvas.height * ratio

  // 將坐標(biāo)單位從 px 轉(zhuǎn)換為 pt (符合 PDF 內(nèi)部計(jì)算)
  const breakPointsPt = breakPointsPx.map((bp) => ({
    top: bp.top * ratio,
    bottom: bp.bottom * ratio,
  }))

  const topMargin = 30 // 頁(yè)眉預(yù)留
  const bottomMargin = 30 // 頁(yè)腳預(yù)留
  const pageContentHeight = a4Height - topMargin - bottomMargin

  let currentRenderY = 0 // 已完成渲染的 Y 軸偏移

  while (currentRenderY < imgHeight) {
    let expectedPageBottom = currentRenderY + pageContentHeight
    let actualPageBottom = expectedPageBottom

    // 判斷是不是最后一頁(yè)
    if (expectedPageBottom >= imgHeight) {
      actualPageBottom = imgHeight
    } else {
      // 只有不是最后一頁(yè)，才去遍歷判斷是否被截?cái)?
      for (let i = 0; i < breakPointsPt.length; i++) {
        const { top, bottom } = breakPointsPt[i]

        // 核心判斷：元素的頭在當(dāng)前頁(yè)，但尾巴超出了當(dāng)前頁(yè)的底部，說(shuō)明被“腰斬”了
        if (top > currentRenderY && top < expectedPageBottom && bottom > expectedPageBottom) {
          actualPageBottom = top // 在被截?cái)嘣氐捻敳壳幸坏?，將其整體推到下一頁(yè)
          break
        }
      }
    }

    if (actualPageBottom === currentRenderY) actualPageBottom = expectedPageBottom

    // 1. 渲染當(dāng)前頁(yè)圖像（利用負(fù)偏移顯示指定區(qū)域）
    pdf.addImage(imgDataUrl, 'JPEG', 0, topMargin - currentRenderY, imgWidth, imgHeight)

    // 2. 頂部遮罩（覆蓋負(fù)偏移區(qū)域產(chǎn)生的重疊部分）
    if (currentRenderY > 0) {
      pdf.setFillColor(255, 255, 255)
      pdf.rect(0, 0, a4Width, topMargin, 'F')
    }

    // 3. 底部遮罩（留白并遮擋截?cái)嗵幍臍堄埃?
    const currentRenderBottomY = topMargin + (actualPageBottom - currentRenderY)
    pdf.setFillColor(255, 255, 255)
    pdf.rect(0, currentRenderBottomY, a4Width, a4Height - currentRenderBottomY, 'F')

    currentRenderY = actualPageBottom

    // 如果還沒(méi)畫(huà)完，添加新的一頁(yè)
    if (currentRenderY + 5 < imgHeight) {
      pdf.addPage()
    }
  }
  const fileName = title ? `${title}_${Date.now()}` : Date.now().toString()
  pdf.save(`${fileName}.pdf`)
}

import { exportPdf } from './utils/pdf'

const ReportPage = () => {
  const handleDownload = async () => {
    try {
      // 傳入容器 ID 和文件名
      await exportPdf('pdf-content', '月度分析報(bào)告')
    } catch (error) {
      console.error('生成 PDF 失敗:', error)
    }
  }

  return (
    <div>
      <button onClick={handleDownload}>下載報(bào)告</button>

      {/* 這里的 ID 必須與 exportPdf 傳入的一致 */}
      <div id="pdf-content" style={{ padding: '20px', background: '#fff' }}>
        <h2>報(bào)表標(biāo)題</h2>
        <p>這里是很長(zhǎng)很長(zhǎng)的內(nèi)容，可能會(huì)跨頁(yè)...</p>
        <table>
          <tbody>
            <tr>
              <td>數(shù)據(jù)行 1</td>
            </tr>
            {/* 這里的 tr 會(huì)被防截?cái)噙壿嬜詣?dòng)推送到下一頁(yè)容器中 */}
            <tr>
              <td>數(shù)據(jù)行 2</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  )
}

// src/components/pdf-templates/ContractTemplate.tsx
interface IProps {
  data: any
}

export const ContractTemplate = ({ data }: IProps) => (
  <div id="pdf-render-target" style={{ width: '800px', padding: '40px' }}>
    <h1>{data.title}</h1>
    {/* 自由編寫(xiě)復(fù)雜的 PDF 樣式 */}
  </div>
)

// src/pages/OrderDetails.tsx
import { useState } from 'react'
import { createPortal } from 'react-dom'
import { exportPdf } from '../utils/pdf'
import { ContractTemplate } from '../components/pdf-templates'

const OrderDetails = () => {
  const [isExporting, setIsExporting] = useState(false)
  const [data, setData] = useState(null)

  const startExport = async () => {
    setIsExporting(true)

    // 1. 獲取業(yè)務(wù)數(shù)據(jù) (如從 API 獲取)
    const res = await fetchOrderData()
    setData(res)

    // 2. 等待 React 渲染 DOM (利用 setTimeout 確保渲染完成)
    setTimeout(async () => {
      try {
        await exportPdf('pdf-render-target', '業(yè)務(wù)合同')
      } finally {
        setIsExporting(false)
      }
    }, 100)
  }

  return (
    <div>
      <button onClick={startExport} disabled={isExporting}>
        {isExporting ? '正在生成...' : '下載 PDF'}
      </button>

      {/* 通過(guò) Portal 將模板渲染在屏幕外，實(shí)現(xiàn)“無(wú)感”生成 */}
      {isExporting &&
        data &&
        createPortal(
          <div style={{ position: 'absolute', left: '-9999px', top: 0 }}>
            <ContractTemplate data={data} />
          </div>,
          document.body
        )}
    </div>
  )
}