<script setup>
import { ref, onMounted } from 'vue';
import { usePageTitle } from '../../composables/Core/usePageTitle';
import { executeRequest } from '../../utils/executeRequest.js';

usePageTitle('Document Types & Fees');

const types = ref([]);
const loading = ref(false);
const showModal = ref(false);
const editingItem = ref(null);

const blankForm = () => ({
    name: '', code: '', description: '',
    base_fee: 0, processing_days: 1, requires_clearance: false,
});
const form = ref(blankForm());

const loadTypes = async () => {
    loading.value = true;
    const res = await executeRequest('/admin/request-types');
    if (res.success) types.value = res.data;
    loading.value = false;
};

const openCreate = () => { editingItem.value = null; form.value = blankForm(); showModal.value = true; };
const openEdit = (item) => { editingItem.value = item; form.value = { ...item }; showModal.value = true; };

const save = async () => {
    const url = editingItem.value ? '/admin/request-types/update' : '/admin/request-types/create';
    const payload = editingItem.value ? { target: editingItem.value.code, ...form.value } : form.value;
    const res = await executeRequest(url, 'POST', payload);
    if (res.success) { showModal.value = false; loadTypes(); }
};

const toggleActive = async (item) => {
    await executeRequest('/admin/request-types/toggle', 'POST', { target: item.code });
    loadTypes();
};

onMounted(loadTypes);
</script>

<template>
    <div class="p-4 max-w-4xl mx-auto">
        <div class="flex items-center justify-between mb-4">
            <h1 class="text-2xl font-bold">Document Types & Fee Schedule</h1>
            <button @click="openCreate" class="btn-primary">+ Add Type</button>
        </div>

        <div v-if="loading" class="text-center py-8 text-gray-400">Loading...</div>
        <div v-else class="grid gap-3">
            <div v-for="t in types" :key="t.id" class="bg-white rounded-lg shadow p-4 flex justify-between items-center">
                <div>
                    <div class="flex items-center gap-2">
                        <h3 class="font-semibold">{{ t.name }}</h3>
                        <span class="font-mono text-xs bg-gray-100 px-2 py-0.5 rounded">{{ t.code }}</span>
                        <span v-if="!t.is_active" class="text-xs text-red-500">Inactive</span>
                    </div>
                    <p class="text-sm text-gray-500 mt-0.5">{{ t.description }}</p>
                    <div class="flex gap-4 mt-1 text-sm">
                        <span class="font-semibold text-green-600">{{ t.base_fee > 0 ? `₱${t.base_fee}` : 'Free' }}</span>
                        <span class="text-gray-400">{{ t.processing_days }} day(s) processing</span>
                        <span v-if="t.requires_clearance" class="text-orange-500">Requires Clearance</span>
                    </div>
                </div>
                <div class="flex gap-2">
                    <button @click="openEdit(t)" class="btn-sm">Edit</button>
                    <button @click="toggleActive(t)" :class="`btn-sm ${t.is_active ? 'text-red-500' : 'text-green-500'}`">
                        {{ t.is_active ? 'Disable' : 'Enable' }}
                    </button>
                </div>
            </div>
            <p v-if="!types.length" class="text-center text-gray-400 py-8">No document types defined.</p>
        </div>

        <!-- Modal -->
        <div v-if="showModal" class="modal-overlay" @click.self="showModal = false">
            <div class="modal-box">
                <h2 class="text-lg font-bold mb-4">{{ editingItem ? 'Edit Document Type' : 'New Document Type' }}</h2>
                <div class="space-y-3">
                    <div>
                        <label class="label">Name *</label>
                        <input v-model="form.name" class="input" required />
                    </div>
                    <div>
                        <label class="label">Code *</label>
                        <input v-model="form.code" class="input" placeholder="e.g. CLEARANCE" :disabled="!!editingItem" />
                    </div>
                    <div>
                        <label class="label">Description</label>
                        <textarea v-model="form.description" class="input h-16"></textarea>
                    </div>
                    <div class="grid grid-cols-2 gap-3">
                        <div>
                            <label class="label">Base Fee (₱)</label>
                            <input v-model="form.base_fee" type="number" step="0.01" class="input" />
                        </div>
                        <div>
                            <label class="label">Processing Days</label>
                            <input v-model="form.processing_days" type="number" min="1" class="input" />
                        </div>
                    </div>
                    <label class="flex items-center gap-2 cursor-pointer">
                        <input v-model="form.requires_clearance" type="checkbox" class="rounded" />
                        <span class="text-sm">Requires prior clearance</span>
                    </label>
                </div>
                <div class="flex justify-end gap-2 mt-4">
                    <button @click="showModal = false" class="btn-secondary">Cancel</button>
                    <button @click="save" class="btn-primary">Save</button>
                </div>
            </div>
        </div>
    </div>
</template>
