<template>
  <div class="admin-drivers">
    <div class="header">
      <button class="back-link" @click="$router.push('/admin')">← Volver al Panel</button>
      <h1>Gestión de Conductores y Taxis</h1>
      <div class="header-actions">
        <button class="btn-primary" @click="openRegisterModal">
          <span class="material-icons">add</span>
          {{ activeTab === 'drivers' ? 'Nuevo Conductor' : 'Nuevo Taxi' }}
        </button>
      </div>
    </div>

    <!-- Tabs -->
    <div class="tabs">
      <button 
        :class="{ active: activeTab === 'drivers' }" 
        @click="activeTab = 'drivers'"
      >
        <span class="material-icons">badge</span>
        Conductores de la App
      </button>
      <button 
        :class="{ active: activeTab === 'taxis' }" 
        @click="activeTab = 'taxis'"
      >
        <span class="material-icons">local_taxi</span>
        Directorio de Taxis
      </button>
    </div>

    <div v-if="isLoading" class="loading">Cargando...</div>

    <!-- Drivers Tab -->
    <div v-else-if="activeTab === 'drivers'" class="content">
      <div v-if="activeDrivers.length > 0" class="items-grid">
        <div v-for="driver in activeDrivers" :key="driver.id" class="item-card" @click="viewDriverDetails(driver.id)">
          <div class="card-header">
            <div class="avatar">
              <img v-if="driver.driver_profile?.photo_url" :src="backendUrl + driver.driver_profile.photo_url" alt="Avatar">
              <span v-else class="material-icons">account_circle</span>
            </div>
            <div class="info">
              <h3>{{ driver.full_name }}</h3>
              <p class="email">{{ driver.email }}</p>
              <div class="badges">
                <span class="badge" :class="driver.driver_profile?.vehicle_type">
                  {{ driver.driver_profile?.vehicle_type === 'taxi' ? 'Taxi' : 'Autobús' }}
                </span>
                <span class="badge plate">{{ driver.driver_profile?.license_plate }}</span>
                <span v-if="driver.driver_profile?.speaks_english" class="badge english">🌐 Inglés</span>
              </div>
            </div>
            <span class="material-icons">chevron_right</span>
          </div>
        </div>
      </div>
      <div v-else class="empty-state">
        <span class="material-icons">badge</span>
        <p>No hay conductores registrados en la app</p>
      </div>
    </div>

    <!-- Taxis Tab -->
    <div v-else-if="activeTab === 'taxis'" class="content">
      <div v-if="taxis.length > 0" class="items-grid">
        <div v-for="taxi in taxis" :key="taxi.id" class="item-card taxi-card">
          <div class="card-header">
            <div class="avatar">
              <img v-if="taxi.image_url" :src="getImageUrl(taxi.image_url)" alt="Taxi">
              <span v-else class="material-icons">local_taxi</span>
            </div>
            <div class="info">
              <h3>{{ taxi.owner_name }}</h3>
              <p class="phone">📞 {{ taxi.phone_number }}</p>
              <div class="badges">
                <span class="badge plate">{{ taxi.license_plate }}</span>
                <span class="badge">{{ taxi.corregimiento }}</span>
                <span class="badge">{{ getShiftLabel(taxi.shift) }}</span>
                <span v-if="taxi.english_speaking" class="badge english">🌐 Inglés</span>
              </div>
              <div class="taxi-meta">
                <span class="rating">⭐ {{ taxi.rating || 5.0 }}</span>
                <span v-if="taxi.cooperative" class="cooperative">{{ taxi.cooperative }}</span>
                <span :class="taxi.is_active ? 'status-active' : 'status-inactive'">
                  {{ taxi.is_active ? '● Activo' : '○ Inactivo' }}
                </span>
              </div>
            </div>
            <div class="card-actions">
              <button class="btn-icon" @click.stop="editTaxi(taxi)" title="Editar">
                <span class="material-icons">edit</span>
              </button>
              <button class="btn-icon delete" @click.stop="deleteTaxi(taxi)" title="Eliminar">
                <span class="material-icons">delete</span>
              </button>
            </div>
          </div>
        </div>
      </div>
      <div v-else class="empty-state">
        <span class="material-icons">local_taxi</span>
        <p>No hay taxis en el directorio</p>
      </div>
    </div>

    <!-- Driver Details Modal -->
    <div v-if="selectedUser" class="modal-overlay" @click.self="selectedUser = null">
      <div class="modal">
        <div class="modal-header">
          <h2>Detalles del Conductor</h2>
          <button @click="selectedUser = null">&times;</button>
        </div>
        
        <div class="modal-body">
          <section class="basic-info">
            <p><strong>ID:</strong> {{ selectedUser.id }}</p>
            <p><strong>Nombre:</strong> {{ selectedUser.full_name }}</p>
            <p><strong>Correo:</strong> {{ selectedUser.email }}</p>
            <p><strong>Registrado el:</strong> {{ formatDate(selectedUser.created_at) }}</p>
          </section>

          <section v-if="selectedUser.driver_profile" class="driver-info">
            <h3>Perfil del Conductor</h3>
            <div class="info-grid">
               <p><strong>Cédula:</strong> {{ selectedUser.driver_profile.cedula }}</p>
               <p><strong>Placa:</strong> {{ selectedUser.driver_profile.license_plate }}</p>
               <p><strong>Tipo:</strong> {{ selectedUser.driver_profile.vehicle_type === 'taxi' ? 'Taxi' : 'Autobús' }}</p>
               <p v-if="selectedUser.driver_profile.cooperative_name"><strong>Cooperativa:</strong> {{ selectedUser.driver_profile.cooperative_name }}</p>
               <p v-if="selectedUser.driver_profile.shift"><strong>Horario:</strong> {{ selectedUser.driver_profile.shift }}</p>
               <p v-if="selectedUser.driver_profile.payment_methods"><strong>Pagos:</strong> {{ selectedUser.driver_profile.payment_methods }}</p>
               <p><strong>Inglés:</strong> {{ selectedUser.driver_profile.speaks_english ? 'Sí' : 'No' }}</p>
            </div>
            
            <div class="photo-viewer">
              <div v-if="selectedUser.driver_profile.photo_url">
                <label>Foto de Perfil:</label>
                <img :src="backendUrl + selectedUser.driver_profile.photo_url" alt="Perfil">
              </div>
              <div v-if="selectedUser.driver_profile.vehicle_photo_url">
                <label>Foto de Vehículo:</label>
                <img :src="backendUrl + selectedUser.driver_profile.vehicle_photo_url" alt="Vehículo">
              </div>
            </div>
          </section>
        </div>
      </div>
    </div>

    <!-- Register/Edit Modal -->
    <div v-if="showModal" class="modal-overlay" @click.self="closeModal">
      <div class="modal large">
        <div class="modal-header">
          <h2>{{ modalTitle }}</h2>
          <button @click="closeModal">&times;</button>
        </div>
        
        <div class="modal-body">
          <!-- Driver Registration Form -->
          <form v-if="modalMode === 'driver'" @submit.prevent="handleRegisterDriver" class="register-form">
            <div class="vehicle-tabs">
              <button type="button" :class="{ active: driverForm.vehicle_type === 'taxi' }" @click="driverForm.vehicle_type = 'taxi'">Taxi</button>
              <button type="button" :class="{ active: driverForm.vehicle_type === 'bus' }" @click="driverForm.vehicle_type = 'bus'">Autobús</button>
            </div>

            <div class="form-grid">
              <div class="form-group">
                <label>Nombre Completo</label>
                <input v-model="driverForm.full_name" type="text" placeholder="Ej: Juan Pérez" required>
              </div>
              <div class="form-group">
                <label>Correo Electrónico</label>
                <input v-model="driverForm.email" type="email" placeholder="juan@correo.com" required>
              </div>
              <div class="form-group">
                <label>Teléfono</label>
                <input v-model="driverForm.phone_number" type="tel" placeholder="+507 1234-5678" required>
              </div>
              <div class="form-group">
                <label>Contraseña</label>
                <input v-model="driverForm.password" type="password" placeholder="********" required>
              </div>
              <div class="form-group">
                <label>Cédula</label>
                <input v-model="driverForm.cedula" type="text" placeholder="1-234-567" required>
              </div>
              <div class="form-group">
                <label>Matrícula (Placa)</label>
                <input v-model="driverForm.license_plate" type="text" placeholder="ABC-123" required>
              </div>
              <div class="form-group">
                <label>Nombre de Cooperativa</label>
                <input v-model="driverForm.cooperative_name" type="text" placeholder="Coope Rápido">
              </div>
            </div>

            <div class="options-row">
                <div v-if="driverForm.vehicle_type === 'taxi'" class="option-block">
                  <label class="section-label">Horario</label>
                  <div class="checkbox-group">
                    <label v-for="s in ['Dia', 'Tarde', 'Noche', 'Aeropuerto']" :key="s" class="checkbox-item">
                      <input type="checkbox" v-model="driverForm.selectedShifts" :value="s">
                      <span>{{ s }}</span>
                    </label>
                  </div>
                </div>

                <div class="option-block">
                  <label class="section-label">Método de Pago</label>
                  <div class="checkbox-group">
                    <label v-for="p in ['Efectivo', 'Yappi', 'Tarjeta']" :key="p" class="checkbox-item">
                      <input type="checkbox" v-model="driverForm.selectedPayments" :value="p">
                      <span>{{ p }}</span>
                    </label>
                  </div>
                </div>

                <div class="option-block">
                  <label class="section-label">Idiomas</label>
                  <div class="checkbox-group">
                    <label class="checkbox-item">
                      <input type="checkbox" v-model="driverForm.speaksEnglish">
                      <span>Habla Inglés</span>
                    </label>
                  </div>
                </div>
            </div>

            <div class="file-inputs">
              <div class="form-group">
                <label>Foto de Perfil</label>
                <input type="file" @change="e => handleFileChange(e, 'profile')" accept="image/*">
              </div>
              <div class="form-group">
                <label>Foto del Vehículo</label>
                <input type="file" @change="e => handleFileChange(e, 'vehicle')" accept="image/*" required>
              </div>
            </div>

            <p v-if="registerError" class="error-text">{{ registerError }}</p>

            <div class="form-actions">
              <button type="button" class="btn-secondary" @click="closeModal">Cancelar</button>
              <button type="submit" class="btn-primary" :disabled="isRegistering">
                {{ isRegistering ? 'Registrando...' : 'Registrar Conductor' }}
              </button>
            </div>
          </form>

          <!-- Taxi Form -->
          <form v-else-if="modalMode === 'taxi'" @submit.prevent="saveTaxi">
            <div class="form-grid">
              <div class="form-group">
                <label>Nombre del Conductor *</label>
                <input v-model="taxiForm.owner_name" type="text" placeholder="Juan Pérez" required>
              </div>
              
              <div class="form-group">
                <label>Teléfono *</label>
                <input v-model="taxiForm.phone_number" type="tel" placeholder="+507 1234-5678" required>
              </div>
              
              <div class="form-group">
                <label>Placa del Vehículo *</label>
                <input v-model="taxiForm.license_plate" type="text" placeholder="CHI-1234" required>
              </div>
              
              <div class="form-group">
                <label>Zona de Servicio *</label>
                <select v-model="taxiForm.corregimiento" required>
                  <option value="">Seleccionar...</option>
                  <option value="Boquete">Boquete</option>
                  <option value="David - Boquete">David - Boquete</option>
                  <option value="Boquete - David">Boquete - David</option>
                  <option value="Aeropuerto - Boquete">Aeropuerto - Boquete</option>
                </select>
              </div>
              
              <div class="form-group">
                <label>Horario *</label>
                <select v-model="taxiForm.shift" required>
                  <option value="">Seleccionar...</option>
                  <option value="dia">Día</option>
                  <option value="tarde">Tarde</option>
                  <option value="noche">Noche</option>
                </select>
              </div>
              
              <div class="form-group">
                <label>Cooperativa</label>
                <input v-model="taxiForm.cooperative" type="text" placeholder="Cooperativa Boquete">
              </div>
              
              <div class="form-group">
                <label>Rating (1-5)</label>
                <input v-model.number="taxiForm.rating" type="number" min="1" max="5" step="0.1" placeholder="5.0">
              </div>
              
              <div class="form-group checkbox-group">
                <label>
                  <input v-model="taxiForm.english_speaking" type="checkbox">
                  <span>Habla Inglés</span>
                </label>
              </div>
              
              <div class="form-group checkbox-group">
                <label>
                  <input v-model="taxiForm.is_active" type="checkbox">
                  <span>Activo en el directorio</span>
                </label>
              </div>
              
              <div class="form-group full-width">
                <label>Foto del Conductor</label>
                <input type="file" @change="handleTaxiFileChange" accept="image/*">
                <small>Opcional - Foto para el directorio público</small>
              </div>
            </div>

            <p v-if="taxiError" class="error-text">{{ taxiError }}</p>

            <div class="form-actions">
              <button type="button" class="btn-secondary" @click="closeModal">Cancelar</button>
              <button type="submit" class="btn-primary" :disabled="isSaving">
                {{ isSaving ? 'Guardando...' : 'Guardar' }}
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive, computed } from 'vue'
import { usersService } from '@/services/usersService'
import { authService } from '@/services/authService'
import { apiClient, API_URL } from '@/services/apiClient'

