// --- Create Affiliate Modal ---
function createAffiliateModal() {
  const modal = document.createElement("div");
  modal.id = "affiliateBuilder";
  Object.assign(modal.style, {
    position: "fixed",
    top: "0",
    left: "0",
    width: "100%",
    height: "100%",
    backgroundColor: "rgba(0,0,0,0.6)",
    display: "none",
    justifyContent: "center",
    alignItems: "center",
    zIndex: "1000"
  });

  modal.innerHTML = `
    <div style="background: #fff; padding: 40px 30px; border-radius: 16px; max-width: 500px; width: 90%; position: relative; font-family: 'Arial', sans-serif; box-shadow: 0 10px 25px rgba(0,0,0,0.2);">
      <span id="closeAffiliateModal" style="position: absolute; top: 15px; right: 20px; cursor: pointer; font-weight: bold; font-size: 24px; color: #555;">&times;</span>
      <h2 style="margin-bottom: 15px; font-size: 24px; color: #333;">Affiliate Builder</h2>
      
      <div style="margin-bottom: 15px;">
        <label style="display:block; margin-bottom:5px; color:#555;">Your affiliate code provided by us:</label>
        <input type="text" id="affiliateCode" placeholder="Enter code" style="width:100%; padding:12px 15px; border:1px solid #ccc; border-radius:8px;">
      </div>
      <div style="margin-bottom: 15px;">
        <label style="display:block; margin-bottom:5px; color:#555;">For your reference your campaign name:</label>
        <input type="text" id="affiliateCampaign" placeholder="Enter campaign" style="width:100%; padding:12px 15px; border:1px solid #ccc; border-radius:8px;">
      </div>

      <div style="display:flex; gap:10px; align-items:center; margin-bottom: 15px;">
        <input type="text" id="affiliateLink" readonly style="flex:1; padding:12px 15px; border:1px solid #ccc; border-radius:8px; background:#f9f9f9;">
        <button id="copyAffiliateLink" style="padding:12px 20px; background:#007BFF; color:#fff; border:none; border-radius:8px; cursor:pointer;">Copy</button>
      </div>
    </div>
  `;

  document.body.appendChild(modal);

  // Close modal
  document.getElementById("closeAffiliateModal").onclick = () => modal.style.display = "none";
  modal.onclick = e => { if (e.target === modal) modal.style.display = "none"; };

  // Build link when inputs change
  const codeInput = document.getElementById("affiliateCode");
  const campaignInput = document.getElementById("affiliateCampaign");
  const linkInput = document.getElementById("affiliateLink");
  [codeInput, campaignInput].forEach(input => {
    input.addEventListener("input", () => {
      const code = codeInput.value.trim() || "affiliate";
      const campaign = campaignInput.value.trim() || "default";
      linkInput.value = `https://ODOO4projects.com?utm_source=${encodeURIComponent(code)}&utm_campaign=${encodeURIComponent(campaign)}`;
    });
  });

  // Copy to clipboard
  document.getElementById("copyAffiliateLink").addEventListener("click", () => {
    linkInput.select();
    document.execCommand("copy");
    alert("Affiliate link copied!");
  });

  return modal;
}

// --- Open Affiliate Modal ---
function openAffiliateModal() {
  const modal = document.getElementById("affiliateBuilder");
  modal.style.display = "flex";
  // Reset fields
  document.getElementById("affiliateCode").value = "";
  document.getElementById("affiliateCampaign").value = "";
  document.getElementById("affiliateLink").value = "";
}

// --- Attach Affiliate Builder Buttons ---
function attachAffiliateButtons() {
  const buttons = Array.from(document.querySelectorAll("button, a"));
  buttons.forEach(btn => {
    const text = btn.textContent.trim();
    if (text === "Start Selling") {
      btn.addEventListener("click", (e) => {
        e.preventDefault();
        openAffiliateModal();
      });
    }
  });
}

// --- Initialize Affiliate Builder ---
document.addEventListener("DOMContentLoaded", () => {
  createAffiliateModal();
  attachAffiliateButtons();
});