<script setup>
/**
 * Coach Edit Workout for Client
 * Edit an existing workout with exercises organized per day
 */
import CoachLayout from '@/Layouts/CoachLayout.vue';
import { Head, Link, useForm, router } from '@inertiajs/vue3';
import { ref, computed, watch, onMounted } from 'vue';

const props = defineProps({
    client: Object,
    workout: Object,
    exercises: Array,
    muscleGroups: Object,
});

// Days of the week
const weekDays = [
    { key: 'LUN', label: 'Lunes' },
    { key: 'MAR', label: 'Martes' },
    { key: 'MIE', label: 'Miércoles' },
    { key: 'JUE', label: 'Jueves' },
    { key: 'VIE', label: 'Viernes' },
    { key: 'SAB', label: 'Sábado' },
    { key: 'DOM', label: 'Domingo' },
];

// Initialize exercises by day from existing workout
const initExercisesByDay = () => {
    const grouped = {};
    const workoutDays = props.workout.days || [];

    // Initialize empty arrays for all workout days
    workoutDays.forEach(day => {
        grouped[day] = [];
    });

    // Group existing exercises by day
    if (props.workout.exercises) {
        props.workout.exercises.forEach(ex => {
            const day = ex.day || workoutDays[0] || 'LUN';
            if (!grouped[day]) {
                grouped[day] = [];
            }
            grouped[day].push({
                id: ex.id,
                name: ex.name,
                muscle_group: ex.muscle_group || '',
                gif_url: ex.gif_url,
                sets: ex.sets,
                reps: ex.reps,
                rest_seconds: ex.rest_seconds || 60,
                notes: ex.notes || '',
                order: ex.order || 0,
            });
        });
    }

    // Sort exercises by order
    Object.keys(grouped).forEach(day => {
        grouped[day].sort((a, b) => (a.order || 0) - (b.order || 0));
    });

    return grouped;
};

const form = useForm({
    name: props.workout.name,
    description: props.workout.description || '',
    days: props.workout.days || [],
    exercises_by_day: initExercisesByDay(),
});

// Active day for adding/editing exercises
const activeDay = ref(form.days.length > 0 ? form.days[0] : null);

const toggleDay = (day) => {
    const idx = form.days.indexOf(day);
    if (idx > -1) {
        form.days.splice(idx, 1);
        delete form.exercises_by_day[day];
        if (activeDay.value === day) {
            activeDay.value = form.days.length > 0 ? form.days[0] : null;
        }
    } else {
        form.days.push(day);
        form.exercises_by_day[day] = [];
        if (!activeDay.value) {
            activeDay.value = day;
        }
    }
};

// Get exercises for active day
const activeDayExercises = computed(() => {
    if (!activeDay.value) return [];
    return form.exercises_by_day[activeDay.value] || [];
});

// Total exercises count
const totalExercisesCount = computed(() => {
    return Object.values(form.exercises_by_day).reduce((sum, exercises) => sum + exercises.length, 0);
});

// Muscle group icons
const muscleIcons = {
    pecho: '💪', espalda: '🔙', hombros: '🎯', biceps: '💪', triceps: '💪',
    antebrazos: '🤜', abdominales: '🔥', oblicuos: '🔥', cuadriceps: '🦵',
    isquiotibiales: '🦵', gluteos: '🍑', pantorrillas: '🦶', aductores: '🦵',
    trapecio: '🔙', cuerpo_completo: '🏃', chest: '💪', back: '🔙',
    shoulders: '🎯', legs: '🦵', glutes: '🍑', abs: '🔥',
    cardio: '🏃', full_body: '🏃',
};

// Exercise Library
const showExerciseLibrary = ref(false);
const exerciseSearch = ref('');
const selectedMuscleGroup = ref('');

// Filter exercises from library
const filteredExercises = computed(() => {
    if (!props.exercises) return [];
    return props.exercises.filter(ex => {
        const matchesSearch = !exerciseSearch.value ||
            ex.name.toLowerCase().includes(exerciseSearch.value.toLowerCase());
        const matchesMuscle = !selectedMuscleGroup.value ||
            ex.muscle_group === selectedMuscleGroup.value;
        return matchesSearch && matchesMuscle;
    });
});

