<template>
    <Head :title="__('company_announcements')" />

    <AdminLayout>
        <div class="space-y-6 animate-fade-in pb-8">
            <!-- Header Section -->
            <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
                <div class="flex items-center gap-4">
                    <div class="p-2.5 bg-brand-primary/10 rounded-xl">
                        <Megaphone class="w-5 h-5 text-brand-primary" />
                    </div>
                    <div>
                        <h1 class="text-xl font-extrabold text-slate-900 dark:text-white tracking-tight">
                            {{ __('company_announcements') }}
                        </h1>
                        <p class="text-sm text-slate-500 dark:text-slate-400 mt-0.5">
                            {{ __('broadcast_important_updates_and_news_to_your_workforce') }}
                        </p>
                    </div>
                </div>
                <div class="flex items-center gap-3">
                    <Link :href="admin.announcements.create.url()" class="inline-flex items-center gap-2 px-4 py-2 text-sm font-bold text-white bg-slate-900 dark:bg-slate-100 dark:text-slate-900 rounded-xl hover:bg-slate-800 dark:hover:bg-white transition-all shadow-md shadow-slate-900/20 active:scale-95 group/btn relative overflow-hidden">
                        <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/5 to-transparent -translate-x-full group-hover/btn:animate-shimmer"></div>
                        <Plus class="w-4 h-4 relative z-10" />
                        <span class="relative z-10">{{ __('new_announcement') }}</span>
                    </Link>
                </div>
            </div>

            <!-- Filters Section -->
            <div class="bg-white dark:bg-slate-800 rounded-xl border border-slate-100 dark:border-slate-700 shadow-sm overflow-hidden ring-1 ring-slate-200/50 dark:ring-slate-700/50">
                <div class="p-5 bg-slate-50/50 dark:bg-slate-900/50 border-b border-slate-100 dark:border-slate-700">
                    <div class="relative group max-w-md">
                        <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                            <Search class="w-4 h-5 text-slate-400 group-focus-within:text-brand-primary transition-colors" />
                        </div>
                        <input
                            v-model="filters.search"
                            type="text"
                            :placeholder="__('search_by_title')"
                            class="w-full pl-11 pr-4 py-2 text-sm bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-700 rounded-xl focus:ring-4 focus:ring-brand-primary/10 focus:border-brand-primary transition-all shadow-sm shadow-inner placeholder:text-slate-400 font-medium"
                        />
                    </div>
                </div>
            </div>

            <!-- Announcements Catalog -->
            <div class="bg-white dark:bg-slate-800 rounded-xl border border-slate-100 dark:border-slate-700 shadow-sm overflow-hidden ring-1 ring-slate-200/50 dark:ring-slate-700/50">
                <div class="overflow-x-auto">
                    <table class="w-full text-left border-collapse">
                        <thead>
                            <tr class="bg-slate-50/50 dark:bg-slate-900/50">
                                <th class="px-5 py-3 text-[10px] uppercase tracking-widest font-extrabold text-slate-400 border-b border-slate-100 dark:border-slate-700">{{ __('announcement_details') }}</th>
                                <th class="px-5 py-3 text-[10px] uppercase tracking-widest font-extrabold text-slate-400 border-b border-slate-100 dark:border-slate-700">{{ __('audience_targeting') }}</th>
                                <th class="px-5 py-3 text-[10px] uppercase tracking-widest font-extrabold text-slate-400 border-b border-slate-100 dark:border-slate-700">{{ __('status_reach') }}</th>
                                <th class="px-5 py-3 text-[10px] uppercase tracking-widest font-extrabold text-slate-400 border-b border-slate-100 dark:border-slate-700 text-right">{{ __('action') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-50 dark:divide-slate-700/50">
                            <tr v-for="announcement in announcements.data" :key="announcement.id" class="group hover:bg-slate-50/50 dark:hover:bg-slate-900/30 transition-all">
                                <td class="px-5 py-3.5">
                                    <div class="flex items-center gap-3">
                                        <div class="w-9 h-9 rounded-lg bg-slate-100 dark:bg-slate-700 flex items-center justify-center group-hover:bg-white dark:group-hover:bg-slate-600 transition-colors shadow-sm">
                                            <FileText class="w-4 h-4 text-slate-500 dark:text-slate-400" />
                                        </div>
                                        <div>
                                            <Link :href="admin.announcements.edit.url({ announcement: announcement.id })" class="text-sm font-bold text-slate-900 dark:text-white hover:text-brand-primary transition-colors">
                                                {{ announcement.title }}
                                            </Link>
                                            <p class="text-[11px] text-slate-400 mt-0.5">{{ __('by') }} {{ announcement.creator?.name }} • {{ announcement.created_at_formatted || announcement.created_at }}</p>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-5 py-3.5">
                                    <div class="flex flex-wrap gap-1.5">
                                        <span v-if="announcement.target_type === 'all'" class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 border border-slate-200/50 dark:border-slate-700">
                                            {{ __('all_employees') }}
                                        </span>
                                        <template v-else-if="announcement.target_type === 'department'">
                                            <span v-for="dept in announcement.departments" :key="dept.id" class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold bg-blue-50 dark:bg-blue-500/10 text-blue-600 dark:text-blue-400 border border-blue-100 dark:border-blue-500/20">
                                                {{ dept.name }}
                                            </span>
                                        </template>
                                        <template v-else-if="announcement.target_type === 'role'">
                                            <span v-for="role in announcement.roles" :key="role.id" class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold bg-purple-50 dark:bg-purple-500/10 text-purple-600 dark:text-purple-400 border border-purple-100 dark:border-purple-500/20">
                                                {{ role.name }}
                                            </span>
                                        </template>
                                    </div>
                                </td>
                                <td class="px-5 py-3.5">
                                    <div class="flex flex-col gap-1.5">
                                        <span :class="['inline-flex items-center w-fit px-2 py-0.5 rounded text-[10px] font-extrabold uppercase tracking-tight', getStatusClass(announcement)]">
                                            <div class="w-1 h-1 rounded-full bg-current mr-1.5" :class="announcement.publish_at < new Date().toISOString() ? 'animate-pulse' : ''"></div>
                                            {{ getStatusText(announcement) }}
                                        </span>
                                        <div class="flex items-center gap-1.5 text-[10px] text-slate-400">
                                            <Eye class="w-3 h-3" />
                                            <span>{{ announcement.read_by_users_count }} {{ __('reads') }}</span>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-5 py-3.5 text-right">
                                    <div class="flex items-center justify-end gap-1.5 transition-all duration-200">
                                        <Link :href="admin.announcements.edit.url({ announcement: announcement.id })" class="p-1.5 text-slate-400 hover:text-amber-600 hover:bg-amber-50 dark:hover:bg-amber-500/10 rounded-lg transition-all" :title="__('edit')">
                                            <Edit2 class="w-4 h-4" />
                                        </Link>
                                        <button @click="confirmDelete(announcement.id)" class="p-1.5 text-slate-400 hover:text-rose-600 hover:bg-rose-50 dark:hover:bg-rose-500/10 rounded-lg transition-all" :title="__('delete')">
                                            <Trash2 class="w-4 h-4" />
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            <tr v-if="announcements.data.length === 0">
                                <td colspan="4" class="px-5 py-12 text-center">
                                    <div class="flex flex-col items-center gap-3">
                                        <div class="p-4 bg-slate-50 dark:bg-slate-900 rounded-full">
                                            <Info class="w-8 h-8 text-slate-300" />
                                        </div>
                                        <div class="max-w-xs">
                                            <p class="text-sm font-bold text-slate-900 dark:text-white">{{ __('no_announcements_found') }}</p>
                                            <p class="text-xs text-slate-400 mt-1">{{ __('get_started_by_creating_your_first_broadcast') }}</p>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                <div v-if="announcements.links && announcements.links.length > 3" class="p-5 border-t border-slate-50 dark:border-slate-700 bg-slate-50/30 flex justify-center">
                    <component
                        :is="link.url ? 'Link' : 'span'"
                        v-for="(link, k) in announcements.links"
                        :key="k"
                        :href="link.url"
                        v-html="link.label"
                        class="px-3 py-1 text-xs rounded-lg transition-all"
                        :class="{ 'bg-brand-primary text-white font-bold shadow-md shadow-brand-primary/20': link.active, 'text-slate-500 hover:bg-white dark:hover:bg-slate-800': link.url && !link.active, 'text-slate-300': !link.url }"
                    />
            </div>
            </div>
        </div>

        <ConfirmationModal 
            :show="showDeleteModal" 
            @close="showDeleteModal = false" 
            @confirm="deleteAnnouncement"
            :title="__('delete_announcement_question')"
            :message="__('are_you_sure_you_want_to_delete_this_announcement_this_action_cannot_be_undone')"
            :processing="isDeleting"
            :confirm-text="__('delete')"
        />
    </AdminLayout>
</template>

<script setup lang="ts">
import { Head, Link, router } from '@inertiajs/vue3';
import AdminLayout from '@/Layouts/AdminLayout.vue';
import { 
    Plus, Search, Megaphone, FileText, 
    Edit2, Trash2, Eye, Info 
} from 'lucide-vue-next';
import { reactive, watch } from 'vue';
import { debounce } from 'lodash';
import admin from '@/routes/admin';
import { wTrans as __ } from '@/Core/i18n';

import ConfirmationModal from '@/Components/Common/ConfirmationModal.vue';
import { ref } from 'vue';

const props = defineProps<{
    announcements: {
        data: any[];
        links: any[];
    };
    filters: {
        search?: string;
    };
}>();

const filters = reactive({
    search: props.filters.search || ''
});

const handleSearch = debounce(() => {
    router.get(admin.announcements.index.url(), filters, { preserveState: true, preserveScroll: true });
}, 300);

watch(() => filters.search, handleSearch);

// Delete functionality
const showDeleteModal = ref(false);
const itemToDelete = ref<number | null>(null);
const isDeleting = ref(false);

const confirmDelete = (id: number) => {
    itemToDelete.value = id;
    showDeleteModal.value = true;
};

const deleteAnnouncement = () => {
    if (itemToDelete.value) {
        isDeleting.value = true;
        router.delete(admin.announcements.destroy.url({ announcement: itemToDelete.value }), {
            onSuccess: () => {
                showDeleteModal.value = false;
                itemToDelete.value = null;
                isDeleting.value = false;
            },
            onError: () => {
                isDeleting.value = false;
            }
        });
    }
};

const getStatusClass = (announcement: any) => {
    const now = new Date();
    const publishAt = new Date(announcement.publish_at);
    
    if (!announcement.publish_at) return 'bg-slate-50 text-slate-500 border-slate-200 dark:bg-slate-700/50 dark:text-slate-400 dark:border-slate-600';
    if (publishAt > now) return 'bg-amber-50 text-amber-700 border-amber-100 dark:bg-amber-500/10 dark:text-amber-400 dark:border-amber-500/20';
    return 'bg-emerald-50 text-emerald-700 border-emerald-100 dark:bg-emerald-500/10 dark:text-emerald-400 dark:border-emerald-500/20';
};

const getStatusText = (announcement: any) => {
    const now = new Date();
    const publishAt = new Date(announcement.publish_at);
    
    if (!announcement.publish_at) return __('draft');
    if (publishAt > now) return __('scheduled');
    return __('published');
};
</script>

<style scoped>
.animate-fade-in {
    animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
</style>
