---
import SecureLayout from '../../../layouts/SecureLayout.astro';
---

<SecureLayout title="Lead Management - Black Canyon Tickets">
  <div class="container mx-auto px-4 py-12">
    <div class="flex justify-between items-center mb-8">
      <div>
        <h1 class="text-3xl font-bold text-white mb-2">Lead Management</h1>
        <p class="text-blue-100">Track and manage your event leads</p>
      </div>
      <a href="/territory-manager/leads/new" class="bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white px-6 py-3 rounded-lg font-semibold transition-all duration-300">
        + New Lead
      </a>
    </div>

    <!-- Lead Stats -->
    <div class="grid md:grid-cols-4 gap-6 mb-8">
      <div class="bg-white/10 backdrop-blur-sm rounded-lg p-6 border border-white/20">
        <div class="text-2xl font-bold text-white mb-1" id="total-leads">0</div>
        <div class="text-blue-100">Total Leads</div>
      </div>
      <div class="bg-white/10 backdrop-blur-sm rounded-lg p-6 border border-white/20">
        <div class="text-2xl font-bold text-green-400 mb-1" id="converted-leads">0</div>
        <div class="text-blue-100">Converted</div>
      </div>
      <div class="bg-white/10 backdrop-blur-sm rounded-lg p-6 border border-white/20">
        <div class="text-2xl font-bold text-yellow-400 mb-1" id="active-leads">0</div>
        <div class="text-blue-100">Active</div>
      </div>
      <div class="bg-white/10 backdrop-blur-sm rounded-lg p-6 border border-white/20">
        <div class="text-2xl font-bold text-blue-400 mb-1" id="conversion-rate">0%</div>
        <div class="text-blue-100">Conversion Rate</div>
      </div>
    </div>

    <!-- Lead Filters -->
    <div class="bg-white/10 backdrop-blur-sm rounded-lg p-6 border border-white/20 mb-8">
      <div class="flex flex-wrap gap-4 items-center">
        <div>
          <label class="text-white text-sm font-medium mb-1 block">Status</label>
          <select id="status-filter" class="bg-white/10 border border-white/20 rounded-lg px-3 py-2 text-white">
            <option value="">All Statuses</option>
            <option value="cold">Cold</option>
            <option value="contacted">Contacted</option>
            <option value="confirmed">Confirmed</option>
            <option value="converted">Converted</option>
            <option value="dead">Dead</option>
          </select>
        </div>
        <div>
          <label class="text-white text-sm font-medium mb-1 block">Follow-up</label>
          <select id="followup-filter" class="bg-white/10 border border-white/20 rounded-lg px-3 py-2 text-white">
            <option value="">All</option>
            <option value="overdue">Overdue</option>
            <option value="today">Due Today</option>
            <option value="week">This Week</option>
          </select>
        </div>
        <div>
          <label class="text-white text-sm font-medium mb-1 block">Search</label>
          <input type="text" id="search-filter" placeholder="Search leads..." class="bg-white/10 border border-white/20 rounded-lg px-3 py-2 text-white placeholder-gray-400">
        </div>
      </div>
    </div>

    <!-- Lead Table -->
    <div class="bg-white/10 backdrop-blur-sm rounded-lg p-6 border border-white/20">
      <div class="overflow-x-auto">
        <table class="w-full">
          <thead>
            <tr class="border-b border-white/20">
              <th class="text-left text-white font-medium py-3">Event Name</th>
              <th class="text-left text-white font-medium py-3">Organizer</th>
              <th class="text-left text-white font-medium py-3">Status</th>
              <th class="text-left text-white font-medium py-3">Follow-up</th>
              <th class="text-left text-white font-medium py-3">Actions</th>
            </tr>
          </thead>
          <tbody id="leads-table-body">
            <tr>
              <td colspan="5" class="text-center text-blue-100 py-8">Loading leads...</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <script>
    // TODO: Implement full lead management functionality
    // This is a scaffold - complete implementation needed
    
    async function loadLeads() {
      try {
        const { territoryManagerRouter } = await import('../../../lib/territory-manager-router');
        const data = await territoryManagerRouter.loadLeads();
        
        // Update stats
        document.getElementById('total-leads').textContent = data.totalLeads || 0;
        document.getElementById('converted-leads').textContent = data.convertedLeads || 0;
        document.getElementById('active-leads').textContent = data.activeLeads || 0;
        document.getElementById('conversion-rate').textContent = (data.conversionRate || 0) + '%';
        
        // Render leads table
        renderLeadsTable(data.leads || []);
      } catch (error) {
        console.error('Error loading leads:', error);
        document.getElementById('leads-table-body').innerHTML = 
          '<tr><td colspan="5" class="text-center text-red-400 py-8">Error loading leads</td></tr>';
      }
    }
    
    function renderLeadsTable(leads) {
      const tbody = document.getElementById('leads-table-body');
      
      if (!leads.length) {
        tbody.innerHTML = '<tr><td colspan="5" class="text-center text-blue-100 py-8">No leads found</td></tr>';
        return;
      }
      
      tbody.innerHTML = leads.map(lead => `
        <tr class="border-b border-white/10">
          <td class="py-3 text-white">${lead.event_name}</td>
          <td class="py-3 text-blue-100">${lead.organizer_contact?.name || 'N/A'}</td>
          <td class="py-3">
            <span class="px-2 py-1 rounded-full text-xs ${getStatusColor(lead.status)}">${lead.status}</span>
          </td>
          <td class="py-3 text-blue-100">${lead.follow_up_date ? new Date(lead.follow_up_date).toLocaleDateString() : 'N/A'}</td>
          <td class="py-3">
            <button onclick="viewLead('${lead.id}')" class="text-blue-400 hover:text-blue-300 mr-2">View</button>
            <button onclick="editLead('${lead.id}')" class="text-yellow-400 hover:text-yellow-300">Edit</button>
          </td>
        </tr>
      `).join('');
    }
    
    function getStatusColor(status) {
      const colors = {
        cold: 'bg-gray-600 text-white',
        contacted: 'bg-blue-600 text-white',
        confirmed: 'bg-yellow-600 text-white',
        converted: 'bg-green-600 text-white',
        dead: 'bg-red-600 text-white'
      };
      return colors[status] || 'bg-gray-600 text-white';
    }
    
    function viewLead(leadId) {
      // TODO: Implement lead view modal
      alert('Lead view functionality to be implemented');
    }
    
    function editLead(leadId) {
      // TODO: Implement lead edit functionality
      window.location.href = `/territory-manager/leads/${leadId}/edit`;
    }
    
    // Initialize
    loadLeads();
  </script>
</SecureLayout>