<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="c-dynamic-show">
        <div class="c-dynamic-show__container">
            <div class="c-dynamic-show__card">
                <div class="c-dynamic-show__body">
                    <h3 class="c-dynamic-show__title">{{ dynamic.name }}</h3>
                    <p class="c-dynamic-show__rules">
                        {{ 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>

<style scoped>
@reference "../../../css/app.css";

.c-dynamic-show {
    @apply py-12;
}

.c-dynamic-show__container {
    @apply mx-auto max-w-7xl sm:px-6 lg:px-8;
}

.c-dynamic-show__card {
    @apply overflow-hidden bg-white shadow-sm sm:rounded-lg dark:bg-gray-800;
}

.c-dynamic-show__body {
    @apply p-6 text-gray-900 dark:text-gray-100;
}

.c-dynamic-show__title {
    @apply text-lg font-medium;
}

.c-dynamic-show__rules {
    @apply mt-2 text-sm text-gray-600 dark:text-gray-400;
}
</style>
