<template>
    <div>
        <div v-if="loading" class="row">
            <div class="col-12 tx-semibold text-center text-default">
                <span class="spinner-border spinner-border-sm"></span>
            </div>
        </div>
        <Form v-if="!loading" @submit="onSubmit" :validation-schema="schema" v-slot="{ errors, isSubmitting }"
            class="row">
            <div class="col-6">
                <div class="form-group mb-3">
                    <label>Biển số <span class="text-danger">*</span></label>
                    <Field v-model="truckModel.LicensePlate" name="LicensePlate" type="text" class="form-control"
                        placeholder="Biển số xe tải" :class="{ 'is-invalid': errors.LicensePlate }" />
                    <div class="invalid-feedback">{{ errors.LicensePlate }}</div>
                </div>
            </div>
            <div class="col-6">
                <div class="form-group mb-3">
                    <label>Chi nhánh <span class="text-danger">*</span></label>
                    <v-select label="Label" :options="agencies" v-model="truckModel.AgencyId"
                        :reduce="(option) => option.Id" :filterable="false">
                        <template v-slot:no-options="{ search, searching }">
                            <template v-if="searching">
                                Không có kết quả cho <em>{{ search }}</em>.
                            </template>
                            <span v-else style="opacity: 0.8">Không có bản ghi nào</span>
                        </template>
                    </v-select>
                    <Field v-model="truckModel.AgencyId" name="Agency" type="hidden" />
                    <ErrorMessage class="invalid-error" name="Agency" />
                </div>
            </div>
            <div class="col-6">
                <div class="form-group mb-3">
                    <label>Thương hiệu</label>
                    <Field v-model="truckModel.Brand" name="Brand" type="text" class="form-control"
                        placeholder="VD: Kia, Hyundai, Isuzu" :class="{ 'is-invalid': errors.Brand }" />
                    <div class="invalid-feedback">{{ errors.Brand }}</div>
                </div>
            </div>
            <div class="col-6">
                <div class="form-group mb-3">
                    <label>Model xe</label>
                    <Field v-model="truckModel.Model" name="Model" type="text" class="form-control"
                        placeholder="VD: K200, Porter, D-Max" :class="{ 'is-invalid': errors.Model }" />
                    <div class="invalid-feedback">{{ errors.Model }}</div>
                </div>
            </div>
            
            <!-- Các field chỉ hiển thị khi CREATE mode -->
            <div v-if="truckModel.Id === 0" class="col-6">
                <div class="form-group mb-3">
                    <label>Tải xế hiện tại</label>
                    <v-select label="UserName" :options="drivers" v-model="truckModel.CurrentDriverId"
                        :reduce="(option) => option.Id"
                        :disabled="truckModel.AgencyId == null || truckModel.AgencyId == 0" @search="getDriver">
                        <template #option="{ FullName, PhoneNumber, UserName }">
                            <div class="mt-0 pb-1">
                                <h5 class="mb-1 tx-14">
                                    {{ FullName }}
                                </h5>
                                <p class="mb-0 tx-13">
                                    <span>
                                        <i class="fas fa-phone tx-11"></i>
                                        {{ PhoneNumber }}
                                    </span>
                                    <span class="mg-l-10">
                                        <i class="fas fa-user tx-11"></i>
                                        {{ UserName }}
                                    </span>
                                </p>
                            </div>
                        </template>
                        <template #selected-option="{ FullName, PhoneNumber }">
                            <div style="display: flex; align-items: baseline">
                                <strong>{{ FullName }}</strong>
                                <small style="margin-left: 0.5rem">{{ PhoneNumber }}</small>
                            </div>
                        </template>
                    </v-select>
                </div>
            </div>
            <div class="col-6">
                <div class="form-group mb-3">
                    <label>Tải trọng tối đa (tấn)</label>
                    <Field v-model="truckModel.MaxPayload" name="MaxPayload" type="number" step="0.1"
                        class="form-control" placeholder="VD: 5.5" :class="{ 'is-invalid': errors.MaxPayload }" />
                    <div class="invalid-feedback">{{ errors.MaxPayload }}</div>
                </div>
            </div>
            <div class="col-6">
                <div class="form-group mb-3">
                    <label>Kích thước thùng hàng (cm)</label>
                    <div class="row g-2">
                        <div class="col-4">
                            <Field v-model="truckModel.CargoLength" name="CargoLength" type="number" 
                                class="form-control" placeholder="Dài" :class="{ 'is-invalid': errors.CargoLength }" />
                            <div class="invalid-feedback">{{ errors.CargoLength }}</div>
                        </div>
                        <div class="col-4">
                            <Field v-model="truckModel.CargoWidth" name="CargoWidth" type="number" 
                                class="form-control" placeholder="Rộng" :class="{ 'is-invalid': errors.CargoWidth }" />
                            <div class="invalid-feedback">{{ errors.CargoWidth }}</div>
                        </div>
                        <div class="col-4">
                            <Field v-model="truckModel.CargoHeight" name="CargoHeight" type="number" 
                                class="form-control" placeholder="Cao" :class="{ 'is-invalid': errors.CargoHeight }" />
                            <div class="invalid-feedback">{{ errors.CargoHeight }}</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Trạng thái - CHỈ hiển thị khi CREATE mode -->
            <div v-if="truckModel.Id === 0" class="col-6">
                <div class="form-group mb-3">
                    <label>Trạng thái vận hành</label>
                    <v-select label="Name" :options="operatingStatusOptions" v-model="truckModel.OperatingStatus"
                        :reduce="(option) => option.Id"></v-select>
                </div>
            </div>
            <div v-if="truckModel.Id === 0" class="col-6">
                <div class="form-group mb-3">
                    <label>Trạng thái xe</label>
                    <v-select label="Name" :options="statusOptions" v-model="truckModel.Status"
                        :reduce="(option) => option.Id"></v-select>
                </div>
            </div>
            
            <div class="col-6">
                <div class="form-group mb-3">
                    <label>Năm sản xuất</label>
                    <Field v-model="truckModel.ManufacturingYear" name="ManufacturingYear" type="number"
                        class="form-control" placeholder="VD: 2020" :class="{ 'is-invalid': errors.ManufacturingYear }" />
                    <div class="invalid-feedback">{{ errors.ManufacturingYear }}</div>
                </div>
            </div>
            <div class="col-6">
                <div class="form-group mb-3">
                    <label>Định mức xăng dầu (lít/100km)</label>
                    <Field v-model="truckModel.FuelQuotaPer100Km" name="FuelQuotaPer100Km" type="number" step="0.1"
                        class="form-control" placeholder="VD: 11.5" :class="{ 'is-invalid': errors.FuelQuotaPer100Km }" />
                    <div class="invalid-feedback">{{ errors.FuelQuotaPer100Km }}</div>
                </div>
            </div>
            <div class="col-12">
                <div class="form-group mb-3">
                    <label>Thông tin đăng kiểm</label>
                    <Field v-model="truckModel.RegistrationInfo" name="RegistrationInfo" as="textarea" rows="2"
                        class="form-control" placeholder="VD: Đăng kiểm đến 31/12/2026"
                        :class="{ 'is-invalid': errors.RegistrationInfo }" />
                    <div class="invalid-feedback">{{ errors.RegistrationInfo }}</div>
                </div>
            </div>

            <!-- Gallery Upload Ảnh -->
            <div class="col-12">
                <div class="form-group mb-3">
                    <label>
                        <i class="fas fa-images text-primary me-2"></i>
                        Ảnh xe tải
                    </label>
                    
                    <!-- Upload Area -->
                    <div class="gallery-upload-area" @click="$refs.galleryInput.click()"
                        @dragover.prevent @drop.prevent="handleDrop">
                        <i class="fas fa-cloud-upload-alt fa-3x text-muted mb-2"></i>
                        <p class="mb-1 tx-14">Kéo thả ảnh vào đây hoặc click để chọn</p>
                        <small class="text-muted">JPG, PNG (Tối đa 5MB mỗi ảnh, tối đa 10 ảnh)</small>
                    </div>
                    <input ref="galleryInput" type="file" accept="image/*" multiple
                        @change="handleFileSelect($event)" style="display: none;" />
                    
                    <!-- Gallery Preview -->
                    <div v-if="photoGallery.length > 0" class="photo-gallery mt-3">
                        <div v-for="(photo, index) in photoGallery" :key="index" class="gallery-item">
                            <img :src="photo.preview" :alt="`Ảnh ${index + 1}`" class="gallery-img" />
                            
                            <!-- Type Selector Badge -->
                            <div class="gallery-type-badge" :class="getTypeBadgeClass(photo.mediaType)">
                                <i :class="getTypeIcon(photo.mediaType)" class="me-1"></i>
                                {{ getTypeName(photo.mediaType) }}
                            </div>
                            
                            <!-- Actions -->
                            <div class="gallery-actions">
                                <button type="button" class="btn-gallery-action" 
                                    @click="changePhotoType(index)" title="Đổi loại ảnh">
                                    <i class="fas fa-exchange-alt"></i>
                                </button>
                                <button type="button" class="btn-gallery-action btn-danger" 
                                    @click="removePhoto(index)" title="Xóa ảnh">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                            
                            <!-- Existing Photo Indicator -->
                            <div v-if="photo.isExisting" class="existing-badge">
                                <i class="fas fa-check-circle"></i> Đã lưu
                            </div>
                        </div>
                    </div>
                    
                    <!-- Photo Count -->
                    <div v-if="photoGallery.length > 0" class="mt-2 text-muted tx-13">
                        <i class="fas fa-info-circle me-1"></i>
                        Tổng: {{ photoGallery.length }} ảnh
                        ({{ getPhotoCountByType(20) }} đăng ký, {{ getPhotoCountByType(21) }} đăng kiểm)
                    </div>
                </div>
            </div>

            <div class="col-12 ">
                <div class="d-flex flex-row-reverse">
                    <button @click="cancel" type="button" class="btn btn-main-default mg-l-15">
                        Bỏ qua
                    </button>
                    <button type="submit" class="btn btn-main-primary" :disabled="isSubmitting">
                        <span v-show="isSubmitting" class="spinner-border spinner-border-sm"></span>
                        Xác nhận
                    </button>
                </div>
            </div>
        </Form>
    </div>
