<script setup>
/**
 * Client Workout Index - Mobile-First
 * Shows workout routines with JSON days structure, GIFs, and block system
 */
import ClientLayout from '@/Layouts/ClientLayout.vue';
import { Head, Link } from '@inertiajs/vue3';
import { useForm } from '@inertiajs/vue3';
import { ref, computed } from 'vue'; // Fixed import to include PullToRefresh
import { router } from '@inertiajs/vue3';
import PullToRefresh from '@/Components/Mobile/PullToRefresh.vue';

const props = defineProps({
    client: Object,
    workouts: Array,
    compliance_logs: Array,
    completion_counts: Object,
    no_profile: Boolean,
});

const complianceForm = useForm({
    resource_type: 'workout',
    resource_id: '',
});

// Selected workout and day for detail view
const selectedWorkout = ref(null);
const selectedDayIndex = ref(0);
const showExerciseModal = ref(false);
const selectedExercise = ref(null);

const isRefreshing = ref(false);

const handleRefresh = () => {
    isRefreshing.value = true;
    router.reload({ onFinish: () => { isRefreshing.value = false; } });
};

const markDone = (workoutId) => {
    complianceForm.resource_id = workoutId;
    complianceForm.post(route('client.compliance.log'), {
        preserveScroll: true,
    });
};

const isCompletedToday = (workoutId) => {
    const today = new Date().toISOString().split('T')[0];
    return props.compliance_logs?.some(log =>
        log.resource_type === 'workout' &&
        log.resource_id === workoutId &&
        log.completed_at?.split('T')[0] === today
    );
};

const getCompletionCount = (workoutId) => {
    return props.completion_counts?.[workoutId] || 0;
};

const selectWorkout = (workout) => {
    selectedWorkout.value = workout;
    selectedDayIndex.value = 0;
};

const openExerciseDetail = (exercise) => {
    selectedExercise.value = exercise;
    showExerciseModal.value = true;
};

// Day name mapping
const dayLabels = {
    'LUN': 'Lunes',
    'MAR': 'Martes',
    'MIE': 'Miércoles',
    'JUE': 'Jueves',
    'VIE': 'Viernes',
    'SAB': 'Sábado',
    'DOM': 'Domingo',
};

// Parse days - handle simple string array or complex object array
const parseDays = (workout) => {
    if (!workout.days || !workout.days.length) {
        // No days specified - treat as single day workout
        return [{ name: 'Rutina', key: 'all' }];
    }

    // Check if days is an array of strings like ['LUN', 'MAR', 'MIE']
    if (typeof workout.days[0] === 'string') {
        return workout.days.map(day => ({
            name: dayLabels[day] || day,
            key: day,
        }));
    }

    // Complex format with objects (future support)
    return workout.days.map((day, index) => ({
        name: day.name || `Día ${index + 1}`,
        key: day.key || index,
        exercises: day.exercises || [],
    }));
};

// Helper function to group exercises by block
const groupExercisesByBlock = (exercises) => {
    if (!exercises || !exercises.length) return {};

    // Check if exercises have block_name
    if (exercises[0]?.block_name !== undefined) {
        const blocks = {};
        exercises.forEach(ex => {
            const blockName = ex.block_name || 'Principal';
            if (!blocks[blockName]) blocks[blockName] = [];
            blocks[blockName].push(ex);
        });
        return blocks;
    }

    // No blocks, return all exercises under "Ejercicios"
    return { 'Ejercicios': exercises };
};

// Get exercises grouped by blocks for a specific day
const getExercisesForDay = (workout, dayIndex) => {
    const days = parseDays(workout);
    if (!days || !days[dayIndex]) return {};

    const day = days[dayIndex];

    // Case 1: Day object has its own exercises (Advanced/Split structure)
    if (day.exercises && Array.isArray(day.exercises) && day.exercises.length > 0) {
        return groupExercisesByBlock(day.exercises);
    }

    // Case 2: Days are simple strings or day has no exercises - use workout's exercises
    // All exercises apply to all days in simple mode
    if (workout.exercises && workout.exercises.length) {
        // If exercises have a 'day' field, filter by the current day key
        const dayKey = day.key;
        const exercisesWithDay = workout.exercises.filter(ex => ex.day);

        if (exercisesWithDay.length > 0) {
            // Exercises have day assignments - filter for this day
            const dayExercises = workout.exercises.filter(ex => ex.day === dayKey || !ex.day);
            return groupExercisesByBlock(dayExercises);
        }

        // No day assignments - all exercises for all days
        return groupExercisesByBlock(workout.exercises);
    }

    return {};
};

