const API_BASE = '/api';

function getOrCreateSessionId() {
  let sessionId = localStorage.getItem('cart_session_id');
  if (!sessionId) {
    sessionId = 'sess_' + Math.random().toString(36).substr(2, 9) + Date.now().toString(36);
    localStorage.setItem('cart_session_id', sessionId);
  }
  return sessionId;
}

function getSelectedRegion() {
  const stored = localStorage.getItem('selectedRegion');
  return stored ? JSON.parse(stored) : null;
}

async function getExchangeRate(fromCurrency, toCurrency) {
  if (fromCurrency === toCurrency) {
    return 1.0;
  }
  
  try {
    const response = await fetch(`${API_BASE}/currency/rate/${fromCurrency}/${toCurrency}`);
    const data = await response.json();
    
    if (data.success && data.rate) {
      return data.rate;
    }
  } catch (err) {
    console.error('Failed to get exchange rate:', err);
  }
  
  return 1.0; // Fallback
}

// Get cart from localStorage
function getCart() {
  try {
    return JSON.parse(localStorage.getItem('cart') || '[]');
  } catch {
    return [];
  }
}

// Store form data between steps
let checkoutData = {
  customerInfo: {},
  shippingInfo: {},
  items: []
};

let currentStep = 1;
let itemsWithCurrentPrices = [];
let currency = 'USD';

// Load saved checkout data from localStorage
function loadCheckoutData() {
  try {
    const saved = localStorage.getItem('checkoutData');
    if (saved) {
      const parsed = JSON.parse(saved);
      checkoutData.customerInfo = parsed.customerInfo || {};
      checkoutData.shippingInfo = parsed.shippingInfo || {};
      if (parsed.currentStep) {
        currentStep = parsed.currentStep;
      }
    }
  } catch (error) {
    console.error('Error loading checkout data:', error);
  }
}

// Save checkout data to localStorage
function saveCheckoutData() {
  try {
    localStorage.setItem('checkoutData', JSON.stringify({
      customerInfo: checkoutData.customerInfo,
      shippingInfo: checkoutData.shippingInfo,
      currentStep: currentStep
    }));
  } catch (error) {
    console.error('Error saving checkout data:', error);
  }
}

// Clear saved checkout data
function clearCheckoutData() {
  localStorage.removeItem('checkoutData');
}

// Step management
function setStep(step) {
  currentStep = step;
  saveCheckoutData();
  updateStepIndicator();
  renderStepContent();
}

function updateStepIndicator() {
  document.querySelectorAll('.step').forEach((stepEl, index) => {
    const stepNum = index + 1;
    stepEl.classList.remove('active', 'completed');
    if (stepNum < currentStep) {
      stepEl.classList.add('completed');
      stepEl.querySelector('.step-number').textContent = '✓';
    } else if (stepNum === currentStep) {
      stepEl.classList.add('active');
      stepEl.querySelector('.step-number').textContent = stepNum;
    } else {
      stepEl.querySelector('.step-number').textContent = stepNum;
    }
  });
}

async function renderCheckout() {
  const items = getCart();

  if (items.length === 0) {
    document.getElementById('checkoutContent').innerHTML = `
      <div style="text-align: center; padding: 4rem 2rem;">
        <h3>Your cart is empty</h3>
        <p style="color: #666; margin: 1rem 0;">Add some products to checkout!</p>
        <a href="/" class="btn">Continue Shopping</a>
      </div>
    `;
    return;
  }

  // Get user's selected region for currency
  const selectedRegion = getSelectedRegion();
  const targetCurrency = selectedRegion ? selectedRegion.currency : 'USD';
  currency = targetCurrency;
  
  // Get exchange rate once for all products
  const exchangeRate = await getExchangeRate('USD', targetCurrency);

  // Fetch current prices from API
  let subtotal = 0;
  itemsWithCurrentPrices = [];

  for (const item of items) {
    try {
      const headers = {};
      if (selectedRegion) {
        headers['X-User-Region'] = selectedRegion.code;
      }
      
      const response = await fetch(`${API_BASE}/products/${item.productId}`, { headers });
      const data = await response.json();

      if (data.success) {
        const product = data.product;
        
        // Convert price to target currency
        const currentPriceUSD = product.price; // In cents
        const currentPrice = Math.round(currentPriceUSD * exchangeRate); // Converted
        const itemTotal = currentPrice * item.quantity;
        subtotal += itemTotal;

        itemsWithCurrentPrices.push({
          ...item,
          currentPrice,
          productName: product.name,
          currency: targetCurrency,
          taxIncluded: product.taxIncluded || false
        });
      }
    } catch (error) {
      console.error('Error loading product:', error);
    }
  }

  checkoutData.items = itemsWithCurrentPrices;
  loadCheckoutData(); // Load saved form data
  renderOrderSummary();
  setStep(currentStep);
}

