// app/(app)/contrats/[id]/edit/EditContratForm.tsx
"use client";

import { useEffect, useMemo, useRef, useState } from "react";
import { useRouter } from "next/navigation";
import { useQuery, useMutation } from "@tanstack/react-query";
import { Loader2, Info, Search } from "lucide-react";
import { api } from "@/lib/fetcher";

// ⬇️ Reprends ici les helpers/sections/types locaux de ta page actuelle (Section, FieldRow, Label, types, constantes…)
// (Je les ai gardés quasi à l’identique pour que tu puisses coller.)

// ------- colle ici Section / FieldRow / Label / PROFESSIONS_ARTISTE / types annexes --------

type ContratDetail = {
  id: string;
  regime: "CDDU_MONO" | "CDDU_MULTI" | "RG";
  numero: string;
  etat_demande: string;
  [k: string]: any;
};

export default function EditContratForm({ id, initialData }: { id: string; initialData: ContratDetail }) {
  const router = useRouter();

  // ⚠️ On n’utilise plus de fetch côté client pour la donnée initiale.
  // Si tu veux garder React Query (utile pour invalider en POST/PATCH),
  // on peut l’hydrater avec initialData via initialData + enabled:false.
  const { data } = useQuery<ContratDetail>({
    queryKey: ["contrat-detail", id],
    queryFn: async () => initialData, // on renvoie la donnée serveur telle quelle
    initialData,
    staleTime: 60_000,
    enabled: false, // pas de refetch auto
  });

  // 👉 À partir d’ici, colle l’intégralité de ta logique d’état et de rendu du formulaire
  // en remplaçant toutes les références à `data` par `data` (identique),
  // et en supprimant l’ancien hook useQuery qui refaisait le fetch client.
  // Garde le PATCH tel quel (il appelle déjà /api/contrats/[id]).

  // ---------------- COLLE ICI tout le code de formulaire (useStates, useEffects, JSX) ----------------
  // Important :
  // - enlève le <main> englobant (c’est le serveur qui le fournit)
  // - garde juste le contenu interne (Sections + bouton Enregistrer)
}