<script setup lang="ts">
import { Head, Link, useForm } from '@inertiajs/vue3';
import ClientForm from '@/components/ClientForm.vue';
import type {
    ClientContactData,
    ClientFormData,
} from '@/components/ClientForm.vue';
import Heading from '@/components/Heading.vue';
import { Button } from '@/components/ui/button';
import AppLayout from '@/layouts/AppLayout.vue';

type WorkspaceUser = {
    id: number;
    name: string;
    email: string;
};

type ClientContact = {
    id: number;
    full_name: string;
    job_title: string | null;
    email: string | null;
    phone: string | null;
    is_principal: boolean;
};

type Client = {
    id: number;
    company_name: string;
    legal_form: string;
    ice: string | null;
    fiscal_id: string | null;
    rc: string | null;
    cnss: string | null;
    patente: string | null;
    contacts: ClientContact[];
    internal_responsible_id: number | null;
    status: string | null;
    internal_notes: string | null;
};

type Props = {
    client: Client;
    indexUrl: string;
    updateUrl: string;
    legalForms: Record<string, string>;
    clientStatusLabels: Record<string, string>;
    workspaceUsers: WorkspaceUser[];
};

const props = defineProps<Props>();

const form = useForm<ClientFormData>({
    company_name: props.client.company_name,
    legal_form: props.client.legal_form,
    ice: props.client.ice ?? '',
    fiscal_id: props.client.fiscal_id ?? '',
    rc: props.client.rc ?? '',
    cnss: props.client.cnss ?? '',
    patente: props.client.patente ?? '',
    contacts: props.client.contacts.map(
        (c): ClientContactData => ({
            id: c.id,
            full_name: c.full_name,
            job_title: c.job_title ?? '',
            email: c.email ?? '',
            phone: c.phone ?? '',
            is_principal: c.is_principal,
        }),
    ),
    internal_responsible_id:
        props.client.internal_responsible_id != null
            ? String(props.client.internal_responsible_id)
            : '',
    status: props.client.status ?? 'actif',
    internal_notes: props.client.internal_notes ?? '',
});

function submit() {
    form.put(props.updateUrl);
}
</script>

<template>
    <AppLayout
        :breadcrumbs="[
            { title: 'Clients', href: props.indexUrl },
            { title: 'Modifier le client' },
        ]"
    >
        <Head :title="`Modifier ${props.client.company_name}`" />

        <div class="flex flex-col space-y-6 p-4">
            <div class="flex items-center justify-between">
                <Heading
                    :title="`Modifier ${props.client.company_name}`"
                    description="Mettre à jour les informations du client"
                />
                <Button variant="outline" as-child>
                    <Link :href="indexUrl">Retour</Link>
                </Button>
            </div>
            <ClientForm
                :form="form"
                :legal-forms="props.legalForms"
                :client-status-labels="props.clientStatusLabels"
                :workspace-users="props.workspaceUsers"
                submit-label="Enregistrer les modifications"
                @submit="submit"
            />
        </div>
    </AppLayout>
</template>