function renderOrderSummary() {
  const summaryContent = document.getElementById('summaryContent');
  const items = checkoutData.items;

  if (items.length === 0) {
    summaryContent.innerHTML = '<div class="loading">Loading...</div>';
    return;
  }

  const subtotal = items.reduce((sum, item) => sum + (item.currentPrice * item.quantity), 0);
  const shipping = checkoutData.shippingInfo?.cost || 0;
  const tax = checkoutData.shippingInfo?.tax || 0;
  const adjustedSubtotal = checkoutData.shippingInfo?.adjustedSubtotal || subtotal;
  const total = adjustedSubtotal + shipping + (checkoutData.shippingInfo?.country ? tax : 0);

  summaryContent.innerHTML = `
    <div style="margin-bottom: 1.5rem;">
      ${items.map(item => `
        <div class="summary-item product">
          <span class="product-name">${escapeHtml(item.productName)} x${item.quantity}</span>
          <span>${item.currency} ${((item.currentPrice * item.quantity) / 100).toFixed(2)}</span>
        </div>
      `).join('')}
    </div>
    <div style="border-top: 1px solid var(--border-color); padding-top: 1rem;">
      <div class="summary-item">
        <span>Subtotal:</span>
        <span id="summary-subtotal">${currency} ${(subtotal / 100).toFixed(2)}</span>
      </div>
      <div class="summary-item">
        <span>Shipping:</span>
        <span id="summary-shipping">${currency} ${(shipping / 100).toFixed(2)}</span>
      </div>
      <div id="summary-tax-row" class="summary-item">
        <span>Tax <small id="summary-tax-rate" style="color: #666;"></small>:</span>
        <span id="summary-tax">${checkoutData.shippingInfo?.country ? `${currency} ${(tax / 100).toFixed(2)}` : 'Uncalculated'}</span>
      </div>
      <div class="summary-item summary-total">
        <span>Total:</span>
        <span id="summary-total">${currency} ${(total / 100).toFixed(2)}</span>
      </div>
    </div>
  `;
}

function renderStepContent() {
  const content = document.getElementById('checkoutContent');

  if (currentStep === 1) {
    renderStep1(content);
  } else if (currentStep === 2) {
    renderStep2(content);
  } else if (currentStep === 3) {
    renderStep3(content);
  }
}

function renderStep1(container) {
  const data = checkoutData.customerInfo;

  container.innerHTML = `
    <div class="step-content active">
      <h3 style="margin-bottom: 1.5rem;">Customer Information</h3>
      <form id="step1Form" onsubmit="handleStep1(event)">
        <div class="form-group">
          <label>Email *</label>
          <input type="email" name="email" required placeholder="customer@example.com" value="${data.email || ''}">
        </div>
        <div class="form-row">
          <div class="form-group">
            <label>First Name *</label>
            <input type="text" name="firstName" required value="${data.firstName || ''}">
          </div>
          <div class="form-group">
            <label>Last Name *</label>
            <input type="text" name="lastName" required value="${data.lastName || ''}">
          </div>
        </div>
        <div class="form-group">
          <label>Phone</label>
          <input type="tel" name="phone" placeholder="+1234567890" value="${data.phone || ''}">
        </div>
        <div class="step-actions">
          <div></div>
          <button type="submit" class="btn btn-success">Continue to Shipping</button>
        </div>
      </form>
    </div>
  `;
}

