<script setup>
import { FwbTable, FwbTableHead, FwbTableHeadCell, FwbTableBody, FwbTableRow, FwbTableCell } from 'flowbite-vue'
import Dropdown from '@/Components/Dropdown.vue'
import CaseObjectCreateDialog from './CaseObjectCreateDialog.vue'
import CaseObjectsDialog from './CaseObjectsDialog.vue'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faCircleInfo, faEllipsisVertical, faPenToSquare, faTrash, faListCheck, faPlus } from '@fortawesome/free-solid-svg-icons'

const props = defineProps({
    client_case: Object,
    contract_types: Array,
    contracts: { type: Array, default: () => [] },
})

const emit = defineEmits(['edit', 'delete', 'add-activity'])

const formatDate = (d) => {
    if (!d) return '-'
    const dt = new Date(d)
    return isNaN(dt.getTime()) ? '-' : dt.toLocaleDateString('de')
}

const hasDesc = (c) => {
    const d = c?.description
    return typeof d === 'string' && d.trim().length > 0
}

const onEdit = (c) => emit('edit', c)
const onDelete = (c) => emit('delete', c)
const onAddActivity = (c) => emit('add-activity', c)

// CaseObject dialog state
import { ref } from 'vue'
const showObjectDialog = ref(false)
const showObjectsList = ref(false)
const selectedContract = ref(null)
const openObjectDialog = (c) => { selectedContract.value = c; showObjectDialog.value = true }
const closeObjectDialog = () => { showObjectDialog.value = false; selectedContract.value = null }
const openObjectsList = (c) => { selectedContract.value = c; showObjectsList.value = true }
const closeObjectsList = () => { showObjectsList.value = false; selectedContract.value = null }
</script>

<template>
    <div class="relative overflow-x-auto rounded-lg border border-gray-200 bg-white shadow-sm">
        <FwbTable hoverable striped class="text-sm">
                    <FwbTableHead class="sticky top-0 z-10 bg-gray-50/90 backdrop-blur border-b border-gray-200 shadow-sm">
                <FwbTableHeadCell class="uppercase text-xs font-semibold tracking-wide text-gray-700 py-3">Ref.</FwbTableHeadCell>
                <FwbTableHeadCell class="uppercase text-xs font-semibold tracking-wide text-gray-700 py-3">Datum začetka</FwbTableHeadCell>
                <FwbTableHeadCell class="uppercase text-xs font-semibold tracking-wide text-gray-700 py-3">Tip</FwbTableHeadCell>
                        <FwbTableHeadCell class="uppercase text-xs font-semibold tracking-wide text-gray-700 py-3 text-right">Predano</FwbTableHeadCell>
                        <FwbTableHeadCell class="uppercase text-xs font-semibold tracking-wide text-gray-700 py-3 text-right">Odprto</FwbTableHeadCell>
                <FwbTableHeadCell class="uppercase text-xs font-semibold tracking-wide text-gray-700 py-3 text-center">Opis</FwbTableHeadCell>
                <FwbTableHeadCell class="w-px" />
            </FwbTableHead>
            <FwbTableBody>
                <template v-for="(c, i) in contracts" :key="c.uuid || i">
                    <FwbTableRow>
                        <FwbTableCell>{{ c.reference }}</FwbTableCell>
                        <FwbTableCell>{{ formatDate(c.start_date) }}</FwbTableCell>
                        <FwbTableCell>{{ c?.type?.name }}</FwbTableCell>
                        <FwbTableCell class="text-right">{{ Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(c?.account?.initial_amount ?? 0) }}</FwbTableCell>
                        <FwbTableCell class="text-right">{{ Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(c?.account?.balance_amount ?? 0) }}</FwbTableCell>
                        <FwbTableCell class="text-center">
                            <Dropdown v-if="hasDesc(c)" width="64" align="left">
                                <template #trigger>
                                    <button
                                        type="button"
                                        class="inline-flex items-center justify-center h-8 w-8 rounded-full hover:bg-gray-100 focus:outline-none"
                                        :title="'Pokaži opis'"
                                    >
                                        <FontAwesomeIcon :icon="faCircleInfo" class="h-4 w-4 text-gray-700" />
                                    </button>
                                </template>
                                <template #content>
                                    <div class="max-w-sm px-3 py-2 text-sm text-gray-700 whitespace-pre-wrap">
                                        {{ c.description }}
                                    </div>
                                </template>
                            </Dropdown>
                            <button
                                v-else
                                type="button"
                                disabled
                                class="inline-flex items-center justify-center h-8 w-8 rounded-full text-gray-400 cursor-not-allowed"
                                :title="'Ni opisa'"
                            >
                                <FontAwesomeIcon :icon="faCircleInfo" class="h-4 w-4" />
                            </button>
                        </FwbTableCell>
                        <FwbTableCell class="text-right whitespace-nowrap">
                            <Dropdown align="right" width="56">
                                <template #trigger>
                                    <button
                                        type="button"
                                        class="inline-flex items-center justify-center h-8 w-8 rounded-full hover:bg-gray-100 focus:outline-none"
                                        :title="'Actions'"
                                    >
                                        <FontAwesomeIcon :icon="faEllipsisVertical" class="h-4 w-4 text-gray-700" />
                                    </button>
                                </template>
                                <template #content>
                                    <button
                                        type="button"
                                        class="w-full px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-50 flex items-center gap-2"
                                        @click="onEdit(c)"
                                    >
                                        <FontAwesomeIcon :icon="faPenToSquare" class="h-4 w-4 text-gray-600" />
                                        <span>Edit</span>
                                    </button>
                                    <button
                                        type="button"
                                        class="w-full px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-50 flex items-center gap-2"
                                        @click="openObjectsList(c)"
                                    >
                                        <FontAwesomeIcon :icon="faCircleInfo" class="h-4 w-4 text-gray-600" />
                                        <span>Predmeti</span>
                                    </button>
                                                    <button
                                                        type="button"
                                                        class="w-full px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-50 flex items-center gap-2"
                                                        @click="openObjectDialog(c)"
                                                    >
                                                        <FontAwesomeIcon :icon="faPlus" class="h-4 w-4 text-gray-600" />
                                                        <span>Premet</span>
                                                    </button>
                                    <button
                                        type="button"
                                        class="w-full px-3 py-2 text-left text-sm text-red-700 hover:bg-red-50 flex items-center gap-2"
                                        @click="onDelete(c)"
                                    >
                                        <FontAwesomeIcon :icon="faTrash" class="h-4 w-4 text-red-600" />
                                        <span>Briši</span>
                                    </button>
                                    <div class="my-1 border-t border-gray-100" />
                                    <button
                                        type="button"
                                        class="w-full px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-50 flex items-center gap-2"
                                        @click="onAddActivity(c)"
                                    >
                                        <FontAwesomeIcon :icon="faListCheck" class="h-4 w-4 text-gray-600" />
                                        <span>Aktivnost</span>
                                    </button>
                                </template>
                            </Dropdown>
                        </FwbTableCell>
                    </FwbTableRow>
                </template>
            </FwbTableBody>
        </FwbTable>
        <div v-if="!contracts || contracts.length === 0" class="p-6 text-center text-sm text-gray-500">No contracts.</div>
    </div>
        <CaseObjectCreateDialog
            :show="showObjectDialog"
            @close="closeObjectDialog"
            :client_case="client_case"
            :contract="selectedContract"
        />
        <CaseObjectsDialog
            :show="showObjectsList"
            @close="closeObjectsList"
            :client_case="client_case"
            :contract="selectedContract"
        />
</template>