<script setup lang="ts">
import { Head } from '@inertiajs/vue3';
import { route } from 'ziggy-js';
import Chat from '@/components/Chat.vue';
import CreateLedgerForm from '@/components/CreateLedgerForm.vue';
import LedgerList from '@/components/LedgerList.vue';
import ParticipantsList from '@/components/ParticipantsList.vue';

const props = defineProps<{
    dynamic: {
        id: number;
        name: string;
        rules: string;
        chat: any;
        participants: Array<{ id: number; name: string }>;
        ledgers: Array<{
            id: number;
            name: string;
            score: number;
            media?: Array<{ id: number; url: string; mime_type: string }>;
        }>;
    };
}>();

const breadcrumbs = [
    {
        name: 'Dynamics',
        href: route('dynamics.index'),
    },
    {
        name: props.dynamic.name,
        href: route('dynamics.show', props.dynamic.id),
    },
];
</script>

<template>
    <Head :title="dynamic.name" />

    <div class="py-12">
        <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
            <div
                class="overflow-hidden bg-white shadow-sm sm:rounded-lg dark:bg-gray-800"
            >
                <div class="p-6 text-gray-900 dark:text-gray-100">
                    <h3 class="text-lg font-medium">{{ dynamic.name }}</h3>
                    <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
                        {{ dynamic.rules }}
                    </p>
                </div>
            </div>

            <!-- Dynamic Chat -->
            <Chat :chat="dynamic.chat" />

            <!-- Participants Component -->
            <ParticipantsList :participants="dynamic.participants" />

            <!-- Ledgers List Component -->
            <LedgerList :dynamic-id="dynamic.id" :ledgers="dynamic.ledgers" />

            <!-- Create Ledger Form Component -->
            <CreateLedgerForm :dynamic-id="dynamic.id" />
        </div>
    </div>
</template>
