import domtoimage from "dom-to-image-more";
import { PDFDocument } from "pdf-lib";

/** ฟังก์ชันสำหรับแสดง loading spinner */
export function showLoadingSpinner() {
  const loading = document.createElement("div");
  loading.id = "loading-spinner";
  loading.style.position = "fixed";
  loading.style.top = "0";
  loading.style.left = "0";
  loading.style.width = "100vw";
  loading.style.height = "100vh";
  loading.style.background = "rgba(0,0,0,0.2)";
  loading.style.display = "flex";
  loading.style.alignItems = "center";
  loading.style.justifyContent = "center";
  loading.style.zIndex = "9999";
  loading.innerHTML = `
    <div style="display:flex;flex-direction:column;align-items:center;">
      <div style="
        border: 8px solid #f3f3f3;
        border-top: 8px solid #3498db;
        border-radius: 50%;
        width: 60px;
        height: 60px;
        animation: spin 1s linear infinite;
      "></div>
     
    </div>
    <style>
      @keyframes spin {
        0% { transform: rotate(0deg);}
        100% { transform: rotate(360deg);}
      }
    </style>
  `;
  document.body.appendChild(loading);
}

/** ฟังก์ชันสำหรับซ่อน loading spinner */
function hideLoadingSpinner() {
  const loading = document.getElementById("loading-spinner");
  if (loading) loading.remove();
}

/**
 * ฟังก์ชันสำหรับ export โครงสร้างองค์กรเป็น PNG
 * @param node HTMLElement ที่ต้องการ export เป็น PNG
 */
export async function exportChartToPNG(node: HTMLElement): Promise<void> {
  if (node) {
    try {
      // สร้าง PNG จาก DOM ขนาดเต็ม
      const imageData = await domtoimage.toPng(node, {
        bgcolor: "#fff",
        quality: 1,
        width: node.scrollWidth,
        height: node.scrollHeight,
      });

      const link = document.createElement("a");
      link.download = "orgchart.png";
      link.href = imageData;
      link.click();
    } catch (error: any) {
      alert("Export ไม่สำเร็จ: " + error.message);
    } finally {
      hideLoadingSpinner();
    }
  }
}

/**
 * ฟังก์ชันสำหรับ export โครงสร้างองค์กรเป็น PNG
 * @param node HTMLElement ที่ต้องการ export เป็น PNG
 */
export async function exportChartToPDF(node: HTMLElement): Promise<void> {
  // ใช้ scrollWidth/scrollHeight เพื่อขนาดเต็ม
  const width = node.scrollWidth;
  const height = node.scrollHeight;

  try {
    // สร้าง PNG จาก DOM ขนาดเต็ม
    const imageData = await domtoimage.toPng(node, {
      width,
      height,
      bgcolor: "#fff",
    });
    // สร้าง PDF ด้วย pdf-lib
    const pdfDoc = await PDFDocument.create();
    const page = pdfDoc.addPage([width, height]);
    const pngImage = await pdfDoc.embedPng(imageData);
    page.drawImage(pngImage, {
      x: 0,
      y: 0,
      width,
      height,
    });
    const pdfBytes = await pdfDoc.save();
    // ดาวน์โหลด PDF
    const blob = new Blob([pdfBytes], { type: "application/pdf" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = "orgchart.pdf";
    a.click();
    URL.revokeObjectURL(url);
  } catch (err: any) {
    alert("Export ไม่สำเร็จ: " + err.message);

    console.error(err);
  } finally {
    hideLoadingSpinner();
  }
}