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

const props = defineProps<{
    dynamic: {
        id: number;
        name: string;
        rules: string;
        chat: any;
        participants: Array<{ id: number; name: string, pivot: { display_name: string | null } }>;
        ledgers: Array<{
            id: number;
            name: string;
            score: number;
            alignment: string;
            media?: Array<{ id: number; url: string; mime_type: string }>;
        }>;
    };
    isOwner: boolean;
    messages: {
        data: Array<any>;
        next_page_url: string | null;
    };
}>();


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">
                    <div class="flex justify-between items-start">
                        <div>
                            <h3 class="c-dynamic-show__title">{{ dynamic.name }}</h3>
                            <p class="c-dynamic-show__rules">
                                {{ dynamic.rules }}
                            </p>
                        </div>
                        <InertiaLink v-if="isOwner" :href="route('dynamics.edit', dynamic.id)" class="c-dynamic-show__settings-btn">
                            Settings
                        </InertiaLink>
                    </div>
                </div>
            </div>

            <!-- Dynamic Chat -->
            <Chat :chat="dynamic.chat" :initial-messages="messages" :participants="dynamic.participants" :dynamic-id="dynamic.id" />

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

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

            <div v-if="isOwner" class="mt-8 flex gap-4">
                <InertiaLink :href="route('dynamics.invitations.create', dynamic.id)" class="c-dynamic-show__action-btn">
                    Invite User
                </InertiaLink>
                <InertiaLink :href="route('dynamics.ledgers.create', dynamic.id)" class="c-dynamic-show__action-btn">
                    Create Ledger
                </InertiaLink>
            </div>
        </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;
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.c-dynamic-show__body {
    @apply p-6;
    color: var(--foreground);
}

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

.c-dynamic-show__rules {
    @apply mt-2 text-sm;
    color: var(--muted-foreground);
}

.c-dynamic-show__settings-btn {
    @apply inline-flex items-center rounded-md border border-transparent bg-gray-800 px-4 py-2 text-xs font-semibold tracking-widest text-white uppercase transition duration-150 ease-in-out hover:bg-gray-700 focus:bg-gray-700 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-none active:bg-gray-900 dark:bg-gray-200 dark:text-gray-800 dark:hover:bg-white dark:focus:bg-white dark:focus:ring-offset-gray-800 dark:active:bg-gray-300;
}

.c-dynamic-show__action-btn {
    @apply inline-flex items-center rounded-md border border-transparent bg-gray-800 px-4 py-2 text-xs font-semibold tracking-widest text-white uppercase transition duration-150 ease-in-out hover:bg-gray-700 focus:bg-gray-700 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-none active:bg-gray-900 dark:bg-gray-200 dark:text-gray-800 dark:hover:bg-white dark:focus:bg-white dark:focus:ring-offset-gray-800 dark:active:bg-gray-300;
}
</style>
