<template>
    <div>
        <PageHeader>
            {{ $t('directory.title') }}
        </PageHeader>

        <div class="flex flex-col gap-6">
        <MalioTabList v-model="activeTab" :tabs="tabs">
            <!-- Clients -->
            <template #clients>
                <div class="flex min-h-[30rem] flex-col gap-4 pt-10">
                    <div class="flex min-h-[48px] items-center justify-end">
                        <MalioButton
                            icon-name="mdi:plus"
                            icon-position="left"
                            :label="$t('common.add')"
                            @click="openCreateClient"
                        />
                    </div>

                    <MalioDataTable
                        :columns="clientColumns"
                        :items="clients"
                        :total-items="clients.length"
                        :empty-message="$t('directory.clients.empty')"
                        @row-click="openEditClient"
                    >
                        <template #header-actions>
                            <span class="block text-right font-semibold text-black">{{ $t('common.actions') }}</span>
                        </template>
                        <template #cell-email="{ item }">
                            {{ (item as Client).email ?? '—' }}
                        </template>
                        <template #cell-phone="{ item }">
                            {{ (item as Client).phone ?? '—' }}
                        </template>
                        <template #cell-actions="{ item }">
                            <div class="flex justify-end" @click.stop>
                                <MalioButtonIcon
                                    icon="mdi:trash-can-outline"
                                    :aria-label="$t('common.delete')"
                                    button-class="!bg-red-100 !text-red-700 hover:!bg-red-200"
                                    :icon-size="18"
                                    @click="askDeleteClient(item as Client)"
                                />
                            </div>
                        </template>
                    </MalioDataTable>
                </div>
            </template>

            <!-- Prospects -->
            <template #prospects>
                <div class="flex min-h-[30rem] flex-col gap-4 pt-10">
                    <div class="flex min-h-[48px] flex-wrap items-center justify-between gap-3">
                        <MalioSelect
                            v-model="statusFilter"
                            :label="$t('prospects.fields.status')"
                            :options="statusOptions"
                            :empty-option-label="$t('directory.prospects.allStatuses')"
                            group-class="w-48"
                        />
                        <MalioButton
                            icon-name="mdi:plus"
                            icon-position="left"
                            :label="$t('common.add')"
                            @click="openCreateProspect"
                        />
                    </div>

                    <MalioDataTable
                        :columns="prospectColumns"
                        :items="prospectRows"
                        :total-items="prospectRows.length"
                        :empty-message="$t('directory.prospects.empty')"
                        @row-click="openEditProspect"
                    >
                        <template #header-actions>
                            <span class="block text-right font-semibold text-black">{{ $t('common.actions') }}</span>
                        </template>
                        <template #cell-status="{ item }">
                            <StatusBadge
                                :label="statusLabel((item as ProspectRow).status)"
                                :variant="statusVariant((item as ProspectRow).status)"
                            />
                        </template>
                        <template #cell-email="{ item }">
                            {{ (item as ProspectRow).email ?? '—' }}
                        </template>
                        <template #cell-phone="{ item }">
                            {{ (item as ProspectRow).phone ?? '—' }}
                        </template>
                        <template #cell-actions="{ item }">
                            <div class="flex justify-end gap-2" @click.stop>
                                <MalioButtonIcon
                                    v-if="!(item as ProspectRow).convertedClient"
                                    icon="mdi:account-convert"
                                    :aria-label="$t('prospects.convert')"
                                    button-class="!bg-green-100 !text-green-700 hover:!bg-green-200"
                                    :icon-size="18"
                                    @click="askConvertProspect(item as ProspectRow)"
                                />
                                <MalioButtonIcon
                                    icon="mdi:trash-can-outline"
                                    :aria-label="$t('common.delete')"
                                    button-class="!bg-red-100 !text-red-700 hover:!bg-red-200"
                                    :icon-size="18"
                                    @click="askDeleteProspect(item as ProspectRow)"
                                />
                            </div>
                        </template>
                    </MalioDataTable>
                </div>
            </template>
            <!-- Prestataires -->
            <template #prestataires>
                <div class="flex min-h-[30rem] flex-col gap-4 pt-10">
                    <div class="flex min-h-[48px] items-center justify-end">
                        <MalioButton
                            icon-name="mdi:plus"
                            icon-position="left"
                            :label="$t('common.add')"
                            @click="openCreatePrestataire"
                        />
                    </div>

                    <MalioDataTable
                        :columns="prestataireColumns"
                        :items="prestataires"
                        :total-items="prestataires.length"
                        :empty-message="$t('directory.prestataires.empty')"
                        @row-click="openEditPrestataire"
                    >
                        <template #header-actions>
                            <span class="block text-right font-semibold text-black">{{ $t('common.actions') }}</span>
                        </template>
                        <template #cell-email="{ item }">
                            {{ (item as Prestataire).email ?? '—' }}
                        </template>
                        <template #cell-phone="{ item }">
                            {{ (item as Prestataire).phone ?? '—' }}
                        </template>
                        <template #cell-actions="{ item }">
                            <div class="flex justify-end" @click.stop>
                                <MalioButtonIcon
                                    icon="mdi:trash-can-outline"
                                    :aria-label="$t('common.delete')"
                                    button-class="!bg-red-100 !text-red-700 hover:!bg-red-200"
                                    :icon-size="18"
                                    @click="askDeletePrestataire(item as Prestataire)"
                                />
                            </div>
                        </template>
                    </MalioDataTable>
                </div>
            </template>
        </MalioTabList>

        <ClientDrawer
            v-model="clientDrawerOpen"
            :client="selectedClient"
            @saved="loadClients"
        />
        <ProspectDrawer
            v-model="prospectDrawerOpen"
            :prospect="selectedProspect"
            @saved="onProspectSaved"
        />
        <PrestataireDrawer
            v-model="prestataireDrawerOpen"
            :prestataire="selectedPrestataire"
            @saved="loadPrestataires"
        />

        <ConfirmModal
            v-model="deleteModalOpen"
            :title="deleteModalTitle"
            @confirm="confirmDelete"
        >
            <i18n-t :keypath="deleteModalKeypath" tag="p" scope="global">
                <template #name>
                    <strong class="font-semibold">{{ deleteTargetName }}</strong>
                </template>
            </i18n-t>
        </ConfirmModal>

        <ConfirmModal
            v-model="convertModalOpen"
            :title="$t('prospects.convertConfirmTitle')"
            :confirm-label="$t('prospects.convertConfirm')"
            confirm-variant="primary"
            @confirm="confirmConvert"
        >
            <i18n-t keypath="prospects.convertConfirmMessage" tag="p" scope="global">
                <template #name>
                    <strong class="font-semibold">{{ convertTarget?.company }}</strong>
                </template>
            </i18n-t>
        </ConfirmModal>
        </div>
    </div>
