<script setup>
/**
 * Client Chat - Instagram DM Style
 * Modern real-time messaging with coach using ChatWindow component
 */
import ClientLayout from '@/Layouts/ClientLayout.vue';
import ChatWindow from '@/Components/ChatWindow.vue';
import { Head, Link, usePage } from '@inertiajs/vue3';
import { computed } from 'vue';

const props = defineProps({
    coach: Object,
    messages: Array,
});

const page = usePage();
const currentUserId = computed(() => page.props.auth.user.id);
const clientProfileId = computed(() => page.props.client?.id);
const coachId = computed(() => props.coach?.id);

const getInitials = (name) => {
    if (!name) return '?';
    return name.split(' ').map(w => w.charAt(0)).slice(0, 2).join('').toUpperCase();
};
</script>

<template>
    <Head title="Chat con Entrenador" />

    <ClientLayout>
        <!-- Desktop header only (mobile uses ChatWindow header for online status) -->
        <template #header>
            <div class="hidden lg:flex items-center gap-3">
                <Link
                    :href="route('client.dashboard')"
                    class="p-1.5 -ml-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-full 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="M15 19l-7-7 7-7" /></svg>
                </Link>
                <div class="p-2 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-xl">
                    <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" /></svg>
                </div>
                <div>
                    <h2 class="text-[15px] font-bold text-gray-900 dark:text-white">Chat con Coach</h2>
                    <span class="text-xs text-gray-500 dark:text-gray-400">{{ coach?.name }}</span>
                </div>
            </div>
        </template>

        <!-- Full-screen native chat on mobile, contained on desktop -->
        <div class="-mx-4 -mt-4 -mb-24 sm:-mx-6 sm:-mt-6 lg:mx-0 lg:mt-0 lg:mb-0 h-[calc(100dvh-56px-64px)] lg:h-[calc(100vh-140px)]">
            <div class="h-full lg:mx-auto lg:max-w-3xl lg:px-4 lg:py-3">
                <div class="flex flex-col h-full bg-white dark:bg-gray-900 lg:rounded-2xl lg:shadow-xl lg:border lg:border-gray-200/60 lg:dark:border-gray-800 overflow-hidden">
                    <ChatWindow
                        :receiver-id="coach.id"
                        :receiver-name="coach.name"
                        :receiver-avatar="coach.avatar"
                        :messages="messages"
                        :sender-id="currentUserId"
                        :sender-name="$page.props.auth.user.name"
                        :sender-avatar="$page.props.auth.user.avatar_url"
                        :store-route="route('client.chat.store')"
                        :coach-id="coachId"
                        :client-id="clientProfileId"
                        :show-header="true"
                        class="flex-1"
                    />
                </div>
            </div>
        </div>
    </ClientLayout>
</template>

<style scoped>
.chat-scrollbar::-webkit-scrollbar {
    width: 4px;
}
.chat-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.chat-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.3);
    border-radius: 20px;
}
.chat-scrollbar:hover::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.5);
}
</style>