// Add exercise from library to active day
const addFromLibrary = (exercise) => {
    if (!activeDay.value) return;
    if (!form.exercises_by_day[activeDay.value]) {
        form.exercises_by_day[activeDay.value] = [];
    }
    form.exercises_by_day[activeDay.value].push({
        id: null,
        name: exercise.name,
        muscle_group: exercise.muscle_group,
        gif_url: exercise.gif_url,
        sets: 3,
        reps: '10-12',
        rest_seconds: 60,
        notes: '',
    });
    showExerciseLibrary.value = false;
};

// Add custom exercise to active day
const addCustomExercise = () => {
    if (!activeDay.value) return;
    if (!form.exercises_by_day[activeDay.value]) {
        form.exercises_by_day[activeDay.value] = [];
    }
    form.exercises_by_day[activeDay.value].push({
        id: null,
        name: '',
        muscle_group: '',
        gif_url: null,
        sets: 3,
        reps: '10-12',
        rest_seconds: 60,
        notes: '',
    });
};

// Remove exercise from active day
const removeExercise = (index) => {
    if (!activeDay.value) return;
    form.exercises_by_day[activeDay.value].splice(index, 1);
};

// Move exercise within active day
const moveExercise = (index, direction) => {
    if (!activeDay.value) return;
    const exercises = form.exercises_by_day[activeDay.value];
    const newIndex = index + direction;
    if (newIndex >= 0 && newIndex < exercises.length) {
        [exercises[index], exercises[newIndex]] = [exercises[newIndex], exercises[index]];
    }
};

// Copy exercises from one day to another
const copyFromDay = (sourceDay) => {
    if (!activeDay.value || sourceDay === activeDay.value) return;
    const sourceExercises = form.exercises_by_day[sourceDay] || [];
    form.exercises_by_day[activeDay.value] = [
        ...(form.exercises_by_day[activeDay.value] || []),
        ...sourceExercises.map(ex => ({ ...ex, id: null })) // Remove IDs for new copies
    ];
};

// Get day label
const getDayLabel = (dayKey) => {
    const day = weekDays.find(d => d.key === dayKey);
    return day ? day.label : dayKey;
};

const submit = () => {

    // Convert exercises_by_day to flat exercises array with day field for backend
    const allExercises = [];
    for (const [day, exercises] of Object.entries(form.exercises_by_day)) {
        exercises.forEach((ex, index) => {
            allExercises.push({
                id: ex.id,
                name: ex.name,
                muscle_group: ex.muscle_group || 'full_body',
                sets: ex.sets,
                reps: ex.reps,
                rest_seconds: ex.rest_seconds,
                notes: ex.notes,
                gif_url: ex.gif_url,
                day: day,
                order: index
            });
        });
    }

    form.transform(data => ({
        name: data.name,
        description: data.description,
        days: data.days,
        exercises: allExercises,
    })).put(route('coach.clients.workouts.update', { client: props.client.id, workout: props.workout.id }));
};

const deleteWorkout = () => {
    if (confirm('¿Estás seguro de eliminar esta rutina? Esta acción no se puede deshacer.')) {
        router.delete(route('coach.clients.workouts.destroy', {
            client: props.client.id,
            workout: props.workout.id
        }));
    }
};
</script>

