'use client';

import { Input, Select, Checkbox, ConditionalCheckboxBlock } from "../../FormsFieldsTypes";
import { useRefData } from "../../../../app/hooks/useRefData";
import { StatutFieldsRenderer } from "../StatutFieldsRenderer";

export default function SituationTab({ data, onChange }: any) {
  const moyen_locomotion = useRefData("moyen_locomotion");
  const travail_handicap_category = useRefData("travail_handicap_category");
  const indemnisation = useRefData("indemnisation");
  const statut_entree = useRefData('statut_entree');
  const questions_fermees = useRefData("questions_fermees");

  const toggleStatut = (id: number) => {
    const current = data.statuts?.[id];

    onChange("statuts", {
      ...data.statuts,
      [id]: {
        ...current,
        checked: !current?.checked
      }
    });
  };

  const updateStatutField = (id: number, field: string, value: any) => {
    onChange("statuts", {
      ...data.statuts,
      [id]: {
        ...data.statuts?.[id],
        fields: {
          ...data.statuts?.[id]?.fields,
          [field]: value
        }
      }
    });
  };

  const isChecked = (id: number) => !!data.statuts?.[id]?.checked;

  const updateExtra = (section: string, value: any) => {
    onChange("extras", {
      ...(data?.extras || {}),
      [section]: value
    });
  };
  const isOtherOption = moyen_locomotion.data?.find((moyen) => moyen.code === "OTHER");
  const selectedValue = data?.extras?.moyen_locomotion?.value;
  const isOtherSelected = Number(selectedValue) === Number(isOtherOption?.value);

  return (
    <><div className="grid md:grid-cols-1 gap-2">
      {statut_entree.data?.map((statut) =>
      (
        <div key={statut.value}>
          <ConditionalCheckboxBlock
            label={statut.label}
            name={`statut-${statut.value}`}
            value={statut.value}
            checked={isChecked(statut.value)}
            onToggle={() => toggleStatut(statut.value)}
          >

            {statut.hasExtraFields && (
              <div
                className={`w-full gap-1
                ${statut.layout === "row"
                    ? "flex flex-wrap items-end"
                    : statut.layout === "grid"
                      ? "grid grid-cols-6"
                      : "flex flex-col"
                  }
                  `}
              >
                {statut.fields.map((field: any) => (
                  <StatutFieldsRenderer
                    statutId={statut.value}
                    key={field.name}
                    field={field}
                    refData={{
                      indemnisation,
                      travail_handicap_category,
                      questions_fermees
                    }}
                    situations={data.statuts}
                    updateSituationField={updateStatutField}
                  />
                ))}
              </div>
            )}
          </ConditionalCheckboxBlock>
        </div>
      ))}
    </div>

      <div className="flex flex-col gap-1">
        <label className="relative inline-flex items-center cursor-pointer">
          <input type="checkbox"
            name="enabled"
            className="sr-only peer"
            checked={data?.extras?.permis?.enabled || false}
            onChange={() =>
              updateExtra("permis", {
                ...data?.extras?.permis,
                enabled: !data?.extras?.permis?.enabled
              })
            } />
          <div className="w-11 h-5 bg-gray-200 rounded-full peer peer-checked:bg-green-500 transition"></div>
          <span className="ml-1 text-sm font-medium text-[#2f5d4b]">Permis</span>
        </label>
      </div>

      {data.extras.permis.enabled && (
        <div className="flex flex-wrap gap-1 items-end mt-1">
          <Checkbox
            label="Permis B"
            checked={data?.extras?.permis?.b || false}
            onChange={() => updateExtra("permis", {
              ...data?.extras?.permis,
              b: !data?.extras?.permis?.b
            })} name={"b"} value={data?.extras?.permis?.b} />

          <Input
            label="Autre type de permis"
            name="autre"
            value={data?.extras?.permis?.autre || ""}
            onChange={(name: string, value: any) => {
              updateExtra("permis", {
                ...data?.extras?.permis,
                autre: value
              });
            }}
          />
        </div>
      )}

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

        <Select
          label="Moyen de locomotion"
          name="value"
          options={moyen_locomotion.data}
          value={data?.extras?.moyen_locomotion?.value ?? ""}
          onChange={(name: string, value: any) => {
            updateExtra("moyen_locomotion", {
              ...data?.extras?.moyen_locomotion,
              value: value
            });
          }}
        />
        {isOtherSelected && (
          <Input
            label="Autre"
            name="autre"
            value={data?.extras?.moyen_locomotion?.autre ?? ""}
            onChange={(name: string, value: any) => {
              updateExtra("moyen_locomotion", {
                ...data?.extras?.moyen_locomotion,
                autre: value
              });
            }}
          />
        )}
      </div>
    </>
  );
}