</template>
<script setup>

//#region Imports....
import { ref, onMounted, reactive, watch, inject } from 'vue';
import { Form, Field, ErrorMessage } from 'vee-validate';
import * as Yup from 'yup';

import truckService from "@/services/truckService";
import agentService from "@/services/agencyService";
import userService from "@/services/userService";
import apiPath from "@/infrastructure/apiPath";

import { useToast } from "vue-toastification";
const toast = useToast();
//#endregion


//#region props
const props = defineProps({
    id: Number
});

//#endregion

//#region Validations
const schema = Yup.object().shape({
    LicensePlate: Yup.string().required('Biển số không để trống').max(20, 'Biển số tối đa 20 ký tự'),
    Agency: Yup.number().min(1, 'Vui lòng chọn chi nhánh').required('Vui lòng chọn chi nhánh'),
    Brand: Yup.string().nullable().max(50, 'Thương hiệu tối đa 50 ký tự'),
    Model: Yup.string().nullable().max(50, 'Model xe tối đa 50 ký tự'),
    MaxPayload: Yup.number().nullable().min(0, 'Tải trọng phải lớn hơn 0'),
    CargoLength: Yup.number().nullable().min(0, 'Chiều dài phải lớn hơn 0'),
    CargoWidth: Yup.number().nullable().min(0, 'Chiều rộng phải lớn hơn 0'),
    CargoHeight: Yup.number().nullable().min(0, 'Chiều cao phải lớn hơn 0'),
    ManufacturingYear: Yup.number().nullable().min(1900, 'Năm sản xuất phải từ 1900').max(new Date().getFullYear() + 1, 'Năm sản xuất không hợp lệ'),
    RegistrationInfo: Yup.string().max(200, 'Thông tin đăng kiểm tối đa 200 ký tự'),
    FuelQuotaPer100Km: Yup.number().nullable().min(0, 'Định mức xăng dầu phải lớn hơn 0')
});
//#endregion

