'use client';

import React, { useMemo, useState } from 'react';
import { useParams, useRouter } from 'next/navigation';
import { useTranslation } from 'react-i18next';
import { toast } from 'sonner';
import {
  ArrowLeft,
  MapPin,
  CalendarPlus,
  Calendar,
  CheckCircle2,
  Trash2,
  AlertTriangle,
  Check,
  Wrench,
} from 'lucide-react';
import { WizardHeader, PageLoader } from '@/components/teltoinstall/_index';
import {
  useInstallationRequestDetail,
  useStartInstallationFromRequest,
} from '@/hooks/teltoinstall/_index';
import { InstallationRequestRepository } from '@/repositories/teltoinstall/_index';
import { apiErrorMessage } from '@/utils/teltoinstall/_index';
import type { InstallationRequestVehicle } from '@/models/teltoinstall/_index';
import RequestStatusBadge from './RequestStatusBadge';
import RequestGroupSlotModal from './RequestGroupSlotModal';

function formatReceived(value?: string | null): string {
  if (!value) return '—';
  const d = new Date(value);
  if (Number.isNaN(d.getTime())) return value;
  return d.toLocaleString('fr-FR', {
    day: '2-digit',
    month: '2-digit',
    year: 'numeric',
    hour: '2-digit',
    minute: '2-digit',
  });
}

function formatChip(value: string): string {
  const d = new Date(value);
  if (Number.isNaN(d.getTime())) return value;
  return d.toLocaleString('fr-FR', {
    weekday: 'short',
    day: '2-digit',
    month: 'short',
    hour: '2-digit',
    minute: '2-digit',
  });
}

interface DraftGroup {
  vehicleIds: number[];
  dates: string[];
}