async function renderStep2(container) {
  const data = checkoutData.shippingInfo;

  // Fetch countries
  let countries = [{ code: 'US', name: 'United States' }];
  try {
    const countriesResponse = await fetch(`${API_BASE}/countries`);
    const countriesData = await countriesResponse.json();
    if (countriesData.success) {
      countries = countriesData.countries;
    }
  } catch (error) {
    console.error('Error fetching countries:', error);
  }

  const countriesOptions = countries.map(c =>
    `<option value="${c.code}" ${(data.country === c.code) ? 'selected' : (c.code === 'US' && !data.country) ? 'selected' : ''}>${escapeHtml(c.name)}</option>`
  ).join('');

  container.innerHTML = `
    <div class="step-content active">
      <h3 style="margin-bottom: 1.5rem;">Shipping Address</h3>
      <form id="step2Form" onsubmit="handleStep2(event)">
        <div class="form-group">
          <label>Street Address *</label>
          <input type="text" name="address" required value="${data.address || ''}">
        </div>
        <div class="form-row">
          <div class="form-group">
            <label>City *</label>
            <input type="text" name="city" required value="${data.city || ''}">
          </div>
          <div class="form-group">
            <label>State/Province *</label>
            <input type="text" name="state" id="stateInput" required value="${data.state || ''}" onchange="handleStateChange()" oninput="handleStateChange()">
          </div>
        </div>
        <div class="form-row">
          <div class="form-group">
            <label>ZIP/Postal Code *</label>
            <input type="text" name="zip" required value="${data.zip || ''}">
          </div>
          <div class="form-group">
            <label>Country *</label>
            <select name="country" id="countryInput" required onchange="handleCountryChange()">
              ${countriesOptions}
            </select>
          </div>
        </div>

        <div class="form-section" style="margin-top: 2rem;">
          <h3>Shipping Method</h3>
          <div class="form-group">
            <label>Shipping Method</label>
            <select name="shippingMethod" id="shippingMethod" onchange="updateShipping()">
              <option value="standard" data-cost="0" ${data.shippingMethod === 'standard' ? 'selected' : ''}>Standard (Free)</option>
              <option value="express" data-cost="10" ${data.shippingMethod === 'express' ? 'selected' : ''}>Express ($10.00)</option>
              <option value="overnight" data-cost="25" ${data.shippingMethod === 'overnight' ? 'selected' : ''}>Overnight ($25.00)</option>
            </select>
          </div>
        </div>

        <div class="step-actions" style="gap: 1rem;display: grid;">
          <button type="submit" class="btn btn-success">Continue to Review</button>
          <button type="button" class="btn" onclick="setStep(1)">Back</button>
        </div>
      </form>
    </div>
  `;

  // Update tax if country is already selected
  if (data.country) {
    setTimeout(() => updateTaxFromAddress(), 100);
  } else {
    // Update summary to show "Uncalculated" for tax
    updateOrderSummary();
  }
}

