<script setup>
import { computed } from 'vue'

const props = defineProps({
  vehicles: {
    type: Array,
    required: true,
    default: () => []
  }
})

// Enhanced status colors for corporate look
const statusColors = {
  'OK': 'bg-emerald-50 text-emerald-700 border border-emerald-200',
  'Service Due': 'bg-blue-50 text-blue-900 border border-blue-200 animate-pulse',
  'Warning': 'bg-rose-50 text-rose-700 border border-rose-200',
  'draft': 'bg-yellow-50 text-yellow-800 border border-yellow-300',
  'verified': 'bg-green-50 text-green-800 border border-green-300',
  'active': 'bg-blue-50 text-blue-800 border border-blue-300',
  'pending': 'bg-gray-50 text-gray-800 border border-gray-300',
  'incomplete': 'bg-orange-50 text-orange-800 border border-orange-300'
}

const sortedVehicles = computed(() => {
  return [...props.vehicles].sort((a, b) => b.monthlyExpense - a.monthlyExpense)
})

const formatCurrency = (amount) => {
  return new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'EUR',
    minimumFractionDigits: 0
  }).format(amount)
}

const formatMileage = (mileage) => {
  return new Intl.NumberFormat('en-US').format(mileage)
}

// Country flag mapping
const getCountryFlag = (make) => {
  const makeLower = make.toLowerCase()
  if (makeLower.includes('bmw') || makeLower.includes('mercedes') || makeLower.includes('audi') || makeLower.includes('volkswagen') || makeLower.includes('porsche')) {
    return 'https://flagcdn.com/w40/de.png'
  } else if (makeLower.includes('tesla') || makeLower.includes('ford') || makeLower.includes('chevrolet') || makeLower.includes('dodge')) {
    return 'https://flagcdn.com/w40/us.png'
  } else if (makeLower.includes('toyota') || makeLower.includes('honda') || makeLower.includes('nissan') || makeLower.includes('mazda')) {
    return 'https://flagcdn.com/w40/jp.png'
  } else if (makeLower.includes('ferrari') || makeLower.includes('lamborghini') || makeLower.includes('fiat') || makeLower.includes('alfa romeo')) {
    return 'https://flagcdn.com/w40/it.png'
  } else if (makeLower.includes('volvo') || makeLower.includes('saab')) {
    return 'https://flagcdn.com/w40/se.png'
  } else if (makeLower.includes('renault') || makeLower.includes('peugeot') || makeLower.includes('citroen')) {
    return 'https://flagcdn.com/w40/fr.png'
  } else if (makeLower.includes('skoda') || makeLower.includes('seat')) {
    return 'https://flagcdn.com/w40/cz.png'
  } else {
    return 'https://flagcdn.com/w40/eu.png'
  }
}
</script>