</template>

<script setup lang="ts">
import type { Client } from '~/modules/directory/services/dto/client'
import { useClientService } from '~/modules/directory/services/clients'
import type { Prospect, ProspectStatus } from '~/modules/directory/services/dto/prospect'
import { useProspectService } from '~/modules/directory/services/prospects'
import type { Prestataire } from '~/modules/directory/services/dto/prestataire'
import { usePrestataireService } from '~/modules/directory/services/prestataires'
import { readHistoryTab, stampHistoryTab } from '~/utils/historyTab'

definePageMeta({ middleware: ['admin'] })

type ProspectRow = Prospect

const { t } = useI18n()
useHead({ title: t('directory.title') })

const clientService = useClientService()
const prospectService = useProspectService()
const prestataireService = usePrestataireService()

const activeTab = ref('clients')
const tabs = [
    { key: 'clients', label: t('directory.tabs.clients'), icon: 'mdi:account-tie-outline' },
    { key: 'prospects', label: t('directory.tabs.prospects'), icon: 'mdi:account-search-outline' },
    { key: 'prestataires', label: t('directory.tabs.prestataires'), icon: 'mdi:account-hard-hat-outline' },
]
const tabKeys = tabs.map((tab) => tab.key)

// Avant d'ouvrir une fiche : on estampille l'entrée d'historique courante avec
// l'onglet actif → la flèche « précédent » du navigateur restaure le bon onglet.
function navigateToDetail(path: string): void {
    stampHistoryTab(activeTab.value)
    navigateTo(path)
}

// --- Clients ---
const clients = ref<Client[]>([])
const clientDrawerOpen = ref(false)
const selectedClient = ref<Client | null>(null)

const clientColumns = [
    { key: 'name', label: t('prospects.fields.company') },
    { key: 'email', label: t('prospects.fields.email') },
    { key: 'phone', label: t('prospects.fields.phone') },
    { key: 'actions', label: t('common.actions') },
]

async function loadClients() {
    clients.value = await clientService.getAll()
}

function openCreateClient() {
    selectedClient.value = null
    clientDrawerOpen.value = true
}

function openEditClient(item: Record<string, unknown>) {
    navigateToDetail(`/directory/clients/${(item as Client).id}`)
}

// --- Prospects ---
const prospects = ref<Prospect[]>([])
const prospectDrawerOpen = ref(false)
const selectedProspect = ref<Prospect | null>(null)
const statusFilter = ref<ProspectStatus | null>(null)

const statusOptions = [
    { label: t('prospects.status.new'), value: 'new' },
    { label: t('prospects.status.contacted'), value: 'contacted' },
    { label: t('prospects.status.qualified'), value: 'qualified' },
    { label: t('prospects.status.won'), value: 'won' },
    { label: t('prospects.status.lost'), value: 'lost' },
]

const prospectColumns = [
    { key: 'company', label: t('prospects.fields.company') },
    { key: 'status', label: t('prospects.fields.status') },
    { key: 'email', label: t('prospects.fields.email') },
    { key: 'phone', label: t('prospects.fields.phone') },
    { key: 'actions', label: t('common.actions') },
]

const prospectRows = computed<ProspectRow[]>(() => prospects.value)

function statusLabel(status: ProspectStatus): string {
    return t(`prospects.status.${status}`)
}

