{{ 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="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 -->
          <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 -->
  <div class="flex-1 overflow-auto">
    {{if .Result}}
      {{if .Result.Error}}
        <div class="p-6">
          <div class="bg-red-50 border border-red-200 p-6">
            <h3 class="text-lg font-semibold text-red-800 mb-2">Report Error</h3>
            <p class="text-red-700">{{.Result.Error}}</p>
          </div>
        </div>
      {{else}}
        <!-- Report Header -->
        <div class="bg-white border-b border-gray-200 px-6 py-4 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>

        <!-- 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 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 .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}}
        <div class="flex-1 flex items-center justify-center">
          <p class="text-gray-500">No results match your selected criteria</p>
        </div>
        {{end}}
      {{end}}
    {{else}}
      <div class="flex-1 flex items-center justify-center">
        <p class="text-gray-600">Select a category and report to generate results</p>
      </div>
    {{end}}
  </div>
</div>

<script>
  const reportDefinitions = {
    users: [
      { id: 'volunteer_participation_rate', name: 'Volunteer Participation Rate' },
      { id: 'top_performing_volunteers', name: 'Top-Performing Volunteers & Team Leads' },
      { id: 'response_donation_ratio', name: 'Response-to-Donation Ratio per Volunteer' },
      { id: 'user_address_coverage', name: 'User Address Coverage' }
    ],
    addresses: [
      { id: 'poll_responses_by_address', name: 'Total Poll Responses by Address' },
      { id: 'donations_by_address', name: 'Total Donations by Address' },
      { id: 'street_level_breakdown', name: 'Street-Level Breakdown (Responses & Donations)' },
      { id: 'quadrant_summary', name: 'Quadrant-Level Summary (NE, NW, SE, SW)' }
    ],
    appointments: [
      { id: 'upcoming_appointments', name: 'Upcoming Appointments per Volunteer/Team Lead' },
      { id: 'missed_vs_completed', name: 'Missed vs Completed Appointments' },
      { id: 'appointments_by_quadrant', name: 'Appointments by Quadrant/Region' },
      { id: 'scheduling_lead_time', name: 'Average Lead Time (Scheduled vs Actual Date)' }
    ],
    polls: [
      { id: 'response_distribution', name: 'Response Distribution (Yes/No/Neutral)' },
      { id: 'average_poll_response', name: 'Average Poll Response (Yes/No %)' },
      { id: 'donations_by_poll', name: 'Donations by Poll' },
      { id: 'response_donation_correlation', name: 'Response-to-Donation Correlation' }
    ],
    availability: [
      { id: 'volunteer_availability_schedule', name: 'Volunteer Availability by Date Range' },
      { id: 'volunteer_fulfillment', name: 'Volunteer Fulfillment (Available vs Actually Worked)' }
    ]
  };

  function updateReports() {
    const category = document.getElementById('category').value;
    const reportSelect = document.getElementById('report');
    reportSelect.innerHTML = '<option value="">Select Report</option>';
    if (reportDefinitions[category]) {
      reportDefinitions[category].forEach(r => {
        const opt = document.createElement('option');
        opt.value = r.id;
        opt.textContent = r.name;
        reportSelect.appendChild(opt);
      });
    }
  }

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

  function printReport() { window.print(); }

  document.addEventListener("DOMContentLoaded", updateReports);
</script>
{{ end }}