<script setup lang="ts">
import { ref, computed } from 'vue';
import { useForm, usePage } from '@inertiajs/vue3';
import { useEcho, echoIsConfigured, configureEcho } from '@laravel/echo-vue';
import { route } from 'ziggy-js';
import { Paperclip, Info } from '@lucide/vue';

const props = defineProps<{
    chat: {
        id: number;
        messages: Array<{
            id: number;
            user: { id: number; name: string };
            content: string;
            created_at: string;
            media?: Array<{
                id: number;
                url: string;
                file_name: string;
                mime_type: string;
            }>;
        }>;
    };
}>();

if (!echoIsConfigured()) {
    configureEcho({
        broadcaster: 'reverb',
        key: import.meta.env.VITE_REVERB_APP_KEY || 'mock-key',
        wsHost: import.meta.env.VITE_REVERB_HOST || 'localhost',
        wsPort: import.meta.env.VITE_REVERB_PORT
            ? Number(import.meta.env.VITE_REVERB_PORT)
            : 8080,
        wssPort: import.meta.env.VITE_REVERB_PORT
            ? Number(import.meta.env.VITE_REVERB_PORT)
            : 8080,
        forceTLS: false,
        enabledTransports: ['ws', 'wss'],
    });
}

const fileInput = ref<HTMLInputElement | null>(null);

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

useEcho(`chats.${props.chat.id}`, 'MessageSent', (e: any) => {
    props.chat.messages.push(e.message);
});

function handleFileChange(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 removeFile(index: number) {
    form.media.splice(index, 1);
}

const currentUser = computed(() => usePage().props.auth?.user);

function isOwnMessage(messageUserId: number): boolean {
    return currentUser.value && currentUser.value.id === messageUserId;
}

function submit() {
    form.post(route('chats.messages.store', props.chat.id), {
        onSuccess: () => {
            form.reset();
            if (fileInput.value) {
                fileInput.value.value = '';
            }
        },
    });
}

// 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;
}
</script>

<template>
    <div class="c-chat">
        <h4 class="c-chat__title">Chat</h4>
        <div class="c-chat__list">
            <div
                v-for="message in chat.messages"
                :key="message.id"
                :class="[
                    'c-chat__message',
                    {
                        'c-chat__message--system':
                            message.content.startsWith('System:'),
                        'c-chat__message--own': isOwnMessage(message.user.id),
                        'c-chat__message--other': !isOwnMessage(
                            message.user.id,
                        ),
                    },
                ]"
            >
                <!-- Standard User Chat Message -->
                <template v-if="!message.content.startsWith('System:')">
                    <div class="c-chat__message-header">
                        <span class="c-chat__message-author">{{
                            message.user.name
                        }}</span>
                        <span class="c-chat__message-time">{{
                            new Date(message.created_at).toLocaleString()
                        }}</span>
                    </div>
                    <p class="c-chat__message-text">
                        {{ message.content }}
                    </p>

                    <!-- Attached Media Display -->
                    <div
                        v-if="message.media && message.media.length > 0"
                        class="c-chat__message-media"
                    >
                        <div
                            v-for="item in message.media"
                            :key="item.id"
                            class="c-chat__media-item"
                        >
                            <img
                                v-if="item.mime_type.startsWith('image/')"
                                :src="item.url"
                                :alt="item.file_name"
                                class="c-chat__image cursor-pointer 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="c-chat__video"
                                ></video>
                                <div class="c-chat__play-overlay">▶</div>
                            </div>
                        </div>
                    </div>
                </template>

                <!-- Subtle Activity Log System Message -->
                <template v-else>
                    <div class="c-chat__system-inner">
                        <Info class="c-chat__system-icon" />
                        <span class="c-chat__system-text">
                            {{ message.content.replace(/^System:\s*/, '') }}
                        </span>
                        <span class="c-chat__system-time">
                            {{
                                new Date(message.created_at).toLocaleTimeString(
                                    [],
                                    { hour: '2-digit', minute: '2-digit' },
                                )
                            }}
                        </span>
                    </div>
                </template>
            </div>
            <div v-if="chat.messages.length === 0" class="c-chat__empty">
                No messages yet.
            </div>
        </div>
        <form @submit.prevent="submit" class="c-chat__form">
            <div class="c-chat__form-group">
                <label for="content" class="c-chat__label">Message</label>
                <textarea
                    v-model="form.content"
                    id="content"
                    rows="3"
                    class="c-chat__textarea"
                    placeholder="Type a message..."
                ></textarea>
                <div v-if="form.errors.content" class="c-chat__error">
                    {{ form.errors.content }}
                </div>

                <!-- Attachment Button & Hidden Input -->
                <div class="c-chat__attachment-container">
                    <button
                        type="button"
                        @click="fileInput?.click()"
                        class="c-chat__attach-btn"
                    >
                        <Paperclip class="c-chat__attach-icon" />
                        Attach Photos/Videos
                    </button>
                    <input
                        ref="fileInput"
                        type="file"
                        multiple
                        accept="image/*,video/*"
                        class="hidden"
                        @change="handleFileChange"
                    />
                </div>

                <!-- Previews List -->
                <div v-if="form.media.length > 0" class="c-chat__preview-list">
                    <div
                        v-for="(file, index) in form.media"
                        :key="index"
                        class="c-chat__preview-item"
                    >
                        <span class="c-chat__preview-name">{{
                            file.name
                        }}</span>
                        <button
                            type="button"
                            @click="removeFile(index)"
                            class="c-chat__preview-remove"
                        >
                            ✕
                        </button>
                    </div>
                </div>
            </div>
            <div class="c-chat__submit-box">
                <button
                    type="submit"
                    :disabled="form.processing"
                    class="c-chat__button"
                >
                    Send
                </button>
            </div>
        </form>

        <!-- Gorgeous Dark 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>
    </div>
</template>
