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

    <AdminLayout>
        <div class="max-w-4xl mx-auto space-y-6 animate-fade-in pb-12">
            <!-- Header section -->
            <div class="flex items-center gap-4">
                <Link :href="admin.announcements.index.url()" class="p-2.5 bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 hover:bg-slate-50 transition-all shadow-sm active:scale-95 group">
                    <ChevronLeft class="w-5 h-5 text-slate-500 group-hover:text-brand-primary transition-colors" />
                </Link>
                <div>
                    <h1 class="text-xl font-extrabold text-slate-900 dark:text-white tracking-tight">
                        {{ __('create_broadcast') }}
                    </h1>
                    <p class="text-sm text-slate-500 dark:text-slate-400">
                        {{ __('design_your_message_and_select_your_audience') }}
                    </p>
                </div>
            </div>

            <form @submit.prevent="submit" class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <!-- Main Content Area -->
                <div class="lg:col-span-2 space-y-6">
                    <div class="bg-white dark:bg-slate-900 rounded-2xl border border-slate-200/60 dark:border-slate-800 shadow-xl shadow-slate-200/20 dark:shadow-none overflow-hidden ring-1 ring-slate-900/5">
                        <div class="p-6 space-y-6">
                            <!-- Title Input -->
                            <div class="space-y-2">
                                <label class="flex items-center gap-2 px-1 text-[11px] font-bold text-slate-400 uppercase tracking-widest">
                                    <Type class="w-3 h-3" />
                                    {{ __('announcement_title') }}
                                </label>
                                <div class="group relative">
                                    <input 
                                        v-model="form.title"
                                        type="text"
                                        :placeholder="__('e_g_office_holiday_notice')"
                                        class="w-full px-4 py-2.5 text-sm bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-xl focus:ring-4 focus:ring-brand-primary/10 focus:border-brand-primary transition-all duration-300 shadow-inner dark:text-white placeholder:text-slate-400 font-medium"
                                        required
                                    />
                                    <div class="absolute inset-0 rounded-xl border border-brand-primary/0 group-hover:border-brand-primary/10 pointer-events-none transition-colors"></div>
                                </div>
                            </div>

                            <!-- Message Area -->
                            <div class="space-y-2">
                                <label class="flex items-center gap-2 px-1 text-[11px] font-bold text-slate-400 uppercase tracking-widest">
                                    <AlignLeft class="w-3 h-3" />
                                    {{ __('message_body') }}
                                </label>
                                <div class="group relative">
                                    <textarea 
                                        v-model="form.message"
                                        rows="10"
                                        :placeholder="__('write_your_announcement_details_here')"
                                        class="w-full px-5 py-4 text-sm bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-xl focus:ring-4 focus:ring-brand-primary/10 focus:border-brand-primary transition-all duration-300 shadow-inner dark:text-white placeholder:text-slate-400 font-medium leading-relaxed resize-none"
                                        required
                                    ></textarea>
                                    <div class="absolute inset-0 rounded-xl border border-brand-primary/0 group-hover:border-brand-primary/10 pointer-events-none transition-colors"></div>
                                </div>
                            </div>

                            <!-- Attachments Area -->
                            <div class="space-y-3 pt-4 border-t border-slate-100 dark:border-slate-800">
                                <label class="flex items-center gap-2 px-1 text-[11px] font-bold text-slate-400 uppercase tracking-widest">
                                    <Paperclip class="w-3 h-3" />
                                    {{ __('attachments_optional') }}
                                </label>
                                <div class="grid grid-cols-1 gap-4">
                                        <div 
                                            class="relative group cursor-pointer"
                                            @click="fileInput?.click()"
                                        >
                                        <div class="flex flex-col items-center justify-center p-8 bg-slate-50/50 dark:bg-slate-950/50 border-2 border-dashed border-slate-200 dark:border-slate-800 rounded-2xl hover:border-brand-primary/40 transition-all duration-300 group-hover:bg-brand-primary/5">
                                            <Upload class="w-8 h-8 text-slate-300 group-hover:text-brand-primary transition-colors mb-3" />
                                            <p class="text-xs font-bold text-slate-500 group-hover:text-slate-700 dark:group-hover:text-slate-300">{{ __('click_to_upload_documents') }}</p>
                                            <p class="text-[10px] text-slate-400 mt-1 uppercase tracking-tighter">{{ __('max_10mb_per_file') }}</p>
                                        </div>
                                        <input 
                                            ref="fileInput"
                                            type="file" 
                                            multiple
                                            class="hidden"
                                            @change="handleFiles"
                                        />
                                    </div>

                                    <!-- Selected Files Preview -->
                                    <div v-if="form.attachments.length > 0" class="space-y-2">
                                        <div 
                                            v-for="(file, index) in form.attachments" 
                                            :key="index"
                                            class="flex items-center justify-between p-3 bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800 rounded-xl shadow-sm animate-slide-down"
                                        >
                                            <div class="flex items-center gap-3">
                                                <div class="p-2 bg-slate-50 dark:bg-slate-800 rounded-lg">
                                                    <FileText class="w-4 h-4 text-brand-primary" />
                                                </div>
                                                <div class="flex flex-col">
                                                    <span class="text-xs font-bold text-slate-700 dark:text-slate-200 truncate max-w-[200px]">{{ file.name }}</span>
                                                    <span class="text-[10px] text-slate-400">{{ (file.size / 1024 / 1024).toFixed(2) }} MB</span>
                                                </div>
                                            </div>
                                            <button 
                                                type="button"
                                                @click="removeFile(index)"
                                                class="p-1.5 hover:bg-rose-50 dark:hover:bg-rose-900/20 text-slate-400 hover:text-rose-500 rounded-lg transition-colors"
                                            >
                                                <X class="w-4 h-4" />
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Sidebar Settings -->
                <div class="space-y-6">
                    <!-- Targeted Audience Card -->
                    <div class="bg-white dark:bg-slate-900 rounded-2xl border border-slate-200/60 dark:border-slate-800 shadow-xl shadow-slate-200/20 dark:shadow-none overflow-hidden ring-1 ring-slate-900/5">
                        <div class="p-5 bg-slate-50/50 dark:bg-slate-900/50 border-b border-slate-100 dark:border-slate-800">
                            <h3 class="text-sm font-bold text-slate-800 dark:text-white flex items-center gap-2">
                                <Users class="w-4 h-4 text-brand-primary" />
                                {{ __('target_audience') }}
                            </h3>
                        </div>
                        <div class="p-5 space-y-4">
                            <!-- Target Type -->
                            <div class="grid grid-cols-1 gap-2">
                                <label 
                                    v-for="type in targetTypes" 
                                    :key="type.id"
                                    class="relative flex items-center gap-3 p-3 rounded-xl border cursor-pointer transition-all active:scale-[0.98]"
                                    :class="form.target_type === type.id ? 'bg-brand-primary/5 border-brand-primary shadow-sm' : 'bg-white dark:bg-slate-950 border-slate-100 dark:border-slate-800 hover:bg-slate-50 dark:hover:bg-slate-900'"
                                >
                                    <input 
                                        type="radio" 
                                        v-model="form.target_type" 
                                        :value="type.id"
                                        class="w-4 h-4 text-brand-primary border-slate-300 focus:ring-brand-primary focus:ring-offset-0"
                                    />
                                    <div class="flex flex-col">
                                        <span class="text-xs font-bold text-slate-700 dark:text-slate-200">{{ type.label }}</span>
                                        <span class="text-[10px] text-slate-400">{{ type.description }}</span>
                                    </div>
                                </label>
                            </div>

                            <!-- Specific Departments Multi-select -->
                            <div v-if="form.target_type === 'department'" class="space-y-3 pt-4 animate-slide-down">
                                <label class="px-1 text-[10px] font-bold text-slate-400 uppercase tracking-widest">{{ __('select_departments') }}</label>
                                <div class="max-h-48 overflow-y-auto space-y-1.5 pr-2 custom-scrollbar">
                                    <label v-for="dept in departments" :key="dept.id" class="flex items-center gap-3 p-2 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-800 cursor-pointer group">
                                        <input 
                                            type="checkbox" 
                                            :value="dept.id" 
                                            v-model="form.department_ids"
                                            class="w-3.5 h-3.5 rounded text-brand-primary focus:ring-brand-primary/20 border-slate-300"
                                        />
                                        <span class="text-xs font-bold text-slate-600 dark:text-slate-400 group-hover:text-slate-900 dark:group-hover:text-white">{{ dept.name }}</span>
                                    </label>
                                </div>
                            </div>

                            <!-- Specific Roles Multi-select -->
                            <div v-if="form.target_type === 'role'" class="space-y-3 pt-4 animate-slide-down">
                                <label class="px-1 text-[10px] font-bold text-slate-400 uppercase tracking-widest">{{ __('select_roles') }}</label>
                                <div class="max-h-48 overflow-y-auto space-y-1.5 pr-2 custom-scrollbar">
                                    <label v-for="role in roles" :key="role.id" class="flex items-center gap-3 p-2 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-800 cursor-pointer group">
                                        <input 
                                            type="checkbox" 
                                            :value="role.id" 
                                            v-model="form.role_ids"
                                            class="w-3.5 h-3.5 rounded text-brand-primary focus:ring-brand-primary/20 border-slate-300"
                                        />
                                        <span class="text-xs font-bold text-slate-600 dark:text-slate-400 group-hover:text-slate-900 dark:group-hover:text-white">{{ role.name }}</span>
                                    </label>
                                </div>
                            </div>

                            <!-- Specific Employees Multi-select -->
                            <div v-if="form.target_type === 'user'" class="space-y-3 pt-4 animate-slide-down">
                                <label class="px-1 text-[10px] font-bold text-slate-400 uppercase tracking-widest">{{ __('select_employees') }}</label>
                                
                                <!-- Search Input -->
                                <div class="relative">
                                    <Search class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
                                    <input 
                                        v-model="userSearch" 
                                        type="text" 
                                        :placeholder="__('search_by_name_or_email')" 
                                        class="w-full pl-9 pr-4 py-2 text-xs bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-xl focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary shadow-sm"
                                    />
                                </div>

                                <div class="max-h-48 overflow-y-auto space-y-1.5 pr-2 custom-scrollbar">
                                    <div v-if="filteredUsers.length === 0" class="text-center py-4 text-xs text-slate-400">
                                        {{ __('no_employees_found') }}
                                    </div>
                                    <label v-for="user in filteredUsers" :key="user.id" class="flex items-center gap-3 p-2 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-800 cursor-pointer group transition-colors">
                                        <input 
                                            type="checkbox" 
                                            :value="user.id" 
                                            v-model="form.user_ids"
                                            class="w-3.5 h-3.5 rounded text-brand-primary focus:ring-brand-primary/20 border-slate-300"
                                        />
                                        <div class="flex items-center gap-2.5">
                                            <div class="h-6 w-6 rounded-full bg-brand-primary/10 flex items-center justify-center text-[10px] font-bold text-brand-primary">
                                                {{ user.name.charAt(0) }}
                                            </div>
                                            <div class="flex flex-col">
                                                <span class="text-xs font-bold text-slate-600 dark:text-slate-400 group-hover:text-slate-900 dark:group-hover:text-white">{{ user.name }}</span>
                                                <span class="text-[10px] text-slate-400">{{ user.email }}</span>
                                            </div>
                                        </div>
                                    </label>
                                </div>
                                
                                <!-- Selected Count -->
                                <div class="text-[10px] text-slate-400 px-1 font-medium bg-slate-50 dark:bg-slate-800/50 py-1 rounded-lg text-center" v-if="form.user_ids.length > 0">
                                    {{ form.user_ids.length }} {{ __('employees_selected') }}
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Publication Settings Card -->
                    <div class="bg-white dark:bg-slate-900 rounded-2xl border border-slate-200/60 dark:border-slate-800 shadow-xl shadow-slate-200/20 dark:shadow-none overflow-hidden ring-1 ring-slate-900/5">
                        <div class="p-5 bg-slate-50/50 dark:bg-slate-900/50 border-b border-slate-100 dark:border-slate-800">
                            <h3 class="text-sm font-bold text-slate-800 dark:text-white flex items-center gap-2">
                                <Calendar class="w-4 h-4 text-brand-primary" />
                                {{ __('publication_settings') }}
                            </h3>
                        </div>
                        <div class="p-5 space-y-4">
                            <!-- Helper Text -->
                            <div class="p-3 bg-blue-50 dark:bg-blue-900/20 rounded-xl border border-blue-100 dark:border-blue-800/50">
                                <div class="flex gap-2">
                                    <Info class="w-4 h-4 text-blue-500 shrink-0 mt-0.5" />
                                    <p class="text-xs text-blue-600 dark:text-blue-300 leading-relaxed">
                                        {{ __('choose_when_to_publish_this_announcement') }}
                                    </p>
                                </div>
                            </div>

                            <!-- Publication Type Selection -->
                            <div class="grid grid-cols-1 gap-2">
                                <label 
                                    class="relative flex items-center gap-3 p-3 rounded-xl border cursor-pointer transition-all active:scale-[0.98]"
                                    :class="form.publish_type === 'now' ? 'bg-brand-primary/5 border-brand-primary shadow-sm' : 'bg-white dark:bg-slate-950 border-slate-100 dark:border-slate-800 hover:bg-slate-50 dark:hover:bg-slate-900'"
                                >
                                    <input 
                                        type="radio" 
                                        v-model="form.publish_type" 
                                        value="now"
                                        class="w-4 h-4 text-brand-primary border-slate-300 focus:ring-brand-primary focus:ring-offset-0"
                                    />
                                    <div class="flex flex-col">
                                        <span class="text-xs font-bold text-slate-700 dark:text-slate-200">{{ __('publish_immediately') }}</span>
                                        <span class="text-[10px] text-slate-400">{{ __('notify_employees_right_now') }}</span>
                                    </div>
                                </label>

                                <label 
                                    class="relative flex items-center gap-3 p-3 rounded-xl border cursor-pointer transition-all active:scale-[0.98]"
                                    :class="form.publish_type === 'later' ? 'bg-brand-primary/5 border-brand-primary shadow-sm' : 'bg-white dark:bg-slate-950 border-slate-100 dark:border-slate-800 hover:bg-slate-50 dark:hover:bg-slate-900'"
                                >
                                    <input 
                                        type="radio" 
                                        v-model="form.publish_type" 
                                        value="later"
                                        class="w-4 h-4 text-brand-primary border-slate-300 focus:ring-brand-primary focus:ring-offset-0"
                                    />
                                    <div class="flex flex-col">
                                        <span class="text-xs font-bold text-slate-700 dark:text-slate-200">{{ __('schedule_for_later') }}</span>
                                        <span class="text-[10px] text-slate-400">{{ __('pick_a_future_date_and_time') }}</span>
                                    </div>
                                </label>
                            </div>

                            <!-- Date Picker (Only shows when 'later' is selected) -->
                            <div v-if="form.publish_type === 'later'" class="space-y-2 animate-slide-down pt-2">
                                <label class="px-1 text-[10px] font-bold text-slate-400 uppercase tracking-widest">{{ __('scheduled_date_time') }}</label>
                                <div class="group relative">
                                    <input 
                                        v-model="form.publish_at"
                                        type="datetime-local"
                                        class="w-full px-4 py-2.5 text-xs bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-xl focus:ring-4 focus:ring-brand-primary/10 focus:border-brand-primary transition-all shadow-inner dark:text-white font-bold"
                                        :min="minDate"
                                        required
                                    />
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Actions -->
                    <div class="pt-4">
                        <button 
                            type="submit" 
                            :disabled="form.processing"
                            class="relative overflow-hidden w-full px-8 py-3.5 text-sm font-extrabold text-white bg-slate-900 dark:bg-white dark:text-slate-900 rounded-2xl hover:bg-slate-800 dark:hover:bg-slate-100 transition-all shadow-xl shadow-slate-900/40 dark:shadow-none disabled:opacity-50 flex items-center justify-center gap-3 active:scale-95 group/btn"
                        >
                            <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent -translate-x-full group-hover/btn:animate-shimmer"></div>
                            <Megaphone class="w-4 h-4 relative z-10" v-if="!form.processing" />
                            <div class="w-4 h-4 border-2 border-white/20 border-t-white dark:border-slate-900/20 dark:border-t-slate-900 rounded-full animate-spin relative z-10" v-else></div>
                            <span class="relative z-10 uppercase tracking-widest">
                                {{ form.publish_type === 'now' ? __('publish_now') : __('schedule_announcement') }}
                            </span>
                        </button>
                        
                        <Link 
                            :href="admin.announcements.index.url()"
                            class="mt-4 w-full px-4 py-3 text-sm font-bold text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 flex items-center justify-center gap-2 transition-colors"
                        >
                            {{ __('cancel_draft') }}
                        </Link>
                    </div>
                </div>
            </form>
        </div>
    </AdminLayout>
