<script setup lang="ts">
import { Head, Link as InertiaLink } from '@inertiajs/vue3';
import { useEcho } from '@laravel/echo-vue';
import { ref } from 'vue';
import { route } from 'ziggy-js';
import AddMutationForm from '@/components/AddMutationForm.vue';
import Chat from '@/components/Chat.vue';
import MutationList from '@/components/MutationList.vue';

defineOptions({
    layout: {
        breadcrumbs: [
            {
                name: 'Dynamics',
                href: route('dynamics.index'),
                isCurrent: false,
            },
            {
                name: 'dynamic.name',
                href: 'route(\'dynamics.show\', dynamic.id)',
                isCurrent: false,
            },
            {
                name: 'ledger.name',
                href: 'route(\'dynamics.ledgers.show\', { dynamic: dynamic.id, ledger: ledger.id })',
                isCurrent: true,
            },
        ],
    },
});

const props = defineProps<{
    dynamic: {
        id: number;
        name: string;
        chat: { id: number };
        participants?: Array<{
            id: number;
            name: string;
            pivot?: { role: string };
        }>;
    };
    ledger: {
        id: number;
        name: string;
        score: number;
        rules: string;
        alignment: string;
        media?: Array<{ id: number; url: string; mime_type: string }>;
        mutations: Array<{
            id: number;
            user_id: number;
            user: { name: string };
            amount: number;
            description: string;
            status: string;
            created_at: string;
            chat: any;
            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),
    },
    {
        name: props.ledger.name,
        href: route('dynamics.ledgers.show', {
            dynamic: props.dynamic.id,
            ledger: props.ledger.id,
        }),
    },
];

// Lightbox Modal state
const activeLightboxUrl = ref<string | null>(null);
const activeLightboxType = ref<'image' | 'video' | null>(null);

function openLightbox(url: string, mimeType: string) {
    activeLightboxUrl.value = url;
    activeLightboxType.value = mimeType.startsWith('image/')
        ? 'image'
        : 'video';
}

function closeLightbox() {
    activeLightboxUrl.value = null;
    activeLightboxType.value = null;
}

// Toast System
const toasts = ref<Array<{ id: number; message: string }>>([]);
let toastCount = 0;

function showToast(message: string) {
    const id = toastCount++;
    toasts.value.push({ id, message });
    setTimeout(() => {
        toasts.value = toasts.value.filter((t) => t.id !== id);
    }, 6000);
}

// Real-time Mutation Event Listeners
useEcho(`chats.${props.dynamic.chat.id}`, 'MutationCreated', (e: any) => {
    if (e.mutation.ledger_id === props.ledger.id) {
        // Prevent duplicate mutations
        if (!props.ledger.mutations.some((m) => m.id === e.mutation.id)) {
            props.ledger.mutations.unshift(e.mutation);
        }

        // Auto-update score if already approved (e.g. submitted by owner)
        if (e.mutation.status === 'approved') {
            props.ledger.score += e.mutation.amount;
        }

        const isAutoApproved =
            e.mutation.status === 'approved' && isOwnerUser(e.mutation.user_id);
        const statusPrefix = isAutoApproved ? '' : ` ${e.mutation.status}`;
        showToast(
            `New${statusPrefix} ledger entry added by ${e.mutation.user.name}: "${e.mutation.description}"`,
        );
    }
});

useEcho(`chats.${props.dynamic.chat.id}`, 'MutationUpdated', (e: any) => {
    if (e.mutation.ledger_id === props.ledger.id) {
        const index = props.ledger.mutations.findIndex(
            (m) => m.id === e.mutation.id,
        );

        if (index !== -1) {
            const oldStatus = props.ledger.mutations[index].status;
            const newStatus = e.mutation.status;

            // Update status in-place
            props.ledger.mutations[index].status = newStatus;

            // Transition ledger score based on status update
            if (oldStatus !== 'approved' && newStatus === 'approved') {
                props.ledger.score += e.mutation.amount;
            } else if (oldStatus === 'approved' && newStatus !== 'approved') {
                props.ledger.score -= e.mutation.amount;
            }

            showToast(
                `Chore entry "${e.mutation.description}" status updated to ${newStatus.toUpperCase()}`,
            );
        }
    }
});

