{{ define "content" }}
<div class="flex-1 flex flex-col overflow-hidden">
  <!-- Toolbar with Report Selection -->
  <div class="bg-gray-50 border-b border-gray-200 px-6 py-3">
    <div class="flex items-center justify-between">
      <div class="flex items-center gap-4 text-sm">
        <form method="GET" action="/reports" class="flex items-center gap-3">
          <!-- Category Dropdown -->
          <div class="relative">
            <label for="category" class="text-gray-700 font-medium mr-2">Category:</label>
            <select
              name="category"
              id="category"
              onchange="updateReports()"
              class="px-3 py-2 text-sm border border-gray-200 bg-white focus:outline-none focus:ring-1 focus:ring-purple-500 focus:border-purple-500 min-w-48"
            >
              <option value="">Select Category</option>
              <option value="users" {{if eq .Category "users"}}selected{{end}}>Users & Teams</option>
              <option value="addresses" {{if eq .Category "addresses"}}selected{{end}}>Addresses</option>
              <option value="appointments" {{if eq .Category "appointments"}}selected{{end}}>Appointments</option>
              <option value="polls" {{if eq .Category "polls"}}selected{{end}}>Polls</option>
              <option value="responses" {{if eq .Category "responses"}}selected{{end}}>Poll Responses</option>
              <option value="availability" {{if eq .Category "availability"}}selected{{end}}>Availability</option>
            </select>
          </div>

          <!-- Report Dropdown -->
          <div class="relative">
            <label for="report" class="text-gray-700 font-medium mr-2">Report:</label>
            <select
              name="report"
              id="report"
              class="px-3 py-2 text-sm border border-gray-200 bg-white focus:outline-none focus:ring-1 focus:ring-purple-500 focus:border-purple-500 min-w-64"
            >
              <option value="">Select Report</option>
              {{if .Category}}
                {{range .AvailableReports}}
                <option value="{{.ID}}" {{if eq .ID $.ReportID}}selected{{end}}>{{.Name}}</option>
                {{end}}
              {{end}}
            </select>
          </div>

          <!-- Date Range (optional) -->
          <div class="flex items-center gap-2">
            <label for="date_from" class="text-gray-700 font-medium">From:</label>
            <input
              type="date"
              name="date_from"
              id="date_from"
              value="{{.DateFrom}}"
              class="px-3 py-2 text-sm border border-gray-200 bg-white focus:outline-none focus:ring-1 focus:ring-purple-500 focus:border-purple-500"
            />
            <label for="date_to" class="text-gray-700 font-medium">To:</label>
            <input
              type="date"
              name="date_to"
              id="date_to"
              value="{{.DateTo}}"
              class="px-3 py-2 text-sm border border-gray-200 bg-white focus:outline-none focus:ring-1 focus:ring-purple-500 focus:border-purple-500"
            />
          </div>

          <button
            type="submit"
            class="px-4 py-2 bg-purple-600 text-white font-medium hover:bg-purple-700 transition-all duration-200 text-sm"
          >
            <i class="fas fa-chart-bar mr-2"></i>Generate Report
          </button>
        </form>
      </div>
      
      <!-- Actions -->
      {{if .Result}}
      <div class="flex items-center gap-3 text-sm">
        <div class="text-gray-600">
          <span>{{.Result.Count}} results</span>
        </div>
        <button
          onclick="exportResults()"
          class="px-3 py-1.5 bg-green-600 text-white hover:bg-green-700 transition-colors"
        >
          <i class="fas fa-download mr-1"></i>Export CSV
        </button>
        <button
          onclick="printReport()"
          class="px-3 py-1.5 bg-blue-600 text-white hover:bg-blue-700 transition-colors"
        >
          <i class="fas fa-print mr-1"></i>Print
        </button>
      </div>
      {{end}}
    </div>
  </div>

  <!-- Main Content Area -->
  <div class="flex-1 overflow-auto">
    {{if .Result}}
      {{if .Result.Error}}
        <!-- Error State -->
        <div class="p-6">
          <div class="bg-red-50 border border-red-200 p-6">
            <div class="flex items-start">
              <div class="w-10 h-10 bg-red-100 flex items-center justify-center flex-shrink-0">
                <i class="fas fa-exclamation-triangle text-red-600"></i>
              </div>
              <div class="ml-4">
                <h3 class="text-lg font-semibold text-red-800 mb-2">Report Error</h3>
                <p class="text-red-700">{{.Result.Error}}</p>
              </div>
            </div>
          </div>
        </div>
      {{else}}
        <!-- Report Header -->
        <div class="bg-white border-b border-gray-200 px-6 py-4">
          <div class="flex items-center justify-between">
            <div>
              <h2 class="text-xl font-semibold text-gray-900">{{.ReportTitle}}</h2>
              <p class="text-sm text-gray-600 mt-1">{{.ReportDescription}}</p>
            </div>
            <div class="text-sm text-gray-500">
              Generated: {{.GeneratedAt}}
            </div>
          </div>
        </div>

        <!-- Results Table -->
        {{if gt .Result.Count 0}}
        <div class="flex-1 overflow-x-auto overflow-y-auto bg-white">
          <table class="w-full divide-gray-200 text-sm table-auto">
            <thead class="bg-gray-50 divide-gray-200 sticky top-0">
              <tr class="text-left text-gray-700 font-medium border-b border-gray-200">
                {{range .Result.Columns}}
                <th class="px-6 py-3 whitespace-nowrap">{{formatColumnName .}}</th>
                {{end}}
              </tr>
            </thead>
            <tbody class="divide-y divide-gray-200">
              {{range .Result.Rows}}
              <tr class="hover:bg-gray-50">
                {{range .}}
                <td class="px-6 py-3 text-sm text-gray-900">{{.}}</td>
                {{end}}
              </tr>
              {{end}}
            </tbody>
          </table>
        </div>

        <!-- Summary Stats (if available) -->
        {{if .SummaryStats}}
        <div class="bg-gray-50 border-t border-gray-200 px-6 py-4">
          <h4 class="text-sm font-semibold text-gray-700 mb-3">Summary Statistics</h4>
          <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
            {{range .SummaryStats}}
            <div class="bg-white border border-gray-200 px-3 py-2">
              <div class="text-xs text-gray-500">{{.Label}}</div>
              <div class="text-lg font-semibold text-gray-900">{{.Value}}</div>
            </div>
            {{end}}
          </div>
        </div>
        {{end}}

        {{else}}
        <!-- No Results State -->
        <div class="flex-1 flex items-center justify-center">
          <div class="text-center py-12">
            <div class="w-16 h-16 bg-gray-100 flex items-center justify-center mx-auto mb-4">
              <i class="fas fa-chart-bar text-gray-400 text-xl"></i>
            </div>
            <h3 class="text-lg font-medium text-gray-900 mb-2">No Data Found</h3>
            <p class="text-gray-500">No results match your selected criteria</p>
          </div>
        </div>
        {{end}}
      {{end}}
    {{else}}
      <!-- Welcome State -->
      <div class="flex-1 flex items-center justify-center">
        <div class="text-center py-12 max-w-4xl mx-auto px-6">
          <div class="mb-8">
            <div class="w-20 h-20 bg-gradient-to-br from-purple-600 to-purple-700 flex items-center justify-center mx-auto mb-4">
              <i class="fas fa-chart-line text-white text-2xl"></i>
            </div>
            <h1 class="text-3xl font-bold text-gray-900 mb-2">Campaign Reports</h1>
            <p class="text-gray-600 text-lg">Generate detailed reports across all your campaign data</p>
          </div>

          <!-- Report Categories Overview -->
          <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-left">
            <div class="p-4 bg-white border border-gray-200 hover:border-purple-300 hover:shadow-md transition-all duration-200">
              <div class="font-medium text-gray-900 text-sm mb-1">Users & Teams</div>
              <div class="text-xs text-gray-500">Volunteer performance, team stats, role distribution</div>
            </div>

            <div class="p-4 bg-white border border-gray-200 hover:border-purple-300 hover:shadow-md transition-all duration-200">
              <div class="font-medium text-gray-900 text-sm mb-1">Address Reports</div>
              <div class="text-xs text-gray-500">Coverage areas, visit status, geographical insights</div>
            </div>

            <div class="p-4 bg-white border border-gray-200 hover:border-purple-300 hover:shadow-md transition-all duration-200">
              <div class="font-medium text-gray-900 text-sm mb-1">Appointments</div>
              <div class="text-xs text-gray-500">Schedule analysis, completion rates, time trends</div>
            </div>

            <div class="p-4 bg-white border border-gray-200 hover:border-purple-300 hover:shadow-md transition-all duration-200">
              <div class="font-medium text-gray-900 text-sm mb-1">Poll Analytics</div>
              <div class="text-xs text-gray-500">Response rates, donation tracking, engagement metrics</div>
            </div>
          </div>

          <div class="mt-6 text-sm text-gray-500">
            Select a category above to see available reports
          </div>
        </div>
      </div>
    {{end}}
  </div>