const emit = defineEmits(['cancel']);


//#region Methods
const loading = ref(false);


const agencies = reactive([]);
const drivers = reactive([]);

const operatingStatusOptions = reactive([
    { Id: 1, Name: "Đang Dừng / Đỗ" },
    { Id: 2, Name: "Đang Hoạt Động" },
    { Id: 3, Name: "Bảo Trì / Sửa Chữa" }
]);

const statusOptions = reactive([
    { Id: 1, Name: "Tốt" },
    { Id: 2, Name: "Cần được bảo dưỡng" },
    { Id: 3, Name: "Đang được bảo dưỡng" }
]);

let truckModel = reactive({
    Id: 0,
    LicensePlate: '',
    Brand: '',
    Model: '',
    AgencyId: null,
    MaxPayload: null,
    CargoLength: null,
    CargoWidth: null,
    CargoHeight: null,
    OperatingStatus: 1,
    Status: 1,
    CurrentDriverId: null,
    ManufacturingYear: null,
    RegistrationInfo: '',
    FuelQuotaPer100Km: null,
});

//#region Photo Gallery
const photoGallery = ref([]);
const baseMediaUrl = import.meta.env.VITE_API_BASE_URL?.replace('/api', '') || '';

const mediaTypeOptions = [
    { id: 20, name: 'Đăng ký', icon: 'fas fa-id-card', class: 'badge-registration' },
    { id: 21, name: 'Đăng kiểm', icon: 'fas fa-clipboard-check', class: 'badge-inspection' }
];