function renderStep3(container) {
  const customer = checkoutData.customerInfo;
  const shipping = checkoutData.shippingInfo;
  const items = checkoutData.items;

  const subtotal = items.reduce((sum, item) => sum + (item.currentPrice * item.quantity), 0);
  const shippingCost = shipping.cost || 0;
  const tax = shipping.tax || 0;
  const total = (shipping.adjustedSubtotal || subtotal) + shippingCost + tax;

  container.innerHTML = `
    <div class="step-content active">
      <h3 style="margin-bottom: 1.5rem;">Review Your Order</h3>
      
      <div class="form-section">
        <h4 style="margin-bottom: 1rem;">Customer Information</h4>
        <div style="background: var(--bg-color); padding: 1rem; border-radius: 8px;">
          <p><strong>Name:</strong> ${escapeHtml(customer.firstName || '')} ${escapeHtml(customer.lastName || '')}</p>
          <p><strong>Email:</strong> ${escapeHtml(customer.email || '')}</p>
          ${customer.phone ? `<p><strong>Phone:</strong> ${escapeHtml(customer.phone)}</p>` : ''}
        </div>
      </div>

      <div class="form-section">
        <h4 style="margin-bottom: 1rem;">Shipping Address</h4>
        <div style="background: var(--bg-color); padding: 1rem; border-radius: 8px;">
          <p>${escapeHtml(shipping.address || '')}</p>
          <p>${escapeHtml(shipping.city || '')}, ${escapeHtml(shipping.state || '')} ${escapeHtml(shipping.zip || '')}</p>
          <p>${escapeHtml(shipping.country || '')}</p>
        </div>
      </div>

      <div class="form-section">
        <h4 style="margin-bottom: 1rem;">Shipping Method</h4>
        <div style="background: var(--bg-color); padding: 1rem; border-radius: 8px;">
          <p>${shipping.shippingMethod === 'express' ? 'Express' : shipping.shippingMethod === '	overnight' ? 'Overnight' : 'Standard'} Shipping</p>
          <p style="color: #666; font-size: 0.9rem;">${currency} ${(shippingCost / 100).toFixed(2)}</p>
        </div>
      </div>

      <div class="form-section">
        <h4 style="margin-bottom: 1rem;">Order Summary</h4>
        <div style="background: var(--bg-color); padding: 1.5rem; border-radius: 8px;">
          ${items.map(item => `
            <div style="display: flex; justify-content: space-between; margin-bottom: 0.75rem;">
              <span>${escapeHtml(item.productName)} x${item.quantity}</span>
              <span>${item.currency} ${((item.currentPrice * item.quantity) / 100).toFixed(2)}</span>
            </div>
          `).join('')}
          
          <div style="border-top: 1px solid var(--border-color); margin-top: 1rem; padding-top: 1rem;">
            <div style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;">
              <span style="color: #666;">Subtotal</span>
              <span>${currency} ${((shipping.adjustedSubtotal || subtotal) / 100).toFixed(2)}</span>
            </div>
            <div style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;">
              <span style="color: #666;">Shipping</span>
              <span>${currency} ${(shippingCost / 100).toFixed(2)}</span>
            </div>
            <div style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;">
              <span style="color: #666;">Tax</span>
              <span>${currency} ${(tax / 100).toFixed(2)}</span>
            </div>
            <div style="display: flex; justify-content: space-between; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border-color); font-weight: 700; font-size: 1.1rem;">
              <span>Total</span>
              <span>${currency} ${(total / 100).toFixed(2)}</span>
            </div>
          </div>
        </div>
      </div>

      <div class="step-actions" style="gap: 1rem;display: grid;">
        <button type="button" class="btn btn-success" onclick="handleStep3()">Continue to Payment</button>
        <button type="button" class="btn" onclick="setStep(2)">Back</button>
      </div>
    </div>
  `;
}

function handleStep1(event) {
  event.preventDefault();
  const form = event.target;
  const formData = new FormData(form);

  checkoutData.customerInfo = {
    email: formData.get('email'),
    firstName: formData.get('firstName'),
    lastName: formData.get('lastName'),
    phone: formData.get('phone') || ''
  };

  saveCheckoutData();
  setStep(2);
}

async function handleStep2(event) {
  event.preventDefault();
  const form = event.target;
  const formData = new FormData(form);

  const shippingMethod = formData.get('shippingMethod');
  const shippingCost = Math.round(parseFloat(document.getElementById('shippingMethod').options[document.getElementById('shippingMethod').selectedIndex].dataset.cost) * 100) || 0;

  checkoutData.shippingInfo = {
    name: `${checkoutData.customerInfo.firstName} ${checkoutData.customerInfo.lastName}`,
    address: formData.get('address'),
    city: formData.get('city'),
    state: formData.get('state'),
    zip: formData.get('zip'),
    country: formData.get('country'),
    shippingMethod,
    cost: shippingCost
  };

  saveCheckoutData();

  // Calculate tax if country is selected (AWAIT the async function!)
  if (checkoutData.shippingInfo.country) {
    await updateTaxFromAddress();
  }

  setStep(3);
}