<template>
    <Head :title="`Editar ${workout.name} - ${client.name}`" />

    <CoachLayout>
        <template #header>
            <div class="flex items-center gap-4">
                <Link
                    :href="route('coach.clients.workouts.index', client.id)"
                    class="p-2 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
                >
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
                    </svg>
                </Link>
                <div>
                    <h2 class="text-xl font-bold text-gray-900 dark:text-white">✏️ Editar Rutina</h2>
                    <p class="text-sm text-gray-500 dark:text-gray-400">{{ workout.name }} - {{ client.name }}</p>
                </div>
            </div>
        </template>

        <div class="py-6">
            <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
                <form @submit.prevent="submit" class="space-y-6">
                    <!-- Basic Info -->
                    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 p-6">
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">📝 Información General</h3>
                        <div class="space-y-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Nombre *</label>
                                <input v-model="form.name" type="text" required
                                    class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                                    placeholder="Ej: Rutina Full Body - Semana 1" />
                                <p v-if="form.errors.name" class="text-red-500 text-sm mt-1">{{ form.errors.name }}</p>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Descripción</label>
                                <textarea v-model="form.description" rows="2"
                                    class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                                    placeholder="Descripción opcional..."></textarea>
                            </div>

                            <!-- Days Selector -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">📅 Días de la Rutina</label>
                                <p class="text-xs text-gray-500 dark:text-gray-400 mb-3">Selecciona los días en que el cliente debe realizar esta rutina</p>
                                <div class="flex flex-wrap gap-2">
                                    <button
                                        v-for="day in weekDays"
                                        :key="day.key"
                                        type="button"
                                        @click="toggleDay(day.key)"
                                        :class="[
                                            'px-4 py-2.5 rounded-lg font-medium text-sm transition-all border-2',
                                            form.days.includes(day.key)
                                                ? 'bg-orange-500 border-orange-500 text-white shadow-md'
                                                : 'bg-white dark:bg-gray-700 border-gray-200 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:border-orange-300'
                                        ]"
                                    >
                                        <span class="block text-xs opacity-80">{{ day.key }}</span>
                                        <span class="block">{{ day.label }}</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Exercises By Day -->
                    <div v-if="form.days.length > 0" class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 p-6">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">💪 Ejercicios por Día</h3>
                            <span class="text-sm text-gray-500">{{ totalExercisesCount }} ejercicio(s) en total</span>
                        </div>

                        <!-- Day Tabs -->
                        <div class="flex flex-wrap gap-2 mb-4 pb-4 border-b border-gray-200 dark:border-gray-700">
                            <button
                                v-for="day in form.days"
                                :key="day"
                                type="button"
                                @click="activeDay = day"
                                :class="[
                                    'px-4 py-2 rounded-lg font-medium text-sm transition-all relative',
                                    activeDay === day
                                        ? 'bg-orange-500 text-white shadow-md'
                                        : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'
                                ]"
                            >
                                {{ getDayLabel(day) }}
                                <span v-if="form.exercises_by_day[day]?.length"
                                    class="ml-2 px-1.5 py-0.5 text-xs rounded-full"
                                    :class="activeDay === day ? 'bg-orange-600' : 'bg-gray-300 dark:bg-gray-600'"
                                >
                                    {{ form.exercises_by_day[day].length }}
                                </span>
                            </button>
                        </div>

                        <!-- Active Day Info -->
                        <div v-if="activeDay" class="mb-4">
                            <div class="flex items-center justify-between">
                                <h4 class="text-md font-semibold text-gray-800 dark:text-gray-200">
                                    📅 {{ getDayLabel(activeDay) }}
                                </h4>
                                <!-- Copy from another day -->
                                <div v-if="form.days.length > 1" class="flex items-center gap-2">
                                    <span class="text-xs text-gray-500">Copiar de:</span>
                                    <div class="flex gap-1">
                                        <button
                                            v-for="day in form.days.filter(d => d !== activeDay && form.exercises_by_day[d]?.length > 0)"
                                            :key="day"
                                            type="button"
                                            @click="copyFromDay(day)"
                                            class="px-2 py-1 text-xs bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 rounded hover:bg-blue-200"
                                        >
                                            {{ day }}
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Exercises List for Active Day -->
                        <div class="space-y-3 mb-4">
                            <div v-if="activeDayExercises.length === 0" class="text-center py-8 bg-gray-50 dark:bg-gray-700/30 rounded-lg border-2 border-dashed border-gray-300 dark:border-gray-600">
                                <span class="text-3xl mb-2 block">🏋️</span>
                                <p class="text-gray-500 dark:text-gray-400">No hay ejercicios para {{ getDayLabel(activeDay) }}</p>
                                <p class="text-sm text-gray-400">Usa el botón de abajo para agregar ejercicios</p>
                            </div>

                            <div v-for="(exercise, index) in activeDayExercises" :key="index"
                                class="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4 border border-gray-200 dark:border-gray-600">
                                <div class="flex items-start justify-between mb-3">
                                    <div class="flex items-center gap-3">
                                        <div v-if="exercise.gif_url" class="w-14 h-14 rounded-lg overflow-hidden bg-gray-200">
                                            <img :src="exercise.gif_url" :alt="exercise.name" class="w-full h-full object-cover" />
                                        </div>
                                        <div v-else class="w-14 h-14 rounded-lg bg-orange-100 dark:bg-orange-900/50 flex items-center justify-center text-2xl">
                                            {{ muscleIcons[exercise.muscle_group] || '🏋️' }}
                                        </div>
                                        <span class="font-medium text-gray-900 dark:text-white">{{ exercise.name || 'Nuevo ejercicio' }}</span>
                                    </div>
                                    <div class="flex items-center gap-1">
                                        <button type="button" @click="moveExercise(index, -1)" :disabled="index === 0" class="p-1 text-gray-400 hover:text-gray-600 disabled:opacity-30">↑</button>
                                        <button type="button" @click="moveExercise(index, 1)" :disabled="index === activeDayExercises.length - 1" class="p-1 text-gray-400 hover:text-gray-600 disabled:opacity-30">↓</button>
                                        <button type="button" @click="removeExercise(index)" class="p-1 text-red-500 hover:text-red-700">✕</button>
                                    </div>
                                </div>

                                <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
                                    <div class="col-span-2">
                                        <label class="text-xs text-gray-500 mb-1 block">Nombre</label>
                                        <input v-model="exercise.name" type="text" required placeholder="Nombre del ejercicio"
                                            class="w-full text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white" />
                                    </div>
                                    <div>
                                        <label class="text-xs text-gray-500 mb-1 block">Series</label>
                                        <input v-model.number="exercise.sets" type="number" min="1" required
                                            class="w-full text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white" />
                                    </div>
                                    <div>
                                        <label class="text-xs text-gray-500 mb-1 block">Reps</label>
                                        <input v-model="exercise.reps" type="text" required placeholder="10-12"
                                            class="w-full text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white" />
                                    </div>
                                    <div>
                                        <label class="text-xs text-gray-500 mb-1 block">Descanso (seg)</label>
                                        <input v-model.number="exercise.rest_seconds" type="number" min="0" placeholder="60"
                                            class="w-full text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white" />
                                    </div>
                                    <div>
                                        <label class="text-xs text-gray-500 mb-1 block">Grupo Muscular</label>
                                        <select v-model="exercise.muscle_group"
                                            class="w-full text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                                            <option value="">Seleccionar...</option>
                                            <option v-for="(label, key) in muscleGroups" :key="key" :value="key">{{ label }}</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="mt-2">
                                    <label class="text-xs text-gray-500 mb-1 block">Notas</label>
                                    <input v-model="exercise.notes" type="text" placeholder="Instrucciones..."
                                        class="w-full text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white" />
                                </div>
                            </div>
                        </div>

                        <!-- Add Exercise Buttons -->
                        <div v-if="activeDay" class="flex gap-3">
                            <button type="button" @click="showExerciseLibrary = true"
                                class="flex-1 py-3 bg-orange-50 dark:bg-orange-900/20 border-2 border-dashed border-orange-300 dark:border-orange-700 rounded-lg text-orange-600 dark:text-orange-400 hover:bg-orange-100 dark:hover:bg-orange-900/30 flex items-center justify-center gap-2">
                                📚 Agregar desde Biblioteca
                            </button>
                            <button type="button" @click="addCustomExercise"
                                class="flex-1 py-3 border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg text-gray-500 dark:text-gray-400 hover:border-gray-400 dark:hover:border-gray-500 flex items-center justify-center gap-2">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                                </svg>
                                ✏️ Crear Personalizado
                            </button>
                        </div>
                    </div>

                    <!-- No Days Selected Warning -->
                    <div v-else class="bg-amber-50 dark:bg-amber-900/20 rounded-xl border border-amber-200 dark:border-amber-700 p-6 text-center">
                        <span class="text-4xl mb-2 block">📅</span>
                        <h4 class="font-semibold text-amber-800 dark:text-amber-300 mb-2">Selecciona los días primero</h4>
                        <p class="text-sm text-amber-600 dark:text-amber-400">Para agregar ejercicios, primero selecciona los días de la rutina en la sección de arriba.</p>
                    </div>

                    <!-- Actions -->
                    <div class="flex justify-between items-center">
                        <button type="button" @click="deleteWorkout"
                            class="px-4 py-2 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg flex items-center gap-2">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                            </svg>
                            Eliminar Rutina
                        </button>

                        <div class="flex gap-3">
                            <Link :href="route('coach.clients.workouts.index', client.id)"
                                class="px-6 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg">
                                Cancelar
                            </Link>
                            <button type="submit" :disabled="form.processing || totalExercisesCount === 0"
                                class="px-6 py-2 bg-gradient-to-r from-orange-500 to-red-500 hover:from-orange-600 hover:to-red-600 text-white font-medium rounded-lg shadow-lg disabled:opacity-50 flex items-center gap-2">
                                <svg v-if="form.processing" class="w-4 h-4 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                </svg>
                                💾 Guardar Cambios
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <!-- Exercise Library Modal -->
        <Teleport to="body">
            <div v-if="showExerciseLibrary" class="fixed inset-0 z-50 flex items-end sm:items-center justify-center">
                <div class="fixed inset-0 bg-black/50 backdrop-blur-sm" @click="showExerciseLibrary = false"></div>
                <div class="relative bg-white dark:bg-gray-800 rounded-t-2xl sm:rounded-2xl shadow-xl w-full max-w-4xl max-h-[90vh] overflow-hidden">
                    <div class="p-4 border-b border-gray-200 dark:border-gray-700">
                        <div class="flex justify-between items-center mb-4">
                            <div>
                                <h3 class="text-lg font-bold text-gray-900 dark:text-white">📚 Biblioteca de Ejercicios</h3>
                                <p class="text-sm text-orange-600 dark:text-orange-400">
                                    Agregando a: <strong>{{ getDayLabel(activeDay) }}</strong>
                                </p>
                            </div>
                            <button @click="showExerciseLibrary = false" class="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200">
                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                                </svg>
                            </button>
                        </div>
                        <!-- Search -->
                        <div class="mb-4">
                            <input v-model="exerciseSearch" type="text" placeholder="Buscar ejercicio..."
                                class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white" />
                        </div>
                        <!-- Muscle group filters -->
                        <div class="flex flex-wrap gap-2">
                            <button @click="selectedMuscleGroup = ''"
                                :class="['px-3 py-1.5 rounded-full text-xs font-medium transition-colors', !selectedMuscleGroup ? 'bg-orange-500 text-white' : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600']">
                                Todos
                            </button>
                            <button v-for="(label, key) in muscleGroups" :key="key" @click="selectedMuscleGroup = key"
                                :class="['px-3 py-1.5 rounded-full text-xs font-medium transition-colors', selectedMuscleGroup === key ? 'bg-orange-500 text-white' : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600']">
                                {{ muscleIcons[key] || '🎯' }} {{ label }}
                            </button>
                        </div>
                    </div>
                    <div class="p-4 overflow-y-auto max-h-[60vh]">
                        <div v-if="filteredExercises.length" class="grid grid-cols-2 md:grid-cols-3 gap-3">
                            <button v-for="exercise in filteredExercises" :key="exercise.id" type="button" @click="addFromLibrary(exercise)"
                                class="bg-gray-50 dark:bg-gray-700/50 rounded-lg overflow-hidden hover:ring-2 hover:ring-orange-500 text-left transition-all">
                                <div v-if="exercise.gif_url" class="aspect-video bg-gray-200 dark:bg-gray-600">
                                    <img :src="exercise.gif_url" :alt="exercise.name" class="w-full h-full object-cover" loading="lazy" />
                                </div>
                                <div v-else class="aspect-video bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800 flex items-center justify-center text-3xl">
                                    {{ muscleIcons[exercise.muscle_group] || '🏋️' }}
                                </div>
                                <div class="p-3">
                                    <h4 class="font-medium text-sm text-gray-900 dark:text-white line-clamp-1">{{ exercise.name }}</h4>
                                    <span v-if="exercise.muscle_group" class="px-2 py-0.5 bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-400 text-xs rounded-full">
                                        {{ muscleGroups[exercise.muscle_group] || exercise.muscle_group }}
                                    </span>
                                </div>
                            </button>
                        </div>
                        <div v-else class="text-center py-12">
                            <span class="text-4xl mb-2 block">🔍</span>
                            <p class="text-gray-500 dark:text-gray-400">No se encontraron ejercicios</p>
                            <p class="text-sm text-gray-400 dark:text-gray-500">Intenta con otros filtros o búsqueda</p>
                        </div>
                    </div>
                </div>
            </div>
        </Teleport>
    </CoachLayout>
</template>