function handleFileSelect(event) {
    const files = Array.from(event.target.files);
    addFiles(files);
    // Reset input để có thể chọn lại cùng file
    event.target.value = '';
}

function handleDrop(event) {
    const files = Array.from(event.dataTransfer.files);
    addFiles(files);
}

function addFiles(files) {
    const imageFiles = files.filter(file => file.type.startsWith('image/'));
    
    if (photoGallery.value.length + imageFiles.length > 10) {
        toast.warning('Tối đa chỉ được chọn 10 ảnh!');
        return;
    }
    
    imageFiles.forEach(file => {
        // Validate file size (5MB)
        if (file.size > 5 * 1024 * 1024) {
            toast.error(`File ${file.name} quá lớn! Tối đa 5MB`);
            return;
        }
        
        const reader = new FileReader();
        reader.onload = (e) => {
            photoGallery.value.push({
                file: file,
                preview: e.target.result,
                mediaType: 20, // Mặc định là ảnh đăng ký
                isExisting: false,
                existingId: 0
            });
        };
        reader.readAsDataURL(file);
    });
}

function removePhoto(index) {
    photoGallery.value.splice(index, 1);
}

function changePhotoType(index) {
    const photo = photoGallery.value[index];
    // Toggle giữa 20 (Đăng ký) và 21 (Đăng kiểm)
    photo.mediaType = photo.mediaType === 20 ? 21 : 20;
}

function getTypeName(mediaType) {
    const option = mediaTypeOptions.find(opt => opt.id === mediaType);
    return option ? option.name : 'Không xác định';
}

function getTypeIcon(mediaType) {
    const option = mediaTypeOptions.find(opt => opt.id === mediaType);
    return option ? option.icon : 'fas fa-image';
}

function getTypeBadgeClass(mediaType) {
    const option = mediaTypeOptions.find(opt => opt.id === mediaType);
    return option ? option.class : '';
}

function getPhotoCountByType(mediaType) {
    return photoGallery.value.filter(p => p.mediaType === mediaType).length;
}
//#endregion

async function getAgencies(model) {
    // Load tất cả chi nhánh trước thay vì search
    var result = await agentService.getTree('');
    if (result != null && result.length > 0) {
        agencies.splice(0, agencies.length);
        Object.assign(agencies, result);
    }
}

async function getDriver(keyword) {
    if (keyword && truckModel.AgencyId) {
        var result = await userService.sugDriver(`?keyword=${keyword}&agencyId=${truckModel.AgencyId}`);
        if (result != null && result.length > 0) {
            drivers.splice(0, drivers.length);
            Object.assign(drivers, result);
        }
    }
}



