<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
            {{ __('Dashboard') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 text-gray-900 dark:text-gray-100">
                    <h3 class="text-lg font-medium">Welcome back, {{ auth()->user()->name }}!</h3>

                    <div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded">
                            <h4 class="font-medium">Recent Moods</h4>
                            @forelse($recentMoods as $mood)
                                <div class="flex justify-between mt-2">
                                    <span>{{ $mood->entry_date->format('M d') }}</span>
                                    <span class="font-bold">{{ $mood->mood_score }}/10</span>
                                </div>
                            @empty
                                <p class="text-gray-500">No moods logged yet. <a href="{{ route('moods.create') }}" class="text-blue-600">Add one</a></p>
                            @endforelse
                        </div>
                        <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded">
                            <h4 class="font-medium">Recent AI Chats</h4>
                            @forelse($recentChats as $chat)
                                <div class="mt-2">
                                    <a href="{{ route('ai.conversation', $chat) }}" class="text-blue-600 hover:underline">
                                        {{ Str::limit($chat->user_message, 50) }}
                                    </a>
                                    <span class="text-sm text-gray-500">{{ $chat->created_at->diffForHumans() }}</span>
                                </div>
                            @empty
                                <p class="text-gray-500">No chats yet. <a href="{{ route('ai.chat') }}" class="text-blue-600">Start a conversation</a></p>
                            @endforelse
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>
