---
import Layout from '../../layouts/Layout.astro';
import Navigation from '../../components/Navigation.astro';
---

<Layout title="Ticket Fee Calculator - Black Canyon Tickets">
  <div class="min-h-screen bg-gradient-to-br from-indigo-900 via-purple-900 to-slate-900">
    <!-- Animated background elements -->
    <div class="fixed inset-0 overflow-hidden pointer-events-none">
      <div class="absolute -top-40 -right-40 w-80 h-80 bg-gradient-to-br from-purple-600/20 to-pink-600/20 rounded-full blur-3xl animate-pulse"></div>
      <div class="absolute -bottom-40 -left-40 w-80 h-80 bg-gradient-to-br from-blue-600/20 to-cyan-600/20 rounded-full blur-3xl animate-pulse"></div>
      <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-gradient-to-br from-indigo-600/10 to-purple-600/10 rounded-full blur-3xl animate-pulse"></div>
    </div>
    <Navigation 
      title="Ticket Fee Calculator" 
      showBackLink={true} 
      backLinkUrl="/dashboard" 
      backLinkText="← Dashboard" 
    />

    <main class="max-w-4xl mx-auto py-8 sm:px-6 lg:px-8">
      <div class="px-4 sm:px-0">
        <!-- Header -->
        <div class="mb-8">
          <h1 class="text-3xl font-bold text-white mb-3 bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">Ticket Fee Calculator</h1>
          <p class="text-white/80">Calculate ticketing fees and payouts for your events with transparent fee breakdowns</p>
        </div>

        <!-- Fee Structure Info -->
        <div class="bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl p-6 mb-8">
          <div class="flex items-start justify-between">
            <div>
              <h3 class="text-lg font-semibold text-white mb-2 flex items-center">
                <svg class="w-5 h-5 text-purple-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                BCT Platform Fee Structure
              </h3>
              <div class="text-2xl font-bold text-purple-300 mb-2">$1.50 + 2.5% per ticket</div>
              <div class="text-lg text-indigo-300 mb-2">Stripe Processing Fee: 2.9% + $0.30</div>
              <p class="text-sm text-white/70">Choose how these fees are handled for your events</p>
            </div>
            <div class="bg-purple-500/20 rounded-xl p-3">
              <svg class="w-6 h-6 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1"></path>
              </svg>
            </div>
          </div>
        </div>

        <!-- Calculator Form -->
        <div class="bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl p-6 mb-8">
          <form id="fee-calculator-form" class="space-y-6">
            <!-- Step 1: Enter ticket price -->
            <div>
              <label for="ticket-price" class="block text-lg font-medium text-white/90 mb-3">
                Enter the base ticket price:
              </label>
              <div class="relative max-w-xs">
                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                  <span class="text-white/60 text-lg">$</span>
                </div>
                <input
                  type="number"
                  id="ticket-price"
                  min="0"
                  step="0.01"
                  placeholder="20.00"
                  class="block w-full pl-8 pr-3 py-3 bg-white/10 border border-white/30 rounded-lg shadow-sm focus:ring-2 focus:ring-purple-400 focus:border-purple-400 text-lg text-white placeholder-white/50 backdrop-blur-sm"
                />
              </div>
            </div>

            <!-- Step 2: Fee handling option -->
            <div>
              <label class="block text-lg font-medium text-white/90 mb-3">
                Who will pay the fees?
              </label>
              <div class="space-y-4">
                <label class="flex items-start cursor-pointer p-4 bg-white/5 backdrop-blur-sm rounded-lg border border-white/10 hover:bg-white/10 transition-colors">
                  <input type="radio" name="fee_option" value="organizer_absorbs" class="mt-1 mr-3 text-purple-600 focus:ring-purple-500" />
                  <div class="flex-1">
                    <span class="font-medium text-white text-lg">1. The organizer will absorb the fees</span>
                    <p class="text-sm text-white/70 mt-1">(fees deducted from payout)</p>
                  </div>
                </label>
                
                <label class="flex items-start cursor-pointer p-4 bg-white/5 backdrop-blur-sm rounded-lg border border-white/10 hover:bg-white/10 transition-colors">
                  <input type="radio" name="fee_option" value="customer_pays" class="mt-1 mr-3 text-purple-600 focus:ring-purple-500" />
                  <div class="flex-1">
                    <span class="font-medium text-white text-lg">2. The customer will pay the fees</span>
                    <p class="text-sm text-white/70 mt-1">(fees added on top of ticket price)</p>
                  </div>
                </label>
              </div>
            </div>

            <div class="flex justify-center">
              <button
                type="submit"
                class="bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 text-white py-3 px-8 rounded-xl text-lg font-medium transition-all duration-200 shadow-lg hover:shadow-xl hover:scale-105"
              >
                Calculate Fees
              </button>
            </div>
          </form>
        </div>

        <!-- Results Display -->
        <div id="results-display" class="bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl p-6 hidden">
          <h3 class="text-2xl font-semibold text-white mb-6 text-center">Fee Breakdown</h3>
          <div id="results-content" class="space-y-4">
            <!-- Results will be populated here -->
          </div>
        </div>

        <!-- Error message -->
        <div id="error-message" class="mt-4 text-sm text-red-400 bg-red-500/20 border border-red-400/30 rounded-lg p-3 hidden"></div>
      </div>
    </main>
  </div>