function statusVariant(status: ProspectStatus): 'neutral' | 'info' | 'success' | 'warning' | 'danger' {
    switch (status) {
        case 'new':
            return 'info'
        case 'contacted':
            return 'warning'
        case 'qualified':
            return 'neutral'
        case 'won':
            return 'success'
        case 'lost':
            return 'danger'
        default:
            return 'neutral'
    }
}

async function loadProspects() {
    prospects.value = await prospectService.getAll(statusFilter.value ?? undefined)
}

function openCreateProspect() {
    selectedProspect.value = null
    prospectDrawerOpen.value = true
}

function openEditProspect(item: Record<string, unknown>) {
    navigateToDetail(`/directory/prospects/${(item as Prospect).id}`)
}

// La conversion passe par une modal de confirmation (le prospect devient client).
const convertModalOpen = ref(false)
const convertTarget = ref<ProspectRow | null>(null)

function askConvertProspect(row: ProspectRow) {
    convertTarget.value = row
    convertModalOpen.value = true
}

async function confirmConvert() {
    const row = convertTarget.value
    if (!row) return
    await prospectService.convert(row.id)
    // La conversion crée un client et retire le prospect : rafraîchir les deux listes.
    await Promise.all([loadProspects(), loadClients()])
    convertModalOpen.value = false
    convertTarget.value = null
}

// Le ProspectDrawer porte aussi le bouton « Convertir » : son event 'saved' peut
// donc être une conversion → toujours rafraîchir les deux listes par sécurité.
async function onProspectSaved() {
    await Promise.all([loadProspects(), loadClients()])
}

// --- Prestataires ---
const prestataires = ref<Prestataire[]>([])
const prestataireDrawerOpen = ref(false)
const selectedPrestataire = ref<Prestataire | null>(null)

const prestataireColumns = [
    { key: 'name', label: t('prospects.fields.company') },
    { key: 'email', label: t('prospects.fields.email') },
    { key: 'phone', label: t('prospects.fields.phone') },
    { key: 'actions', label: t('common.actions') },
]

async function loadPrestataires() {
    prestataires.value = await prestataireService.getAll()
}

function openCreatePrestataire() {
    selectedPrestataire.value = null
    prestataireDrawerOpen.value = true
}

function openEditPrestataire(item: Record<string, unknown>) {
    navigateToDetail(`/directory/prestataires/${(item as Prestataire).id}`)
}

// --- Suppression (clients, prospects & prestataires) ---
type DeleteTarget =
    | { type: 'client'; item: Client }
    | { type: 'prospect'; item: Prospect }
    | { type: 'prestataire'; item: Prestataire }

const deleteModalOpen = ref(false)
const deleteTarget = ref<DeleteTarget | null>(null)

const deleteModalTitle = computed(() => {
    switch (deleteTarget.value?.type) {
        case 'prospect':
            return t('prospects.deleteConfirmTitle')
        case 'prestataire':
            return t('prestataires.deleteConfirmTitle')
        default:
            return t('clients.deleteConfirmTitle')
    }
})

// Clé i18n du message (le nom y est injecté en gras via <i18n-t> côté template).
const deleteModalKeypath = computed(() => {
    switch (deleteTarget.value?.type) {
        case 'prospect':
            return 'prospects.deleteConfirmMessage'
        case 'prestataire':
            return 'prestataires.deleteConfirmMessage'
        default:
            return 'clients.deleteConfirmMessage'
    }
})

const deleteTargetName = computed(() => {
    const target = deleteTarget.value
    if (!target) return ''
    return target.type === 'prospect' ? target.item.company : target.item.name
})

function askDeleteClient(item: Client) {
    deleteTarget.value = { type: 'client', item }
    deleteModalOpen.value = true
}

function askDeleteProspect(item: Prospect) {
    deleteTarget.value = { type: 'prospect', item }
    deleteModalOpen.value = true
}

function askDeletePrestataire(item: Prestataire) {
    deleteTarget.value = { type: 'prestataire', item }
    deleteModalOpen.value = true
}

async function confirmDelete() {
    const target = deleteTarget.value
    if (!target) return

    if (target.type === 'client') {
        await clientService.remove(target.item.id)
        await loadClients()
    } else if (target.type === 'prospect') {
        await prospectService.remove(target.item.id)
        await loadProspects()
    } else {
        await prestataireService.remove(target.item.id)
        await loadPrestataires()
    }

    deleteModalOpen.value = false
    deleteTarget.value = null
}

watch(statusFilter, loadProspects)

onMounted(async () => {
    // Restaure l'onglet quitté lors d'un retour depuis une fiche (flèche app ou
    // navigateur). `null` (deep link / reload) → onglet Clients par défaut.
    activeTab.value = readHistoryTab(tabKeys) ?? 'clients'
    await Promise.all([loadClients(), loadProspects(), loadPrestataires()])
})
</script>

<style scoped>
/* MalioTabList (lib) : aère les onglets verticalement (espace haut/bas du texte) */
:deep([role="tab"]) {
    padding-top: 0.9rem;
    padding-bottom: 0.25rem;
}
</style>