async function onSubmit(model) {
    console.log('Form model from VeeValidate:', model);
    console.log('truckModel data:', truckModel);
    
    // Validate LicensePlate trước khi submit
    if (!truckModel.LicensePlate || truckModel.LicensePlate.trim() === '') {
        toast.error('Biển số xe không được để trống!');
        return;
    }
    
    // Xây dựng FormData cho multipart/form-data
    const formData = new FormData();
    
    // Append các field cơ bản - Backend expect prefix 'model.'
    formData.append('model.Id', truckModel.Id);
    formData.append('model.LicensePlate', truckModel.LicensePlate.trim());
    if (truckModel.Brand) formData.append('model.Brand', truckModel.Brand);
    if (truckModel.Model) formData.append('model.Model', truckModel.Model);
    formData.append('model.AgencyId', truckModel.AgencyId);
    if (truckModel.MaxPayload != null) formData.append('model.MaxPayload', truckModel.MaxPayload);
    if (truckModel.CargoLength != null) formData.append('model.CargoLength', truckModel.CargoLength);
    if (truckModel.CargoWidth != null) formData.append('model.CargoWidth', truckModel.CargoWidth);
    if (truckModel.CargoHeight != null) formData.append('model.CargoHeight', truckModel.CargoHeight);
    if (truckModel.ManufacturingYear != null) formData.append('model.ManufacturingYear', truckModel.ManufacturingYear);
    if (truckModel.RegistrationInfo) formData.append('model.RegistrationInfo', truckModel.RegistrationInfo);
    if (truckModel.FuelQuotaPer100Km != null) formData.append('model.FuelQuotaPer100Km', truckModel.FuelQuotaPer100Km);
    
    // CHỈ thêm OperatingStatus, Status, CurrentDriverId khi TẠO MỚI (Id = 0)
    if (truckModel.Id === 0) {
        formData.append('model.OperatingStatus', truckModel.OperatingStatus || 1);
        formData.append('model.Status', truckModel.Status || 1);
        formData.append('model.CurrentDriverId', truckModel.CurrentDriverId || 0);
    } else {
        // Khi update vẫn cần gửi các field required
        formData.append('model.OperatingStatus', truckModel.OperatingStatus || 1);
        formData.append('model.Status', truckModel.Status || 1);
        formData.append('model.CurrentDriverId', truckModel.CurrentDriverId || 0);
    }
    
    // Xử lý upload ảnh từ gallery
    if (truckModel.Id === 0) {
        // === TẠO MỚI: chỉ cần gửi Files và MediaTypes ===
        photoGallery.value.forEach(photo => {
            if (photo.file) {
                formData.append('Files', photo.file);
                formData.append('MediaTypes', photo.mediaType);
            }
        });
    } else {
        // === CẬP NHẬT: sử dụng ExistingMediaIds ===
        photoGallery.value.forEach(photo => {
            if (photo.isExisting) {
                // Giữ ảnh cũ
                formData.append('ExistingMediaIds', photo.existingId);
            } else {
                // Upload ảnh mới
                formData.append('ExistingMediaIds', 0);
                formData.append('Files', photo.file);
                formData.append('MediaTypes', photo.mediaType);
            }
        });
    }
    
    // Debug: Log FormData contents
    console.log('=== FormData Contents ===');
    for (let pair of formData.entries()) {
        if (pair[1] instanceof File) {
            console.log(pair[0] + ': [File] ' + pair[1].name);
        } else {
            console.log(pair[0] + ': ' + pair[1]);
        }
    }
    console.log('========================');
    
    var rs = await truckService.truckCreateOrUpdate(formData);
    if (rs != null && rs.Result === 1) {
        toast.success('Thành công!');
        cancel();
    } else {
        toast.error('Thất bại: ' + (rs.Message || 'Có lỗi xảy ra'));
        console.error('API Error Response:', rs);
    }
}

function cancel() {
    emit('cancel');
}

