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

export default function Create({
    companies,
    selectedCompany = null,
}) {
    const form = useForm({
        beneficiary_company_id: selectedCompany?.id ?? "",
        prospect_name: "",
        prospect_email: "",
        prospect_phone: "",
        need_description: "",
        maturity_level: "",
        estimated_amount_ht: "",
        validity_months: "6",
    });

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

        form.post(
            route(
                selectedCompany
                    ? "introductions.store.for-company"
                    : "introductions.store",
                selectedCompany?.id,
            ),
        );
    };

    return (
        <AuthenticatedLayout>
            <div className="container">
                <div className="card">
                    <h1 className="page-title">Créer une mise en relation</h1>

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

                            {selectedCompany ? (
                                <div
                                    id="beneficiary_company_id"
                                    className="mt-1 inline-block w-fit rounded-md bg-gray-100 px-3 py-2 text-gray-500"
                                >
                                    {selectedCompany.name}
                                </div>
                            ) : (
                                <select
                                    id="beneficiary_company_id"
                                    value={form.data.beneficiary_company_id}
                                    onChange={(e) =>
                                        form.setData(
                                            "beneficiary_company_id",
                                            e.target.value,
                                        )
                                    }
                                >
                                    <option value="">
                                        Sélectionnez une entreprise
                                    </option>

                                    {companies.map((company) => (
                                        <option key={company.id} value={company.id}>
                                            {company.name}
                                        </option>
                                    ))}
                                </select>
                            )}

                            {form.errors.beneficiary_company_id && (
                                <div>{form.errors.beneficiary_company_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 identifié / 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="">Sélectionnez</option>

                                <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="estimated_amount_ht">
                                Montant HT estimé (€)
                            </label>

                            <input
                                id="estimated_amount_ht"
                                type="number"
                                min="0"
                                step="1"
                                value={form.data.estimated_amount_ht}
                                onChange={(e) =>
                                    form.setData(
                                        "estimated_amount_ht",
                                        e.target.value,
                                    )
                                }
                            />

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

                        <div>
                            <label htmlFor="validity_months">
                                Validité de l'apport
                            </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>

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

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

                        <Link
                            className="btn btn-secondary"
                            href={route("introductions.index")}
                        >
                            Annuler
                        </Link>
                    </form>
                </div>
            </div>
        </AuthenticatedLayout>
    );
}