const activeTab = ref<'drivers' | 'taxis'>('drivers')
const isLoading = ref(false)
const activeDrivers = ref<any[]>([])
const taxis = ref<any[]>([])
const selectedUser = ref<any>(null)
const backendUrl = API_URL

// Modal state
const showModal = ref(false)
const modalMode = ref<'driver' | 'taxi'>('driver')
const editingTaxi = ref<any>(null)

// Driver registration
const isRegistering = ref(false)
const registerError = ref('')
const driverForm = reactive({
  full_name: '',
  email: '',
  phone_number: '',
  password: '',
  cedula: '',
  license_plate: '',
  vehicle_type: 'taxi' as 'taxi' | 'bus',
  cooperative_name: '',
  selectedShifts: [] as string[],
  selectedPayments: [] as string[],
  speaksEnglish: false
})
const profilePhoto = ref<File | null>(null)
const vehiclePhoto = ref<File | null>(null)

// Taxi form
const isSaving = ref(false)
const taxiError = ref('')
const photoFile = ref<File | null>(null)
const taxiForm = reactive({
  owner_name: '',
  phone_number: '',
  license_plate: '',
  corregimiento: '',
  shift: '',
  cooperative: '',
  rating: 5.0,
  english_speaking: false,
  is_active: true
})

const modalTitle = computed(() => {
  if (modalMode.value === 'driver') return 'Registrar Nuevo Conductor'
  return editingTaxi.value ? 'Editar Taxi' : 'Nuevo Taxi'
})

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

