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

defineOptions({ layout: AdminLayout });

const props = defineProps<{
    settings: Record<string, any>;
}>();

const form = useForm({
    manual_entry_enabled: props.settings?.manual_entry_enabled === '1' || props.settings?.manual_entry_enabled === true,
    auto_approve_attendance: props.settings?.auto_approve_attendance === '1' || props.settings?.auto_approve_attendance === true,
    monthly_attendance_goal: props.settings?.monthly_attendance_goal || 160,
    shift_start_time: props.settings?.shift_start_time || '09:00',
    shift_end_time: props.settings?.shift_end_time || '18:00',
});

const submit = () => {
    form.post(updateSettings.url());
};
</script>

<template>
    <div class="max-w-4xl mx-auto space-y-6">
        <div>
            <h1 class="text-2xl font-bold text-slate-900 dark:text-white">{{ __('attendance_settings') }}</h1>
            <p class="text-slate-500 text-sm mt-1">{{ __('configure_attendance_rules_and_preferences') }}</p>
        </div>

        <div class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm overflow-hidden">
            <form @submit.prevent="submit" class="p-6 space-y-6">
                <div class="space-y-4">
                    <div class="flex items-center justify-between p-4 bg-slate-50 dark:bg-slate-800/50 rounded-lg">
                        <div>
                            <h3 class="font-bold text-slate-900 dark:text-white">{{ __('allow_manual_entry') }}</h3>
                            <p class="text-xs text-slate-500">{{ __('employees_can_manually_add_forgotten_logs') }}</p>
                        </div>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" v-model="form.manual_entry_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 rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[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 class="flex items-center justify-between p-4 bg-slate-50 dark:bg-slate-800/50 rounded-lg">
                        <div>
                            <h3 class="font-bold text-slate-900 dark:text-white">{{ __('auto_approve_attendance') }}</h3>
                            <p class="text-xs text-slate-500">{{ __('automatically_approve_clock_in_out_logs') }}</p>
                        </div>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" v-model="form.auto_approve_attendance" 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 rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[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 class="flex items-center justify-between p-4 bg-slate-50 dark:bg-slate-800/50 rounded-lg">
                        <div>
                            <h3 class="font-bold text-slate-900 dark:text-white">{{ __('monthly_attendance_goal') }}</h3>
                            <p class="text-xs text-slate-500">{{ __('set_monthly_work_hours_goal_for_employees') }}</p>
                        </div>
                        <div class="flex items-center gap-2">
                             <input 
                                type="number" 
                                v-model="form.monthly_attendance_goal" 
                                class="w-24 px-3 py-2 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-lg text-sm text-center font-bold focus:ring-2 focus:ring-[var(--brand-primary)] focus:border-transparent outline-none transition-all"
                                min="1"
                                max="744"
                                placeholder="160"
                            >
                            <span class="text-sm font-bold text-slate-500">{{ __('hours') }}</span>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="flex items-center justify-between p-4 bg-slate-50 dark:bg-slate-800/50 rounded-lg">
                            <div>
                                <h3 class="font-bold text-slate-900 dark:text-white">{{ __('shift_start_time') }}</h3>
                                <p class="text-xs text-slate-500">{{ __('standard_shift_start_time') }}</p>
                            </div>
                            <input 
                                type="time" 
                                v-model="form.shift_start_time" 
                                class="px-3 py-2 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-lg text-sm font-bold focus:ring-2 focus:ring-[var(--brand-primary)] focus:border-transparent outline-none transition-all"
                            >
                        </div>

                        <div class="flex items-center justify-between p-4 bg-slate-50 dark:bg-slate-800/50 rounded-lg">
                            <div>
                                <h3 class="font-bold text-slate-900 dark:text-white">{{ __('shift_end_time') }}</h3>
                                <p class="text-xs text-slate-500">{{ __('standard_shift_end_time') }}</p>
                            </div>
                            <input 
                                type="time" 
                                v-model="form.shift_end_time" 
                                class="px-3 py-2 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-lg text-sm font-bold focus:ring-2 focus:ring-[var(--brand-primary)] focus:border-transparent outline-none transition-all"
                            >
                        </div>


                    </div>
                </div>

                <div class="flex justify-end pt-4">
                    <button 
                        type="submit"
                        :disabled="form.processing"
                        class="flex items-center gap-2 px-6 py-2.5 bg-[var(--brand-primary)] text-white rounded-lg font-bold hover:opacity-90 transition-all shadow-lg shadow-[var(--brand-primary)]/20 disabled:opacity-50"
                    >
                        <Save :size="18" />
                        {{ __('save_settings') }}
                    </button>
                </div>
            </form>
        </div>
    </div>
</template>