const todayName = computed(() => {
    return new Date().toLocaleDateString('es-ES', { weekday: 'long', day: 'numeric', month: 'long' });
});

const muscleIcons = {
    pecho: '🎯',
    espalda: '🔙',
    hombros: '💪',
    biceps: '💪',
    triceps: '💪',
    abdominales: '🔥',
    cuadriceps: '🦵',
    isquiotibiales: '🦵',
    gluteos: '🍑',
    pantorrillas: '🦶',
    cuerpo_completo: '🏃',
};

const getMuscleIcon = (muscle) => {
    if (!muscle) return '💪';
    const key = muscle.toLowerCase().replace(/ /g, '_');
    return muscleIcons[key] || '💪';
};
</script>

<template>
    <Head title="Mi Rutina" />

    <ClientLayout>
        <template #header>
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                <div>
                    <h2 class="text-xl md:text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
                        <span>💪</span> Mi Rutina de Ejercicios
                    </h2>
                    <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
                        {{ todayName }}
                    </p>
                </div>
                <Link
                    :href="route('client.dashboard')"
                    class="inline-flex items-center text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200"
                >
                    ← Volver al panel
                </Link>
            </div>
        </template>

        <PullToRefresh :loading="isRefreshing" @refresh="handleRefresh">
        <div class="py-4 md:py-8">
            <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 space-y-6">

                <!-- No Profile Warning -->
                <div v-if="no_profile" class="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-xl p-6 text-center">
                    <div class="text-5xl mb-4">⚠️</div>
                    <h3 class="text-xl font-bold text-yellow-800 dark:text-yellow-300 mb-2">Perfil No Configurado</h3>
                    <p class="text-yellow-700 dark:text-yellow-400">
                        Tu entrenador aún no ha configurado tu perfil.
                    </p>
                </div>

                <template v-else>
                    <!-- Workout List (when no workout selected) -->
                    <div v-if="!selectedWorkout">
                        <!-- Stats Summary -->
                        <div class="bg-gradient-to-r from-emerald-600 to-green-500 rounded-xl p-6 text-white mb-6">
                            <div class="flex items-center justify-between">
                                <div>
                                    <p class="text-sm opacity-90">Rutinas activas</p>
                                    <p class="text-3xl font-bold">{{ workouts?.length || 0 }}</p>
                                </div>
                                <div class="text-right">
                                    <p class="text-sm opacity-90">Entrenamientos completados</p>
                                    <p class="text-3xl font-bold">
                                        {{ Object.values(completion_counts || {}).reduce((a, b) => a + b, 0) }}
                                    </p>
                                </div>
                            </div>
                        </div>

                        <!-- Workouts Grid -->
                        <div v-if="workouts?.length" class="grid gap-4 md:grid-cols-2">
                            <div
                                v-for="workout in workouts"
                                :key="workout.id"
                                class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden hover:shadow-md transition-shadow cursor-pointer"
                                @click="selectWorkout(workout)"
                            >
                                <div class="p-5">
                                    <div class="flex items-start justify-between mb-3">
                                        <div>
                                            <h3 class="text-lg font-bold text-gray-900 dark:text-white">{{ workout.name }}</h3>
                                            <p v-if="workout.description" class="text-sm text-gray-500 dark:text-gray-400 mt-1 line-clamp-2">
                                                {{ workout.description }}
                                            </p>
                                        </div>
                                        <span
                                            v-if="isCompletedToday(workout.id)"
                                            class="px-2 py-1 bg-green-100 dark:bg-green-900/50 text-green-700 dark:text-green-400 text-xs font-semibold rounded-full"
                                        >
                                            ✓ Hoy
                                        </span>
                                    </div>

                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center gap-3 text-sm text-gray-500 dark:text-gray-400">
                                            <span class="flex items-center gap-1">
                                                <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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                                                </svg>
                                                {{ parseDays(workout).length }} día(s)
                                            </span>
                                            <span v-if="workout.days && workout.days.length && typeof workout.days[0] === 'string'" class="text-xs text-emerald-600 dark:text-emerald-400">
                                                {{ workout.days.map(d => dayLabels[d] || d).join(', ') }}
                                            </span>
                                            <span class="flex items-center gap-1">
                                                <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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                                                </svg>
                                                {{ getCompletionCount(workout.id) }} veces
                                            </span>
                                        </div>
                                        <button class="text-emerald-600 dark:text-emerald-400 font-medium text-sm hover:underline">
                                            Ver rutina →
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Empty State -->
                        <div v-else class="text-center py-16 bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700">
                            <div class="w-20 h-20 bg-gray-100 dark:bg-gray-700 rounded-full flex items-center justify-center mx-auto mb-4">
                                <span class="text-4xl">💪</span>
                            </div>
                            <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Sin rutinas asignadas</h3>
                            <p class="text-gray-500 dark:text-gray-400 max-w-md mx-auto">
                                Tu entrenador aún no te ha asignado una rutina de ejercicios.
                            </p>
                        </div>
                    </div>

                    <!-- Workout Detail View -->
                    <div v-else>
                        <!-- Back Button & Header -->
                        <div class="flex items-center gap-4 mb-6">
                            <button
                                @click="selectedWorkout = null"
                                class="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
                            >
                                <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="M15 19l-7-7 7-7" />
                                </svg>
                            </button>
                            <div class="flex-1">
                                <h3 class="text-xl font-bold text-gray-900 dark:text-white">{{ selectedWorkout.name }}</h3>
                                <p v-if="selectedWorkout.description" class="text-sm text-gray-500 dark:text-gray-400">{{ selectedWorkout.description }}</p>
                            </div>
                            <div class="flex items-center gap-2">
                                <a
                                    :href="route('client.workout.pdf', selectedWorkout.id)"
                                    target="_blank"
                                    class="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
                                    title="Descargar PDF"
                                >
                                    <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 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>
                                </a>
                                <button
                                    @click="markDone(selectedWorkout.id)"
                                    :disabled="isCompletedToday(selectedWorkout.id)"
                                    :class="[
                                        'px-4 py-2 rounded-lg font-semibold text-sm transition-all',
                                        isCompletedToday(selectedWorkout.id)
                                            ? 'bg-green-500 text-white cursor-default'
                                            : 'bg-emerald-600 hover:bg-emerald-700 text-white shadow-lg'
                                    ]"
                                >
                                    {{ isCompletedToday(selectedWorkout.id) ? '✓ Completado hoy' : '¡Marcar Hecho!' }}
                                </button>
                            </div>
                        </div>

                        <!-- Day Tabs -->
                        <div v-if="parseDays(selectedWorkout).length > 1" class="flex gap-2 overflow-x-auto pb-2 mb-6 scrollbar-hide">
                            <button
                                v-for="(day, index) in parseDays(selectedWorkout)"
                                :key="index"
                                @click="selectedDayIndex = index"
                                :class="[
                                    'px-4 py-2 rounded-xl font-medium text-sm whitespace-nowrap transition-all',
                                    selectedDayIndex === index
                                        ? 'bg-emerald-600 text-white shadow-lg'
                                        : 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-gray-700 hover:border-emerald-300 dark:hover:border-emerald-600'
                                ]"
                            >
                                {{ day.name || `Día ${index + 1}` }}
                            </button>
                        </div>

                        <!-- Day Info (when days are simple strings) -->
                        <div v-if="selectedWorkout.days && selectedWorkout.days.length && typeof selectedWorkout.days[0] === 'string'" class="mb-4 p-3 bg-emerald-50 dark:bg-emerald-900/20 rounded-lg">
                            <p class="text-sm text-emerald-700 dark:text-emerald-300">
                                📅 <strong>Días de entrenamiento:</strong> {{ selectedWorkout.days.map(d => dayLabels[d] || d).join(', ') }}
                            </p>
                        </div>

                        <!-- Exercises by Block -->
                        <div class="space-y-6">
                            <div
                                v-for="(exercises, blockName) in getExercisesForDay(selectedWorkout, selectedDayIndex)"
                                :key="blockName"
                                class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden"
                            >
                                <div class="px-5 py-3 bg-gray-50 dark:bg-gray-700/50 border-b border-gray-100 dark:border-gray-700">
                                    <h4 class="font-semibold text-gray-900 dark:text-white">{{ blockName }}</h4>
                                </div>

                                <div class="divide-y divide-gray-100 dark:divide-gray-700">
                                    <div
                                        v-for="(exercise, idx) in exercises"
                                        :key="idx"
                                        class="p-4 hover:bg-gray-50 dark:hover:bg-gray-700/30 transition-colors cursor-pointer"
                                        @click="openExerciseDetail(exercise)"
                                    >
                                        <div class="flex items-center gap-4">
                                            <!-- Exercise GIF or Number -->
                                            <div v-if="exercise.gif_url" class="w-16 h-16 md:w-20 md:h-20 rounded-xl overflow-hidden bg-gray-100 dark:bg-gray-700 flex-shrink-0">
                                                <img :src="exercise.gif_url" :alt="exercise.name" class="w-full h-full object-cover" loading="lazy" />
                                            </div>
                                            <div v-else class="w-12 h-12 md:w-14 md:h-14 bg-emerald-100 dark:bg-emerald-900/50 text-emerald-700 dark:text-emerald-400 rounded-xl flex items-center justify-center font-bold text-lg flex-shrink-0">
                                                {{ idx + 1 }}
                                            </div>

                                            <!-- Exercise Info -->
                                            <div class="flex-1 min-w-0">
                                                <h5 class="font-semibold text-gray-900 dark:text-white truncate">{{ exercise.name }}</h5>
                                                <div class="flex items-center gap-2 mt-1">
                                                    <span v-if="exercise.muscle_group" class="text-xs text-gray-500 dark:text-gray-400 flex items-center gap-1">
                                                        {{ getMuscleIcon(exercise.muscle_group) }} {{ exercise.muscle_group }}
                                                    </span>
                                                </div>
                                            </div>

                                            <!-- Stats -->
                                            <div class="flex items-center gap-3 md:gap-6 text-center">
                                                <div>
                                                    <p class="text-xl md:text-2xl font-bold text-gray-900 dark:text-white">{{ exercise.sets || 3 }}</p>
                                                    <p class="text-[10px] md:text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide">Series</p>
                                                </div>
                                                <div>
                                                    <p class="text-xl md:text-2xl font-bold text-gray-900 dark:text-white">{{ exercise.reps || '12' }}</p>
                                                    <p class="text-[10px] md:text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide">Reps</p>
                                                </div>
                                                <div>
                                                    <p class="text-xl md:text-2xl font-bold text-gray-900 dark:text-white">{{ exercise.rest || exercise.rest_seconds || 60 }}s</p>
                                                    <p class="text-[10px] md:text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide">Descanso</p>
                                                </div>
                                            </div>

                                            <!-- Arrow -->
                                            <svg class="w-5 h-5 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                                            </svg>
                                        </div>

                                        <!-- Notes -->
                                        <p v-if="exercise.notes" class="mt-2 text-sm text-gray-500 dark:text-gray-400 ml-16 md:ml-24">
                                            💡 {{ exercise.notes }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Quick Complete Button (Mobile) -->
                        <Teleport to="body">
                            <div v-if="selectedWorkout && !showExerciseModal" class="fixed bottom-6 left-4 right-4 md:hidden z-40">
                                <button
                                    @click="markDone(selectedWorkout.id)"
                                    :disabled="isCompletedToday(selectedWorkout.id)"
                                    :class="[
                                        'w-full py-4 rounded-xl font-bold text-lg transition-all shadow-2xl',
                                        isCompletedToday(selectedWorkout.id)
                                            ? 'bg-green-500 text-white cursor-default'
                                            : 'bg-emerald-600 hover:bg-emerald-700 text-white'
                                    ]"
                                >
                                    {{ isCompletedToday(selectedWorkout.id) ? '✓ ¡Completado hoy!' : '💪 ¡Marcar como Completado!' }}
                                </button>
                            </div>
                        </Teleport>
                    </div>
                </template>
            </div>
        </div>
        </PullToRefresh>

        <!-- Exercise Detail Modal -->
        <Teleport to="body">
            <div
                v-if="showExerciseModal && selectedExercise"
                class="fixed inset-0 bg-black/60 flex items-end md:items-center justify-center z-50"
                @click.self="showExerciseModal = false"
            >
                <div class="bg-white dark:bg-gray-800 rounded-t-3xl md:rounded-2xl shadow-2xl w-full max-w-lg max-h-[90vh] overflow-hidden">
                    <!-- GIF Header -->
                    <div v-if="selectedExercise.gif_url" class="relative aspect-video bg-gray-100 dark:bg-gray-700">
                        <img :src="selectedExercise.gif_url" :alt="selectedExercise.name" class="w-full h-full object-contain" />
                        <button
                            @click="showExerciseModal = false"
                            class="absolute top-4 right-4 p-2 bg-black/50 text-white rounded-full hover:bg-black/70 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="M6 18L18 6M6 6l12 12" />
                            </svg>
                        </button>
                    </div>
                    <div v-else class="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700">
                        <h3 class="text-lg font-bold text-gray-900 dark:text-white">Detalle del ejercicio</h3>
                        <button @click="showExerciseModal = false" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
                            <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>

                    <div class="p-6 overflow-y-auto">
                        <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">{{ selectedExercise.name }}</h3>

                        <div v-if="selectedExercise.muscle_group" class="flex items-center gap-2 mb-4">
                            <span class="px-3 py-1 bg-emerald-100 dark:bg-emerald-900/50 text-emerald-700 dark:text-emerald-400 text-sm rounded-full font-medium">
                                {{ getMuscleIcon(selectedExercise.muscle_group) }} {{ selectedExercise.muscle_group }}
                            </span>
                        </div>

                        <!-- Stats Grid -->
                        <div class="grid grid-cols-3 gap-4 mb-6">
                            <div class="bg-gray-50 dark:bg-gray-700/50 rounded-xl p-4 text-center">
                                <p class="text-3xl font-bold text-emerald-600 dark:text-emerald-400">{{ selectedExercise.sets || 3 }}</p>
                                <p class="text-sm text-gray-500 dark:text-gray-400">Series</p>
                            </div>
                            <div class="bg-gray-50 dark:bg-gray-700/50 rounded-xl p-4 text-center">
                                <p class="text-3xl font-bold text-blue-600 dark:text-blue-400">{{ selectedExercise.reps || '12' }}</p>
                                <p class="text-sm text-gray-500 dark:text-gray-400">Repeticiones</p>
                            </div>
                            <div class="bg-gray-50 dark:bg-gray-700/50 rounded-xl p-4 text-center">
                                <p class="text-3xl font-bold text-orange-600 dark:text-orange-400">{{ selectedExercise.rest || selectedExercise.rest_seconds || 60 }}s</p>
                                <p class="text-sm text-gray-500 dark:text-gray-400">Descanso</p>
                            </div>
                        </div>

                        <!-- Notes -->
                        <div v-if="selectedExercise.notes" class="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-xl p-4 mb-4">
                            <h4 class="font-semibold text-yellow-800 dark:text-yellow-300 mb-1 flex items-center gap-2">
                                <span>💡</span> Notas del coach
                            </h4>
                            <p class="text-yellow-700 dark:text-yellow-400 text-sm">{{ selectedExercise.notes }}</p>
                        </div>

                        <!-- Video Link -->
                        <a
                            v-if="selectedExercise.video_url"
                            :href="selectedExercise.video_url"
                            target="_blank"
                            class="flex items-center justify-center gap-2 w-full py-3 bg-red-600 hover:bg-red-700 text-white font-semibold rounded-xl transition-colors"
                        >
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
                            </svg>
                            Ver video tutorial
                        </a>
                    </div>
                </div>
            </div>
        </Teleport>
    </ClientLayout>
</template>

<style scoped>
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
</style>