async function loadData() {
  isLoading.value = true
  try {
    // Load drivers
    const searchRes = await usersService.searchUsers('')
    activeDrivers.value = searchRes.filter((u: any) => u.role === 'driver')
    
    // Load taxis
    const taxisRes = await apiClient.get('/api/taxis', {
      params: { is_active: undefined }
    })
    taxis.value = taxisRes.data
  } catch (e) {
    console.error(e)
  } finally {
    isLoading.value = false
  }
}

function openRegisterModal() {
  modalMode.value = activeTab.value === 'drivers' ? 'driver' : 'taxi'
  showModal.value = true
}

function closeModal() {
  showModal.value = false
  editingTaxi.value = null
  photoFile.value = null
  registerError.value = ''
  taxiError.value = ''
}

async function viewDriverDetails(userId: string) {
  try {
    selectedUser.value = await usersService.getUserDetails(userId)
  } catch (e) {
    alert('Error al cargar detalles')
  }
}

const handleFileChange = (event: Event, type: 'profile' | 'vehicle') => {
  const target = event.target as HTMLInputElement
  if (target.files && target.files[0]) {
    if (type === 'profile') profilePhoto.value = target.files[0]
    else vehiclePhoto.value = target.files[0]
  }
}

const handleRegisterDriver = async () => {
  isRegistering.value = true
  registerError.value = ''
  
  try {
    const formData = new FormData()
    formData.append('full_name', driverForm.full_name)
    formData.append('email', driverForm.email)
    formData.append('phone_number', driverForm.phone_number)
    formData.append('password', driverForm.password)
    formData.append('cedula', driverForm.cedula)
    formData.append('vehicle_type', driverForm.vehicle_type)
    formData.append('license_plate', driverForm.license_plate)
    formData.append('speaks_english', String(driverForm.speaksEnglish))
    
    if (driverForm.cooperative_name) formData.append('cooperative_name', driverForm.cooperative_name)
    if (profilePhoto.value) formData.append('profile_photo', profilePhoto.value)
    if (vehiclePhoto.value) formData.append('vehicle_photo', vehiclePhoto.value)
    
    if (driverForm.selectedShifts.length > 0) formData.append('shift', driverForm.selectedShifts.join(','))
    if (driverForm.selectedPayments.length > 0) formData.append('payment_methods', driverForm.selectedPayments.join(','))
    
    await authService.registerDriver(formData)
    
    closeModal()
    Object.assign(driverForm, { 
       full_name: '', email: '', phone_number: '', password: '', cedula: '', 
       license_plate: '', vehicle_type: 'taxi', cooperative_name: '',
       selectedShifts: [], selectedPayments: [], speaksEnglish: false 
    })
    profilePhoto.value = null
    vehiclePhoto.value = null
    
    await loadData()
  } catch (e: any) {
    registerError.value = e.response?.data?.detail || 'Error al registrar conductor'
  } finally {
    isRegistering.value = false
  }
}

