<script setup lang="ts">
import { Head, Link, router } from '@inertiajs/vue3';
import { Building2 } from 'lucide-vue-next';
import Heading from '@/components/Heading.vue';
import Pagination from '@/components/Pagination.vue';
import { Button } from '@/components/ui/button';
import AppLayout from '@/layouts/AppLayout.vue';

type Client = {
    id: number;
    company_name: string;
    legal_form: string;
    ice: string | null;
    status: string | null;
    showUrl: string;
    editUrl: string;
    destroyUrl: string;
};

type PaginatedData<T> = {
    data: T[];
    from: number | null;
    to: number | null;
    total: number;
    current_page: number;
    last_page: number;
    per_page: number;
    path: string;
    first_page_url: string;
    prev_page_url: string | null;
    next_page_url: string | null;
    last_page_url: string;
};

type Props = {
    clients: PaginatedData<Client>;
    createUrl: string;
    workspaceName: string;
    canCreate: boolean;
    canEdit: boolean;
    canDelete: boolean;
};

const props = defineProps<Props>();

function destroy(client: Client) {
    if (
        window.confirm(
            `Êtes-vous sûr de vouloir supprimer « ${client.company_name} » ?`,
        )
    ) {
        router.delete(client.destroyUrl);
    }
}

const statusLabels: Record<string, string> = {
    actif: 'Actif',
    inactif: 'Inactif',
    suspendu: 'Suspendu',
};

function getLegalFormLabel(legalForm: string): string {
    const labels: Record<string, string> = {
        sarl: 'SARL',
        sa: 'SA',
        snc: 'SNC',
        scs: 'SCS',
        eurl: 'EURL',
        sel: 'SEL',
        auto_entrepreneur: 'Auto-entrepreneur',
        entreprise_individuelle: 'Entreprise individuelle',
        other: 'Autre',
    };
    return labels[legalForm] ?? legalForm;
}
</script>

<template>
    <AppLayout :breadcrumbs="[{ title: 'Clients' }]">
        <Head title="Clients" />

        <div class="flex flex-col space-y-6 p-4">
            <div class="flex items-center justify-between">
                <Heading
                    variant="small"
                    title="Clients"
                    :description="`Gérer les clients du workspace « ${workspaceName} »`"
                />
                <Button v-if="props.canCreate" as-child>
                    <Link :href="createUrl">Ajouter un client</Link>
                </Button>
            </div>

            <div
                class="overflow-hidden rounded-xl border border-sidebar-border/70 dark:border-sidebar-border"
            >
                <div class="overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead
                            class="border-b border-sidebar-border/70 bg-muted/50"
                        >
                            <tr>
                                <th
                                    class="h-10 px-4 text-left align-middle font-medium"
                                >
                                    Raison sociale
                                </th>
                                <th
                                    class="h-10 px-4 text-left align-middle font-medium"
                                >
                                    Forme juridique
                                </th>
                                <th
                                    class="h-10 px-4 text-left align-middle font-medium"
                                >
                                    ICE
                                </th>
                                <th
                                    class="h-10 px-4 text-left align-middle font-medium"
                                >
                                    Statut
                                </th>
                                <th
                                    class="h-10 px-4 text-right align-middle font-medium"
                                >
                                    Actions
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr
                                v-for="client in clients.data"
                                :key="client.id"
                                class="border-b border-sidebar-border/50 last:border-0"
                            >
                                <td class="px-4 py-3 font-medium">
                                    <Link
                                        :href="client.showUrl"
                                        class="hover:underline"
                                    >
                                        {{ client.company_name }}
                                    </Link>
                                </td>
                                <td class="px-4 py-3 text-muted-foreground">
                                    {{ getLegalFormLabel(client.legal_form) }}
                                </td>
                                <td class="px-4 py-3 text-muted-foreground">
                                    {{ client.ice || '—' }}
                                </td>
                                <td class="px-4 py-3 text-muted-foreground">
                                    {{
                                        client.status
                                            ? (statusLabels[client.status] ??
                                              client.status)
                                            : '—'
                                    }}
                                </td>
                                <td class="space-x-2 px-4 py-3 text-right">
                                    <Button
                                        variant="outline"
                                        size="sm"
                                        as-child
                                    >
                                        <Link :href="client.showUrl">Voir</Link>
                                    </Button>
                                    <Button
                                        v-if="props.canEdit"
                                        variant="outline"
                                        size="sm"
                                        as-child
                                    >
                                        <Link :href="client.editUrl"
                                            >Modifier</Link
                                        >
                                    </Button>
                                    <Button
                                        v-if="props.canDelete"
                                        variant="destructive"
                                        size="sm"
                                        @click="destroy(client)"
                                    >
                                        Supprimer
                                    </Button>
                                </td>
                            </tr>
                            <tr v-if="!clients.data.length">
                                <td
                                    colspan="5"
                                    class="px-4 py-8 text-center text-muted-foreground"
                                >
                                    <div
                                        class="flex flex-col items-center gap-2"
                                    >
                                        <Building2 class="h-10 w-10" />
                                        <p>Aucun client pour le moment.</p>
                                        <Button v-if="props.canCreate" as-child>
                                            <Link :href="createUrl"
                                                >Ajouter votre premier
                                                client</Link
                                            >
                                        </Button>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <Pagination
                :pagination="{
                    from: clients.from ?? 0,
                    to: clients.to ?? 0,
                    total: clients.total,
                    current_page: clients.current_page,
                    last_page: clients.last_page,
                    per_page: clients.per_page,
                }"
            />
        </div>
    </AppLayout>
</template>