</Layout>

<script>
  // Fee calculation logic
  const BCT_FEE_PERCENTAGE = 0.025; // 2.5%
  const BCT_FEE_FIXED = 1.50;
  const STRIPE_FEE_PERCENTAGE = 0.029; // 2.9%
  const STRIPE_FEE_FIXED = 0.30;

  // Calculate fees for organizer absorbs scenario
  function calculateOrganizerAbsorbs(ticketPrice) {
    const bctFee = (ticketPrice * BCT_FEE_PERCENTAGE) + BCT_FEE_FIXED;
    const stripeFee = (ticketPrice * STRIPE_FEE_PERCENTAGE) + STRIPE_FEE_FIXED;
    const netPayout = ticketPrice - bctFee - stripeFee;
    
    return {
      totalTicketPrice: ticketPrice,
      bctFee: bctFee,
      stripeFee: stripeFee,
      netPayout: netPayout
    };
  }

  // Calculate fees for customer pays scenario
  function calculateCustomerPays(ticketPrice) {
    const bctFee = (ticketPrice * BCT_FEE_PERCENTAGE) + BCT_FEE_FIXED;
    const subtotal = ticketPrice + bctFee;
    const stripeFee = (subtotal * STRIPE_FEE_PERCENTAGE) + STRIPE_FEE_FIXED;
    const totalTicketPrice = subtotal + stripeFee;
    const netPayout = ticketPrice;
    
    return {
      totalTicketPrice: totalTicketPrice,
      bctFee: bctFee,
      stripeFee: stripeFee,
      netPayout: netPayout
    };
  }

  // Display calculation results
  function displayResults(results, scenario) {
    const resultsDisplay = document.getElementById('results-display');
    const resultsContent = document.getElementById('results-content');
    
    if (!resultsDisplay || !resultsContent) return;
    
    let html = '';
    
    if (scenario === 'organizer_absorbs') {
      html = `
        <div class="bg-white/5 backdrop-blur-sm rounded-lg p-6 border border-white/10">
          <h4 class="text-lg font-semibold text-white mb-4 text-center">Organizer Absorbs Fees</h4>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="space-y-3">
              <div class="flex justify-between text-white/90 py-2">
                <span class="text-lg">Total Ticket Price:</span>
                <span class="text-lg font-bold text-blue-400">$${results.totalTicketPrice.toFixed(2)}</span>
              </div>
              <div class="flex justify-between text-white/90 py-2">
                <span>BCT Fee:</span>
                <span class="font-medium text-red-400">$${results.bctFee.toFixed(2)}</span>
              </div>
              <div class="flex justify-between text-white/90 py-2">
                <span>Stripe Fee:</span>
                <span class="font-medium text-orange-400">$${results.stripeFee.toFixed(2)}</span>
              </div>
              <div class="border-t border-white/20 pt-2">
                <div class="flex justify-between text-white py-2">
                  <span class="text-lg font-semibold">Net Payout to Organizer:</span>
                  <span class="text-lg font-bold text-green-400">$${results.netPayout.toFixed(2)}</span>
                </div>
              </div>
            </div>
            <div class="bg-white/5 backdrop-blur-sm rounded-lg p-4 border border-white/10">
              <h5 class="text-sm font-medium text-white/90 mb-2">What this means:</h5>
              <ul class="text-sm text-white/70 space-y-1">
                <li>• Customer pays the ticket price only</li>
                <li>• Fees are deducted from your payout</li>
                <li>• Simple checkout experience</li>
                <li>• You receive less per ticket</li>
              </ul>
            </div>
          </div>
        </div>
      `;
    } else {
      html = `
        <div class="bg-white/5 backdrop-blur-sm rounded-lg p-6 border border-white/10">
          <h4 class="text-lg font-semibold text-white mb-4 text-center">Customer Pays Fees</h4>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="space-y-3">
              <div class="flex justify-between text-white/90 py-2">
                <span class="text-lg">Total Ticket Price:</span>
                <span class="text-lg font-bold text-blue-400">$${results.totalTicketPrice.toFixed(2)}</span>
              </div>
              <div class="flex justify-between text-white/90 py-2">
                <span>BCT Fee:</span>
                <span class="font-medium text-red-400">$${results.bctFee.toFixed(2)}</span>
              </div>
              <div class="flex justify-between text-white/90 py-2">
                <span>Stripe Fee:</span>
                <span class="font-medium text-orange-400">$${results.stripeFee.toFixed(2)}</span>
              </div>
              <div class="border-t border-white/20 pt-2">
                <div class="flex justify-between text-white py-2">
                  <span class="text-lg font-semibold">Net Payout to Organizer:</span>
                  <span class="text-lg font-bold text-green-400">$${results.netPayout.toFixed(2)}</span>
                </div>
              </div>
            </div>
            <div class="bg-white/5 backdrop-blur-sm rounded-lg p-4 border border-white/10">
              <h5 class="text-sm font-medium text-white/90 mb-2">What this means:</h5>
              <ul class="text-sm text-white/70 space-y-1">
                <li>• Customer pays ticket price + fees</li>
                <li>• Fees are shown separately at checkout</li>
                <li>• You receive the full ticket price</li>
                <li>• Higher total cost for customer</li>
              </ul>
            </div>
          </div>
        </div>
      `;
    }
    
    resultsContent.innerHTML = html;
    resultsDisplay.classList.remove('hidden');
  }

  // Show error message
  function showError(message) {
    const errorMessage = document.getElementById('error-message');
    if (errorMessage) {
      errorMessage.textContent = message;
      errorMessage.classList.remove('hidden');
    }
  }

  // Hide error message
  function hideError() {
    const errorMessage = document.getElementById('error-message');
    if (errorMessage) {
      errorMessage.classList.add('hidden');
    }
  }

  // Form submission handler
  document.getElementById('fee-calculator-form')?.addEventListener('submit', (e) => {
    e.preventDefault();
    hideError();
    
    const ticketPriceInput = document.getElementById('ticket-price') as HTMLInputElement;
    const feeOptionInput = document.querySelector('input[name="fee_option"]:checked') as HTMLInputElement;
    
    if (!ticketPriceInput || !feeOptionInput) {
      showError('Please fill in all required fields');
      return;
    }
    
    const ticketPrice = parseFloat(ticketPriceInput.value);
    const feeOption = feeOptionInput.value;
    
    if (isNaN(ticketPrice) || ticketPrice <= 0) {
      showError('Please enter a valid ticket price');
      return;
    }
    
    if (ticketPrice > 10000) {
      showError('Ticket price cannot exceed $10,000');
      return;
    }
    
    // Calculate fees based on selected option
    let results;
    if (feeOption === 'organizer_absorbs') {
      results = calculateOrganizerAbsorbs(ticketPrice);
    } else {
      results = calculateCustomerPays(ticketPrice);
    }
    
    // Display results
    displayResults(results, feeOption);
    
    // Scroll to results
    document.getElementById('results-display')?.scrollIntoView({ behavior: 'smooth' });
  });

  // Clear results when inputs change
  document.getElementById('ticket-price')?.addEventListener('input', () => {
    const resultsDisplay = document.getElementById('results-display');
    if (resultsDisplay) {
      resultsDisplay.classList.add('hidden');
    }
    hideError();
  });

  document.addEventListener('change', (e) => {
    if (e.target && (e.target as HTMLInputElement).name === 'fee_option') {
      const resultsDisplay = document.getElementById('results-display');
      if (resultsDisplay) {
        resultsDisplay.classList.add('hidden');
      }
      hideError();
    }
  });
</script>