function editTaxi(taxi: any) {
  editingTaxi.value = taxi
  modalMode.value = 'taxi'
  Object.assign(taxiForm, {
    owner_name: taxi.owner_name,
    phone_number: taxi.phone_number,
    license_plate: taxi.license_plate,
    corregimiento: taxi.corregimiento,
    shift: taxi.shift,
    cooperative: taxi.cooperative || '',
    rating: taxi.rating || 5.0,
    english_speaking: taxi.english_speaking || false,
    is_active: taxi.is_active
  })
  photoFile.value = null
  taxiError.value = ''
  showModal.value = true
}

function handleTaxiFileChange(event: Event) {
  const target = event.target as HTMLInputElement
  if (target.files && target.files[0]) {
    photoFile.value = target.files[0]
  }
}

async function saveTaxi() {
  isSaving.value = true
  taxiError.value = ''
  
  try {
    const formData = new FormData()
    formData.append('owner_name', taxiForm.owner_name)
    formData.append('phone_number', taxiForm.phone_number)
    formData.append('license_plate', taxiForm.license_plate)
    formData.append('corregimiento', taxiForm.corregimiento)
    formData.append('shift', taxiForm.shift)
    formData.append('rating', String(taxiForm.rating))
    formData.append('english_speaking', String(taxiForm.english_speaking))
    formData.append('is_active', String(taxiForm.is_active))
    
    if (taxiForm.cooperative) formData.append('cooperative', taxiForm.cooperative)
    if (photoFile.value) formData.append('image', photoFile.value)
    
    if (editingTaxi.value) {
      await apiClient.put(`/api/taxis/${editingTaxi.value.id}`, formData, {
        headers: { 'Content-Type': 'multipart/form-data' }
      })
    } else {
      await apiClient.post('/api/taxis', formData, {
        headers: { 'Content-Type': 'multipart/form-data' }
      })
    }
    
    closeModal()
    Object.assign(taxiForm, {
      owner_name: '', phone_number: '', license_plate: '', corregimiento: '',
      shift: '', cooperative: '', rating: 5.0, english_speaking: false, is_active: true
    })
    await loadData()
  } catch (e: any) {
    taxiError.value = e.response?.data?.detail || 'Error al guardar el taxi'
    console.error('Error saving taxi:', e)
  } finally {
    isSaving.value = false
  }
}

