import { copyright } from "@/app/utils/variables";

export function KycEmailTemplate(form, customerId) {
  const {
   legalName,
    tradeName,
    entityType,
    otherEntityType,
    incorporationDate,
    incorporationCountry,
    regNumber,
    taxId,

    regAddress1,
    regAddress2,
    regCity,
    regState,
    regCountry,
    regPostal,

    billSameAsReg,
    billAddress1,
    billAddress2,
    billCity,
    billState,
    billCountry,
    billPostal,

    primaryName,
    primaryDesignation,
    primaryPhone,
    primaryEmail,

    altName,
    altDesignation,
    altPhone,
    altEmail,

    docTradeLicense,
    docTaxCert,
    docSignatoryId,
    docPOA,

    declarationConfirmed,
  } = form;

  const baseUrl = process.env.NEXT_PUBLIC_FRONTEND_URL;

  const renderLink = (doc) =>
    doc && doc.url
      ? `<a href="${baseUrl}${doc.url}" target="_blank" style="color:#007BFF; text-decoration:underline;">${doc.fileName || "View Document"}</a>`
      : "-";

  const row = (label, value) => `
    <tr>
      <td style="padding:10px; font-weight:bold; background:#f8f9fa; border:1px solid #ddd;">${label}</td>
      <td style="padding:10px; border:1px solid #ddd;">${value || "-"}</td>
    </tr>
  `;

  return `
  <!DOCTYPE html>
  <html>
    <head>
      <meta charset="UTF-8" />
      <title>KYC Submission</title>
    </head>
    <body style="font-family: Arial, sans-serif; background-color: #f5f5f5; padding: 20px;">
      <table width="100%" cellpadding="0" cellspacing="0" style="max-width: 700px; margin: auto; background: #ffffff; border: 1px solid #ccc; border-collapse: collapse;">
        <tr>
          <td colspan="2" style="padding: 16px; background-color: #004085; color: white; font-size: 20px; font-weight: bold; text-align: center;">
            KYC Submission Details
          </td>
        </tr>

        ${row("Customer ID", customerId)} 

        ${row("Legal Name", legalName)}
        ${row("Trade Name", tradeName)}
        ${row("Entity Type", entityType)}
        ${row("Other Entity Type", otherEntityType)}
        ${row("Incorporation Date", incorporationDate)}
        ${row("Incorporation Country", incorporationCountry)}
        ${row("Registration Number", regNumber)}
        ${row("Tax ID", taxId)}

        ${row("Reg. Address 1", regAddress1)}
        ${row("Reg. Address 2", regAddress2)}
        ${row("City", regCity)}
        ${row("State", regState)}
        ${row("Country", regCountry)}
        ${row("Postal Code", regPostal)}

        ${row("Billing Same As Reg", billSameAsReg ? "Yes" : "No")}
        ${row("Billing Address 1", billAddress1)}
        ${row("Billing Address 2", billAddress2)}
        ${row("Billing City", billCity)}
        ${row("Billing State", billState)}
        ${row("Billing Country", billCountry)}
        ${row("Billing Postal", billPostal)}

        ${row("Primary Name", primaryName)}
        ${row("Primary Designation", primaryDesignation)}
        ${row("Primary Phone", primaryPhone)}
        ${row("Primary Email", primaryEmail)}

        ${row("Alt Name", altName)}
        ${row("Alt Designation", altDesignation)}
        ${row("Alt Phone", altPhone)}
        ${row("Alt Email", altEmail)}

        ${row("Trade License", renderLink(docTradeLicense))}
        ${row("Tax Certificate", renderLink(docTaxCert))}
        ${row("Signatory ID", renderLink(docSignatoryId))}
        ${row("Power of Attorney", renderLink(docPOA))}

        ${row("Declaration Confirmed", declarationConfirmed ? "Yes" : "No")}
      </table>
    </body>
  </html>
  `;
}



export function KycEmailTemplateToUser(customerId = "") {
  const logoUrl = `${process.env.NEXT_PUBLIC_FRONTEND_URL}images/logo.png`; // Update this path to your logo

  return `
  <!DOCTYPE html>
  <html>
    <head>
      <meta charset="UTF-8" />
      <title>KYC Submission Confirmation</title>
    </head>
    <body style="font-family: Arial, sans-serif; background-color: #f5f5f5; padding: 20px;">
      <table width="100%" cellpadding="0" cellspacing="0" style="max-width: 600px; margin: auto; background: #ffffff; border: 1px solid #ccc; border-collapse: collapse;">
        
        <!-- Logo -->
        <tr>
          <td style="padding: 20px; text-align: center;">
            <img src="${logoUrl}" alt="Company Logo" style="max-width: 150px;" />
          </td>
        </tr>

        <!-- Header -->
        <tr>
          <td style="padding: 20px; background-color: #004085; color: white; font-size: 22px; font-weight: bold; text-align: center;">
            KYC Submission Received
          </td>
        </tr>

        <!-- Body Message -->
        <tr>
          <td style="padding: 20px; font-size: 16px; color: #333;">
            Thank you for completing your KYC submission.<br /><br />
            We have received your details and your customer ID is 
            <strong style="color: #004085;">${customerId}</strong>.<br /><br />
            One of our team members will review your submission and contact you shortly if anything else is required.
          </td>
        </tr>

        <!-- Footer -->
        <tr>
          <td style="padding: 16px; background-color: #f8f9fa; text-align: center; font-size: 13px; color: #777;">
          ${copyright}
          </td>
        </tr>
      </table>
    </body>
  </html>
  `;
}
