<template>
  <div class="delivery-boy-profile">
    <!-- Back Button -->
    <button @click="$router.back()" class="back-btn">← Back</button>

    <!-- Profile Summary Card -->
    <div class="profile-summary">
      <div class="profile-avatar">{{ deliveryBoy.full_name?.charAt(0) || 'D' }}</div>
      <div class="profile-info">
        <h1>{{ deliveryBoy.full_name }}</h1>
        <p class="profile-meta">📞 {{ deliveryBoy.phone }} • 📧 {{ deliveryBoy.email }}</p>
        <span :class="['status-badge', deliveryBoy.status]">{{ getStatusText(deliveryBoy.status) }}</span>
      </div>
      <div class="profile-actions">
        <button @click="editProfile" class="btn-edit">✏️ Edit</button>
        <button @click="toggleBlock" :class="['btn-block', deliveryBoy.status === 'blocked' ? 'unblock' : '']">
          {{ deliveryBoy.status === 'blocked' ? '✅ Unblock' : '🚫 Block' }}
        </button>
      </div>
    </div>

    <!-- Tabs -->
    <div class="tabs">
      <button v-for="tab in tabs" :key="tab.id" @click="activeTab = tab.id" :class="['tab', { active: activeTab === tab.id }]">
        {{ tab.icon }} {{ tab.label }}
      </button>
    </div>

    <!-- Tab Content -->
    <div class="tab-content">
      <!-- Personal Information -->
      <div v-if="activeTab === 'personal'" class="content-section">
        <div class="info-card">
          <h3>👤 Personal Information</h3>
          <div class="info-grid">
            <div class="info-item">
              <span class="label">Full Name:</span>
              <span class="value">{{ deliveryBoy.full_name }}</span>
            </div>
            <div class="info-item">
              <span class="label">Phone:</span>
              <span class="value">{{ deliveryBoy.phone }}</span>
            </div>
            <div class="info-item">
              <span class="label">Email:</span>
              <span class="value">{{ deliveryBoy.email }}</span>
            </div>
            <div class="info-item">
              <span class="label">City:</span>
              <span class="value">{{ deliveryBoy.city || 'N/A' }}</span>
            </div>
            <div class="info-item">
              <span class="label">Address:</span>
              <span class="value">{{ deliveryBoy.address || 'N/A' }}</span>
            </div>
            <div class="info-item">
              <span class="label">National ID:</span>
              <span class="value">{{ deliveryBoy.national_id || 'N/A' }}</span>
            </div>
            <div class="info-item">
              <span class="label">Emergency Contact:</span>
              <span class="value">{{ deliveryBoy.emergency_contact_name || 'N/A' }}</span>
            </div>
            <div class="info-item">
              <span class="label">Emergency Phone:</span>
              <span class="value">{{ deliveryBoy.emergency_contact_phone || 'N/A' }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- Vehicle Information -->
      <div v-if="activeTab === 'vehicle'" class="content-section">
        <div class="info-card">
          <h3>🚗 Vehicle Information</h3>
          <div v-if="deliveryBoy.vehicles?.length > 0">
            <div v-for="vehicle in deliveryBoy.vehicles" :key="vehicle.id" class="vehicle-item">
              <div class="vehicle-icon">{{ getVehicleIcon(vehicle.vehicle_type) }}</div>
              <div class="vehicle-details">
                <h4>{{ vehicle.vehicle_type }} - {{ vehicle.vehicle_number }}</h4>
                <p>{{ vehicle.vehicle_make }} {{ vehicle.vehicle_model }}</p>
                <p class="vehicle-meta">Color: {{ vehicle.vehicle_color }} • Year: {{ vehicle.registration_year }}</p>
              </div>
            </div>
          </div>
          <div v-else class="empty-state">No vehicle information</div>
        </div>
      </div>

      <!-- Documents -->
      <div v-if="activeTab === 'documents'" class="content-section">
        <div class="info-card">
          <h3>📄 Verification Documents</h3>
          <div v-if="deliveryBoy.documents?.length > 0" class="documents-list">
            <div v-for="doc in deliveryBoy.documents" :key="doc.id" class="document-item">
              <div class="doc-icon">📄</div>
              <div class="doc-info">
                <h4>{{ formatDocType(doc.document_type) }}</h4>
                <p>{{ doc.document_number || 'No number' }}</p>
                <p class="doc-meta">Expires: {{ doc.expiry_date || 'N/A' }}</p>
              </div>
              <span :class="['doc-status', doc.verification_status]">{{ doc.verification_status }}</span>
            </div>
          </div>
          <div v-else class="empty-state">No documents uploaded</div>
        </div>
      </div>

      <!-- Performance -->
      <div v-if="activeTab === 'performance'" class="content-section">
        <div class="stats-grid">
          <div class="stat-box">
            <span class="stat-icon">⭐</span>
            <div>
              <p class="stat-label">Rating</p>
              <h3>{{ deliveryBoy.rating || '0.0' }}</h3>
            </div>
          </div>
          <div class="stat-box">
            <span class="stat-icon">📦</span>
            <div>
              <p class="stat-label">Total Deliveries</p>
              <h3>{{ deliveryBoy.total_deliveries || 0 }}</h3>
            </div>
          </div>
          <div class="stat-box">
            <span class="stat-icon">✅</span>
            <div>
              <p class="stat-label">Successful</p>
              <h3>{{ deliveryBoy.successful_deliveries || 0 }}</h3>
            </div>
          </div>
          <div class="stat-box">
            <span class="stat-icon">📊</span>
            <div>
              <p class="stat-label">Success Rate</p>
              <h3>{{ successRate }}%</h3>
            </div>
          </div>
        </div>
      </div>

      <!-- Earnings -->
      <div v-if="activeTab === 'earnings'" class="content-section">
        <div class="info-card">
          <h3>💰 Earnings Summary</h3>
          <div class="earnings-grid">
            <div class="earning-item">
              <span class="label">Wallet Balance:</span>
              <span class="value amount">${{ deliveryBoy.wallet_balance || '0.00' }}</span>
            </div>
            <div class="earning-item">
              <span class="label">Commission Rate:</span>
              <span class="value">{{ deliveryBoy.commission_rate || 0 }}%</span>
            </div>
            <div class="earning-item">
              <span class="label">Total Earnings:</span>
              <span class="value amount">$5,420.00</span>
            </div>
            <div class="earning-item">
              <span class="label">This Month:</span>
              <span class="value amount">$1,250.00</span>
            </div>
          </div>
        </div>
      </div>

      <!-- Recent Deliveries -->
      <div v-if="activeTab === 'deliveries'" class="content-section">
        <div class="info-card">
          <h3>📦 Recent Deliveries</h3>
          <table class="deliveries-table">
            <thead>
              <tr>
                <th>Order ID</th>
                <th>Date</th>
                <th>Customer</th>
                <th>Amount</th>
                <th>Status</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="i in 5" :key="i">
                <td>#ORD-{{ 1000 + i }}</td>
                <td>2025-12-{{ 15 + i }}</td>
                <td>Customer {{ i }}</td>
                <td>${{ (25 + i * 5).toFixed(2) }}</td>
                <td><span class="status-badge delivered">Delivered</span></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import api from '@/services/api'

export default {
  setup() {
    const route = useRoute()
    const deliveryBoy = ref({})
    const activeTab = ref('personal')
    const tabs = [
      { id: 'personal', label: 'Personal Info', icon: '👤' },
      { id: 'vehicle', label: 'Vehicle', icon: '🚗' },
      { id: 'documents', label: 'Documents', icon: '📄' },
      { id: 'performance', label: 'Performance', icon: '📊' },
      { id: 'earnings', label: 'Earnings', icon: '💰' },
      { id: 'deliveries', label: 'Deliveries', icon: '📦' },
    ]

    const successRate = computed(() => {
      if (!deliveryBoy.value.total_deliveries) return 0
      return Math.round((deliveryBoy.value.successful_deliveries / deliveryBoy.value.total_deliveries) * 100)
    })

    const loadDeliveryBoy = async () => {
      try {
        const { data } = await api.get(`/admin/delivery-boys/${route.params.id}`)
        deliveryBoy.value = data.data
      } catch (error) {
        console.error('Failed to load delivery boy:', error)
      }
    }

    const getStatusText = (status) => {
      const texts = {
        online: '🟢 Online',
        offline: '⚫ Offline',
        on_delivery: '🔵 On Delivery',
        blocked: '🔴 Blocked'
      }
      return texts[status] || status
    }

    const getVehicleIcon = (type) => {
      const icons = { bike: '🏍️', scooter: '🛵', bicycle: '🚲', car: '🚗' }
      return icons[type] || '🚗'
    }

    const formatDocType = (type) => {
      return type.split('_').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ')
    }

    const editProfile = () => alert('Edit profile')
    const toggleBlock = () => alert('Toggle block')

    onMounted(loadDeliveryBoy)

    return {
      deliveryBoy,
      activeTab,
      tabs,
      successRate,
      getStatusText,
      getVehicleIcon,
      formatDocType,
      editProfile,
      toggleBlock
    }
  }
}
</script>

<style scoped>
.delivery-boy-profile { padding: 0; }

.back-btn {
  padding: 0.5rem 1rem;
  background: #f3f4f6;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: 1.5rem;
  font-weight: 600;
}

.profile-summary {
  background: white;
  border-radius: 16px;
  padding: 2rem;
  display: flex;
  gap: 2rem;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  margin-bottom: 2rem;
}

.profile-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff6b35, #f7931e);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  font-weight: 700;
}