async function deleteTaxi(taxi: any) {
  if (!confirm(`¿Eliminar a ${taxi.owner_name} del directorio?`)) return
  
  try {
    await apiClient.delete(`/api/taxis/${taxi.id}`)
    await loadData()
  } catch (e) {
    alert('Error al eliminar el taxi')
    console.error('Error deleting taxi:', e)
  }
}

function getShiftLabel(shift: string) {
  const labels: Record<string, string> = {
    'dia': 'Día',
    'tarde': 'Tarde',
    'noche': 'Noche'
  }
  return labels[shift] || shift
}

function getImageUrl(path: string) {
  if (path.startsWith('http')) return path
  return `${API_URL}${path.startsWith('/') ? '' : '/'}${path}`
}

function formatDate(dateStr: string) {
  return new Date(dateStr).toLocaleDateString('es-PA')
}
</script>

<style scoped>
.admin-drivers {
  padding: 24px;
  background: var(--bg-primary);
  min-height: 100vh;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  gap: 16px;
  flex-wrap: wrap;
}

.back-link {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 8px;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.back-link:hover {
  background: var(--hover-bg);
  border-color: var(--accent-color);
  color: var(--accent-color);
  transform: translateX(-2px);
}

h1 {
  flex: 1;
  font-size: 28px;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
}

.btn-primary {
  background: var(--accent-color);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.2s;
}

.btn-primary:hover {
  background: var(--accent-hover);
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Tabs */
.tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  border-bottom: 2px solid var(--border-color);
}

.tabs button {
  background: transparent;
  border: none;
  padding: 12px 24px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: all 0.2s;
}

.tabs button:hover {
  color: var(--text-primary);
}

.tabs button.active {
  color: var(--accent-color);
  border-bottom-color: var(--accent-color);
}

.loading, .empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-secondary);
}