// Check if user is an owner in the dynamic
function isOwnerUser(userId: number): boolean {
    const participant = props.dynamic.participants?.find(
        (p) => p.id === userId,
    );

    return participant?.pivot?.role === 'owner';
}
</script>

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

    <!-- Floating Toast Notifications -->
    <div class="c-ledger-show__toast-container">
        <div
            v-for="toast in toasts"
            :key="toast.id"
            class="c-ledger-show__toast-item"
        >
            <span>{{ toast.message }}</span>
            <button
                @click="toasts = toasts.filter((t) => t.id !== toast.id)"
                class="c-ledger-show__toast-close-btn"
            >
                ✕
            </button>
        </div>
    </div>

    <div class="c-ledger-show">
        <div class="c-ledger-show__container">
            <div class="c-ledger-show__card">
                <div class="c-ledger-show__body">
                    <div class="flex flex-col sm:flex-row sm:justify-between sm:items-start gap-4">
                        <div>
                            <h3 class="c-ledger-show__title">{{ ledger.name }}</h3>
                            <p class="c-ledger-show__score">
                                Score: {{ ledger.score }}
                            </p>
                            <p class="c-ledger-show__rules">
                                {{ ledger.rules }}
                            </p>
                        </div>
                        <div v-if="isOwner" class="flex flex-col gap-2">
                            <InertiaLink
                                :href="route('dynamics.ledgers.predefined-mutations.index', [dynamic.id, ledger.id])"
                                class="c-ledger-show__manage-btn"
                            >
                                Predefined Mutations
                            </InertiaLink>
                        </div>
                    </div>

                    <!-- Ledger Alignment Badge / Subtitle -->
                    <div class="c-ledger-show__alignment-wrapper">
                        <span
                            v-if="ledger.alignment === 'positive'"
                            class="c-ledger-show__alignment-badge c-ledger-show__alignment-badge--positive"
                        >
                            ▲ Positive Alignment — A higher score is better.
                        </span>
                        <span
                            v-else-if="ledger.alignment === 'negative'"
                            class="c-ledger-show__alignment-badge c-ledger-show__alignment-badge--negative"
                        >
                            ▼ Negative Alignment — A lower score is better
                            (demerits / infractions).
                        </span>
                        <span
                            v-else
                            class="c-ledger-show__alignment-badge c-ledger-show__alignment-badge--neutral"
                        >
                            ◆ Neutral Alignment — Scorekeeping neutral.
                        </span>
                    </div>

                    <!-- Ledger Descriptive Media -->
                    <div
                        v-if="ledger.media && ledger.media.length > 0"
                        class="c-ledger-show__media-list"
                    >
                        <div
                            v-for="item in ledger.media"
                            :key="item.id"
                            class="c-ledger-show__media-item"
                        >
                            <img
                                v-if="item.mime_type.startsWith('image/')"
                                :src="item.url"
                                class="c-ledger-show__media-img"
                                @click="openLightbox(item.url, item.mime_type)"
                            />
                            <div
                                v-else-if="item.mime_type.startsWith('video/')"
                                class="c-ledger-show__media-video-wrapper"
                                @click="openLightbox(item.url, item.mime_type)"
                            >
                                <video
                                    :src="item.url"
                                    class="c-ledger-show__media-video"
                                ></video>
                                <div class="c-ledger-show__media-video-overlay">
                                    ▶
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Add Mutation Form Component -->
            <AddMutationForm :dynamic-id="dynamic.id" :ledger-id="ledger.id" />

            <!-- Mutation List Component -->
            <MutationList
                :dynamic-id="dynamic.id"
                :ledger-id="ledger.id"
                :mutations="ledger.mutations"
                :participants="dynamic.participants"
                :is-owner="isOwner"
                :ledger-alignment="ledger.alignment"
                @open-lightbox="openLightbox"
            />

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

    <!-- Lightbox Modal -->
    <div v-if="activeLightboxUrl" class="c-lightbox" @click="closeLightbox">
        <button @click="closeLightbox" class="c-lightbox__close">✕</button>
        <div class="c-lightbox__content" @click.stop>
            <img
                v-if="activeLightboxType === 'image'"
                :src="activeLightboxUrl"
                class="c-lightbox__image"
            />
            <video
                v-else-if="activeLightboxType === 'video'"
                :src="activeLightboxUrl"
                controls
                autoplay
                class="c-lightbox__video"
            ></video>
        </div>
    </div>
</template>

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

.c-ledger-show__toast-container {
    @apply pointer-events-none fixed top-6 right-6 z-50 flex max-w-sm flex-col gap-3;
}

.c-ledger-show__toast-item {
    @apply pointer-events-auto flex items-center justify-between gap-4 rounded-lg border border-neutral-700/50 bg-neutral-900 px-4 py-3 text-sm text-white shadow-xl;
}

.c-ledger-show__toast-close-btn {
    @apply cursor-pointer text-neutral-400 hover:text-white;
}

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

.c-ledger-show__manage-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-ledger-show__container {
    @apply mx-auto max-w-7xl sm:px-6 lg:px-8;
}

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

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

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

.c-ledger-show__score {
    @apply mt-2 text-sm text-gray-600 dark:text-gray-400;
}

.c-ledger-show__rules {
    @apply mt-2 text-sm text-gray-600 dark:text-gray-400;
}

.c-ledger-show__alignment-wrapper {
    @apply mt-3 flex items-center;
}

.c-ledger-show__alignment-badge {
    @apply rounded px-2.5 py-1 text-xs font-semibold tracking-wide uppercase;
}

.c-ledger-show__alignment-badge--positive {
    @apply bg-green-50/50 text-green-600 dark:bg-green-950/20 dark:text-green-400;
}

.c-ledger-show__alignment-badge--negative {
    @apply bg-red-50/50 text-red-600 dark:bg-red-950/20 dark:text-red-400;
}

.c-ledger-show__alignment-badge--neutral {
    @apply bg-gray-50/50 text-gray-500 dark:bg-neutral-800/20 dark:text-gray-400;
}

.c-ledger-show__media-list {
    @apply mt-4 flex flex-wrap gap-3;
}

.c-ledger-show__media-item {
    @apply max-w-[320px] overflow-hidden rounded-md border border-neutral-200 bg-black dark:border-neutral-700;
}

.c-ledger-show__media-img {
    @apply h-auto max-h-[200px] w-full cursor-pointer object-cover transition-opacity hover:opacity-90;
}

.c-ledger-show__media-video-wrapper {
    @apply relative cursor-pointer transition-opacity hover:opacity-90;
}

.c-ledger-show__media-video {
    @apply h-auto max-h-[200px] w-full;
}

.c-ledger-show__media-video-overlay {
    @apply absolute inset-0 flex items-center justify-center bg-black/40 text-2xl font-bold text-white;
}
</style>
