import { Link, useForm } from "@inertiajs/react";
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";

export default function Edit({ introduction, users, admin = false }) {
    const commissionOffer = introduction.commission_offers?.[0] ?? {};

    const form = useForm({
        beneficiary_user_id: introduction.beneficiary_user_id,
        prospect_name: introduction.prospect_name,
        prospect_email: introduction.prospect_email ?? "",
        prospect_phone: introduction.prospect_phone ?? "",
        need_description: introduction.need_description,
        maturity_level: introduction.maturity_level,
        estimated_commission_type: commissionOffer.commission_type ?? "none",
        estimated_commission_rate: commissionOffer.commission_rate ?? "",
        estimated_commission_amount: commissionOffer.commission_amount ?? "",
        estimated_commission_description:
            commissionOffer.commission_description ?? "",
        validity_months: introduction.validity_months,
    });

    const submit = (e) => {
        e.preventDefault();

        form.transform((data) => ({
            ...data,
            commission_type: data.estimated_commission_type,
            commission_rate: data.estimated_commission_rate,
            commission_amount: data.estimated_commission_amount,
            commission_description: data.estimated_commission_description,
        }));

        form.put(
            route(
                admin ? "admin.introductions.update" : "introductions.update",
                introduction.id,
            ),
        );
    };

    return (
        <AuthenticatedLayout>
            <div className="container">
                <div className="card">
                    <h1 className="page-title">Modifier la mise en relation</h1>

                    <form onSubmit={submit}>
                        <div>
                            <label htmlFor="beneficiary_user_id">
                                Utilisateur bénéficiaire
                            </label>

                            <select
                                id="beneficiary_user_id"
                                value={form.data.beneficiary_user_id}
                                onChange={(e) =>
                                    form.setData(
                                        "beneficiary_user_id",
                                        e.target.value,
                                    )
                                }
                            >
                                {users.map((user) => (
                                    <option key={user.id} value={user.id}>
                                        {user.firstname} {user.name} (
                                        {user.email})
                                    </option>
                                ))}
                            </select>

                            {form.errors.beneficiary_user_id && (
                                <div>{form.errors.beneficiary_user_id}</div>
                            )}
                        </div>

                        <div>
                            <label htmlFor="prospect_name">
                                Nom du prospect
                            </label>

                            <input
                                id="prospect_name"
                                type="text"
                                value={form.data.prospect_name}
                                onChange={(e) =>
                                    form.setData(
                                        "prospect_name",
                                        e.target.value,
                                    )
                                }
                            />

                            {form.errors.prospect_name && (
                                <div>{form.errors.prospect_name}</div>
                            )}
                        </div>

                        <div>
                            <label htmlFor="prospect_email">
                                Email du prospect
                            </label>

                            <input
                                id="prospect_email"
                                type="email"
                                value={form.data.prospect_email}
                                onChange={(e) =>
                                    form.setData(
                                        "prospect_email",
                                        e.target.value,
                                    )
                                }
                            />

                            {form.errors.prospect_email && (
                                <div>{form.errors.prospect_email}</div>
                            )}
                        </div>

                        <div>
                            <label htmlFor="prospect_phone">
                                Téléphone du prospect
                            </label>

                            <input
                                id="prospect_phone"
                                type="tel"
                                value={form.data.prospect_phone}
                                onChange={(e) =>
                                    form.setData(
                                        "prospect_phone",
                                        e.target.value,
                                    )
                                }
                            />

                            {form.errors.prospect_phone && (
                                <div>{form.errors.prospect_phone}</div>
                            )}
                        </div>

                        <div>
                            <label htmlFor="need_description">
                                Besoin / contexte
                            </label>

                            <textarea
                                id="need_description"
                                value={form.data.need_description}
                                onChange={(e) =>
                                    form.setData(
                                        "need_description",
                                        e.target.value,
                                    )
                                }
                            />

                            {form.errors.need_description && (
                                <div>{form.errors.need_description}</div>
                            )}
                        </div>

                        <div>
                            <label htmlFor="maturity_level">
                                Niveau de maturité
                            </label>

                            <select
                                id="maturity_level"
                                value={form.data.maturity_level}
                                onChange={(e) =>
                                    form.setData(
                                        "maturity_level",
                                        e.target.value,
                                    )
                                }
                            >
                                <option value="simple_contact">
                                    Simple contact utile
                                </option>

                                <option value="need_identified">
                                    Besoin identifié
                                </option>

                                <option value="active_project">
                                    Projet actif
                                </option>

                                <option value="quote_likely">
                                    Demande de devis probable
                                </option>
                            </select>

                            {form.errors.maturity_level && (
                                <div>{form.errors.maturity_level}</div>
                            )}
                        </div>

                        <div>
                            <label htmlFor="validity_months">Validité</label>

                            <select
                                id="validity_months"
                                value={form.data.validity_months}
                                onChange={(e) =>
                                    form.setData(
                                        "validity_months",
                                        e.target.value,
                                    )
                                }
                            >
                                <option value="3">3 mois</option>

                                <option value="6">6 mois</option>

                                <option value="12">12 mois</option>
                            </select>
                        </div>

                        <div>
                            <label htmlFor="estimated_commission_type">
                                Type de commission estimée
                            </label>
                            <select
                                id="estimated_commission_type"
                                value={form.data.estimated_commission_type}
                                onChange={(e) =>
                                    form.setData(
                                        "estimated_commission_type",
                                        e.target.value,
                                    )
                                }
                            >
                                <option value="none">Aucune</option>
                                <option value="rate">Taux</option>
                                <option value="amount">Montant</option>
                                <option value="text">Texte</option>
                            </select>
                            {form.errors.estimated_commission_type && (
                                <div>
                                    {form.errors.estimated_commission_type}
                                </div>
                            )}
                        </div>

                        {form.data.estimated_commission_type === "rate" && (
                            <div>
                                <label htmlFor="estimated_commission_rate">
                                    Taux de commission estimé (%)
                                </label>
                                <input
                                    id="estimated_commission_rate"
                                    type="number"
                                    min="0"
                                    max="100"
                                    value={form.data.estimated_commission_rate}
                                    onChange={(e) =>
                                        form.setData(
                                            "estimated_commission_rate",
                                            e.target.value,
                                        )
                                    }
                                />
                                {form.errors.estimated_commission_rate && (
                                    <div>
                                        {form.errors.estimated_commission_rate}
                                    </div>
                                )}
                            </div>
                        )}

                        {form.data.estimated_commission_type === "amount" && (
                            <div>
                                <label htmlFor="estimated_commission_amount">
                                    Montant de commission estimé (€)
                                </label>
                                <input
                                    id="estimated_commission_amount"
                                    type="number"
                                    min="0"
                                    step="1"
                                    value={
                                        form.data.estimated_commission_amount
                                    }
                                    onChange={(e) =>
                                        form.setData(
                                            "estimated_commission_amount",
                                            e.target.value,
                                        )
                                    }
                                />
                                {form.errors.estimated_commission_amount && (
                                    <div>
                                        {
                                            form.errors
                                                .estimated_commission_amount
                                        }
                                    </div>
                                )}
                            </div>
                        )}

                        {form.data.estimated_commission_type === "text" && (
                            <div>
                                <label htmlFor="estimated_commission_description">
                                    Description de commission estimée
                                </label>
                                <textarea
                                    id="estimated_commission_description"
                                    value={
                                        form.data
                                            .estimated_commission_description
                                    }
                                    onChange={(e) =>
                                        form.setData(
                                            "estimated_commission_description",
                                            e.target.value,
                                        )
                                    }
                                />
                                {form.errors
                                    .estimated_commission_description && (
                                    <div>
                                        {
                                            form.errors
                                                .estimated_commission_description
                                        }
                                    </div>
                                )}
                            </div>
                        )}

                        <button
                            className="btn btn-primary"
                            type="submit"
                            disabled={form.processing}
                        >
                            Enregistrer
                        </button>

                        <Link
                            className="btn btn-secondary"
                            href={route(
                                admin
                                    ? "admin.introductions.index"
                                    : "introductions.show",
                                admin ? undefined : introduction.id,
                            )}
                        >
                            Annuler
                        </Link>
                    </form>
                </div>
            </div>
        </AuthenticatedLayout>
    );
}