"use client";
import dayjs from "dayjs";

export const generatePDF = (
  accountNo: string,
  balance: string,
  txns: any[],
  customerName: string,
  periodFrom: string,
  periodTo: string
) => {
  const html2pdf = require("html2pdf.js");

  // Build rows
  const rows = txns.map(
    (t: any) => `
      <tr style="page-break-inside: avoid;">
        <td style="border:1px solid #ccc;padding:6px;text-align:center;">${t.date}</td>
        <td style="border:1px solid #ccc;padding:6px;text-align:left;">${t.name}</td>
        <td style="border:1px solid #ccc;padding:6px;text-align:right;color:${t.type === "DR" ? "red" : "green"
      }">
          ${parseFloat(t.amount).toLocaleString("en-IN", {
        minimumFractionDigits: 2,
      })} ${t.type === "DR" ? "dr." : "cr."}
        </td>
        <td style="border:1px solid #ccc; padding:6px; text-align:right; color: blue;">${t.balance}</td>
      </tr>
    `
  );

  // Content for first page
  const content = `
    <div style="font-family:Arial, sans-serif;">
      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;">
        <div style="display:flex;align-items:center;gap:10px;">
          <img src="/logo.jpg" alt="Bank Logo" style="height:50px;" />
          <h2 style="margin:0;">The Kangra Central Co Operative Bank</h2>
        </div>
        <div style="font-size:12px;color:#555;">
          Report generated: ${dayjs().format("DD/MM/YYYY HH:mm")}
        </div>
      </div>
      <hr/>

      <h3 style="text-align:center;">Account Statement</h3>
      <p><strong>Account No:</strong> ${accountNo}</p>
      <p><strong>Account Holder:</strong> ${customerName}</p>
      <p><strong>Statement Period:</strong> ${periodFrom} to ${periodTo}</p>
      <p><strong>Available Balance:</strong> ₹ ${parseFloat(balance).toLocaleString(
    "en-IN",
    { minimumFractionDigits: 2 }
  )}</p>

      <table style="width:100%;border-collapse:collapse;font-size:12px;margin-top:10px;page-break-inside:auto;">
        <thead style="background:#f0f0f0;">
          <tr>
            <th style="border:1px solid #ccc;padding:6px;text-align:center;">Date</th>
            <th style="border:1px solid #ccc;padding:6px;text-align:left;">Description</th>
            <th style="border:1px solid #ccc;padding:6px;text-align:right;">Amount (₹)</th>
            <th style="border:1px solid #ccc;padding:6px;text-align:right;">Available Amount (₹)</th>
          </tr>
        </thead>
        <tbody>
          ${rows.join("")}
        </tbody>
      </table>
    </div>
  `;

  const opt = {
    margin: [20, 10, 20, 10],
    filename: `AccountStatement_${accountNo}_${dayjs().format("DD/MM/YYYY HH:mm")}.pdf`,
    image: { type: "jpeg", quality: 0.98 },
    html2canvas: { scale: 2 },
    jsPDF: { unit: "mm", format: "a4", orientation: "portrait" },
    pagebreak: { mode: ["avoid-all", "css", "legacy"] },
  };

  html2pdf()
    .set(opt)
    .from(content)
    .toPdf()
    .get("pdf")
    .then((pdf: any) => {
      const totalPages = pdf.internal.getNumberOfPages();
      const pageWidth = pdf.internal.pageSize.getWidth();

      for (let i = 2; i <= totalPages; i++) {
        pdf.setPage(i);
        pdf.setFontSize(10);

        // ✅ Left side Account No
        pdf.setFont("helvetica", "bold");
        // pdf.text(`Account No: ${accountNo}`, 15, 18);

        // ✅ Centered Statement Period
        pdf.text(
          `Statement Period: ${periodFrom} to ${periodTo}`,
          pageWidth / 2,
          18,
          { align: "center" }
        );

        // Footer page numbers
        pdf.setFontSize(9);
        pdf.text(
          `Page ${i} of ${totalPages}`,
          pageWidth - 40,
          pdf.internal.pageSize.getHeight() - 10
        );
      }
    })
    .save();
};
