import InputError from '@/Components/InputError';
import InputLabel from '@/Components/InputLabel';
import PrimaryButton from '@/Components/PrimaryButton';
import TextInput from '@/Components/TextInput';
import { CompanyFormData } from '@/types/crm';
import { FormEventHandler, useId } from 'react';

type Props = {
    data: CompanyFormData;
    errors: Record<string, string>;
    processing: boolean;
    statusLabels: Record<string, string>;
    submitLabel: string;
    onSubmit: FormEventHandler;
    onChange: (field: keyof CompanyFormData, value: string) => void;
};

export default function CompanyForm({
    data,
    errors,
    processing,
    statusLabels,
    submitLabel,
    onSubmit,
    onChange,
}: Props) {
    const statusId = useId();
    const lastContactId = useId();
    const nextFollowUpId = useId();
    const notesId = useId();

    return (
        <form onSubmit={onSubmit} className="space-y-6">
            <div className="grid gap-4 md:grid-cols-2">
                <Field
                    label="Raison sociale"
                    value={data.name}
                    onChange={(value) => onChange('name', value)}
                    error={errors.name}
                    required
                />
                <Field
                    label="Nom commercial"
                    value={data.branch_name}
                    onChange={(value) => onChange('branch_name', value)}
                    error={errors.branch_name}
                />
                <Field
                    label="Adresse"
                    value={data.address_line1}
                    onChange={(value) => onChange('address_line1', value)}
                    error={errors.address_line1}
                />
                <Field
                    label="Complement"
                    value={data.address_line2}
                    onChange={(value) => onChange('address_line2', value)}
                    error={errors.address_line2}
                />
                <Field
                    label="Code postal"
                    value={data.postal_code}
                    onChange={(value) => onChange('postal_code', value)}
                    error={errors.postal_code}
                />
                <Field
                    label="Ville"
                    value={data.city}
                    onChange={(value) => onChange('city', value)}
                    error={errors.city}
                />
                <Field
                    label="Telephone principal"
                    value={data.phone_primary}
                    onChange={(value) => onChange('phone_primary', value)}
                    error={errors.phone_primary}
                />
                <Field
                    label="Telephone secondaire"
                    value={data.phone_secondary}
                    onChange={(value) => onChange('phone_secondary', value)}
                    error={errors.phone_secondary}
                />
                <Field
                    label="Mobile"
                    value={data.phone_mobile}
                    onChange={(value) => onChange('phone_mobile', value)}
                    error={errors.phone_mobile}
                />
                <Field
                    label="Email"
                    type="email"
                    value={data.email}
                    onChange={(value) => onChange('email', value)}
                    error={errors.email}
                />
                <Field
                    label="Site web"
                    type="url"
                    value={data.website}
                    onChange={(value) => onChange('website', value)}
                    error={errors.website}
                />
                <Field
                    label="Activite"
                    value={data.activity_label}
                    onChange={(value) => onChange('activity_label', value)}
                    error={errors.activity_label}
                />
                <Field
                    label="Code NAF"
                    value={data.naf_code}
                    onChange={(value) => onChange('naf_code', value)}
                    error={errors.naf_code}
                />
                <Field
                    label="SIRET"
                    value={data.siret}
                    onChange={(value) => onChange('siret', value)}
                    error={errors.siret}
                />
                <Field
                    label="Effectif"
                    value={data.workforce_label}
                    onChange={(value) => onChange('workforce_label', value)}
                    error={errors.workforce_label}
                />
                <Field
                    label="Potentiel estime (EUR)"
                    type="number"
                    value={data.estimated_potential}
                    onChange={(value) => onChange('estimated_potential', value)}
                    error={errors.estimated_potential}
                />
                <Field
                    label="Source"
                    value={data.source}
                    onChange={(value) => onChange('source', value)}
                    error={errors.source}
                />

                <div>
                    <InputLabel htmlFor={statusId} value="Statut CRM" />
                    <select
                        id={statusId}
                        value={data.status}
                        onChange={(event) => onChange('status', event.target.value)}
                        className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                    >
                        {Object.entries(statusLabels).map(([value, label]) => (
                            <option key={value} value={value}>
                                {label}
                            </option>
                        ))}
                    </select>
                    <InputError message={errors.status} className="mt-2" />
                </div>

                <div>
                    <InputLabel htmlFor={lastContactId} value="Dernier contact" />
                    <TextInput
                        id={lastContactId}
                        type="date"
                        value={data.last_contacted_at}
                        onChange={(event) =>
                            onChange('last_contacted_at', event.target.value)
                        }
                        className="mt-1 block w-full"
                    />
                    <InputError
                        message={errors.last_contacted_at}
                        className="mt-2"
                    />
                </div>

                <div>
                    <InputLabel htmlFor={nextFollowUpId} value="Prochain suivi" />
                    <TextInput
                        id={nextFollowUpId}
                        type="date"
                        value={data.next_follow_up_at}
                        onChange={(event) =>
                            onChange('next_follow_up_at', event.target.value)
                        }
                        className="mt-1 block w-full"
                    />
                    <InputError
                        message={errors.next_follow_up_at}
                        className="mt-2"
                    />
                </div>
            </div>

            <div>
                <InputLabel htmlFor={notesId} value="Notes" />
                <textarea
                    id={notesId}
                    value={data.notes}
                    onChange={(event) => onChange('notes', event.target.value)}
                    className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                    rows={4}
                />
                <InputError message={errors.notes} className="mt-2" />
            </div>

            <PrimaryButton disabled={processing}>{submitLabel}</PrimaryButton>
        </form>
    );
}

type FieldProps = {
    label: string;
    value: string;
    error?: string;
    type?: string;
    required?: boolean;
    onChange: (value: string) => void;
};

function Field({
    label,
    value,
    error,
    type = 'text',
    required = false,
    onChange,
}: FieldProps) {
    const id = useId();

    return (
        <div>
            <InputLabel htmlFor={id} value={label} />
            <TextInput
                id={id}
                type={type}
                value={value}
                required={required}
                onChange={(event) => onChange(event.target.value)}
                className="mt-1 block w-full"
            />
            <InputError message={error} className="mt-2" />
        </div>
    );
}