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

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;
        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;
}>();

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,
        }),
    },
];

const form = useForm({
    amount: 0,
    description: '',
    media: [] as File[],
});

function handleMutationFileChange(event: Event) {
    const files = (event.target as HTMLInputElement).files;
    if (files) {
        for (let i = 0; i < files.length; i++) {
            form.media.push(files[i]);
        }
    }
}

function removeMutationFile(index: number) {
    form.media.splice(index, 1);
}

function submit() {
    form.post(
        route('dynamics.ledgers.mutations.store', {
            dynamic: props.dynamic.id,
            ledger: props.ledger.id,
        }),
        {
            onSuccess: () => form.reset(),
        },
    );
}

// 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;
        }
        showToast(
            `New ${e.mutation.status} 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()}`,
            );
        }
    }
});

function updateStatus(mutationId: number, status: 'approved' | 'rejected') {
    useForm({ status }).put(
        route('dynamics.ledgers.mutations.update', {
            dynamic: props.dynamic.id,
            ledger: props.ledger.id,
            mutation: mutationId,
        }),
    );
}

// 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="pointer-events-none fixed top-6 right-6 z-50 flex max-w-sm flex-col gap-3"
    >
        <div
            v-for="toast in toasts"
            :key="toast.id"
            class="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"
        >
            <span>{{ toast.message }}</span>
            <button
                @click="toasts = toasts.filter((t) => t.id !== toast.id)"
                class="cursor-pointer text-neutral-400 hover:text-white"
            >
                ✕
            </button>
        </div>
    </div>

    <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">{{ ledger.name }}</h3>
                    <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
                        Score: {{ ledger.score }}
                    </p>
                    <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
                        {{ ledger.rules }}
                    </p>

                    <!-- Ledger Descriptive Media -->
                    <div
                        v-if="ledger.media && ledger.media.length > 0"
                        class="mt-4 flex flex-wrap gap-3"
                    >
                        <div
                            v-for="item in ledger.media"
                            :key="item.id"
                            class="max-w-[320px] overflow-hidden rounded-md border border-neutral-200 bg-black dark:border-neutral-700"
                        >
                            <img
                                v-if="item.mime_type.startsWith('image/')"
                                :src="item.url"
                                class="h-auto max-h-[200px] w-full cursor-pointer object-cover transition-opacity hover:opacity-90"
                                @click="openLightbox(item.url, item.mime_type)"
                            />
                            <div
                                v-else-if="item.mime_type.startsWith('video/')"
                                class="relative cursor-pointer transition-opacity hover:opacity-90"
                                @click="openLightbox(item.url, item.mime_type)"
                            >
                                <video
                                    :src="item.url"
                                    class="h-auto max-h-[200px] w-full"
                                ></video>
                                <div
                                    class="absolute inset-0 flex items-center justify-center bg-black/40 text-2xl font-bold text-white"
                                >
                                    ▶
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mt-8">
                <h4
                    class="text-lg font-medium text-gray-900 dark:text-gray-100"
                >
                    Add Mutation
                </h4>
                <form
                    @submit.prevent="submit"
                    class="mt-6 space-y-6 overflow-hidden bg-white p-6 shadow-sm sm:rounded-lg dark:bg-gray-800"
                >
                    <div>
                        <label
                            for="amount"
                            class="block text-sm font-medium text-gray-700 dark:text-gray-300"
                            >Amount</label
                        >
                        <input
                            v-model="form.amount"
                            id="amount"
                            type="number"
                            class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:focus:border-indigo-600 dark:focus:ring-indigo-600"
                        />
                        <div
                            v-if="form.errors.amount"
                            class="text-sm text-red-600"
                        >
                            {{ form.errors.amount }}
                        </div>
                    </div>

                    <div>
                        <label
                            for="description"
                            class="block text-sm font-medium text-gray-700 dark:text-gray-300"
                            >Description</label
                        >
                        <textarea
                            v-model="form.description"
                            id="description"
                            rows="4"
                            class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:focus:border-indigo-600 dark:focus:ring-indigo-600"
                        ></textarea>
                        <div
                            v-if="form.errors.description"
                            class="text-sm text-red-600"
                        >
                            {{ form.errors.description }}
                        </div>
                    </div>

                    <!-- Media Uploads for Mutations -->
                    <div>
                        <label
                            class="block text-sm font-medium text-gray-700 dark:text-gray-300"
                            >Attach Proof Media (Photos/Videos)</label
                        >
                        <input
                            type="file"
                            multiple
                            accept="image/*,video/*"
                            @change="handleMutationFileChange"
                            class="mt-1 block w-full text-sm text-neutral-500 file:mr-4 file:rounded-md file:border-0 file:bg-indigo-50 file:px-4 file:py-2 file:text-xs file:font-semibold file:text-indigo-700 hover:file:bg-indigo-100"
                        />
                        <div
                            v-if="form.media.length > 0"
                            class="mt-2 flex flex-wrap gap-2"
                        >
                            <div
                                v-for="(file, index) in form.media"
                                :key="index"
                                class="relative inline-flex items-center gap-2 rounded border border-neutral-200 bg-neutral-100 p-1.5 pr-8 text-xs dark:border-neutral-700 dark:bg-neutral-800"
                            >
                                <span class="max-w-[150px] truncate">{{
                                    file.name
                                }}</span>
                                <button
                                    type="button"
                                    @click="removeMutationFile(index)"
                                    class="absolute top-1.5 right-1.5 cursor-pointer text-[10px] text-neutral-400 hover:text-red-500"
                                >
                                    ✕
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="flex items-center gap-4">
                        <button
                            type="submit"
                            :disabled="form.processing"
                            class="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"
                        >
                            Add Mutation
                        </button>
                    </div>
                </form>
            </div>

            <div class="mt-8">
                <h4
                    class="text-lg font-medium text-gray-900 dark:text-gray-100"
                >
                    Mutations
                </h4>
                <ul class="mt-4 space-y-4">
                    <li
                        v-for="mutation in ledger.mutations"
                        :key="mutation.id"
                        class="overflow-hidden bg-white p-4 shadow-sm sm:rounded-lg dark:bg-gray-800"
                    >
                        <div class="flex items-start justify-between">
                            <div>
                                <span class="font-semibold">{{
                                    mutation.user.name
                                }}</span>
                                <div class="mt-1 flex items-center gap-2">
                                    <span
                                        :class="{
                                            'text-green-500':
                                                mutation.amount > 0,
                                            'text-red-500': mutation.amount < 0,
                                        }"
                                        class="text-sm font-bold"
                                        >{{ mutation.amount > 0 ? '+' : ''
                                        }}{{ mutation.amount }}</span
                                    >
                                    <!-- Only show status badge if mutation was NOT auto-approved by an owner -->
                                    <span
                                        v-if="!isOwnerUser(mutation.user_id)"
                                        :class="{
                                            'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400':
                                                mutation.status === 'pending',
                                            'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400':
                                                mutation.status === 'approved',
                                            'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400':
                                                mutation.status === 'rejected',
                                        }"
                                        class="rounded px-1.5 py-0.5 text-[10px] font-medium tracking-wider uppercase"
                                    >
                                        {{ mutation.status }}
                                    </span>
                                </div>
                            </div>
                            <div class="text-xs text-gray-500">
                                {{
                                    new Date(
                                        mutation.created_at,
                                    ).toLocaleString()
                                }}
                            </div>
                        </div>
                        <p
                            class="mt-3 text-sm text-gray-600 dark:text-gray-400"
                        >
                            {{ mutation.description }}
                        </p>

                        <!-- Attached Mutation Proof Media -->
                        <div
                            v-if="mutation.media && mutation.media.length > 0"
                            class="mt-3 flex flex-wrap gap-2"
                        >
                            <div
                                v-for="item in mutation.media"
                                :key="item.id"
                                class="max-w-[200px] overflow-hidden rounded-md border border-neutral-200 bg-black dark:border-neutral-700"
                            >
                                <img
                                    v-if="item.mime_type.startsWith('image/')"
                                    :src="item.url"
                                    class="h-auto max-h-[150px] w-full cursor-pointer object-cover transition-opacity hover:opacity-90"
                                    @click="
                                        openLightbox(item.url, item.mime_type)
                                    "
                                />
                                <div
                                    v-else-if="
                                        item.mime_type.startsWith('video/')
                                    "
                                    class="relative cursor-pointer transition-opacity hover:opacity-90"
                                    @click="
                                        openLightbox(item.url, item.mime_type)
                                    "
                                >
                                    <video
                                        :src="item.url"
                                        class="h-auto max-h-[150px] w-full"
                                    ></video>
                                    <div
                                        class="absolute inset-0 flex items-center justify-center bg-black/40 text-2xl font-bold text-white"
                                    >
                                        ▶
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Owner Approve/Reject Actions -->
                        <div
                            v-if="isOwner && mutation.status === 'pending'"
                            class="mt-3 flex gap-2 border-t border-neutral-100 pt-3 dark:border-neutral-700"
                        >
                            <button
                                @click="updateStatus(mutation.id, 'approved')"
                                class="inline-flex cursor-pointer items-center rounded bg-green-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-green-500"
                            >
                                Approve
                            </button>
                            <button
                                @click="updateStatus(mutation.id, 'rejected')"
                                class="inline-flex cursor-pointer items-center rounded bg-red-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-red-500"
                            >
                                Reject
                            </button>
                        </div>

                        <Chat :chat="mutation.chat" />
                    </li>
                </ul>
                <div
                    v-if="ledger.mutations.length === 0"
                    class="mt-4 text-gray-500"
                >
                    No mutations found for this ledger.
                </div>
            </div>
        </div>
    </div>

    <!-- Lightbox Modal -->
    <div
        v-if="activeLightboxUrl"
        class="fixed inset-0 z-50 flex items-center justify-center bg-black/95 p-4"
        @click="closeLightbox"
    >
        <button
            @click="closeLightbox"
            class="absolute top-6 right-6 cursor-pointer text-3xl text-white transition-colors duration-200 hover:text-red-500"
        >
            ✕
        </button>
        <div class="max-h-full max-w-full" @click.stop>
            <img
                v-if="activeLightboxType === 'image'"
                :src="activeLightboxUrl"
                class="max-h-[90vh] max-w-full rounded object-contain shadow-lg"
            />
            <video
                v-else-if="activeLightboxType === 'video'"
                :src="activeLightboxUrl"
                controls
                autoplay
                class="max-h-[90vh] max-w-full rounded shadow-lg"
            ></video>
        </div>
    </div>
</template>
