<script setup lang="ts">
import AdminLayout from '@/Layouts/AdminLayout.vue';
import { Head, useForm } from '@inertiajs/vue3';
import { Settings2, Save, AlertCircle } from 'lucide-vue-next';
import { updateSettings } from '@/actions/App/Http/Controllers/Admin/AttendanceController';

const props = defineProps<{
    settings: {
        manual_attendance_enabled: boolean;
    }
}>();

const form = useForm({
    manual_attendance_enabled: props.settings.manual_attendance_enabled
});

const submit = () => {
    form.post(updateSettings.url(), {
        preserveScroll: true,
    });
};

</script>

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

    <AdminLayout>
        <div class="max-w-4xl space-y-6 animate-fade-in">
            <!-- Header -->
            <div>
                <h2 class="text-xl font-extrabold text-slate-900 dark:text-white">{{ __('attendance_settings') }}</h2>
                <p class="text-sm text-slate-500">{{ __('configure_attendance_rules_and_manual_entry_policy') }}</p>
            </div>

            <form @submit.prevent="submit" class="space-y-6">
                <!-- Manual Attendance Toggle -->
                <div class="bg-white dark:bg-slate-900 rounded-[2rem] p-8 border border-slate-100 dark:border-slate-800 shadow-sm">
                    <div class="flex items-start justify-between">
                        <div class="flex items-center space-x-4">
                            <div class="p-3 bg-sky-50 dark:bg-sky-900/30 rounded-2xl text-sky-600 dark:text-sky-400">
                                <Settings2 :size="24" />
                            </div>
                            <div>
                                <h3 class="text-lg font-bold text-slate-900 dark:text-white">{{ __('manual_attendance_entry') }}</h3>
                                <p class="text-sm text-slate-500 max-w-md">{{ __('allow_employees_to_manually_enter_their_clock_in_out_times') }}</p>
                            </div>
                        </div>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" v-model="form.manual_attendance_enabled" class="sr-only peer">
                            <div class="w-11 h-6 bg-slate-200 peer-focus:outline-none rounded-full peer dark:bg-slate-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-[var(--brand-primary)]"></div>
                        </label>
                    </div>

                    <div v-if="form.manual_attendance_enabled" class="mt-8 p-4 bg-amber-50 dark:bg-amber-900/10 rounded-2xl border border-amber-100 dark:border-amber-900/20 flex items-start space-x-3">
                        <AlertCircle :size="18" class="text-amber-500 mt-0.5" />
                        <div class="text-xs font-medium text-amber-700 dark:text-amber-400 leading-relaxed">
                            {{ __('important_note_manual_entries_require_manager_approval') }}
                        </div>
                    </div>
                </div>

                <!-- Save Button -->
                <div class="flex items-center justify-end">
                    <button 
                        type="submit" 
                        :disabled="form.processing"
                        class="flex items-center space-x-2 bg-[var(--brand-primary)] text-white px-8 py-3 rounded-xl font-bold shadow-lg hover:brightness-110 transition-all disabled:opacity-50"
                    >
                        <Save :size="18" />
                        <span>{{ __('save_changes') }}</span>
                    </button>
                </div>
            </form>
        </div>
    </AdminLayout>
</template>
