<template>
    <Head :title="announcement.title" />

    <EmployeeLayout>
        <div class="max-w-3xl mx-auto space-y-6 animate-fade-in pb-16">
            <!-- Navigation -->
            <div class="flex items-center gap-4">
                <Link :href="employee.announcements.index.url()" class="p-2.5 bg-white dark:bg-slate-800 rounded-xl border border-slate-100 dark:border-slate-700 hover:bg-slate-50 transition-all shadow-sm group active:scale-95">
                    <ChevronLeft class="w-5 h-5 text-slate-500 group-hover:text-brand-primary" />
                </Link>
                <div class="flex items-center gap-1.5 text-xs font-bold text-slate-400 uppercase tracking-widest">
                    <Link :href="employee.announcements.index.url()" class="hover:text-brand-primary transition-colors">{{ __('newsroom') }}</Link>
                    <ChevronRight class="w-3.5 h-3.5" />
                    <span class="text-slate-500 dark:text-slate-300">{{ __('reading_broadcast') }}</span>
                </div>
            </div>

            <!-- Content Card -->
            <article class="bg-white dark:bg-slate-900 rounded-[2.5rem] border border-slate-100 dark:border-slate-800 shadow-2xl shadow-slate-200/40 dark:shadow-none overflow-hidden ring-1 ring-slate-900/5">
                <!-- Header / Cover Decoration -->
                <div class="h-32 bg-gradient-to-br from-brand-primary/10 via-slate-50 to-transparent dark:from-brand-primary/5 dark:via-slate-900 dark:to-transparent relative border-b border-slate-50 dark:border-slate-800">
                    <div class="absolute -bottom-6 left-10 w-16 h-16 rounded-2xl bg-white dark:bg-slate-800 border border-slate-100 dark:border-slate-700 shadow-lg flex items-center justify-center">
                        <Megaphone class="w-8 h-8 text-brand-primary" />
                    </div>
                </div>

                <div class="p-10 pt-12 space-y-8">
                    <!-- Metadata Header -->
                    <div class="space-y-4">
                        <div class="flex items-center gap-3">
                            <span class="px-2.5 py-0.5 rounded-lg text-[10px] font-black uppercase tracking-widest bg-brand-primary/10 text-brand-primary border border-brand-primary/10">
                                {{ announcement.created_at_formatted || __('announcement') }}
                            </span>
                            <span class="text-[11px] text-slate-400 font-bold">• {{ __('time_to_read') }} 3 min</span>
                        </div>
                        
                        <h1 class="text-3xl font-black text-slate-900 dark:text-white leading-[1.15] tracking-tight">
                            {{ announcement.title }}
                        </h1>

                        <div class="flex items-center justify-between pt-2">
                            <div class="flex items-center gap-3">
                                <div class="w-10 h-10 rounded-full bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-xs font-black text-slate-500 border border-slate-200/50">
                                    {{ announcement.creator?.name?.charAt(0) }}
                                </div>
                                <div>
                                    <p class="text-sm font-bold text-slate-900 dark:text-white leading-none">{{ announcement.creator?.name }}</p>
                                    <p class="text-[11px] text-slate-400 mt-1 font-medium">{{ __('posted_by_hrm_admin') }}</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Message Body -->
                    <div class="prose prose-slate dark:prose-invert max-w-none">
                        <div class="text-slate-600 dark:text-slate-300 text-base leading-relaxed whitespace-pre-wrap font-medium tracking-tight">
                            {{ announcement.message }}
                        </div>
                    </div>

                    <!-- Attachments -->
                    <div v-if="announcement.attachments && announcement.attachments.length > 0" class="space-y-4 pt-6 border-t border-slate-50 dark:border-slate-800">
                        <h4 class="text-[11px] font-black text-slate-400 uppercase tracking-[0.2em] px-1">{{ __('handouts_and_resources') }}</h4>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                            <a 
                                v-for="(file, index) in announcement.attachments" 
                                :key="index"
                                :href="'/storage/' + file.path" 
                                target="_blank"
                                class="flex items-center justify-between p-4 bg-slate-50 dark:bg-slate-800/40 border border-slate-100 dark:border-slate-800 rounded-2xl hover:bg-white dark:hover:bg-slate-800 hover:shadow-xl hover:shadow-slate-200/50 dark:hover:shadow-none hover:border-brand-primary/20 transition-all duration-300 group"
                            >
                                <div class="flex items-center gap-4">
                                    <div class="w-10 h-10 bg-white dark:bg-slate-900 rounded-xl shadow-sm flex items-center justify-center text-brand-primary border border-slate-100 dark:border-slate-700 group-hover:scale-110 transition-transform">
                                        <FileText class="w-5 h-5" />
                                    </div>
                                    <div class="flex flex-col">
                                        <span class="text-xs font-bold text-slate-700 dark:text-slate-200 truncate max-w-[150px] leading-tight">{{ file.name }}</span>
                                        <span class="text-[10px] text-slate-400 font-medium">{{ (file.size / 1024 / 1024).toFixed(2) }} MB</span>
                                    </div>
                                </div>
                                <div class="w-8 h-8 rounded-lg flex items-center justify-center text-slate-300 group-hover:text-brand-primary group-hover:bg-brand-primary/5 transition-all">
                                    <Download class="w-4 h-4" />
                                </div>
                            </a>
                        </div>
                    </div>

                    <!-- Action/Footer -->
                    <div class="pt-10 border-t border-slate-50 dark:border-slate-800 flex flex-col md:flex-row items-center justify-between gap-4">
                        <div class="flex items-center gap-2 text-xs text-slate-400 font-bold">
                            <CheckCircle2 class="w-4 h-4 text-emerald-500" />
                            {{ __('you_have_marked_this_as_read') }}
                        </div>
                        
                        <div class="flex items-center gap-4">
                            <button @click="shareAnnouncement" class="p-2.5 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 transition-colors">
                                <Share2 class="w-5 h-5" />
                            </button>
                            <button @click="printAnnouncement" class="p-2.5 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 transition-colors">
                                <Printer class="w-5 h-5" />
                            </button>
                        </div>
                    </div>
                </div>
            </article>

            <!-- Bottom Suggestion -->
            <div class="p-8 bg-slate-100/50 dark:bg-slate-900/50 rounded-[2rem] border border-slate-200/50 dark:border-slate-800/50 flex flex-col md:flex-row items-center justify-between gap-6">
                <div class="space-y-1 text-center md:text-left">
                    <h4 class="text-sm font-bold text-slate-900 dark:text-white">{{ __('need_more_information') }}</h4>
                    <p class="text-xs text-slate-500">{{ __('contact_your_hr_representative_for_further_clarification') }}</p>
                </div>
                <Link :href="employee.announcements.index.url()" class="px-6 py-2.5 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl text-xs font-black text-slate-900 dark:text-white shadow-sm hover:bg-slate-50 dark:hover:bg-slate-700 transition-all active:scale-95">
                    {{ __('back_to_newsroom') }}
                </Link>
            </div>
        </div>
    </EmployeeLayout>
</template>

<script setup lang="ts">
import { Head, Link } from '@inertiajs/vue3';
import EmployeeLayout from '@/Layouts/EmployeeLayout.vue';
import { 
    ChevronLeft, ChevronRight, Megaphone, 
    CheckCircle2, Share2, Printer,
    FileText, Download
} from 'lucide-vue-next';
import employee from '@/routes/employee';

const props = defineProps<{
    announcement: any;
}>();

const shareAnnouncement = () => {
    if (navigator.share) {
        navigator.share({
            title: props.announcement.title,
            text: props.announcement.message,
            url: window.location.href,
        });
    }
};

const printAnnouncement = () => {
    window.print();
};
</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(15px); }
    to { opacity: 1; transform: translateY(0); }
}
@media print {
    .p-2\.5, .bg-slate-100\/50, .border-t, .flex.items-center.gap-4 {
        display: none !important;
    }
    article {
        border: none !important;
        box-shadow: none !important;
    }
}
</style>
