'use client';

import { useRefData } from "../../../../app/hooks/useRefData";
import { Input, Select, Textarea } from "../../FormsFieldsTypes";
import { useEffect, useState } from "react";
import { DateUtils } from "../../../../app/utils/date";

export default function RendezVousTab({ data, onChange }: any) {
    const rows = data.rendezVous || [];

    const [expandedRows, setExpandedRows] = useState<number[]>([]);

    useEffect(() => {
        setExpandedRows(rows.map((_: any, index: any) => index));
    }, [rows.length]);

    const presence_rdv = useRefData('presence_rdv');
    const obj_rdv = useRefData('objet_rdv');
    const type_rdv = useRefData('type_rdv');
    const action_convention = useRefData('action_convention');
    const conventions = useRefData('conventions');
    const conseillers = useRefData('conseillers');

    const toggleRow = (index: number) => {
        setExpandedRows((prev) =>
            prev.includes(index)
                ? prev.filter((i) => i !== index)
                : [...prev, index]
        );
    };

    const updateRow = (index: number, field: string, value: any) => {
        const updated = [...rows];
        updated[index] = {
            ...updated[index],
            [field]: value
        };
        onChange("rendezVous", updated);
    };

    const addRow = () => {
        onChange("rendezVous", [
            {
                id: null,
                id_dossier: null,
                date: "",
                presence: "",
                presence_autre: "",
                temps: "",
                type: "",
                contenu: "",
                conseiller: "",
                action: "",
                administration: "",
                convention: "",
                commentaire: ""
            },
            ...rows,
        ]);

        setExpandedRows((prev) => [
            ...prev,
            rows.length
        ]);
    };

    const removeRow = (index: number) => {
        const updated = [...rows];
        updated.splice(index, 1);
        onChange("rendezVous", updated);
    };

    return (
        <div className="flex flex-col gap-2">
            <div>
                <button
                    onClick={addRow}
                    className="inline-flex items-center gap-1
    px-1 py-1
    rounded-xl
    bg-gradient-to-r from-[#2f7d5f] to-[#3f9b74]
    text-white font-medium
    shadow-sm
    hover:shadow-md
    hover:-translate-y-0.5
    transition-all duration-200
    cursor-pointer"
                >
                    + Ajouter un rendez-vous
                </button>
            </div>

            {rows.map((row: any, index: number) => {
                const selectedAction = row.action;
                const selectedConvention = row.convention;

                const filteredActions = selectedConvention
                    ? action_convention.data?.filter((action: any) =>
                        conventions.data
                            ?.find((c: any) => c.value == selectedConvention)
                            ?.actions.includes(action.value)
                    )
                    : action_convention.data;

                const filteredConventions = selectedAction
                    ? conventions.data?.filter((conv: any) =>
                        action_convention.data
                            ?.find((a: any) => a.value == selectedAction)
                            ?.conventions.includes(conv.value)
                    )
                    : conventions.data;
                return (
                    <div
                        key={index}
                        className="bg-white p-2 rounded-xl shadow-sm border border-[#edf2ef]"
                    >
                        <div className="flex justify-between items-center cursor-pointer p-2 rounded-lg bg-[#f7faf8] hover:bg-[#eef6f2]"
                            onClick={() => toggleRow(index)}
                        >
                            <h3 className="text-[#1f5f4a] font-semibold">
                                Rendez-vous #{rows.length - index}, {DateUtils.long(row.date)} ({row.temps} h)
                            </h3>
                            <span className="text-3xl">
                                {expandedRows.includes(index) ? "▾" : "▸"}
                            </span>

                            <button
                                onClick={() => removeRow(index)}
                                className="px-3 py-1.5
    text-xs font-semibold
    rounded-lg
    text-red-600
    bg-white
    border border-red-200
    hover:bg-red-50
    hover:border-red-300
    hover:shadow-sm
    active:scale-[0.98]
    transition cursor-pointer"
                            >
                                Supprimer
                            </button>
                        </div>

                        {expandedRows.includes(index) && (
                            <div className="mt-2">

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

                                    <div className="col-span-8">

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

                                            <Input
                                                type="date"
                                                label="Date"
                                                value={row.date || ""}
                                                onChange={(name: string, value: any) => updateRow(index, "date", value)}
                                                name={"date"} />

                                            <Select
                                                label="Présent"
                                                value={row.presence || ""}
                                                onChange={(name: string, value: any) =>
                                                    updateRow(index, "presence", value)
                                                }
                                                options={presence_rdv.data}
                                                name="presence"
                                            />

                                            <Input
                                                label="Autre"
                                                value={row.presence_autre || ""}
                                                onChange={(name: string, value: any) =>
                                                    updateRow(index, "presence_autre", value)
                                                }
                                                name="presence_autre"
                                            />

                                            <Input
                                                label="Temps (h)"
                                                value={row.temps || ""}
                                                onChange={(name: string, value: any) =>
                                                    updateRow(index, "temps", value)
                                                }
                                                name="temps"
                                            />

                                            <Select
                                                label="Type"
                                                value={row.type || ""}
                                                onChange={(name: string, value: any) =>
                                                    updateRow(index, "type", value)
                                                }
                                                options={type_rdv.data}
                                                name="type"

                                            />

                                            <Select
                                                label="Conseiller"
                                                value={row.conseiller || ""}
                                                onChange={(name: string, value: any) =>
                                                    updateRow(index, "conseiller", value)
                                                }
                                                options={conseillers.data}
                                                name="conseiller"

                                            />

                                            <Select
                                                label="Contenu"
                                                value={row.contenu || ""}
                                                onChange={(name: string, value: any) =>
                                                    updateRow(index, "contenu", value)
                                                }
                                                options={obj_rdv.data}
                                                name="contenu"

                                            />

                                            <Select
                                                label="Action"
                                                value={row.action || ""}
                                                onChange={(name: string, value: any) => {
                                                    updateRow(index, "action", value);
                                                }
                                                }
                                                options={filteredActions}
                                                name="action"
                                            />

                                            <Select
                                                label="Convention"
                                                value={row.convention || ""}
                                                onChange={(name: string, value: any) => {
                                                    updateRow(index, "convention", value);
                                                }
                                                }
                                                options={filteredConventions}
                                                name="convention"
                                            />
                                        </div>
                                    </div>
                                    <div className="col-span-5">
                                        <Textarea
                                            label="Commentaire / Compte-rendu"
                                            value={row.commentaire || ""}
                                            onChange={(name: string, value: any) =>
                                                updateRow(index, "commentaire", value)
                                            }
                                        />
                                    </div>
                                </div>
                            </div>
                        )}
                    </div>
                )
            })}
        </div>
    );
}