.empty-state .material-icons {
  font-size: 64px;
  margin-bottom: 16px;
  opacity: 0.3;
}

/* Items Grid */
.items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 16px;
}

.item-card {
  background: var(--card-bg);
  border-radius: 12px;
  padding: 16px;
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 8px var(--shadow);
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
}

.item-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px var(--shadow);
}

.taxi-card {
  cursor: default;
}

.card-header {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 2px solid var(--border-color);
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar .material-icons {
  font-size: 32px;
  color: var(--text-secondary);
}

.info {
  flex: 1;
}

.info h3 {
  margin: 0 0 4px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.email, .phone {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin: 4px 0;
}

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.badge {
  background: var(--bg-secondary);
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.badge.taxi {
  background: #fee715;
  color: #101820;
  border-color: #fee715;
}

.badge.bus {
  background: var(--accent-color);
  color: white;
  border-color: var(--accent-color);
}

.badge.plate {
  font-family: 'Courier New', monospace;
}

.badge.english {
  background: #4a90e2;
  color: white;
  border-color: #4a90e2;
}

.taxi-meta {
  display: flex;
  gap: 12px;
  margin-top: 8px;
  font-size: 0.85rem;
}

.rating {
  color: #fee715;
  font-weight: 600;
}

.cooperative {
  color: var(--text-secondary);
}

.status-active {
  color: var(--accent-color);
  font-weight: 600;
}

.status-inactive {
  color: var(--text-secondary);
}

.card-actions {
  display: flex;
  gap: 8px;
  flex-direction: column;
}

.btn-icon {
  background: transparent;
  border: 1px solid var(--border-color);
  width: 36px;
  height: 36px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  color: var(--text-secondary);
}

.btn-icon:hover {
  background: var(--hover-bg);
  color: var(--text-primary);
}

.btn-icon.delete:hover {
  background: #fee;
  border-color: #f44;
  color: #f44;
}

/* Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.modal {
  background: var(--card-bg);
  border-radius: 16px;
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.modal.large {
  max-width: 800px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  background: var(--card-bg);
  z-index: 10;
}

.modal-header h2 {
  margin: 0;
  font-size: 1.5rem;
  color: var(--text-primary);
}

.modal-header button {
  background: transparent;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  color: var(--text-secondary);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: all 0.2s;
}

.modal-header button:hover {
  background: var(--hover-bg);
  color: var(--text-primary);
}

.modal-body {
  padding: 24px;
}

/* Form Styles */
.vehicle-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
}

.vehicle-tabs button {
  flex: 1;
  padding: 12px;
  border: 2px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.vehicle-tabs button.active {
  border-color: var(--accent-color);
  background: var(--accent-color);
  color: white;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group.full-width {
  grid-column: 1 / -1;
}

.form-group.checkbox-group {
  flex-direction: row;
  align-items: center;
}

.form-group.checkbox-group label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.form-group label {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.9rem;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="password"],
.form-group input[type="number"],
.form-group select {
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 1rem;
  transition: border-color 0.2s;
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--accent-color);
}

.form-group input[type="file"] {
  padding: 8px;
  border: 1px dashed var(--border-color);
  border-radius: 8px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  cursor: pointer;
}

.form-group small {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.options-row {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.option-block {
  flex: 1;
  min-width: 200px;
}

.section-label {
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
  display: block;
}

.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.checkbox-item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: var(--text-primary);
}

.file-inputs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.error-text {
  color: #f44;
  margin: 16px 0;
  padding: 12px;
  background: #fee;
  border-radius: 8px;
  font-size: 0.9rem;
}

.form-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 24px;
}

.btn-secondary {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-secondary:hover {
  background: var(--hover-bg);
}

/* Driver Details */
.basic-info, .driver-info {
  margin-bottom: 24px;
}

.driver-info h3 {
  margin: 0 0 16px;
  color: var(--text-primary);
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.info-grid p {
  margin: 0;
  color: var(--text-primary);
}

.photo-viewer {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 16px;
}

.photo-viewer label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.photo-viewer img {
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

@media (max-width: 768px) {
  .form-grid, .info-grid, .file-inputs, .photo-viewer {
    grid-template-columns: 1fr;
  }
  
  .items-grid {
    grid-template-columns: 1fr;
  }
  
  .header {
    flex-direction: column;
    align-items: stretch;
  }
  
  h1 {
    font-size: 1.5rem;
  }
}
</style>