</template>

<script setup lang="ts">
import { Head, Link, useForm } from '@inertiajs/vue3';
import AdminLayout from '@/Layouts/AdminLayout.vue';
import { 
    ChevronLeft, Type, AlignLeft, 
    Users, Calendar, Megaphone,
    Paperclip, Upload, X, FileText, Search, Info
} from 'lucide-vue-next';
import { ref, computed } from 'vue';
import admin from '@/routes/admin';
import { wTrans as __ } from '@/Core/i18n';

const props = defineProps<{
    departments: any[];
    roles: any[];
    users: any[];
}>();

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

// Calculate minimum date-time for the picker (now)
const minDate = computed(() => {
    const now = new Date();
    now.setMinutes(now.getMinutes() - now.getTimezoneOffset());
    return now.toISOString().slice(0, 16);
});

const form = useForm({
    title: '',
    message: '',
    attachments: [] as File[],
    publish_at: '',
    publish_type: 'now', // Default to publish immediately
    target_type: 'all',
    department_ids: [] as number[],
    role_ids: [] as number[],
    user_ids: [] as number[],
});

const handleFiles = (event: Event) => {
    const files = (event.target as HTMLInputElement).files;
    if (files) {
        form.attachments = [...form.attachments, ...Array.from(files)];
    }
};

const removeFile = (index: number) => {
    form.attachments.splice(index, 1);
};

const targetTypes = [
    { id: 'all', label: __('all_employees'), description: __('broadcast_to_entire_company') },
    { id: 'department', label: __('specific_departments'), description: __('target_only_selected_teams') },
    { id: 'role', label: __('specific_roles'), description: __('target_based_on_job_roles') },
    { id: 'user', label: __('specific_employees'), description: __('target_individual_employees') },
];

const filteredUsers = computed(() => {
    if (!userSearch.value) return props.users;
    const search = userSearch.value.toLowerCase();
    return props.users.filter(user => 
        user.name.toLowerCase().includes(search) || 
        user.email.toLowerCase().includes(search)
    );
});

const submit = () => {
    form.post(admin.announcements.store.url());
};
</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); }
}
.animate-slide-down {
    animation: slideDown 0.3s ease-out;
}
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}
.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 10px;
}
.dark .custom-scrollbar::-webkit-scrollbar-thumb {
    background: #334155;
}
</style>
