'use client';
import React, { useEffect } from 'react';
import { useParams, useRouter } from 'next/navigation';
import { ChevronLeft, ChevronRight, Send, Car, Cpu } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import { useDispatch } from 'react-redux';
import { toast } from 'sonner';
import { WizardHeader, WizardStepper, PageLoader } from '@/components/teltoinstall/_index';
import { useInstallationWizard } from '@/hooks/teltoinstall/_index';
import { buildHydratePayload } from '@/hooks/teltoinstall/installation/useResumeInstallation';
import { hydrateInstallation, setSaveError } from '@/store/slices/installation-slice';
import { InstallationRepository } from '@/repositories/teltoinstall/_index';
import { WIZARD_FORM_ID } from './constants';
import VehicleStep from './steps/VehicleStep';
import DeviceStep from './steps/DeviceStep';
import WiringStep from './steps/WiringStep';
import ValidationStep from './steps/ValidationStep';
import PhotosStep from './steps/PhotosStep';
import SummaryStep from './steps/SummaryStep';
const STEPS = [VehicleStep, DeviceStep, WiringStep, ValidationStep, PhotosStep, SummaryStep];
const STEP_TITLE_KEYS = ['vehicle', 'device', 'wiring', 'validation', 'photos', 'summary'] as const;
export default function InstallationWizardLayout() {
const { t } = useTranslation();
const dispatch = useDispatch();
const router = useRouter();
const params = useParams();
const routeId = params?.id ? Number(params.id) : null;
const { currentStep, totalSteps, nextStep, prevStep, isSaving, saveError, vehicle, device, installationId } =
useInstallationWizard();
// Les erreurs de sauvegarde serveur/réseau sont stockées dans le store mais
// n'avaient aucun rendu : on les remonte en toast puis on nettoie l'état.
// `saveError` est déjà un message prêt à afficher (message backend ou repli
// traduit), donc on ne le repasse pas par `t()`.
useEffect(() => {
if (!saveError) return;
toast.error(saveError);
dispatch(setSaveError(null));
}, [saveError, dispatch]);
// Charge la pose désignée par l'URL quand ce n'est pas déjà celle en mémoire
// (rechargement de page, ou ouverture dans un second onglet). Le serveur est la
// source de vérité — chaque étape y est déjà sauvegardée. `installationId ===
// routeId` signifie que la pose vient d'être hydratée avant la navigation
// (reprise / démarrage), donc on ne refait pas d'appel.
const needsHydration = routeId != null && installationId !== routeId;
useEffect(() => {
if (!needsHydration || routeId == null) return;
let cancelled = false;
InstallationRepository.getDetail(routeId)
.then((detail) => {
if (!cancelled) dispatch(hydrateInstallation(buildHydratePayload(detail)));
})
.catch(() => {
if (cancelled) return;
// Pose introuvable (supprimée / ID invalide) : retour à l'historique.
toast.error(t('wizard.saveError'));
router.replace('/history');
});
return () => {
cancelled = true;
};
}, [needsHydration, routeId, dispatch, router, t]);
// Brouillon neuf (route `/installation` sans ID) : dès que la pose est créée
// côté serveur (`initInstallation`), on inscrit son ID dans l'URL. Ainsi un
// rechargement recharge LA bonne pose, et chaque onglet reste indépendant.
useEffect(() => {
if (routeId == null && installationId != null) {
router.replace(`/installation/${installationId}`, { scroll: false });
}
}, [routeId, installationId, router]);
const StepComponent = STEPS[currentStep];
const isLastStep = currentStep === totalSteps - 1;
const titleKey = STEP_TITLE_KEYS[currentStep];
// Barre de contexte : identifie en permanence la pose éditée (immatriculation +
// IMEI + ID), pour distinguer plusieurs installations en cours reprises tour à
// tour — sinon rien à l'écran ne dit sur laquelle on travaille.
const plate = vehicle?.license_plate?.trim();
const imei = device?.imei?.trim();
// Tant que la pose de l'URL n'est pas chargée, on affiche un loader plein écran
// plutôt qu'un wizard aux champs vides (le temps de la requête serveur).
if (needsHydration) {
return (