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

    <EmployeeLayout>
        <div class="max-w-5xl mx-auto space-y-8 animate-fade-in pb-12">
            <!-- 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-3 bg-brand-primary/10 rounded-2xl shadow-sm border border-brand-primary/5">
                        <Megaphone class="w-6 h-6 text-brand-primary" />
                    </div>
                    <div>
                        <h1 class="text-2xl font-black text-slate-900 dark:text-white tracking-tight leading-none">
                            {{ __('newsroom') }}
                        </h1>
                        <p class="text-sm text-slate-500 dark:text-slate-400 mt-1.5 font-medium">
                            {{ __('stay_updated_with_the_latest_company_broadcasts') }}
                        </p>
                    </div>
                </div>
            </div>

            <!-- Feed Grid -->
            <div v-if="announcements.data.length > 0" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <div 
                    v-for="announcement in announcements.data" 
                    :key="announcement.id"
                    class="group relative bg-white dark:bg-slate-900 rounded-3xl border border-slate-100 dark:border-slate-800 shadow-xl shadow-slate-200/20 dark:shadow-none overflow-hidden transition-all duration-500 hover:-translate-y-1 hover:shadow-2xl hover:shadow-slate-300/30 flex flex-col ring-1 ring-slate-900/5"
                >
                    <!-- Read/Unread Badge -->
                    <div v-if="!announcement.is_read" class="absolute top-4 right-4 z-10">
                        <span class="flex h-2 w-2 rounded-full bg-brand-primary animate-ping absolute opacity-75"></span>
                        <span class="relative inline-flex rounded-full h-2 w-2 bg-brand-primary"></span>
                    </div>

                    <div class="p-6 flex-1 flex flex-col">
                        <div class="flex items-center gap-2 mb-4">
                            <span class="px-2 py-0.5 rounded-lg text-[10px] font-black uppercase tracking-widest bg-slate-100 dark:bg-slate-800 text-slate-500 dark:text-slate-400 border border-slate-200/50">
                                {{ announcement.created_at_formatted || __('recent') }}
                            </span>
                        </div>

                        <h3 class="text-lg font-bold text-slate-900 dark:text-white group-hover:text-brand-primary transition-colors line-clamp-2 leading-snug">
                            {{ announcement.title }}
                        </h3>
                        
                        <p class="mt-3 text-sm text-slate-500 dark:text-slate-400 line-clamp-3 leading-relaxed">
                            {{ announcement.message }}
                        </p>
                    </div>

                    <div class="px-6 py-5 bg-slate-50/50 dark:bg-slate-900/50 border-t border-slate-50 dark:border-slate-800 flex items-center justify-between">
                        <div class="flex items-center gap-2.5">
                            <div class="w-7 h-7 rounded-full bg-slate-200 dark:bg-slate-800 flex items-center justify-center text-[10px] font-bold text-slate-500">
                                {{ announcement.creator?.name?.charAt(0) }}
                            </div>
                            <span class="text-[11px] font-bold text-slate-500 dark:text-slate-400">{{ announcement.creator?.name }}</span>
                        </div>
                        
                        <Link :href="employee.announcements.show.url({ announcement: announcement.id })" class="inline-flex items-center gap-1.5 text-xs font-black text-brand-primary hover:gap-2.5 transition-all">
                            {{ __('view_details') }}
                            <ArrowRight class="w-3.5 h-3.5" />
                        </Link>
                    </div>
                </div>
            </div>

            <!-- Empty State -->
            <div v-else class="py-24 bg-white dark:bg-slate-900 rounded-[3rem] border border-dashed border-slate-200 dark:border-slate-800 flex flex-col items-center text-center">
                <div class="p-6 bg-slate-50 dark:bg-slate-800/50 rounded-full mb-6">
                    <Inbox class="w-12 h-12 text-slate-200 dark:text-slate-700" />
                </div>
                <h3 class="text-xl font-bold text-slate-900 dark:text-white">{{ __('all_caught_up') }}</h3>
                <p class="text-sm text-slate-500 mt-2 max-w-xs">{{ __('no_new_announcements_at_the_moment_check_back_later') }}</p>
            </div>

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

<script setup lang="ts">
import { Head, Link } from '@inertiajs/vue3';
import EmployeeLayout from '@/Layouts/EmployeeLayout.vue';
import { Megaphone, ArrowRight, Inbox } from 'lucide-vue-next';
import employee from '@/routes/employee';

defineProps<{
    announcements: {
        data: any[];
        links: any[];
    };
}>();
</script>

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