async function handleStep3() {
  const submitBtn = event.target;
  submitBtn.disabled = true;
  submitBtn.textContent = 'Creating...';

  try {
    // Prepare cart items
    const cartItems = checkoutData.items.map(item => ({
      productId: item.productId,
      quantity: item.quantity
    }));

    const requestData = {
      items: cartItems,
      customerInfo: checkoutData.customerInfo,
      shippingInfo: {
        ...checkoutData.shippingInfo,
        taxRate: checkoutData.shippingInfo.taxRate || 0
      }
    };

    const response = await fetchWithCsrf(`${API_BASE}/payment-links/create`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'x-session-id': getOrCreateSessionId()
      },
      body: JSON.stringify(requestData)
    });

    const data = await response.json();

    if (!data.success) {
      throw new Error(data.error || 'Failed to create payment link');
    }

    // Clear cart and checkout data, then redirect to payment page
    localStorage.removeItem('cart');
    clearCheckoutData();
    showNotification('Payment link created successfully!', 'success', 2000);
    setTimeout(() => {
      window.location.href = data.paymentLink.url;
    }, 2000);
  } catch (err) {
    showNotification(`Error: ${err.message}`, 'error');
    submitBtn.disabled = false;
    submitBtn.textContent = 'Create Payment Link';
  }
}

async function updateShipping() {
  const select = document.getElementById('shippingMethod');
  const option = select.options[select.selectedIndex];
  const shippingCost = Math.round(parseFloat(option.dataset.cost) * 100) || 0;

  checkoutData.shippingInfo.cost = shippingCost;
  await updateTaxFromAddress();
}

async function updateTaxFromAddress() {
  const countryInput = document.getElementById('countryInput');
  const stateInput = document.getElementById('stateInput');
  const country = countryInput?.value?.trim() || checkoutData.shippingInfo?.country || '';
  const state = stateInput?.value?.trim() || checkoutData.shippingInfo?.state || '';

  // Always update summary, even if no country (to show "Uncalculated")
  if (!country) {
    checkoutData.shippingInfo.tax = 0;
    checkoutData.shippingInfo.taxRate = 0;
    checkoutData.shippingInfo.adjustedSubtotal = checkoutData.items.reduce((sum, item) => sum + (item.currentPrice * item.quantity), 0);
    saveCheckoutData();
    updateOrderSummary();
    return;
  }

  const items = checkoutData.items;
  let currency = 'USD';

  // Fetch tax rate
  let taxRate = 0.08;
  try {
    const taxParams = new URLSearchParams();
    if (country) taxParams.append('country', country);
    if (state) taxParams.append('state', state);

    const taxResponse = await fetch(`${API_BASE}/tax/rate?${taxParams.toString()}`);
    const taxData = await taxResponse.json();
    if (taxData.success) {
      taxRate = taxData.taxRate;
    }
  } catch (error) {
    console.error('Error fetching tax rate:', error);
  }

  // Calculate tax based on tax-included/excluded products
  let tax = 0;
  let adjustedSubtotal = 0;

  for (const item of items) {
    if (item.taxIncluded) {
      const itemBasePrice = Math.round((item.currentPrice * item.quantity) / (1 + taxRate));
      const itemTax = (item.currentPrice * item.quantity) - itemBasePrice;
      tax += itemTax;
      adjustedSubtotal += itemBasePrice;
    } else {
      const itemTax = Math.round((item.currentPrice * item.quantity) * taxRate);
      tax += itemTax;
      adjustedSubtotal += (item.currentPrice * item.quantity);
    }
  }

  const shippingCost = checkoutData.shippingInfo?.cost || 0;
  const total = adjustedSubtotal + shippingCost + tax;

  // Update checkout data
  checkoutData.shippingInfo.taxRate = taxRate;
  checkoutData.shippingInfo.tax = tax;
  checkoutData.shippingInfo.adjustedSubtotal = adjustedSubtotal;
  checkoutData.shippingInfo.total = total;

  saveCheckoutData();
  updateOrderSummary();
}

