<script setup lang="ts">
import { ref, onMounted, onUnmounted, computed } from 'vue';
import { useForm, usePage } from '@inertiajs/vue3';
import { Clock, LogIn, LogOut, FileText } from 'lucide-vue-next';
import { clockIn, clockOut } from '@/actions/App/Http/Controllers/AttendanceController';

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

const currentTime = ref(new Date());
let timer: any;

onMounted(() => {
    timer = setInterval(() => {
        currentTime.value = new Date();
    }, 1000);
});

onUnmounted(() => {
    clearInterval(timer);
});

const formatTime = (date: Date) => {
    return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
};

const formatDate = (date: Date) => {
    return date.toLocaleDateString([], { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
};

const form = useForm({
    note: '',
    manual: false
});

const handleClockIn = () => {
    form.post(clockIn.url(), {
        preserveScroll: true,
        onSuccess: () => form.reset(),
    });
};

const handleClockOut = () => {
    form.post(clockOut.url(), {
        preserveScroll: true,
        onSuccess: () => form.reset(),
    });
};

const page = usePage();
const canManual = computed(() => {
    const user = (page.props.auth.user as any);
    const perEmployee = user.employee_profile?.allow_manual_attendance;
    const globalEnabled = page.props.branding.business_settings?.manual_attendance_enabled;
    return perEmployee && (globalEnabled === '1' || globalEnabled === 1 || globalEnabled === true);
});

</script>

<template>
    <div class="bg-white dark:bg-slate-900 rounded-[2rem] p-6 shadow-sm border border-slate-100 dark:border-slate-800">
        <div class="flex flex-col md:flex-row md:items-center justify-between gap-6">
            <div class="flex items-center space-x-4">
                <div class="p-4 bg-sky-50 dark:bg-sky-900/30 rounded-2xl text-sky-600 dark:text-sky-400">
                    <Clock :size="32" />
                </div>
                <div>
                    <h3 class="text-2xl font-black text-slate-900 dark:text-white">{{ formatTime(currentTime) }}</h3>
                    <p class="text-sm font-bold text-slate-500">{{ formatDate(currentTime) }}</p>
                </div>
            </div>

            <div class="flex flex-wrap items-center gap-3">
                <template v-if="!today?.clock_in">
                    <button 
                        @click="handleClockIn"
                        :disabled="form.processing"
                        class="flex items-center space-x-2 px-6 py-3 bg-[var(--brand-primary)] text-white rounded-xl font-bold hover:brightness-110 transition-all disabled:opacity-50"
                    >
                        <LogIn :size="20" />
                        <span>{{ __('clock_in') }}</span>
                    </button>
                </template>

                <template v-else-if="today?.clock_in && !today?.clock_out">
                    <div class="flex flex-col items-end mr-4">
                        <span class="text-[10px] uppercase font-black text-slate-400 tracking-widest">{{ __('clocked_in_at') }}</span>
                        <span class="text-sm font-bold text-slate-900 dark:text-white">{{ new Date(today.clock_in).toLocaleTimeString() }}</span>
                    </div>
                    <button 
                        @click="handleClockOut"
                        :disabled="form.processing"
                        class="flex items-center space-x-2 px-6 py-3 bg-rose-500 text-white rounded-xl font-bold hover:bg-rose-600 transition-all disabled:opacity-50"
                    >
                        <LogOut :size="20" />
                        <span>{{ __('clock_out') }}</span>
                    </button>
                </template>

                <template v-else>
                    <div class="flex items-center space-x-4">
                        <div class="flex flex-col items-end">
                            <span class="text-[10px] uppercase font-black text-slate-400 tracking-widest">{{ __('total_hours') }}</span>
                            <span class="text-lg font-black text-[var(--brand-primary)]">{{ today.total_hours }}h</span>
                        </div>
                        <div class="px-4 py-2 bg-emerald-50 dark:bg-emerald-900/30 text-emerald-600 dark:text-emerald-400 rounded-lg text-xs font-bold">
                            {{ __('completed') }}
                        </div>
                    </div>
                </template>
            </div>
        </div>

        <div v-if="!today?.clock_out && canManual" class="mt-6 pt-6 border-t border-slate-50 dark:border-slate-800">
            <div class="flex items-start space-x-3">
                <FileText :size="18" class="text-slate-400 mt-1" />
                <div class="flex-1">
                    <textarea 
                        v-model="form.note"
                        :placeholder="__('add_a_note_optional')"
                        class="w-full bg-slate-50 dark:bg-slate-800 border-none rounded-xl text-sm p-3 focus:ring-2 focus:ring-sky-500/20 transition-all"
                        rows="2"
                    ></textarea>
                    <div class="mt-2 flex items-center space-x-2">
                        <input type="checkbox" v-model="form.manual" id="manual-entry" class="rounded text-sky-500" />
                        <label for="manual-entry" class="text-xs font-bold text-slate-500">{{ __('mark_as_manual_entry') }}</label>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