export default function InstallationRequestDetailView() {
  const { t } = useTranslation();
  const router = useRouter();
  const params = useParams();
  const id = Number(params?.id);

  const { request, loading, error, setRequest } = useInstallationRequestDetail(
    Number.isNaN(id) ? null : id
  );

  // Démarrage d'une pose depuis un véhicule d'un groupe planifié (« scheduled »).
  const {
    start: startInstallation,
    startingVehicleId,
    pending,
    continueExisting,
    startNew,
    cancelPending,
  } = useStartInstallationFromRequest();

  // Sélection de travail (véhicules cochés en attente d'affectation à un groupe).
  const [selected, setSelected] = useState<number[]>([]);
  // Groupes construits dans cette session (véhicules + 3 créneaux), pas encore soumis.
  const [drafts, setDrafts] = useState<DraftGroup[]>([]);
  const [slotModalOpen, setSlotModalOpen] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  // Groupe (persisté) pour lequel on re-propose des créneaux après une
  // contre-proposition du client. null = modal en mode « nouveau groupe ».
  const [reproposeGroup, setReproposeGroup] = useState<{ id: number; count: number } | null>(null);
  // Action sur un groupe en cours (accepter une date client / re-proposer).
  const [actionSubmitting, setActionSubmitting] = useState(false);
  // Date client cliquée, en attente de confirmation explicite de l'installateur
  // (on ne valide pas au simple clic sur la puce de date).
  const [confirmAccept, setConfirmAccept] = useState<{ date: string; groupId: number } | null>(
    null
  );

  const vehicles = useMemo(() => request?.vehicles ?? [], [request?.vehicles]);
  const persistedGroups = useMemo(() => request?.groups ?? [], [request?.groups]);

  // Map id véhicule → groupe persisté (non annulé) le couvrant : sert à griser
  // les véhicules déjà proposés et à afficher leur statut.
  const vehicleToPersisted = useMemo(() => {
    const map = new Map<number, (typeof persistedGroups)[number]>();
    for (const g of persistedGroups) {
      if (g.status === 'cancelled') continue;
      for (const vid of g.vehicle_ids ?? []) map.set(vid, g);
    }
    return map;
  }, [persistedGroups]);

  // Véhicules déjà placés dans un brouillon (cette session).
  const draftedIds = useMemo(() => {
    const s = new Set<number>();
    for (const g of drafts) for (const vid of g.vehicleIds) s.add(vid);
    return s;
  }, [drafts]);

  // Index véhicule → libellé (plaque) pour les puces des groupes.
  const vehicleLabel = useMemo(() => {
    const map = new Map<number, string>();
    for (const v of vehicles) {
      if (v.id != null) map.set(v.id, v.plate || v.model || `#${v.id}`);
    }
    return map;
  }, [vehicles]);

  // Affectables : ni déjà proposés (groupe persisté), ni placés dans un brouillon.
  const availableIds = useMemo(
    () =>
      vehicles
        .filter((v) => v.id != null && !vehicleToPersisted.has(v.id) && !draftedIds.has(v.id))
        .map((v) => v.id as number),
    [vehicles, vehicleToPersisted, draftedIds]
  );
  const allAvailableSelected =
    availableIds.length > 0 && selected.length === availableIds.length;
  const remaining = availableIds.length;

  // Regroupement des véhicules par site de livraison (comme l'écran admin).
  const vehicleSiteGroups = useMemo(() => {
    const map = new Map<
      string,
      { key: string; siteName: string | null; vehicles: InstallationRequestVehicle[] }
    >();
    for (const v of vehicles) {
      const key =
        v.site_id != null ? `id:${v.site_id}` : v.site_name ? `name:${v.site_name}` : 'none';
      let g = map.get(key);
      if (!g) {
        g = { key, siteName: v.site_name ?? null, vehicles: [] };
        map.set(key, g);
      }
      g.vehicles.push(v);
    }
    return Array.from(map.values());
  }, [vehicles]);

  const toggleVehicle = (vid: number) => {
    if (!availableIds.includes(vid)) return;
    setSelected((prev) => (prev.includes(vid) ? prev.filter((x) => x !== vid) : [...prev, vid]));
  };

  const toggleAll = () =>
    setSelected((prev) => (prev.length === availableIds.length ? [] : [...availableIds]));

  const toggleSite = (siteVehicleIds: number[]) => {
    const avail = siteVehicleIds.filter((vid) => availableIds.includes(vid));
    if (avail.length === 0) return;
    setSelected((prev) => {
      const allSel = avail.every((vid) => prev.includes(vid));
      if (allSel) return prev.filter((vid) => !avail.includes(vid));
      const set = new Set(prev);
      for (const vid of avail) set.add(vid);
      return Array.from(set);
    });
  };

  const confirmGroup = (dates: string[]) => {
    if (selected.length === 0) return;
    setDrafts((prev) => [...prev, { vehicleIds: [...selected], dates }]);
    setSelected([]);
    setSlotModalOpen(false);
  };

  const removeDraft = (index: number) =>
    setDrafts((prev) => prev.filter((_, i) => i !== index));

  // Re-proposer 3 créneaux pour un groupe en contre-proposition.
  const doRepropose = async (dates: string[]) => {
    if (!request || !reproposeGroup) return;
    setActionSubmitting(true);
    try {
      const updated = await InstallationRequestRepository.reproposeGroupDates(
        request.id,
        reproposeGroup.id,
        dates
      );
      setRequest(updated);
      setReproposeGroup(null);
      toast.success(t('requests.proposeGroupsSuccess'));
    } catch (e) {
      toast.error(apiErrorMessage(e, t('requests.proposeGroupsError')));
    } finally {
      setActionSubmitting(false);
    }
  };

  // Accepter une des dates suggérées par le client pour un groupe.
  const acceptClient = async (date: string, groupId: number) => {
    if (!request) return;
    setActionSubmitting(true);
    try {
      const updated = await InstallationRequestRepository.acceptClientDate(
        request.id,
        date,
        groupId
      );
      setRequest(updated);
      setConfirmAccept(null);
      toast.success(t('requests.acceptSuccess'));
    } catch (e) {
      toast.error(apiErrorMessage(e, t('requests.acceptError')));
    } finally {
      setActionSubmitting(false);
    }
  };

  const canSubmit = drafts.length > 0;

  const submit = async () => {
    if (!canSubmit || !request) return;
    setSubmitting(true);
    try {
      const updated = await InstallationRequestRepository.proposeGroups(
        request.id,
        drafts.map((g) => ({ vehicle_ids: g.vehicleIds, dates: g.dates }))
      );
      setRequest(updated);
      setDrafts([]);
      setSelected([]);
      toast.success(t('requests.proposeGroupsSuccess'));
    } catch (e) {
      toast.error(apiErrorMessage(e, t('requests.proposeGroupsError')));
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div className="min-h-screen flex flex-col bg-background">
      <div className="flex-shrink-0">
        <WizardHeader />
      </div>
      <div className="max-w-5xl w-full mx-auto px-4 py-5">
        {/* Retour */}
        <button
          type="button"
          onClick={() => router.push('/installation-requests')}
          className="inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors"
        >
          <ArrowLeft className="w-4 h-4" />
          {t('requests.backToList')}
        </button>

        {loading ? (
          <div className="mt-6">
            <PageLoader />
          </div>
        ) : error || !request ? (
          <div className="mt-6 flex items-center gap-2 p-3 bg-red-50 border border-red-200 rounded-lg">
            <AlertTriangle className="w-4 h-4 text-red-600 shrink-0" />
            <p className="text-sm text-red-600">{t(error ?? 'requests.loadError')}</p>
          </div>
        ) : (
          <>
            {/* En-tête */}
            <div className="mt-4 flex items-center gap-3 flex-wrap">
              <h1 className="text-2xl font-bold text-foreground">
                {request.order_reference || request.company_name || t('requests.untitled')}
              </h1>
              <RequestStatusBadge status={request.status} />
            </div>
            <p className="text-sm text-muted-foreground mt-1">
              {t('requests.receivedLine', {
                ref: request.reference || request.order_reference || `#${request.id}`,
                date: formatReceived(request.created_at),
              })}
            </p>

            {/* Barre d'action : sélection + proposition de créneaux */}
            <div className="mt-5 flex items-center justify-between gap-2 flex-wrap">
              <p className="text-sm font-medium text-foreground">
                {t('requests.selectVehiclesTitle')}{' '}
                <span className="text-muted-foreground">
                  ({t('requests.selectedCount', { count: selected.length })})
                </span>
              </p>
              <div className="flex items-center gap-3 shrink-0">
                {availableIds.length > 0 && (
                  <button
                    type="button"
                    onClick={toggleAll}
                    className="text-xs font-medium text-primary hover:underline"
                  >
                    {allAvailableSelected ? t('requests.deselectAll') : t('requests.selectAll')}
                  </button>
                )}
                <button
                  type="button"
                  onClick={() => setSlotModalOpen(true)}
                  disabled={selected.length === 0}
                  className="btn-primary inline-flex items-center justify-center gap-2 disabled:opacity-50"
                >
                  <CalendarPlus className="w-4 h-4" />
                  {t('requests.proposeSlotsFor', { count: selected.length })}
                </button>
              </div>
            </div>

            {/* Tableau des véhicules regroupés par site */}
            <div className="mt-3 space-y-4">
              {vehicles.length === 0 ? (
                <p className="text-sm text-muted-foreground rounded-lg border border-dashed border-border py-6 text-center">
                  {t('requests.noVehicles')}
                </p>
              ) : (
                vehicleSiteGroups.map((siteGroup) => {
                  const siteIds = siteGroup.vehicles
                    .map((v) => v.id)
                    .filter((x): x is number => x != null);
                  const siteAvail = siteIds.filter((vid) => availableIds.includes(vid));
                  const siteAllSel =
                    siteAvail.length > 0 && siteAvail.every((vid) => selected.includes(vid));
                  return (
                    <div
                      key={siteGroup.key}
                      className="overflow-hidden rounded-lg border border-border"
                    >
                      <div className="flex items-center justify-between gap-2 bg-muted/40 px-3 py-2">
                        <p className="flex items-center gap-1.5 text-sm font-medium text-foreground">
                          <MapPin className="w-3.5 h-3.5 text-muted-foreground" />
                          {siteGroup.siteName || t('requests.noSite')}
                          <span className="text-xs text-muted-foreground">
                            ({t('requests.vehicles', { count: siteGroup.vehicles.length })})
                          </span>
                        </p>
                        {siteAvail.length > 0 && (
                          <button
                            type="button"
                            onClick={() => toggleSite(siteIds)}
                            className="text-xs font-medium text-primary hover:underline shrink-0"
                          >
                            {siteAllSel ? t('requests.selectSiteNone') : t('requests.selectSiteAll')}
                          </button>
                        )}
                      </div>
                      <div className="overflow-x-auto">
                        <table className="w-full text-sm">
                          <thead className="bg-muted/50 text-xs text-muted-foreground">
                            <tr>
                              <th className="w-10 px-3 py-2" />
                              <th className="text-left font-medium px-3 py-2">
                                {t('requests.colPlate')}
                              </th>
                              <th className="text-left font-medium px-3 py-2">
                                {t('requests.colVehicle')}
                              </th>
                              <th className="text-left font-medium px-3 py-2">
                                {t('requests.colYear')}
                              </th>
                              <th className="text-left font-medium px-3 py-2">
                                {t('requests.colVin')}
                              </th>
                              <th className="text-left font-medium px-3 py-2">
                                {t('requests.colBox')}
                              </th>
                              <th className="text-left font-medium px-3 py-2">
                                {t('requests.colStatus')}
                              </th>
                            </tr>
                          </thead>
                          <tbody>
                            {siteGroup.vehicles.map((v, i) => {
                              const vid = v.id ?? null;
                              const persisted = vid != null ? vehicleToPersisted.get(vid) : undefined;
                              const draftIndex =
                                vid != null
                                  ? drafts.findIndex((g) => g.vehicleIds.includes(vid))
                                  : -1;
                              const inDraft = draftIndex >= 0;
                              const locked = !!persisted || inDraft;
                              const checked = vid != null && selected.includes(vid);
                              return (
                                <tr
                                  key={vid ?? i}
                                  onClick={() => vid != null && !locked && toggleVehicle(vid)}
                                  className={`border-t border-border ${
                                    persisted
                                      ? 'opacity-70'
                                      : locked
                                        ? ''
                                        : 'cursor-pointer hover:bg-muted/40'
                                  } ${checked ? 'bg-muted/40' : ''}`}
                                >
                                  <td className="px-3 py-2">
                                    <input
                                      type="checkbox"
                                      readOnly
                                      checked={locked || checked}
                                      disabled={locked}
                                      className="pointer-events-none accent-primary"
                                    />
                                  </td>
                                  <td className="px-3 py-2 font-medium text-foreground">
                                    {v.plate || '—'}
                                  </td>
                                  <td className="px-3 py-2">{v.model || '—'}</td>
                                  <td className="px-3 py-2">{v.year || '—'}</td>
                                  <td className="px-3 py-2 font-mono text-xs text-muted-foreground">
                                    {v.vin || '—'}
                                  </td>
                                  <td className="px-3 py-2">{v.box || '—'}</td>
                                  <td className="px-3 py-2">
                                    {persisted ? (
                                      <RequestStatusBadge status={persisted.status} />
                                    ) : inDraft ? (
                                      <span className="inline-flex items-center rounded-full bg-primary/10 text-primary px-2 py-0.5 text-[10px] font-medium">
                                        {t('requests.groupBadge', { n: draftIndex + 1 })}
                                      </span>
                                    ) : (
                                      <span className="text-muted-foreground">—</span>
                                    )}
                                  </td>
                                </tr>
                              );
                            })}
                          </tbody>
                        </table>
                      </div>
                    </div>
                  );
                })
              )}
            </div>

            {/* Brouillons de groupes à proposer */}
            {drafts.length > 0 && (
              <div className="mt-5">
                <p className="text-sm font-semibold text-foreground mb-2">
                  {t('requests.draftGroupsTitle')}{' '}
                  <span className="text-muted-foreground">({drafts.length})</span>
                </p>
                <div className="space-y-2">
                  {drafts.map((g, idx) => (
                    <div key={idx} className="rounded-lg border border-border p-3">
                      <div className="flex items-start justify-between gap-3">
                        <div className="min-w-0 space-y-2">
                          <div className="flex items-center gap-2">
                            <span className="inline-flex items-center justify-center w-5 h-5 rounded-full bg-primary/10 text-primary text-[11px] font-semibold">
                              {idx + 1}
                            </span>
                            <span className="text-xs font-medium text-muted-foreground">
                              {t('requests.vehicles', { count: g.vehicleIds.length })}
                            </span>
                          </div>
                          <div className="flex flex-wrap gap-1.5">
                            {g.vehicleIds.map((vid) => (
                              <span
                                key={vid}
                                className="inline-flex items-center rounded-md bg-muted px-2 py-0.5 text-xs text-foreground"
                              >
                                {vehicleLabel.get(vid) || `#${vid}`}
                              </span>
                            ))}
                          </div>
                          <div className="flex flex-wrap gap-1.5">
                            {g.dates.map((d, di) => (
                              <span
                                key={`${d}-${di}`}
                                className="inline-flex items-center gap-1 rounded-md border border-border bg-background px-2 py-0.5 text-xs text-foreground"
                              >
                                <Calendar className="w-3 h-3 text-primary" />
                                {formatChip(d)}
                              </span>
                            ))}
                          </div>
                        </div>
                        <button
                          type="button"
                          onClick={() => removeDraft(idx)}
                          aria-label={t('requests.removeGroup')}
                          className="shrink-0 text-muted-foreground hover:text-red-600 transition-colors"
                        >
                          <Trash2 className="w-4 h-4" />
                        </button>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            )}

            {/* Groupes déjà proposés (persistés) */}
            {persistedGroups.length > 0 && (
              <div className="mt-5">
                <p className="text-sm font-semibold text-foreground mb-2">
                  {t('requests.proposedGroupsTitle')}{' '}
                  <span className="text-muted-foreground">({persistedGroups.length})</span>
                </p>
                <div className="space-y-2">
                  {persistedGroups.map((g) => {
                    const isCounter = g.status === 'client_counter';
                    const chipDates =
                      (g.client_suggested_dates?.length ?? 0) > 0
                        ? g.client_suggested_dates!
                        : g.proposed_dates;
                    return (
                      <div key={g.id} className="rounded-lg border border-border p-3">
                        <div className="flex items-start justify-between gap-3">
                          <div className="min-w-0 space-y-2">
                            <div className="flex flex-wrap items-center gap-2">
                              <RequestStatusBadge status={g.status} />
                              <span className="text-xs font-medium text-muted-foreground">
                                {t('requests.vehicles', { count: g.vehicle_ids?.length ?? 0 })}
                              </span>
                            </div>
                            {g.status === 'scheduled' ? (
                              // Groupe planifié : on liste chaque véhicule avec son
                              // détail (plaque, modèle, boîtier) et un bouton pour
                              // lancer sa pose (wizard pré-rempli + champs verrouillés).
                              <div className="space-y-1.5">
                                {(g.vehicles ?? []).map((v, i) => (
                                  <div
                                    key={v.id ?? i}
                                    className="flex items-center justify-between gap-3 rounded-md border border-border bg-background px-2.5 py-1.5"
                                  >
                                    <div className="min-w-0">
                                      <p className="text-sm font-medium text-foreground truncate">
                                        {v.plate || `#${v.id}`}
                                      </p>
                                      <p className="text-xs text-muted-foreground truncate">
                                        {[v.model, v.vin, v.box].filter(Boolean).join(' · ') || '—'}
                                      </p>
                                    </div>
                                    {v.id != null && (
                                      <button
                                        type="button"
                                        onClick={() => startInstallation(request.id, v.id as number)}
                                        disabled={startingVehicleId != null}
                                        className="shrink-0 inline-flex items-center gap-1.5 rounded-md border border-primary bg-primary/5 px-2.5 py-1 text-xs font-medium text-primary hover:bg-primary/10 disabled:opacity-50"
                                      >
                                        {startingVehicleId === v.id ? (
                                          <span className="w-3.5 h-3.5 border-2 border-primary border-t-transparent rounded-full animate-spin" />
                                        ) : (
                                          <Wrench className="w-3.5 h-3.5" />
                                        )}
                                        {t('requests.startInstallation')}
                                      </button>
                                    )}
                                  </div>
                                ))}
                              </div>
                            ) : (
                              <div className="flex flex-wrap gap-1.5">
                                {(g.vehicles ?? []).map((v, i) => (
                                  <span
                                    key={v.id ?? i}
                                    className="inline-flex items-center rounded-md bg-muted px-2 py-0.5 text-xs text-foreground"
                                  >
                                    {v.plate || v.model || `#${v.id}`}
                                  </span>
                                ))}
                              </div>
                            )}
                            {/* Contre-proposition du client : message + dates à
                                accepter, ou re-proposition de nouveaux créneaux. */}
                            {isCounter && g.client_message && (
                              <p className="text-xs italic text-muted-foreground">
                                “{g.client_message}”
                              </p>
                            )}
                            <div className="flex flex-wrap gap-1.5">
                              {chipDates.map((d, di) => {
                                const sel =
                                  !!g.selected_date &&
                                  new Date(d).getTime() === new Date(g.selected_date).getTime();
                                if (isCounter) {
                                  const pending =
                                    confirmAccept?.groupId === g.id &&
                                    confirmAccept.date === d;
                                  return (
                                    <button
                                      key={`${d}-${di}`}
                                      type="button"
                                      onClick={() => setConfirmAccept({ date: d, groupId: g.id })}
                                      disabled={actionSubmitting}
                                      className={`inline-flex items-center gap-1 rounded-md border px-2 py-0.5 text-xs font-medium disabled:opacity-50 ${
                                        pending
                                          ? 'border-emerald-500 bg-emerald-600 text-white'
                                          : 'border-emerald-500 bg-emerald-50 text-emerald-700 hover:bg-emerald-100'
                                      }`}
                                    >
                                      <Calendar className="w-3 h-3" />
                                      {formatChip(d)}
                                      <Check className="w-3 h-3" />
                                    </button>
                                  );
                                }
                                return (
                                  <span
                                    key={`${d}-${di}`}
                                    className={`inline-flex items-center gap-1 rounded-md border px-2 py-0.5 text-xs ${
                                      sel
                                        ? 'border-emerald-500 bg-emerald-600 text-white'
                                        : 'border-border bg-background text-foreground'
                                    }`}
                                  >
                                    <Calendar className="w-3 h-3" />
                                    {formatChip(d)}
                                    {sel && <CheckCircle2 className="w-3 h-3" />}
                                  </span>
                                );
                              })}
                            </div>
                            {isCounter && (
                              <button
                                type="button"
                                onClick={() =>
                                  setReproposeGroup({
                                    id: g.id,
                                    count: g.vehicle_ids?.length ?? g.vehicles?.length ?? 0,
                                  })
                                }
                                disabled={actionSubmitting}
                                className="text-xs font-medium text-primary hover:underline disabled:opacity-50"
                              >
                                {t('requests.reproposeOther')}
                              </button>
                            )}
                          </div>
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>
            )}

            {/* Pied : soumission */}
            <div className="mt-5 flex items-center justify-end gap-3">
              <p className="text-xs text-muted-foreground">
                {remaining > 0
                  ? t('requests.remainingToGroup', { count: remaining })
                  : t('requests.allGrouped')}
              </p>
              <button
                type="button"
                onClick={submit}
                disabled={!canSubmit || submitting}
                className="btn-primary inline-flex items-center justify-center gap-2 disabled:opacity-50"
              >
                <Check className="w-4 h-4" />
                {t('requests.submitGroups', { count: drafts.length })}
              </button>
            </div>
          </>
        )}
      </div>

      {(slotModalOpen || reproposeGroup) && (
        <RequestGroupSlotModal
          vehicleCount={reproposeGroup ? reproposeGroup.count : selected.length}
          submitting={actionSubmitting}
          onConfirm={reproposeGroup ? doRepropose : confirmGroup}
          onClose={() => {
            setSlotModalOpen(false);
            setReproposeGroup(null);
          }}
        />
      )}

      {/* Confirmation explicite avant d'accepter une date proposée par le client. */}
      {confirmAccept && (
        <div
          className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4"
          onClick={() => !actionSubmitting && setConfirmAccept(null)}
        >
          <div
            className="w-full max-w-md rounded-xl bg-white p-5 shadow-xl"
            onClick={(e) => e.stopPropagation()}
          >
            <div className="flex items-start gap-3">
              <span className="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-emerald-100 text-emerald-600">
                <Calendar className="h-5 w-5" />
              </span>
              <div className="min-w-0">
                <h2 className="text-base font-semibold text-foreground">
                  {t('requests.confirmAcceptTitle')}
                </h2>
                <p className="mt-1 text-sm text-muted-foreground">
                  {t('requests.confirmAcceptBody')}
                </p>
                <p className="mt-2 inline-flex items-center gap-1.5 rounded-md border border-emerald-500 bg-emerald-50 px-2.5 py-1 text-sm font-medium text-emerald-700">
                  <Calendar className="h-4 w-4" />
                  {formatChip(confirmAccept.date)}
                </p>
              </div>
            </div>

            <div className="mt-5 flex flex-col gap-2 sm:flex-row sm:justify-end">
              <button
                type="button"
                onClick={() => setConfirmAccept(null)}
                disabled={actionSubmitting}
                className="rounded-lg border border-border px-4 py-2 text-sm font-medium text-foreground hover:bg-muted disabled:opacity-50"
              >
                {t('requests.cancel')}
              </button>
              <button
                type="button"
                onClick={() => acceptClient(confirmAccept.date, confirmAccept.groupId)}
                disabled={actionSubmitting}
                className="btn-primary inline-flex items-center justify-center gap-2 px-4 py-2 text-sm disabled:opacity-50"
              >
                <Check className="h-4 w-4" />
                {t('requests.confirmAcceptCta')}
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Pose non validée déjà en cours pour ce véhicule + boîtier : continuer ou nouvelle. */}
      {pending && (
        <div
          className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4"
          onClick={cancelPending}
        >
          <div
            className="w-full max-w-md rounded-xl bg-white p-5 shadow-xl"
            onClick={(e) => e.stopPropagation()}
          >
            <div className="flex items-start gap-3">
              <span className="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-amber-100 text-amber-600">
                <AlertTriangle className="h-5 w-5" />
              </span>
              <div className="min-w-0">
                <h2 className="text-base font-semibold text-foreground">
                  {t('requests.existingInstallTitle')}
                </h2>
                <p className="mt-1 text-sm text-muted-foreground">
                  {t('requests.existingInstallBody')}
                </p>
                {pending.detail.vehicle?.license_plate && (
                  <p className="mt-2 text-sm font-medium text-foreground">
                    {pending.detail.vehicle.license_plate}
                  </p>
                )}
              </div>
            </div>

            <div className="mt-5 flex flex-col gap-2 sm:flex-row sm:justify-end">
              <button
                type="button"
                onClick={cancelPending}
                disabled={startingVehicleId != null}
                className="rounded-lg border border-border px-4 py-2 text-sm font-medium text-foreground hover:bg-muted disabled:opacity-50"
              >
                {t('requests.cancel')}
              </button>
              <button
                type="button"
                onClick={startNew}
                disabled={startingVehicleId != null}
                className="rounded-lg border border-primary px-4 py-2 text-sm font-medium text-primary hover:bg-primary/5 disabled:opacity-50"
              >
                {t('requests.startNewInstall')}
              </button>
              <button
                type="button"
                onClick={continueExisting}
                disabled={startingVehicleId != null}
                className="btn-primary px-4 py-2 text-sm disabled:opacity-50"
              >
                {t('requests.continueExisting')}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}