function updateOrderSummary() {
  const items = checkoutData.items;
  const subtotal = items.reduce((sum, item) => sum + (item.currentPrice * item.quantity), 0);
  const shipping = checkoutData.shippingInfo?.cost || 0;
  const tax = checkoutData.shippingInfo?.tax || 0;
  const taxRate = checkoutData.shippingInfo?.taxRate || 0;
  const adjustedSubtotal = checkoutData.shippingInfo?.adjustedSubtotal || subtotal;
  // Calculate total - include tax only if country is known
  const total = adjustedSubtotal + shipping + (checkoutData.shippingInfo?.country ? tax : 0);

  const summarySubtotal = document.getElementById('summary-subtotal');
  const summaryShipping = document.getElementById('summary-shipping');
  const summaryTaxRow = document.getElementById('summary-tax-row');
  const summaryTax = document.getElementById('summary-tax');
  const summaryTaxRate = document.getElementById('summary-tax-rate');
  const summaryTotal = document.getElementById('summary-total');

  if (summarySubtotal) summarySubtotal.textContent = `${currency} ${(adjustedSubtotal / 100).toFixed(2)}`;
  if (summaryShipping) summaryShipping.textContent = `${currency} ${(shipping / 100).toFixed(2)}`;

  // Always show tax - show "Uncalculated" if country not selected
  if (summaryTaxRow && summaryTax && summaryTaxRate) {
    if (checkoutData.shippingInfo?.country) {
      summaryTax.textContent = `${currency} ${(tax / 100).toFixed(2)}`;
      summaryTaxRate.textContent = `(${(taxRate * 100).toFixed(2)}%)`;
    } else {
      summaryTax.textContent = 'Uncalculated';
      summaryTaxRate.textContent = '';
    }
    summaryTaxRow.style.display = 'flex';
  }

  // Calculate total - include tax only if country is known
  const finalTotal = adjustedSubtotal + shipping + (checkoutData.shippingInfo?.country ? tax : 0);
  if (summaryTotal) summaryTotal.textContent = `${currency} ${(finalTotal / 100).toFixed(2)}`;
}

function escapeHtml(text) {
  const div = document.createElement('div');
  div.textContent = text;
  return div.innerHTML;
}

// Initialize
document.addEventListener('DOMContentLoaded', () => {
  renderCheckout();
});

// Handle country change - update shipping info and recalculate tax
async function handleCountryChange() {
  const countryInput = document.getElementById('countryInput');
  const country = countryInput?.value?.trim() || '';

  // Update checkout data with new country
  if (checkoutData.shippingInfo) {
    checkoutData.shippingInfo.country = country;
    saveCheckoutData();
  }

  // Recalculate tax immediately
  await updateTaxFromAddress();
}

// Handle state change - update shipping info and recalculate tax
async function handleStateChange() {
  const stateInput = document.getElementById('stateInput');
  const state = stateInput?.value?.trim() || '';

  // Update checkout data with new state
  if (checkoutData.shippingInfo) {
    checkoutData.shippingInfo.state = state;
    saveCheckoutData();
  }

  // Recalculate tax immediately
  await updateTaxFromAddress();
}

// Make functions global
window.setStep = setStep;
window.handleStep1 = handleStep1;
window.handleStep2 = handleStep2;
window.handleStep3 = handleStep3;
window.updateShipping = updateShipping;
window.updateTaxFromAddress = updateTaxFromAddress;
window.updateOrderSummary = updateOrderSummary;
window.handleCountryChange = handleCountryChange;
window.handleStateChange = handleStateChange;