<template>
  <div class="delivery-boy-management">
    <!-- Header -->
    <header class="page-header">
      <div>
        <h1>🚴 Delivery Boy Management</h1>
        <p class="subtitle">Manage delivery personnel and track performance</p>
      </div>
      <div class="header-actions">
        <button @click="refreshData" class="btn-action">
          <span>🔄</span>
          <span>Refresh</span>
        </button>
        <button @click="exportDeliveryBoys" class="btn-action">
          <span>📊</span>
          <span>Export</span>
        </button>
        <button @click="showAddModal = true" class="btn-primary">
          <span>➕</span>
          <span>Add Delivery Boy</span>
        </button>
      </div>
    </header>

    <!-- Stats Dashboard -->
    <div class="stats-grid">
      <div class="stat-card" v-for="stat in dashboardStats" :key="stat.label">
        <div class="stat-header">
          <span class="stat-label">{{ stat.label }}</span>
        </div>
        <div class="stat-body">
          <div class="stat-icon" :style="{ background: stat.gradient }">
            {{ stat.icon }}
          </div>
          <div class="stat-details">
            <div class="stat-value-wrapper">
              <span v-if="stat.currency" class="stat-currency">{{ stat.currency }}</span>
              <span class="stat-value">{{ stat.value }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Search Bar -->
    <div class="search-section">
      <input v-model="filters.search" type="text" placeholder="🔍 Search by name, phone, email..." class="search-input">
    </div>

    <!-- Filters -->
    <div class="controls-section">
      <div class="filters-panel">
        <div class="filter-group">
          <select v-model="filters.status" class="filter-select">
            <option value="">All Status</option>
            <option value="online">Online</option>
            <option value="offline">Offline</option>
            <option value="on_delivery">On Delivery</option>
            <option value="blocked">Blocked</option>
          </select>
          
          <select v-model="filters.verification_status" class="filter-select">
            <option value="">All Verification</option>
            <option value="pending">Pending</option>
            <option value="verified">Verified</option>
            <option value="rejected">Rejected</option>
          </select>
          
          <button @click="applyFilters" class="filter-btn">🔍 Filter</button>
          <button @click="clearFilters" class="clear-btn">🗑️ Clear</button>
        </div>
      </div>
    </div>

    <!-- Delivery Boys Table -->
    <div class="table-container">
      <div class="table-header">
        <div class="table-title">
          <h3>🚴 Delivery Boys List ({{ pagination.total || deliveryBoys.length }})</h3>
        </div>
        <div class="table-actions">
          <select v-model="filters.per_page" @change="applyFilters" class="per-page-select">
            <option :value="10">10 per page</option>
            <option :value="20">20 per page</option>
            <option :value="50">50 per page</option>
            <option :value="100">100 per page</option>
          </select>
          <button @click="toggleSelectAll" class="select-all-btn">
            {{ allSelected ? 'Deselect All' : 'Select All' }}
          </button>
        </div>
      </div>

      <div class="table-wrapper">
        <table>
          <thead>
            <tr>
              <th><input type="checkbox" @change="toggleSelectAll" :checked="allSelected"></th>
              <th>ID</th>
              <th>Name</th>
              <th>Phone</th>
              <th>Status</th>
              <th>Verification</th>
              <th>Rating</th>
              <th>Deliveries</th>
              <th>Vehicle</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="boy in deliveryBoys" :key="boy.id" :class="{ 'selected': selectedBoys.includes(boy.id) }">
              <td><input type="checkbox" :value="boy.id" v-model="selectedBoys"></td>
              <td class="boy-id">#{{ boy.id }}</td>
              <td class="boy-info">
                <div class="boy-name">{{ boy.full_name }}</div>
                <div class="boy-email">{{ boy.email }}</div>
              </td>
              <td class="boy-phone">{{ boy.phone }}</td>
              <td>
                <span class="status-badge" :class="getStatusClass(boy.status)">
                  {{ formatStatus(boy.status) }}
                </span>
              </td>
              <td>
                <span class="verification-badge" :class="getVerificationClass(boy.verification_status)">
                  {{ formatStatus(boy.verification_status) }}
                </span>
              </td>
              <td class="boy-rating">⭐ {{ parseFloat(boy.rating || 0).toFixed(1) }}</td>
              <td class="boy-deliveries">{{ boy.total_deliveries || 0 }}</td>
              <td class="boy-vehicle">{{ boy.vehicles?.[0]?.vehicle_type || 'N/A' }}</td>
              <td class="actions">
                <button @click="viewBoy(boy)" class="action-btn view" title="View Details">👁️</button>
                <button @click="editBoy(boy)" class="action-btn edit" title="Edit">✏️</button>
                <button @click="manageDocs(boy)" class="action-btn docs" title="Documents">📄</button>
                <button @click="toggleBlock(boy)" class="action-btn" :class="boy.status === 'blocked' ? 'unblock' : 'block'" :title="boy.status === 'blocked' ? 'Unblock' : 'Block'">
                  {{ boy.status === 'blocked' ? '✅' : '🚫' }}
                </button>
                <button v-if="boy.verification_status === 'pending'" @click="verifyBoy(boy)" class="action-btn verify" title="Verify">✔️</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- Pagination -->
      <div v-if="pagination.last_page > 1" class="pagination-container">
        <div class="pagination-info">
          Showing {{ pagination.from }} to {{ pagination.to }} of {{ pagination.total }} delivery boys
        </div>
        <div class="pagination-controls">
          <button @click="changePage(1)" :disabled="pagination.current_page === 1" class="page-btn">« First</button>
          <button @click="changePage(pagination.current_page - 1)" :disabled="pagination.current_page === 1" class="page-btn">‹ Prev</button>
          <button v-for="page in visiblePages" :key="page" @click="changePage(page)" class="page-btn" :class="{ active: page === pagination.current_page }">
            {{ page }}
          </button>
          <button @click="changePage(pagination.current_page + 1)" :disabled="pagination.current_page === pagination.last_page" class="page-btn">Next ›</button>
          <button @click="changePage(pagination.last_page)" :disabled="pagination.current_page === pagination.last_page" class="page-btn">Last »</button>
        </div>
      </div>
    </div>

    <!-- Loading Overlay -->
    <div v-if="loading" class="loading-overlay">
      <div class="loading-spinner"></div>
      <p>Loading...</p>
    </div>

    <!-- Modals -->
    <AddDeliveryBoyModal 
      :isOpen="showAddModal" 
      :deliveryBoy="selectedBoyForEdit"
      @close="closeAddModal" 
      @success="onSuccess" 
    />
    <ViewDeliveryBoyModal 
      :isOpen="showViewModal" 
      :deliveryBoy="selectedBoyForView"
      @close="closeViewModal" 
    />
    <DocumentManagementModal 
      :isOpen="showDocsModal" 
      :deliveryBoy="selectedBoyForDocs"
      @close="closeDocsModal"
      @success="onSuccess" 
    />
  </div>
</template>

<script>
import { ref, computed, onMounted, reactive } from 'vue'
import axios from 'axios'
import AddDeliveryBoyModal from './AddDeliveryBoyModal.vue'
import ViewDeliveryBoyModal from './ViewDeliveryBoyModal.vue'
import DocumentManagementModal from './DocumentManagementModal.vue'

export default {
  name: 'DeliveryBoyManagement',
  components: {
    AddDeliveryBoyModal,
    ViewDeliveryBoyModal,
    DocumentManagementModal
  },
  setup() {
    const loading = ref(false)
    const deliveryBoys = ref([])
    const selectedBoys = ref([])
    const showAddModal = ref(false)
    const showViewModal = ref(false)
    const showDocsModal = ref(false)
    const selectedBoyForEdit = ref(null)
    const selectedBoyForView = ref(null)
    const selectedBoyForDocs = ref(null)
    const stats = ref({})
    const pagination = ref({
      current_page: 1,
      last_page: 1,
      per_page: 20,
      total: 0,
      from: 0,
      to: 0
    })
    
    const filters = reactive({
      status: '',
      verification_status: '',
      search: '',
      per_page: 20
    })

    const dashboardStats = computed(() => [
      {
        icon: '🚴',
        label: 'Total Delivery Boys',
        value: stats.value.total_delivery_boys?.toLocaleString() || '0',
        gradient: 'linear-gradient(135deg, #ff6b35 0%, #f7931e 100%)'
      },
      {
        icon: '🟢',
        label: 'Online Now',
        value: stats.value.online_count?.toLocaleString() || '0',
        gradient: 'linear-gradient(135deg, #10b981 0%, #059669 100%)'
      },
      {
        icon: '📦',
        label: 'On Delivery',
        value: stats.value.on_delivery_count?.toLocaleString() || '0',
        gradient: 'linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)'
      },
      {
        icon: '⏸️',
        label: 'Offline',
        value: stats.value.offline_count?.toLocaleString() || '0',
        gradient: 'linear-gradient(135deg, #6b7280 0%, #4b5563 100%)'
      },
      {
        icon: '⏳',
        label: 'Pending Verification',
        value: stats.value.pending_verification?.toLocaleString() || '0',
        gradient: 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)'
      },
      {
        icon: '✅',
        label: 'Verified',
        value: stats.value.verified_count?.toLocaleString() || '0',
        gradient: 'linear-gradient(135deg, #10b981 0%, #059669 100%)'
      },
      {
        icon: '🚫',
        label: 'Blocked',
        value: stats.value.blocked_count?.toLocaleString() || '0',
        gradient: 'linear-gradient(135deg, #ef4444 0%, #dc2626 100%)'
      },
      {
        icon: '⭐',
        label: 'Average Rating',
        value: parseFloat(stats.value.avg_rating || 0).toFixed(1),
        gradient: 'linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%)'
      }
    ])

    const allSelected = computed(() => {
      return deliveryBoys.value.length > 0 && selectedBoys.value.length === deliveryBoys.value.length
    })

    const visiblePages = computed(() => {
      const pages = []
      const current = pagination.value.current_page
      const last = pagination.value.last_page
      
      for (let i = Math.max(1, current - 2); i <= Math.min(last, current + 2); i++) {
        pages.push(i)
      }
      return pages
    })

    const loadData = async () => {
      try {
        loading.value = true
        console.log('Loading delivery boys data...')
        
        const params = { ...filters, page: pagination.value.current_page }
        const response = await axios.get('/api/admin/delivery-boys', { params })
        console.log('Delivery boys response:', response.data)
        
        if (response.data.success) {
          deliveryBoys.value = response.data.data.data
          pagination.value = {
            current_page: response.data.data.current_page,
            last_page: response.data.data.last_page,
            per_page: response.data.data.per_page,
            total: response.data.data.total,
            from: response.data.data.from,
            to: response.data.data.to
          }
        }
        
        const statsResponse = await axios.get('/api/admin/delivery-boys/dashboard-stats')
        console.log('Stats response:', statsResponse.data)
        
        if (statsResponse.data.success) {
          stats.value = statsResponse.data.data.stats
        }
      } catch (error) {
        console.error('Error loading data:', error)
        console.error('Error response:', error.response?.data)
        console.error('Error message:', error.message)
        alert(`Failed to load delivery boys data: ${error.response?.data?.message || error.message}`)
      } finally {
        loading.value = false
      }
    }

    const applyFilters = () => {
      pagination.value.current_page = 1
      loadData()
    }

    const clearFilters = () => {
      Object.keys(filters).forEach(key => {
        if (key !== 'per_page') {
          filters[key] = ''
        }
      })
      pagination.value.current_page = 1
      loadData()
    }

    const changePage = (page) => {
      if (page >= 1 && page <= pagination.value.last_page) {
        pagination.value.current_page = page
        loadData()
      }
    }

    const toggleSelectAll = () => {
      if (allSelected.value) {
        selectedBoys.value = []
      } else {
        selectedBoys.value = deliveryBoys.value.map(boy => boy.id)
      }
    }

    const viewBoy = async (boy) => {
      try {
        const response = await axios.get(`/api/admin/delivery-boys/${boy.id}`)
        if (response.data.success) {
          selectedBoyForView.value = response.data.data
          showViewModal.value = true
        }
      } catch (error) {
        console.error('Error loading boy details:', error)
      }
    }

    const editBoy = (boy) => {
      selectedBoyForEdit.value = boy
      showAddModal.value = true
    }

    const closeAddModal = () => {
      showAddModal.value = false
      selectedBoyForEdit.value = null
    }

    const closeViewModal = () => {
      showViewModal.value = false
      selectedBoyForView.value = null
    }

    const manageDocs = (boy) => {
      selectedBoyForDocs.value = boy
      showDocsModal.value = true
    }

    const closeDocsModal = () => {
      showDocsModal.value = false
      selectedBoyForDocs.value = null
    }

    const onSuccess = () => {
      loadData()
    }

    const toggleBlock = async (boy) => {
      if (!confirm(`Are you sure you want to ${boy.status === 'blocked' ? 'unblock' : 'block'} this delivery boy?`)) return
      
      try {
        const response = await axios.post(`/api/admin/delivery-boys/${boy.id}/block`)
        if (response.data.success) {
          loadData()
        }
      } catch (error) {
        console.error('Error toggling block:', error)
      }
    }

    const verifyBoy = async (boy) => {
      if (!confirm('Verify this delivery boy?')) return
      
      try {
        const response = await axios.post(`/api/admin/delivery-boys/${boy.id}/verify-documents`, {
          verification_status: 'verified'
        })
        if (response.data.success) {
          loadData()
        }
      } catch (error) {
        console.error('Error verifying:', error)
      }
    }

    const exportDeliveryBoys = async () => {
      try {
        let params = new URLSearchParams()
        
        if (selectedBoys.value.length > 0) {
          params.append('delivery_boy_ids', selectedBoys.value.join(','))
        } else {
          Object.keys(filters).forEach(key => {
            if (filters[key]) {
              params.append(key, filters[key])
            }
          })
        }
        
        const token = localStorage.getItem('token')
        const response = await axios.get(`/api/admin/delivery-boys/export?${params.toString()}`, {
          responseType: 'blob',
          headers: { 'Authorization': `Bearer ${token}` }
        })
        
        const url = window.URL.createObjectURL(new Blob([response.data]))
        const link = document.createElement('a')
        link.href = url
        link.setAttribute('download', `delivery_boys_${new Date().toISOString().slice(0,10)}.xls`)
        document.body.appendChild(link)
        link.click()
        link.remove()
        
        if (selectedBoys.value.length > 0) {
          alert(`Exported ${selectedBoys.value.length} selected delivery boys!`)
        }
      } catch (error) {
        console.error('Export failed:', error)
        alert('Failed to export')
      }
    }

    const refreshData = () => {
      loadData()
    }

    const getStatusClass = (status) => {
      const classes = {
        online: 'status-online',
        offline: 'status-offline',
        on_delivery: 'status-on-delivery',
        blocked: 'status-blocked'
      }
      return classes[status] || ''
    }

    const getVerificationClass = (status) => {
      const classes = {
        pending: 'verification-pending',
        verified: 'verification-verified',
        rejected: 'verification-rejected'
      }
      return classes[status] || ''
    }

    const formatStatus = (status) => {
      return status?.replace('_', ' ').toUpperCase() || 'N/A'
    }

    onMounted(() => {
      loadData()
    })

    return {
      loading,
      deliveryBoys,
      selectedBoys,
      showAddModal,
      showViewModal,
      showDocsModal,
      selectedBoyForEdit,
      selectedBoyForView,
      selectedBoyForDocs,
      filters,
      dashboardStats,
      allSelected,
      visiblePages,
      pagination,
      loadData,
      applyFilters,
      clearFilters,
      changePage,
      toggleSelectAll,
      viewBoy,
      editBoy,
      closeAddModal,
      closeViewModal,
      manageDocs,
      closeDocsModal,
      onSuccess,
      toggleBlock,
      verifyBoy,
      exportDeliveryBoys,
      refreshData,
      getStatusClass,
      getVerificationClass,
      formatStatus
    }
  }
}
</script>

