'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 AdministrationTab({ data, onChange }: any) {
    const rows = data.administrations || [];

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

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

    const admin_rdv = useRefData('admin_rdv');

    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("administrations", updated);
    };

    const addRow = () => {
        onChange("administrations", [
            {
                id: null,
                id_dossier: null,
                id_admin: "",
                precision_commentaire: "",
                date_action: "",
            },
            ...rows,
        ]);
        setExpandedRows((prev) => [
            ...prev,
            rows.length
        ]);
    };

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

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

            {rows.map((row: any, index: number) => {
                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">
                                Note administrative #{rows.length - index}, {DateUtils.long(row.date_action)}
                            </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="grid md:grid-cols-10">

                                <div className="col-span-5">
                                    <div className="grid md:grid-cols-2 gap-1">
                                        <Input
                                            type="date"
                                            label="Date action"
                                            value={row.date_action || ""}
                                            onChange={(name: string, value: any) =>
                                                updateRow(index, "date_action", value)}
                                            name={"date_action"} />

                                        <Select
                                            label="Type administration"
                                            value={row.id_admin || ""}
                                            onChange={(name: string, value: any) =>
                                                updateRow(index, "id_admin", value)
                                            }
                                            options={admin_rdv.data}
                                            name="id_admin"
                                        />
                                    </div>
                                </div>
                                <div className="col-span-5">
                                    <Textarea
                                        label="Précision/Commentaire"
                                        value={row.precision_commentaire || ""}
                                        onChange={(name: string, value: any) =>
                                            updateRow(index, "precision_commentaire", value)
                                        }
                                    />
                                </div>
                            </div>
                        )}
                    </div>
                );
            })}
        </div>
    );
}