.profile-info { flex: 1; }
.profile-info h1 { margin: 0 0 0.5rem; font-size: 2rem; color: #1f2937; }
.profile-meta { margin: 0 0 0.75rem; color: #6b7280; }

.status-badge {
  display: inline-block;
  padding: 0.375rem 0.875rem;
  border-radius: 12px;
  font-size: 0.875rem;
  font-weight: 600;
}

.status-badge.online { background: #d1fae5; color: #10b981; }
.status-badge.offline { background: #f3f4f6; color: #6b7280; }
.status-badge.on_delivery { background: #dbeafe; color: #3b82f6; }
.status-badge.blocked { background: #fee2e2; color: #ef4444; }

.profile-actions { display: flex; gap: 1rem; }

.btn-edit, .btn-block {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-edit { background: #e0e7ff; color: #4f46e5; }
.btn-block { background: #fee2e2; color: #ef4444; }
.btn-block.unblock { background: #d1fae5; color: #10b981; }

.tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 2rem;
  overflow-x: auto;
}

.tab {
  padding: 0.75rem 1.5rem;
  background: white;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 600;
  color: #6b7280;
  transition: all 0.3s;
  white-space: nowrap;
}

.tab:hover { border-color: #ff6b35; }
.tab.active {
  background: linear-gradient(135deg, #ff6b35, #f7931e);
  color: white;
  border-color: transparent;
}

.content-section { animation: fadeIn 0.3s; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.info-card {
  background: white;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.info-card h3 { margin: 0 0 1.5rem; font-size: 1.25rem; color: #1f2937; }

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.info-item .label { font-size: 0.875rem; color: #6b7280; font-weight: 600; }
.info-item .value { font-size: 1rem; color: #1f2937; }

.vehicle-item {
  display: flex;
  gap: 1.5rem;
  padding: 1.5rem;
  background: #f9fafb;
  border-radius: 12px;
  margin-bottom: 1rem;
}

.vehicle-icon { font-size: 3rem; }
.vehicle-details h4 { margin: 0 0 0.5rem; color: #1f2937; }
.vehicle-details p { margin: 0.25rem 0; color: #6b7280; font-size: 0.875rem; }

.documents-list { display: flex; flex-direction: column; gap: 1rem; }

.document-item {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  background: #f9fafb;
  border-radius: 12px;
  align-items: center;
}

.doc-icon { font-size: 2rem; }
.doc-info { flex: 1; }
.doc-info h4 { margin: 0 0 0.25rem; color: #1f2937; font-size: 1rem; }
.doc-info p { margin: 0.25rem 0; color: #6b7280; font-size: 0.875rem; }

.doc-status {
  padding: 0.375rem 0.875rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: capitalize;
}

.doc-status.verified { background: #d1fae5; color: #10b981; }
.doc-status.pending { background: #fef3c7; color: #f59e0b; }
.doc-status.rejected { background: #fee2e2; color: #ef4444; }

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

.stat-box {
  background: white;
  padding: 1.5rem;
  border-radius: 12px;
  display: flex;
  gap: 1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.stat-icon { font-size: 2rem; }
.stat-label { margin: 0; font-size: 0.875rem; color: #6b7280; }
.stat-box h3 { margin: 0.5rem 0 0; font-size: 1.75rem; color: #1f2937; }

.earnings-grid { display: flex; flex-direction: column; gap: 1rem; }

.earning-item {
  display: flex;
  justify-content: space-between;
  padding: 1rem;
  background: #f9fafb;
  border-radius: 8px;
}

.earning-item .value.amount { font-size: 1.25rem; font-weight: 700; color: #10b981; }

.deliveries-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}

.deliveries-table th {
  text-align: left;
  padding: 0.75rem;
  background: #f9fafb;
  font-size: 0.875rem;
  color: #6b7280;
}

.deliveries-table td {
  padding: 0.75rem;
  border-bottom: 1px solid #f3f4f6;
  font-size: 0.875rem;
}

.status-badge.delivered { background: #d1fae5; color: #10b981; }

.empty-state {
  text-align: center;
  padding: 3rem;
  color: #9ca3af;
}

@media (max-width: 768px) {
  .profile-summary { flex-direction: column; text-align: center; }
  .profile-actions { width: 100%; }
  .btn-edit, .btn-block { flex: 1; }
}
</style>