async function getTruckByIds(id) {
    if (id) {
        var result = await truckService.getById(id);
        // API trả về trực tiếp object truck, không có wrapper Result/Item
        if (result && result.Id) {
            const truck = result;
            
            console.log('Full truck data from API:', truck);
            
            truckModel.Id = truck.Id;
            truckModel.LicensePlate = truck.LicensePlate || '';
            truckModel.Brand = truck.Brand || '';
            truckModel.Model = truck.Model || '';
            truckModel.AgencyId = truck.AgencyId ? Number(truck.AgencyId) : null;
            truckModel.MaxPayload = truck.MaxPayload != null ? truck.MaxPayload : null;
            truckModel.CargoLength = truck.CargoLength != null ? truck.CargoLength : null;
            truckModel.CargoWidth = truck.CargoWidth != null ? truck.CargoWidth : null;
            truckModel.CargoHeight = truck.CargoHeight != null ? truck.CargoHeight : null;
            truckModel.OperatingStatus = truck.OperatingStatus != null ? truck.OperatingStatus : 1;
            truckModel.Status = truck.Status != null ? truck.Status : 1;
            truckModel.CurrentDriverId = truck.CurrentDriverId || truck.PicId || null;
            truckModel.ManufacturingYear = truck.ManufacturingYear != null ? truck.ManufacturingYear : null;
            truckModel.RegistrationInfo = truck.RegistrationInfo || '';
            truckModel.FuelQuotaPer100Km = truck.FuelQuotaPer100Km != null ? truck.FuelQuotaPer100Km : null;

            drivers.splice(0, drivers.length);
            if ((truck.CurrentDriverId || truck.PicId) && (truck.PicUserName || truck.PicFullName)) {
                drivers.push({
                    UserName: truck.PicUserName || '',
                    FullName: truck.PicFullName || '',
                    PhoneNumber: truck.PicPhoneNumber || '',
                    Id: truck.CurrentDriverId || truck.PicId
                });
            }
            
            // Load ảnh hiện có từ TruckMedias vào gallery
            photoGallery.value = [];
            if (truck.TruckMedias && Array.isArray(truck.TruckMedias)) {
                truck.TruckMedias.forEach(media => {
                    const mediaUrl = media.FilePath ? (baseMediaUrl + '/' + media.FilePath) : null;
                    
                    if (mediaUrl && (media.MediaType === 20 || media.MediaType === 21)) {
                        photoGallery.value.push({
                            file: null,
                            preview: mediaUrl,
                            mediaType: media.MediaType,
                            isExisting: true,
                            existingId: media.Id
                        });
                    }
                });
            }
        }
    }
}
//#endregion



//#region Events
onMounted(async () => {
    loading.value = true;
    // Load tất cả chi nhánh TRƯỚC
    await getAgencies();
    // Sau đó mới load dữ liệu xe tải
    await getTruckByIds(props.id);
    loading.value = false;
})
//#endregion



watch(() => props.id, async (ref) => {
    console.log(ref);
    await getTruckByIds(ref);
}, { deep: true });


</script>
<style scoped>
.gallery-upload-area {
    border: 2px dashed #dee2e6;
    border-radius: 0.375rem;
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: #f8f9fa;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gallery-upload-area:hover {
    border-color: #007bff;
    background-color: #e7f3ff;
}

.photo-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.gallery-item {
    position: relative;
    border: 2px solid #dee2e6;
    border-radius: 0.5rem;
    overflow: hidden;
    transition: all 0.3s ease;
    background: #fff;
}

.gallery-item:hover {
    border-color: #007bff;
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.15);
}

.gallery-img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    display: block;
}

.gallery-type-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    color: white;
    text-transform: uppercase;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.badge-registration {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.badge-inspection {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.gallery-actions {
    position: absolute;
    bottom: 8px;
    right: 8px;
    display: flex;
    gap: 6px;
}

.btn-gallery-action {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #dee2e6;
    border-radius: 4px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    color: #495057;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.btn-gallery-action:hover {
    background: #007bff;
    color: white;
    border-color: #007bff;
    transform: scale(1.1);
}

.btn-gallery-action.btn-danger:hover {
    background: #dc3545;
    border-color: #dc3545;
}

.existing-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(40, 167, 69, 0.95);
    color: white;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
</style>