import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
import CompanyForm from '@/Pages/Crm/Companies/Partials/CompanyForm';
import { PageProps } from '@/types';
import { Company, CompanyFormData } from '@/types/crm';
import { Head, Link, useForm } from '@inertiajs/react';
import { FormEventHandler } from 'react';

type Props = PageProps<{
    company: Company;
    statusLabels: Record<string, string>;
}>;

export default function Edit({ company, statusLabels }: Props) {
    const { data, setData, patch, processing, errors } = useForm<CompanyFormData>(
        toFormData(company),
    );

    const submit: FormEventHandler = (event) => {
        event.preventDefault();
        patch(route('companies.update', company.id));
    };

    return (
        <AuthenticatedLayout
            header={
                <div className="flex items-center justify-between">
                    <h2 className="text-xl font-semibold leading-tight text-gray-800">
                        Modifier: {company.name}
                    </h2>
                    <Link
                        href={route('companies.show', company.id)}
                        className="text-sm font-medium text-indigo-600 hover:text-indigo-500"
                    >
                        Retour a la fiche
                    </Link>
                </div>
            }
        >
            <Head title={`Modifier ${company.name}`} />

            <div className="py-10">
                <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                    <div className="rounded-lg bg-white p-6 shadow-sm">
                        <CompanyForm
                            data={data}
                            errors={errors as Record<string, string>}
                            processing={processing}
                            statusLabels={statusLabels}
                            submitLabel="Mettre a jour"
                            onSubmit={submit}
                            onChange={(field, value) => setData(field, value)}
                        />
                    </div>
                </div>
            </div>
        </AuthenticatedLayout>
    );
}

function toFormData(company: Company): CompanyFormData {
    return {
        name: company.name ?? '',
        branch_name: company.branch_name ?? '',
        address_line1: company.address_line1 ?? '',
        address_line2: company.address_line2 ?? '',
        postal_code: company.postal_code ?? '',
        city: company.city ?? '',
        country: company.country ?? 'FR',
        phone_primary: company.phone_primary ?? '',
        phone_secondary: company.phone_secondary ?? '',
        phone_mobile: company.phone_mobile ?? '',
        email: company.email ?? '',
        website: company.website ?? '',
        activity_label: company.activity_label ?? '',
        naf_code: company.naf_code ?? '',
        siret: company.siret ?? '',
        workforce_label: company.workforce_label ?? '',
        status: company.status,
        estimated_potential: company.estimated_potential ?? '',
        last_contacted_at: company.last_contacted_at
            ? company.last_contacted_at.slice(0, 10)
            : '',
        next_follow_up_at: company.next_follow_up_at
            ? company.next_follow_up_at.slice(0, 10)
            : '',
        source: company.source ?? '',
        notes: company.notes ?? '',
    };
}
