'use client';

import { useRefData } from "../../../../app/hooks/useRefData";
import { Input, Select, Checkbox, RadioGroup } from "../../FormsFieldsTypes";
import { COMPANY_NAME } from "../../../../app/config/constants";
import { validateDateCreationCompany } from "../../../../app/utils/validationUsagerForm";
import { AutoComplete } from "../../ui/AutoComplete";

export default function ProjetsTab({ data, onChange }: any) {
    const lieu = useRefData('lieu_de_proximite');
    const secteur_activite = useRefData('secteur_activite');
    const statut_juridique = useRefData('statut_juridique');
    const regime_fiscal = useRefData('regime_fiscal');
    const regime_tva = useRefData('regime_tva');
    const cfe = useRefData('cfe');
    const actions = useRefData('action_convention');
    const conventions = useRefData('conventions');

    const OUI_NON_OPTIONS = [
        {
            value: "true",
            label: "Oui"
        },
        {
            value: "false",
            label: "Non"
        }
    ];

    const projets = data.projets || { aides: [] };
    const selectedProjetType =
        projets?.creation_accompagnee
            ? "creation_accompagnee"
            : projets?.creation_non_accompagnee
                ? "creation_non_accompagnee"
                : "";

    const updateProjetField = (name: string, value: any) => {
        onChange("projets", {
            ...projets,
            [name]: value
        });
    };

    const updateProjetType = (_: string, value: string) => {
        onChange("projets", {
            ...projets,
            creation_accompagnee: value === "creation_accompagnee",
            creation_non_accompagnee: value === "creation_non_accompagnee"
        });
    };

    const creationDateError = validateDateCreationCompany(projets.date_creation);

    return (
        <>
            <div className="bg-white rounded-xl border border-[#dce8e2] p-2">

                <div className="grid md:grid-cols-2">

                    <RadioGroup
                        label="Entreprise créée ?"
                        name="entreprise_creee"
                        options={OUI_NON_OPTIONS}
                        value={projets?.entreprise_creee ?? ""}
                        onChange={updateProjetField}
                    />

                    <Input
                        label={
                            projets?.entreprise_creee === "true"
                                ? "Secteur d'activité"
                                : "Intitulé du projet"
                        }
                        name="intitule"
                        value={projets?.intitule || ""}
                        onChange={updateProjetField}
                        required
                    />
                </div>
                {projets?.entreprise_creee === "true" && (
                    <div className="mt-2">

                        <h2 className="text-xl font-semibold text-[#1f5f4a] mb-2">
                            Situation
                        </h2>

                        <div className="grid md:grid-cols-4 gap-1">

                            <RadioGroup
                                label="Type de projet"
                                name="type_projet"
                                value={selectedProjetType}
                                onChange={updateProjetType}
                                options={[
                                    {
                                        value: "creation_accompagnee",
                                        label: `Création accompagnée par ${COMPANY_NAME}`
                                    },
                                    {
                                        value: "creation_non_accompagnee",
                                        label: `Création non accompagnée par ${COMPANY_NAME}`
                                    }
                                ]}
                            />

                            {projets?.creation_accompagnee && (
                                <>
                                    <Select label="Action" name="action" value={projets?.action || ""} onChange={updateProjetField}
                                        options={actions.data} />

                                    <Select label="Convention" name="convention" value={projets?.convention || ""} onChange={updateProjetField}
                                        options={conventions.data} /></>
                            )}

                        </div>
                        <div className="grid md:grid-cols-2 gap-1">
                            <Checkbox label="Reprise entreprise" checked={!!projets?.reprise}
                                onChange={() => updateProjetField("reprise", !projets?.reprise)}
                                name={"reprise"} value={projets?.reprise} />

                            {projets?.reprise && (
                                <Input type="date" label="Date reprise" name="date_reprise"
                                    value={projets?.date_reprise || ""} onChange={updateProjetField} />
                            )}

                            <Checkbox label="Couveuse" checked={!!projets?.couveuse}
                                onChange={() => updateProjetField("couveuse", !projets?.couveuse)}
                                name={"couveuse"} value={projets?.couveuse} />
                            {projets?.couveuse && (
                                <Input label="Détail" name="detail_couveuse"
                                    value={projets?.detail_couveuse || ""} onChange={updateProjetField} />
                            )}
                        </div>
                    </div>
                )}
            </div>

            <div className="grid md:grid-cols-3">
                {projets?.entreprise_creee === "true" && (
                    <div className="md:col-span-2 bg-white rounded-xl border border-[#dce8e2] p-2">
                        <h2 className="text-xl font-semibold text-[#1f5f4a] mb-2">
                            Entreprise
                        </h2>
                        <div className="grid md:grid-cols-3">
                            <Input label="Raison sociale" name="raison_sociale"
                                value={projets?.raison_sociale || ""}
                                onChange={updateProjetField} />
                            <Input label="N° SIRET" name="siret"
                                value={projets?.siret || ""} onChange={updateProjetField} />
                            <Input type="date" label="Date de création" name="date_creation"
                                value={projets?.date_creation || ""} onChange={updateProjetField}
                                error={creationDateError}
                            />
                            <Input label="Adresse" name="adresse"
                                value={projets?.adresse || ""} onChange={updateProjetField} />
                            <AutoComplete
                                label="Ville + Code Postal"
                                options={
                                    lieu.data
                                }
                                value={projets?.ville_cp || ""}
                                placeholder="Rechercher un lieu"
                                onSelect={(option: any) => {

                                    updateProjetField(
                                        "ville_cp",
                                        option.value
                                    );
                                }}
                            />

                            <Input label="Téléphone 1" name="tel1"
                                value={projets?.tel1 || ""} onChange={updateProjetField} />
                            <Input label="Téléphone 2" name="tel2"
                                value={projets?.tel2 || ""} onChange={updateProjetField} />
                            <Input label="Email" name="email"
                                value={projets?.email || ""} onChange={updateProjetField} />

                            <Input label="Site web" name="site"
                                value={projets?.site || ""} onChange={updateProjetField} />

                            <AutoComplete
                                label="Secteur d'activité"
                                options={
                                    secteur_activite.data
                                }
                                value={projets?.secteur || ""}
                                placeholder="Rechercher un secteur"
                                onSelect={(option: any) => {

                                    updateProjetField(
                                        "secteur",
                                        option.value
                                    );
                                }}
                            />
                            <Input label="Activité" name="activite"
                                value={projets?.activite || ""} onChange={updateProjetField} />

                            <Select label="Statut juridique" name="statut_juridique"
                                value={projets?.statut_juridique || ""} onChange={updateProjetField}
                                options={statut_juridique.data} />
                            <Select label="Régime fiscal" name="regime_fiscal"
                                value={projets?.regime_fiscal || ""} onChange={updateProjetField} options={regime_fiscal.data} />
                            <Select label="Régime TVA" name="regime_tva"
                                value={projets?.regime_tva || ""} onChange={updateProjetField} options={regime_tva.data} />

                            <Select label="CFE" name="cfe"
                                value={projets?.cfe || ""} onChange={updateProjetField} options={cfe.data} />


                            <Input label="Effectif total" name="effectif" type="number"
                                value={projets?.effectif || ""} onChange={updateProjetField} />
                            <Input label="Nom du responsable" name="responsable"
                                value={projets?.responsable || ""} onChange={updateProjetField} />
                        </div>
                    </div>
                )}
                <div className="md:col-span-1 bg-white rounded-xl border border-[#dce8e2] p-2">

                    <h2 className="text-xl font-semibold text-[#1f5f4a] mb-2">
                        Aides financières
                    </h2>

                    <div className="flex gap-2">
                        <RadioGroup
                            label="Demandé et obtenu une aide financière ?"
                            name="aide_financiere_obtenue"
                            options={OUI_NON_OPTIONS}
                            value={projets?.aide_financiere_obtenue ?? ""}
                            onChange={updateProjetField}
                        />

                    </div>

                    {projets?.aide_financiere_obtenue === "true" && (
                        <div className="mt-1 rounded-xl bg-[#a2d6f5] border border-[#dce8e2] p-2">

                            <p className="text-sm text-black">
                                Merci de compléter le fichier Excel "MALLETTE DU REPORTING".
                            </p>

                        </div>
                    )}

                    <div className="flex flex-col gap-2 mt-15">

                        <h2 className="text-xl font-semibold text-[#1f5f4a] mb-2">
                            Cessation d'activité
                        </h2>

                        <div className="grid md:grid-cols-2 gap-1">
                            <Input type="date" label="Date cessation d'activité" name="date_cessation_activite"
                                value={projets?.date_cessation_activite || ""} onChange={updateProjetField} />
                            <Input label="Motif" name="motif_cessation_activite"
                                value={projets?.motif_cessation_activite || ""} onChange={updateProjetField} />
                        </div>
                    </div>
                </div>
            </div>
        </>
    );
}