<style scoped>
.delivery-boy-management { padding: 2rem; }

.page-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 2rem; }
.page-header h1 { margin: 0; font-size: 1.75rem; font-weight: 700; color: #1f2937; }
.subtitle { margin: 0.5rem 0 0; color: #6b7280; font-size: 0.875rem; }

.header-actions { display: flex; gap: 0.75rem; }

.btn-action, .btn-primary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 0.875rem;
}

.btn-action { background: white; color: #374151; border: 1px solid #e5e7eb; }
.btn-primary { background: linear-gradient(135deg, #ff6b35, #f7931e); color: white; }
.btn-action:hover, .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.15); }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.stat-card {
  background: white;
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transition: all 0.3s;
  border: 1px solid #f1f5f9;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow: hidden;
}

.stat-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.12); }

.stat-header { display: flex; justify-content: space-between; align-items: center; }
.stat-label { color: #6b7280; font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }

.stat-body { display: flex; align-items: center; gap: 1rem; min-width: 0; overflow: hidden; }

.stat-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  color: white;
  flex-shrink: 0;
}

.stat-details { flex: 1; display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; overflow: hidden; }
.stat-value-wrapper { display: flex; align-items: baseline; gap: 0.5rem; overflow: hidden; }
.stat-currency { font-size: 1rem; font-weight: 600; color: #6b7280; flex-shrink: 0; }
.stat-value { font-size: 1.75rem; font-weight: 700; color: #1f2937; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.search-section { margin-bottom: 1.5rem; }

.search-input {
  width: 100%;
  padding: 0.875rem 1.25rem;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  background: white;
  font-size: 0.9375rem;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.search-input:focus { outline: none; border-color: #ff6b35; box-shadow: 0 4px 12px rgba(255, 107, 53, 0.15); }

.controls-section {
  background: white;
  border-radius: 16px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  border: 1px solid #f1f5f9;
}

.filter-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; align-items: center; }

.filter-select, .filter-input {
  padding: 0.75rem;
  border: 2px solid #f3f4f6;
  border-radius: 8px;
  background: #f9fafb;
  transition: all 0.3s ease;
}

.filter-select:focus, .filter-input:focus { outline: none; border-color: #ff6b35; background: white; }

.filter-btn, .clear-btn {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.filter-btn { background: #ff6b35; color: white; }
.clear-btn { background: #f3f4f6; color: #6b7280; }

.table-container {
  background: white;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  overflow: hidden;
  border: 1px solid #f1f5f9;
}

.table-header {
  background: #f8fafc;
  padding: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e5e7eb;
}

.table-title h3 { margin: 0; color: #1f2937; font-size: 1.25rem; }

.table-actions { display: flex; align-items: center; gap: 1rem; }

.per-page-select {
  padding: 0.5rem 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: white;
  font-size: 0.875rem;
  cursor: pointer;
}

.select-all-btn {
  padding: 0.5rem 1rem;
  background: #ff6b35;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.875rem;
}

.table-wrapper { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; }

th, td { padding: 1rem; text-align: left; border-bottom: 1px solid #f3f4f6; }

th { background: #f8fafc; font-weight: 600; color: #374151; }

tr:hover { background: #f9fafb; }
tr.selected { background: rgba(255, 107, 53, 0.1); }

.boy-id { font-weight: 600; color: #ff6b35; }

.boy-info { display: flex; flex-direction: column; gap: 0.25rem; }
.boy-name { font-weight: 500; color: #1f2937; }
.boy-email { font-size: 0.875rem; color: #6b7280; }

.boy-phone { color: #4b5563; }

.status-badge, .verification-badge {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.status-online { background: #d1fae5; color: #065f46; }
.status-offline { background: #f3f4f6; color: #4b5563; }
.status-on-delivery { background: #dbeafe; color: #1e40af; }
.status-blocked { background: #fee2e2; color: #991b1b; }

.verification-pending { background: #fef3c7; color: #92400e; }
.verification-verified { background: #d1fae5; color: #065f46; }
.verification-rejected { background: #fee2e2; color: #991b1b; }

.boy-rating { color: #f59e0b; font-weight: 600; }
.boy-deliveries { font-weight: 600; color: #059669; }
.boy-vehicle { color: #6b7280; text-transform: capitalize; }

.actions { display: flex; gap: 0.5rem; }

.action-btn {
  padding: 0.5rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.875rem;
}

.action-btn.view { background: #3b82f6; color: white; }
.action-btn.edit { background: #f59e0b; color: white; }
.action-btn.docs { background: #8b5cf6; color: white; }
.action-btn.block { background: #ef4444; color: white; }
.action-btn.unblock { background: #10b981; color: white; }
.action-btn.verify { background: #10b981; color: white; }

.pagination-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  background: #f8fafc;
  border-top: 1px solid #e5e7eb;
}

.pagination-info { color: #6b7280; font-size: 0.875rem; }

.pagination-controls { display: flex; gap: 0.5rem; }

.page-btn {
  padding: 0.5rem 1rem;
  border: 1px solid #e5e7eb;
  background: white;
  color: #374151;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.875rem;
  transition: all 0.3s;
}

.page-btn:hover:not(:disabled) { background: #f3f4f6; border-color: #ff6b35; }
.page-btn.active { background: linear-gradient(135deg, #ff6b35, #f7931e); color: white; border-color: #ff6b35; }
.page-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid #f3f4f6;
  border-top: 4px solid #ff6b35;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 1rem;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