<template>
  <div class="bg-white/80 backdrop-blur-sm rounded-2xl shadow-2xl border border-gray-300/50 overflow-hidden">
    <!-- Corporate Glass Header -->
    <div class="px-8 py-5 border-b border-gray-300/30 bg-gradient-to-r from-slate-900/90 to-slate-800/90 backdrop-blur-md">
      <div class="flex justify-between items-center">
        <div>
          <h2 class="text-2xl font-bold text-white tracking-tight">Corporate Fleet Management</h2>
          <p class="text-sm text-slate-300 mt-1">Enterprise-grade vehicle oversight with real-time analytics</p>
        </div>
        <div class="text-right">
          <div class="text-3xl font-bold text-white">{{ formatCurrency(vehicles.reduce((sum, v) => sum + v.monthlyExpense, 0)) }}</div>
          <div class="text-sm text-slate-300">Total monthly fleet cost • {{ vehicles.length }} assets</div>
        </div>
      </div>
    </div>

    <!-- Table Container -->
    <div class="overflow-x-auto">
      <table class="min-w-full divide-y divide-gray-300/30">
        <thead class="bg-gradient-to-r from-slate-100 to-slate-200/80">
          <tr>
            <th scope="col" class="px-8 py-4 text-left text-xs font-semibold text-slate-700 uppercase tracking-wider">
              <div class="flex items-center">
                <span class="mr-2">🚗</span> Vehicle
              </div>
            </th>
            <th scope="col" class="px-8 py-4 text-left text-xs font-semibold text-slate-700 uppercase tracking-wider">
              <div class="flex items-center">
                <span class="mr-2">🏷️</span> License Plate
              </div>
            </th>
            <th scope="col" class="px-8 py-4 text-left text-xs font-semibold text-slate-700 uppercase tracking-wider">
              <div class="flex items-center">
                <span class="mr-2">📅</span> Year
              </div>
            </th>
            <th scope="col" class="px-8 py-4 text-left text-xs font-semibold text-slate-700 uppercase tracking-wider">
              <div class="flex items-center">
                <span class="mr-2">📊</span> Mileage
              </div>
            </th>
            <th scope="col" class="px-8 py-4 text-left text-xs font-semibold text-slate-700 uppercase tracking-wider">
              <div class="flex items-center">
                <span class="mr-2">⛽</span> Fuel Type
              </div>
            </th>
            <th scope="col" class="px-8 py-4 text-left text-xs font-semibold text-slate-700 uppercase tracking-wider">
              <div class="flex items-center">
                <span class="mr-2">🔧</span> Data Status
              </div>
            </th>
            <th scope="col" class="px-8 py-4 text-left text-xs font-semibold text-slate-700 uppercase tracking-wider">
              <div class="flex items-center">
                <span class="mr-2">💰</span> Monthly Cost
              </div>
            </th>
            <th scope="col" class="px-8 py-4 text-left text-xs font-semibold text-slate-700 uppercase tracking-wider">
              <div class="flex items-center">
                <span class="mr-2">⚡</span> Actions
              </div>
            </th>
          </tr>
        </thead>
        <tbody class="divide-y divide-gray-300/20">
          <tr 
            v-for="(vehicle, index) in sortedVehicles" 
            :key="vehicle.id"
            :class="[
              'transition-all duration-200 hover:bg-slate-100/80',
              index % 2 === 0 ? 'bg-white' : 'bg-slate-50/70'
            ]"
          >
            <td class="px-8 py-5 whitespace-nowrap">
              <div class="flex items-center">
                <div class="h-12 w-12 flex-shrink-0 bg-gradient-to-br from-slate-200 to-slate-300 rounded-xl overflow-hidden mr-4 shadow-sm border border-slate-300/50">
                  <img 
                    :src="vehicle.imageUrl" 
                    :alt="`${vehicle.make} ${vehicle.model}`"
                    class="h-full w-full object-cover"
                  />
                </div>
                <div>
                  <div class="font-bold text-slate-900 text-lg">{{ vehicle.make }} {{ vehicle.model }}</div>
                  <div class="text-sm text-slate-600 mt-1">ID: {{ vehicle.id }} • Asset</div>
                </div>
              </div>
            </td>
            <td class="px-8 py-5 whitespace-nowrap">
              <div class="flex items-center space-x-3">
                <img 
                  :src="getCountryFlag(vehicle.make)" 
                  :alt="`${vehicle.make} origin flag`"
                  class="w-6 h-4 rounded-sm shadow-md border border-slate-300"
                />
                <div>
                  <div class="font-mono font-bold text-slate-900 text-lg tracking-wider">{{ vehicle.licensePlate }}</div>
                  <div class="text-xs text-slate-500 mt-1">Registered</div>
                </div>
              </div>
            </td>
            <td class="px-8 py-5 whitespace-nowrap">
              <div class="text-center">
                <div class="text-2xl font-bold text-slate-900">{{ vehicle.year }}</div>
                <div class="text-xs text-slate-500 mt-1">Model Year</div>
              </div>
            </td>
            <td class="px-8 py-5 whitespace-nowrap">
              <div class="text-center">
                <div class="text-2xl font-bold text-slate-900">{{ formatMileage(vehicle.mileage) }}</div>
                <div class="text-xs text-slate-500 mt-1">km</div>
              </div>
            </td>
            <td class="px-8 py-5 whitespace-nowrap">
              <span :class="[
                'px-4 py-2 rounded-full text-sm font-semibold shadow-sm',
                vehicle.fuelType === 'Electric' ? 'bg-emerald-100 text-emerald-800 border border-emerald-300' :
                vehicle.fuelType === 'Diesel' ? 'bg-blue-100 text-blue-800 border border-blue-300' :
                'bg-amber-100 text-amber-800 border border-amber-300'
              ]">
                {{ vehicle.fuelType }}
              </span>
            </td>
            <td class="px-8 py-5 whitespace-nowrap">
              <div class="space-y-2">
                <!-- Data Status Badge -->
                <div class="flex items-center">
                  <span
                    :class="['px-3 py-1.5 rounded-full text-xs font-semibold flex items-center', statusColors[vehicle.data_status || vehicle.status] || 'bg-slate-100 text-slate-800 border border-slate-300']"
                  >
                    <span
                      class="w-2 h-2 rounded-full mr-2"
                      :class="{
                        'bg-emerald-500': (vehicle.data_status || vehicle.status) === 'OK' || (vehicle.data_status || vehicle.status) === 'verified',
                        'bg-blue-500': (vehicle.data_status || vehicle.status) === 'Service Due' || (vehicle.data_status || vehicle.status) === 'active',
                        'bg-rose-500': (vehicle.data_status || vehicle.status) === 'Warning',
                        'bg-yellow-500': (vehicle.data_status || vehicle.status) === 'draft',
                        'bg-gray-500': (vehicle.data_status || vehicle.status) === 'pending',
                        'bg-orange-500': (vehicle.data_status || vehicle.status) === 'incomplete'
                      }"
                    ></span>
                    {{ vehicle.data_status || vehicle.status }}
                  </span>
                </div>
                
                <!-- Profile Completion Mini Progress Bar -->
                <div v-if="vehicle.profile_completion_percentage !== undefined" class="flex items-center space-x-2">
                  <div class="w-16 bg-gray-200 rounded-full h-1.5">
                    <div
                      class="h-1.5 rounded-full transition-all duration-300"
                      :class="{
                        'bg-yellow-500': (vehicle.profile_completion_percentage || 0) < 50,
                        'bg-blue-500': (vehicle.profile_completion_percentage || 0) >= 50 && (vehicle.profile_completion_percentage || 0) < 80,
                        'bg-green-500': (vehicle.profile_completion_percentage || 0) >= 80
                      }"
                      :style="{ width: (vehicle.profile_completion_percentage || 0) + '%' }"
                    ></div>
                  </div>
                  <span class="text-xs text-gray-600 font-medium">{{ vehicle.profile_completion_percentage || 0 }}%</span>
                </div>
              </div>
            </td>
            <td class="px-8 py-5 whitespace-nowrap">
              <div class="text-center">
                <div class="text-2xl font-bold text-slate-900">{{ formatCurrency(vehicle.monthlyExpense) }}</div>
                <div class="text-xs text-slate-500 mt-1">per month</div>
              </div>
            </td>
            <td class="px-8 py-5 whitespace-nowrap">
              <div class="flex space-x-2">
                <button class="px-4 py-2.5 bg-gradient-to-r from-blue-600 to-cyan-600 hover:from-blue-700 hover:to-cyan-700 text-white font-medium rounded-xl text-sm transition-all duration-200 active:scale-95 shadow-md hover:shadow-lg">
                  View Details
                </button>
                <button class="px-3 py-2.5 border border-slate-300 hover:bg-slate-100 rounded-xl text-slate-700 transition-all duration-200 active:scale-95 shadow-sm hover:shadow">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                    <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
                  </svg>
                </button>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- Corporate Footer -->
    <div class="px-8 py-5 border-t border-gray-300/30 bg-gradient-to-r from-slate-100 to-slate-200/80">
      <div class="flex justify-between items-center">
        <div class="text-sm text-slate-700">
          <span class="font-semibold">Showing {{ vehicles.length }} of {{ vehicles.length }} corporate assets</span>
          <span class="mx-2">•</span>
          <span>Last updated: {{ new Date().toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) }}</span>
        </div>
        <div class="flex space-x-3">
          <button class="px-5 py-2.5 border border-slate-300 hover:bg-white text-slate-700 font-medium rounded-xl text-sm transition-all duration-200 active:scale-95 shadow-sm hover:shadow flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
            </svg>
            Export CSV
          </button>
          <button class="px-5 py-2.5 bg-gradient-to-r from-emerald-600 to-emerald-700 hover:from-emerald-700 hover:to-emerald-800 text-white font-medium rounded-xl text-sm transition-all duration-200 active:scale-95 shadow-md hover:shadow-lg flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
            </svg>
            Add Vehicle
          </button>
          <button class="px-5 py-2.5 bg-gradient-to-r from-slate-700 to-slate-800 hover:from-slate-800 hover:to-slate-900 text-white font-medium rounded-xl text-sm transition-all duration-200 active:scale-95 shadow-md hover:shadow-lg flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
            </svg>
            Analytics
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* Custom table styles */
table {
  border-spacing: 0;
}

/* Smooth row transitions */
tr {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Custom scrollbar for table */
.overflow-x-auto::-webkit-scrollbar {
  height: 8px;
}

.overflow-x-auto::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 4px;
}

.overflow-x-auto::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

.overflow-x-auto::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}
</style>