</div>

<style>
  /* Square corners across UI */
  * {
    border-radius: 0 !important;
  }

  input, select, button {
    transition: all 0.2s ease;
    font-weight: 500;
    letter-spacing: 0.025em;
  }

  @media print {
    .no-print {
      display: none !important;
    }
    
    /* Print-specific styles */
    body {
      background: white !important;
    }
    
    .bg-gray-50 {
      background: white !important;
    }
  }
</style>

<script>
  // Report definitions for each category
  const reportDefinitions = {
    users: [
      { id: 'users_by_role', name: 'Users by Role' },
      { id: 'volunteer_activity', name: 'Volunteer Activity Summary' },
      { id: 'team_performance', name: 'Team Performance Report' },
      { id: 'admin_workload', name: 'Admin Workload Analysis' },
      { id: 'inactive_users', name: 'Inactive Users Report' }
    ],
    addresses: [
      { id: 'coverage_by_area', name: 'Coverage by Area' },
      { id: 'visits_by_postal', name: 'Visits by Postal Code' },
      { id: 'unvisited_addresses', name: 'Unvisited Addresses' },
      { id: 'donations_by_location', name: 'Donations by Location' },
      { id: 'address_validation_status', name: 'Address Validation Status' }
    ],
    appointments: [
      { id: 'appointments_by_day', name: 'Appointments by Day' },
      { id: 'completion_rates', name: 'Completion Rates' },
      { id: 'volunteer_schedules', name: 'Volunteer Schedules' },
      { id: 'missed_appointments', name: 'Missed Appointments' },
      { id: 'peak_hours', name: 'Peak Activity Hours' }
    ],
    polls: [
      { id: 'poll_creation_stats', name: 'Poll Creation Statistics' },
      { id: 'donation_analysis', name: 'Donation Analysis' },
      { id: 'active_vs_inactive', name: 'Active vs Inactive Polls' },
      { id: 'poll_trends', name: 'Poll Activity Trends' },
      { id: 'creator_performance', name: 'Creator Performance' }
    ],
    responses: [
      { id: 'voter_status', name: 'Voter Status Report' },
      { id: 'sign_requests', name: 'Sign Requests Summary' },
      { id: 'feedback_analysis', name: 'Feedback Analysis' },
      { id: 'response_trends', name: 'Response Trends' },
      { id: 'repeat_voters', name: 'Repeat Voters Analysis' }
    ],
    availability: [
      { id: 'volunteer_availability', name: 'Volunteer Availability' },
      { id: 'peak_availability', name: 'Peak Availability Times' },
      { id: 'coverage_gaps', name: 'Coverage Gaps' },
      { id: 'schedule_conflicts', name: 'Schedule Conflicts' }
    ]
  };

  // Update reports dropdown when category changes
  function updateReports() {
    const categorySelect = document.getElementById('category');
    const reportSelect = document.getElementById('report');
    const category = categorySelect.value;

    // Clear existing options
    reportSelect.innerHTML = '<option value="">Select Report</option>';

    if (category && reportDefinitions[category]) {
      reportDefinitions[category].forEach(report => {
        const option = document.createElement('option');
        option.value = report.id;
        option.textContent = report.name;
        reportSelect.appendChild(option);
      });
    }
  }

  // Export results
  function exportResults() {
    const form = document.querySelector('form');
    const formData = new FormData(form);
    const params = new URLSearchParams(formData);
    params.set('export', 'csv');
    window.location.href = `/reports/export?${params.toString()}`;
  }

  // Print report
  function printReport() {
    window.print();
  }

  // Initialize on page load
  document.addEventListener("DOMContentLoaded", function () {
    updateReports();
    
    // Set default date range (last 30 days)
    const dateFrom = document.getElementById('date_from');
    const dateTo = document.getElementById('date_to');
    
    if (!dateFrom.value) {
      const thirtyDaysAgo = new Date();
      thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30);
      dateFrom.value = thirtyDaysAgo.toISOString().split('T')[0];
    }
    
    if (!dateTo.value) {
      dateTo.value = new Date().toISOString().split('T')[0];
    }
  });
</script>

{{ end }}