'use client';

import { DashboardEmptyState, DashboardSection } from '@/components/dashboard-page';
import { DataRefreshControl } from '@/components/data-refresh-control';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { ErrorState } from '@/components/ui/error-state';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Skeleton, SkeletonDetailHeader } from '@/components/ui/skeleton';
import { useFlagsConfiguracion } from '@/hooks/use-flags-configuracion';
import { useToast } from '@/hooks/use-toast';
import { catalogosApi, otsApi, uploadFileWithProgress } from '@/lib/api';
import { createCatalogWithOffline } from '@/lib/catalogos-offline';
import { createClientId } from '@/lib/client-id';
import { compressImageFile } from '@/lib/image-compression';
import { canMutateOtRemotely, isOtLocked, OT_DETAIL_REFRESH_INTERVAL_MS, refreshOtDetail } from '@/lib/ot-detail';
import { formatDate, getEstadoLabel } from '@/lib/utils';
import { normalizePrintAssetUrl } from '@/lib/print';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { AlertTriangle, ArrowLeft, Camera, Images, Loader2, MapPin, Plus, Save, Trash2, X } from 'lucide-react';
import { useParams, useRouter } from 'next/navigation';
import type { PointerEvent } from 'react';
import { useEffect, useMemo, useRef, useState } from 'react';

type DamageZone = {
  key: string;
  label: string;
  x: number;
  y: number;
};

type DraftDamage = {
  id: string;
  tipoDanoId: number;
  tipoDanoNombre: string;
  tipoDanoColor?: string;
  zona: string;
  zonaLabel: string;
  descripcion: string;
  x: number;
  y: number;
  files: File[];
  previews: string[];
};

const damageZones: DamageZone[] = [
  { key: 'bumper_delantero', label: 'Bumper delantero', x: 50, y: 8 },
  { key: 'capo', label: 'Capo', x: 50, y: 20 },
  { key: 'parabrisas', label: 'Parabrisas', x: 50, y: 31 },
  { key: 'techo', label: 'Techo', x: 50, y: 45 },
  { key: 'puerta_del_izq', label: 'Puerta del. izq.', x: 24, y: 43 },
  { key: 'puerta_del_der', label: 'Puerta del. der.', x: 76, y: 43 },
  { key: 'puerta_tras_izq', label: 'Puerta tras. izq.', x: 24, y: 59 },
  { key: 'puerta_tras_der', label: 'Puerta tras. der.', x: 76, y: 59 },
  { key: 'baul', label: 'Baul', x: 50, y: 74 },
  { key: 'bumper_trasero', label: 'Bumper trasero', x: 50, y: 90 },
  { key: 'lateral_izq', label: 'Lateral izq.', x: 11, y: 52 },
  { key: 'lateral_der', label: 'Lateral der.', x: 89, y: 52 },
];

function getZoneByPoint(x: number, y: number) {
  return damageZones.reduce((best, item) => {
    const bestDistance = Math.hypot(best.x - x, best.y - y);
    const itemDistance = Math.hypot(item.x - x, item.y - y);
    return itemDistance < bestDistance ? item : best;
  }, damageZones[0]);
}

function revokePreviews(urls: string[]) {
  urls.forEach((url) => URL.revokeObjectURL(url));
}

function buildDamagePhotoDescription(draft: DraftDamage, index: number, total: number) {
  const prefix = `${draft.tipoDanoNombre} - ${draft.zonaLabel}`;
  const suffix = total > 1 ? ` Foto ${index + 1}/${total}` : '';
  return `${prefix}${draft.descripcion ? `: ${draft.descripcion}` : ''}${suffix}`.slice(0, 255);
}

function VehicleDamageBlueprint() {
  return (
    <svg viewBox="0 0 360 520" className="h-full w-full">
      <g fill="none" stroke="#111827" strokeLinecap="round" strokeLinejoin="round">
        <rect x="122" y="18" width="116" height="34" rx="5" strokeWidth="3" />
        <path d="M132 52h96l14 24H118z" strokeWidth="3" fill="#f8fafc" />
        <path d="M98 96C114 60 137 44 180 44s66 16 82 52c16 39 22 100 22 164s-6 125-22 164c-16 36-39 52-82 52s-66-16-82-52c-16-39-22-100-22-164S82 135 98 96z" strokeWidth="3" fill="#ffffff" />
        <path d="M111 118c19-15 119-15 138 0l-14 54c-32-15-78-15-110 0z" strokeWidth="2.5" fill="#e5e7eb" />
        <path d="M125 184c32-11 78-11 110 0l5 76c-37-9-83-9-120 0z" strokeWidth="2.5" fill="#f8fafc" />
        <path d="M120 276c37 9 83 9 120 0l-5 76c-32 11-78 11-110 0z" strokeWidth="2.5" fill="#f8fafc" />
        <path d="M125 364c32 15 78 15 110 0l14 54c-19 15-119 15-138 0z" strokeWidth="2.5" fill="#e5e7eb" />
        <rect x="128" y="470" width="104" height="32" rx="6" strokeWidth="3" />
        <path d="M124 458h112l-10 18h-92z" strokeWidth="3" fill="#f8fafc" />

        <path d="M101 170 58 118c-13-15-28-21-45-20l-2 54c21 3 36 13 45 31l40 78z" strokeWidth="3" fill="#ffffff" />
        <path d="M96 278 56 356c-9 18-24 28-45 31l2 54c17 1 32-5 45-20l43-52z" strokeWidth="3" fill="#ffffff" />
        <path d="M259 170 302 118c13-15 28-21 45-20l2 54c-21 3-36 13-45 31l-40 78z" strokeWidth="3" fill="#ffffff" />
        <path d="M264 278 304 356c9 18 24 28 45 31l-2 54c-17 1-32-5-45-20l-43-52z" strokeWidth="3" fill="#ffffff" />

        <path d="M75 122c10 18 14 46 13 85" strokeWidth="2.5" />
        <path d="M75 398c10-18 14-46 13-85" strokeWidth="2.5" />
        <path d="M285 122c-10 18-14 46-13 85" strokeWidth="2.5" />
        <path d="M285 398c-10-18-14-46-13-85" strokeWidth="2.5" />

        {[36, 324].map((x) => (
          <g key={`front-${x}`}>
            <circle cx={x} cy="156" r="31" strokeWidth="3" fill="#f8fafc" />
            <circle cx={x} cy="156" r="19" strokeWidth="2.5" />
            <circle cx={x} cy="156" r="4" strokeWidth="2" fill="#111827" />
            <path d={`M${x} 137v12M${x} 163v12M${x - 19} 156h12M${x + 7} 156h12M${x - 13} 143l8 8M${x + 5} 161l8 8M${x + 13} 143l-8 8M${x - 5} 161l-8 8`} strokeWidth="2" />
          </g>
        ))}
        {[36, 324].map((x) => (
          <g key={`rear-${x}`}>
            <circle cx={x} cy="364" r="31" strokeWidth="3" fill="#f8fafc" />
            <circle cx={x} cy="364" r="19" strokeWidth="2.5" />
            <circle cx={x} cy="364" r="4" strokeWidth="2" fill="#111827" />
            <path d={`M${x} 345v12M${x} 371v12M${x - 19} 364h12M${x + 7} 364h12M${x - 13} 351l8 8M${x + 5} 369l8 8M${x + 13} 351l-8 8M${x - 5} 369l-8 8`} strokeWidth="2" />
          </g>
        ))}
      </g>
    </svg>
  );
}

export default function DanosPage() {
  const params = useParams();
  const router = useRouter();
  const { toast } = useToast();
  const queryClient = useQueryClient();
  const { usaFotos } = useFlagsConfiguracion();
  const routeId = String(params.id);

  const [tipoDanoId, setTipoDanoId] = useState('');
  const [zona, setZona] = useState('');
  const [descripcion, setDescripcion] = useState('');
  const [selectedPoint, setSelectedPoint] = useState<{ x: number; y: number } | null>(null);
  const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
  const [selectedPreviews, setSelectedPreviews] = useState<string[]>([]);
  const [drafts, setDrafts] = useState<DraftDamage[]>([]);
  const [uploadProgress, setUploadProgress] = useState(0);
  const [uploadStatus, setUploadStatus] = useState('');
  const [saveError, setSaveError] = useState('');
  const [showQuickTipoDanoForm, setShowQuickTipoDanoForm] = useState(false);
  const [showZoneList, setShowZoneList] = useState(false);
  const [quickTipoDanoName, setQuickTipoDanoName] = useState('');
  const [quickTipoDanoColor, setQuickTipoDanoColor] = useState('#ef4444');
  const selectedPreviewsRef = useRef<string[]>([]);
  const draftsRef = useRef<DraftDamage[]>([]);

  useEffect(() => {
    selectedPreviewsRef.current = selectedPreviews;
  }, [selectedPreviews]);

  useEffect(() => {
    draftsRef.current = drafts;
  }, [drafts]);

  useEffect(() => {
    return () => {
      revokePreviews(selectedPreviewsRef.current);
      draftsRef.current.forEach((draft) => revokePreviews(draft.previews));
    };
  }, []);

  const { data, dataUpdatedAt, isFetching, isLoading, error, refetch } = useQuery({
    queryKey: ['ots', 'detail', routeId, 'danos'],
    queryFn: () => refreshOtDetail(routeId),
    enabled: !!routeId,
    refetchInterval: OT_DETAIL_REFRESH_INTERVAL_MS,
    refetchOnReconnect: true,
    refetchOnWindowFocus: true,
  });

  const ot = data?.ot;
  const tiposDano = useMemo(() => data?.tiposDano ?? [], [data?.tiposDano]);
  const canMutate = canMutateOtRemotely(ot);
  const locked = isOtLocked(ot);
  const selectedTipo = useMemo(() => tiposDano.find((item: any) => Number(item.id) === Number(tipoDanoId)), [tiposDano, tipoDanoId]);
  const selectedZone = zona ? damageZones.find((item) => item.key === zona) : null;

  const refreshData = async () => {
    await queryClient.invalidateQueries({ queryKey: ['ots', 'detail', routeId] });
    await queryClient.invalidateQueries({ queryKey: ['ots', 'detail', routeId, 'danos'] });
    await queryClient.invalidateQueries({ queryKey: ['ots', 'detail', routeId, 'fotos'] });
    await queryClient.invalidateQueries({ queryKey: ['historial'] });
  };

  const clearCurrentDamage = () => {
    setTipoDanoId('');
    setZona('');
    setDescripcion('');
    setSelectedPoint(null);
    setSelectedFiles([]);
    revokePreviews(selectedPreviews);
    setSelectedPreviews([]);
  };

  const createDraftFromPoint = (point: { x: number; y: number }, zoneItem: DamageZone): DraftDamage => {
    if (!selectedTipo) {
      throw new Error('Selecciona el tipo de daño.');
    }

    return {
      id: createClientId('dano'),
      tipoDanoId: Number(selectedTipo.id),
      tipoDanoNombre: selectedTipo.nombre || 'Daño',
      tipoDanoColor: selectedTipo.color,
      zona: zoneItem.key,
      zonaLabel: zoneItem.label,
      descripcion: descripcion.trim(),
      x: Number(point.x.toFixed(2)),
      y: Number(point.y.toFixed(2)),
      files: selectedFiles,
      previews: selectedPreviews,
    };
  };

  const selectDamagePoint = (x: number, y: number, addImmediately = false) => {
    const nearest = getZoneByPoint(x, y);
    const point = { x, y };
    setZona(nearest.key);
    setSelectedPoint(point);

    if (!addImmediately || !selectedTipo || descripcion.trim() || selectedFiles.length > 0 || locked) {
      return;
    }

    const draft = createDraftFromPoint(point, nearest);
    setDrafts((current) => [...current, draft]);
    setSaveError('');
    setSelectedPoint(null);
    setZona('');
    toast({ variant: 'success', title: 'Daño agregado', description: `${selectedTipo.nombre || 'Daño'} en ${nearest.label}.` });
  };

  const handleVehicleDiagramPointerDown = (event: PointerEvent<HTMLDivElement>) => {
    if ((event.target as HTMLElement).closest('button')) {
      return;
    }

    const rect = event.currentTarget.getBoundingClientRect();
    const x = Math.min(100, Math.max(0, ((event.clientX - rect.left) / rect.width) * 100));
    const y = Math.min(100, Math.max(0, ((event.clientY - rect.top) / rect.height) * 100));
    selectDamagePoint(x, y, true);
  };

  const addSelectedFiles = (files: File[]) => {
    if (!files.length) return;
    // Sin fotos de OT solo cabe la foto principal del daño: las adicionales se
    // guardan como fotos de la OT y el backend las rechaza.
    if (!usaFotos) {
      selectedPreviews.forEach((preview) => URL.revokeObjectURL(preview));
      setSelectedFiles([files[0]]);
      setSelectedPreviews([URL.createObjectURL(files[0])]);
      return;
    }
    setSelectedFiles((current) => [...current, ...files]);
    setSelectedPreviews((current) => [...current, ...files.map((file) => URL.createObjectURL(file))]);
  };

  const removeSelectedFile = (index: number) => {
    URL.revokeObjectURL(selectedPreviews[index]);
    setSelectedFiles((current) => current.filter((_, itemIndex) => itemIndex !== index));
    setSelectedPreviews((current) => current.filter((_, itemIndex) => itemIndex !== index));
  };

  const buildCurrentDraft = (): DraftDamage => {
    if (!selectedTipo) {
      throw new Error('Selecciona el tipo de daño.');
    }

    if (!selectedPoint || !selectedZone) {
      throw new Error('Selecciona la zona del carro donde esta el daño.');
    }

    return createDraftFromPoint(selectedPoint, selectedZone);
  };

  const addDraftDamage = () => {
    try {
      const draft = buildCurrentDraft();
      setDrafts((current) => [...current, draft]);
      setSaveError('');
      setTipoDanoId('');
      setZona('');
      setDescripcion('');
      setSelectedPoint(null);
      setSelectedFiles([]);
      setSelectedPreviews([]);
      toast({ variant: 'success', title: 'Daño agregado', description: 'Queda pendiente para guardar con la inspección.' });
    } catch (error: any) {
      setSaveError(error.message || 'Completa el daño antes de agregarlo.');
      toast({ variant: 'destructive', title: 'Campo obligatorio', description: error.message || 'Completa el daño antes de agregarlo.' });
    }
  };

  const removeDraftDamage = (id: string) => {
    setDrafts((current) => {
      const draft = current.find((item) => item.id === id);
      if (draft) {
        revokePreviews(draft.previews);
      }
      return current.filter((item) => item.id !== id);
    });
  };

  const createTipoDanoMutation = useMutation({
    mutationFn: async () => {
      const nombre = quickTipoDanoName.trim();

      if (!nombre) {
        throw new Error('Escribe el tipo de daño.');
      }

      return createCatalogWithOffline(
        'tipo_dano',
        { nombre, icono: 'dano', color: quickTipoDanoColor },
        catalogosApi.createTipoDano,
      );
    },
    onSuccess: async (tipo: any) => {
      setTipoDanoId(String(tipo.id));
      setQuickTipoDanoName('');
      setQuickTipoDanoColor('#ef4444');
      setShowQuickTipoDanoForm(false);
      await refreshData();
      toast({
        variant: 'success',
        title: tipo?.offlineQueued ? 'Tipo guardado sin conexión' : 'Tipo agregado',
        description: 'Ya puedes usarlo en esta inspección.',
      });
    },
    onError: (error: any) => {
      toast({
        variant: 'destructive',
        title: 'No se pudo agregar',
        description: error?.message || 'Revisa el nombre del tipo de daño.',
      });
    },
  });

  const saveInspectionMutation = useMutation({
    mutationFn: async () => {
      if (!ot?.serverId) {
        throw new Error('La OT aún no está sincronizada con el servidor.');
      }

      let queue = drafts;
      if (queue.length === 0 && (selectedTipo || selectedPoint || descripcion.trim() || selectedFiles.length > 0)) {
        queue = [buildCurrentDraft()];
      }

      if (queue.length === 0) {
        throw new Error('Agrega al menos un daño antes de guardar.');
      }

      let done = 0;
      const totalSteps = queue.reduce((sum, draft) => sum + Math.max(1, draft.files.length), 0);

      for (const draft of queue) {
        const uploadedUrls: string[] = [];

        for (let index = 0; index < draft.files.length; index += 1) {
          const file = draft.files[index];
          setUploadStatus(`${draft.tipoDanoNombre} (${draft.zonaLabel}) - comprimiendo foto ${index + 1}/${draft.files.length}`);
          const uploadFile = await compressImageFile(file);
          setUploadStatus(`${draft.tipoDanoNombre} (${draft.zonaLabel}) - subiendo foto ${index + 1}/${draft.files.length}`);
          const uploaded = await uploadFileWithProgress(uploadFile, 'foto', (progress) => {
            setUploadProgress(Math.min(100, Math.round(((done + progress / 100) / totalSteps) * 100)));
          });
          uploadedUrls.push(uploaded.url);
          done += 1;
        }

        if (draft.files.length === 0) {
          done += 1;
          setUploadProgress(Math.min(100, Math.round((done / totalSteps) * 100)));
        }

        setUploadStatus(`${draft.tipoDanoNombre} (${draft.zonaLabel}) - guardando daño`);
        await otsApi.addDano(Number(ot.serverId), {
          tipoDanoId: draft.tipoDanoId,
          zona: draft.zona,
          descripcion: draft.descripcion || undefined,
          posicionX: draft.x,
          posicionY: draft.y,
          fotoUrl: uploadedUrls[0],
        });

        for (let index = 1; index < uploadedUrls.length; index += 1) {
          await otsApi.addFoto(Number(ot.serverId), {
            tipo: 'dano',
            descripcion: buildDamagePhotoDescription(draft, index, uploadedUrls.length),
            url: uploadedUrls[index],
          });
        }
      }
    },
    onSuccess: async () => {
      drafts.forEach((draft) => revokePreviews(draft.previews));
      setDrafts([]);
      clearCurrentDamage();
      setUploadProgress(0);
      setUploadStatus('');
      setSaveError('');
      await refreshData();
      toast({ variant: 'success', title: 'Inspección guardada', description: 'Los daños y sus fotos quedaron registrados en la OT.' });
    },
    onError: (error: any) => {
      const message = error.message || 'No se pudo guardar la inspección';
      setUploadStatus('');
      setSaveError(message);
      toast({ variant: 'destructive', title: 'Error', description: message });
    },
  });

  const handleSaveInspection = () => {
    if (saveInspectionMutation.isPending) return;

    if (!ot?.serverId) {
      const message = 'La OT todavía no está sincronizada con el servidor. Puedes preparar los daños, pero debes sincronizar antes de guardarlos.';
      setSaveError(message);
      toast({ variant: 'destructive', title: 'No se puede guardar', description: message });
      return;
    }

    if (locked) {
      const message = 'La OT ya fue entregada y solo permite consulta.';
      setSaveError(message);
      toast({ variant: 'destructive', title: 'No se puede guardar', description: message });
      return;
    }

    if (!navigator.onLine) {
      const message = 'No hay conexión. Puedes dejar los daños en la lista y guardarlos cuando vuelva internet.';
      setSaveError(message);
      toast({ variant: 'destructive', title: 'Sin conexión', description: message });
      return;
    }

    saveInspectionMutation.mutate();
  };

  const deleteMutation = useMutation({
    mutationFn: async (danoId: number) => {
      if (!ot?.serverId) {
        throw new Error('La OT aún no está sincronizada con el servidor.');
      }
      return otsApi.removeDano(Number(ot.serverId), danoId);
    },
    onSuccess: async () => {
      await refreshData();
      toast({ variant: 'success', title: 'Daño eliminado', description: 'El registro fue removido de la OT.' });
    },
    onError: (error: any) => toast({ variant: 'destructive', title: 'Error', description: error.message || 'No se pudo eliminar el daño' }),
  });

  if (isLoading) {
    return (
      <div className="min-h-full pb-16 md:pb-10">
        <main className="mx-auto flex max-w-7xl flex-col gap-6">
          <Card className="overflow-hidden">
            <CardContent className="space-y-5 p-5 md:p-6">
              <SkeletonDetailHeader />
            </CardContent>
          </Card>
          <div className="grid gap-6 xl:grid-cols-[1.08fr_0.92fr]">
            <Skeleton className="h-96 w-full" />
            <Skeleton className="h-96 w-full" />
          </div>
        </main>
      </div>
    );
  }

  if (error || !ot) {
    return (
      <div className="flex min-h-[60dvh] items-center justify-center p-4">
        <ErrorState
          title={error ? 'No se pudo cargar la OT' : 'OT no encontrada'}
          description={error ? 'No logramos comunicarnos con el servidor. Revisa la conexión e intenta de nuevo.' : 'No fue posible abrir la OT para registrar daños.'}
          onRetry={() => (error ? refetch() : router.push('/dashboard/ots'))}
          retryLabel={error ? 'Reintentar' : 'Volver al listado'}
        />
      </div>
    );
  }

  return (
    <div className="min-h-full pb-16 md:pb-10">
      <main className="mx-auto flex max-w-7xl flex-col gap-6">
        <Card className="overflow-hidden">
          <CardContent className="space-y-5 p-5 md:p-6">
            <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
              <div className="flex items-start gap-3 md:gap-4">
                <Button variant="outline" size="icon" aria-label="Volver a la OT" onClick={() => router.push(`/dashboard/ots/${routeId}`)}>
                  <ArrowLeft className="h-4 w-4" />
                </Button>
                <div>
                  <div className="flex flex-wrap items-center gap-2">
                    <h1 className="text-2xl font-bold tracking-tight text-foreground">Daños</h1>
                    <Badge variant="destructive">{ot.numeroOt}</Badge>
                    <Badge variant="neutral">{getEstadoLabel(ot.estado)}</Badge>
                  </div>
                  <p className="mt-2 text-sm text-muted-foreground">{ot.vehiculo?.placa || 'Sin placa'} | {formatDate(ot.fechaEntrada)}</p>
                  {locked ? <p className="mt-1 text-sm font-medium text-success">La OT ya fue entregada y solo permite consulta.</p> : null}
                </div>
              </div>
              <DataRefreshControl updatedAt={dataUpdatedAt} isFetching={isFetching} onRefresh={() => void refetch()} />
            </div>
          </CardContent>
        </Card>

        <div className="grid gap-6 xl:grid-cols-[1.08fr_0.92fr]">
          <DashboardSection
            className="min-w-0"
            title="Inspección de carro"
            description="Marca un punto, completa el tipo de daño y agregalo a la lista. Puedes repetirlo varias veces antes de guardar."
            action={
              <Button className="w-full sm:w-auto" onClick={handleSaveInspection} disabled={saveInspectionMutation.isPending}>
                {saveInspectionMutation.isPending ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <Save className="mr-2 h-4 w-4" />}
                Guardar {drafts.length ? `${drafts.length} daño${drafts.length === 1 ? '' : 's'}` : 'inspección'}
              </Button>
            }
          >
            <div className="grid gap-6 lg:grid-cols-[1.04fr_0.96fr]">
              <div className="min-w-0 space-y-4">
                <div className="rounded-xl border border-border bg-muted p-4">
                  <div
                    className="relative mx-auto aspect-[9/13] max-h-[620px] min-h-[360px] w-full max-w-[430px] cursor-crosshair overflow-hidden rounded-xl border border-border bg-surface"
                    onPointerDown={handleVehicleDiagramPointerDown}
                    title="Toca el punto exacto del daño"
                  >
                    <VehicleDamageBlueprint />

                    {damageZones.map((item) => {
                      const active = zona === item.key;
                      return (
                        <button
                          key={item.key}
                          type="button"
                          className={`damage-marker ${active ? 'bg-destructive ring-4 ring-destructive-soft' : 'bg-foreground/70 [@media(hover:hover)]:hover:bg-foreground'}`}
                          style={{ left: `${item.x}%`, top: `${item.y}%` }}
                          onClick={() => selectDamagePoint(item.x, item.y, true)}
                          title={item.label}
                        >
                          <MapPin className="h-3.5 w-3.5 text-white" />
                        </button>
                      );
                    })}

                    {ot.danos?.map((item: any) => (
                      <span key={item.id} className="damage-marker bg-destructive" style={{ left: `${Number(item.posicionX || 50)}%`, top: `${Number(item.posicionY || 50)}%` }} title={item.tipoDano?.nombre || item.zona}>
                        <AlertTriangle className="h-3.5 w-3.5 text-white" />
                      </span>
                    ))}

                    {drafts.map((draft, index) => (
                      <span key={draft.id} className="damage-marker bg-warning ring-4 ring-warning-soft" style={{ left: `${draft.x}%`, top: `${draft.y}%` }} title={`${index + 1}. ${draft.tipoDanoNombre}`}>
                        <span className="text-[11px] font-black text-white">{index + 1}</span>
                      </span>
                    ))}
                  </div>
                </div>

                <button
                  type="button"
                  onClick={() => setShowZoneList((value) => !value)}
                  className="text-sm font-semibold text-muted-foreground underline-offset-2 hover:underline"
                >
                  {showZoneList ? 'Ocultar lista de zonas' : '¿Te cuesta tocar el punto exacto? Elegir zona de una lista'}
                </button>
                {showZoneList ? (
                  <div className="grid gap-2 sm:grid-cols-2">
                    {damageZones.map((item) => (
                      <button key={item.key} type="button" onClick={() => selectDamagePoint(item.x, item.y, true)} className={`rounded-xl border px-4 py-3 text-left text-sm font-semibold transition-colors duration-150 ease-out active:scale-[0.98] ${zona === item.key ? 'border-destructive/30 bg-destructive-soft text-destructive' : 'border-border bg-surface text-muted-foreground [@media(hover:hover)]:hover:bg-muted'}`}>
                        {item.label}
                      </button>
                    ))}
                  </div>
                ) : null}
              </div>

              <div className="min-w-0 space-y-4">
                <div>
                  <div className="mb-2 flex flex-wrap items-center justify-between gap-3">
                    <label className="block shrink-0 text-sm font-medium text-foreground">Tipo de daño</label>
                    <Button
                      type="button"
                      variant="outline"
                      size="sm"
                      className="shrink-0 rounded-xl border-border"
                      disabled={createTipoDanoMutation.isPending}
                      onClick={() => {
                        setQuickTipoDanoName('');
                        setShowQuickTipoDanoForm((value) => !value);
                      }}
                    >
                      <Plus className="mr-1 h-4 w-4" />
                      Agregar tipo
                    </Button>
                  </div>
                  <Select value={tipoDanoId} onValueChange={setTipoDanoId}>
                    <SelectTrigger>
                      <SelectValue placeholder="Selecciona un tipo..." />
                    </SelectTrigger>
                    <SelectContent>
                      {tiposDano.map((item: any) => (
                        <SelectItem key={item.id} value={String(item.id)}>{item.nombre}</SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                  {showQuickTipoDanoForm ? (
                    <div className="mt-3 rounded-xl border border-destructive/20 bg-destructive-soft p-3">
                      <label htmlFor="quick-tipo-dano-nombre" className="mb-2 block text-sm font-semibold text-destructive">Nuevo tipo de daño</label>
                      <div className="grid min-w-0 gap-2 sm:grid-cols-[minmax(0,1fr)_64px_auto]">
                        <input
                          id="quick-tipo-dano-nombre"
                          value={quickTipoDanoName}
                          onChange={(event) => setQuickTipoDanoName(event.target.value)}
                          placeholder="Ej: Abolladura"
                          className="h-11 min-w-0 rounded-md border border-destructive/20 bg-surface px-3 text-sm font-semibold outline-none focus:ring-2 focus:ring-destructive/30"
                        />
                        <input
                          type="color"
                          value={quickTipoDanoColor}
                          onChange={(event) => setQuickTipoDanoColor(event.target.value)}
                          className="h-11 w-full rounded-md border border-destructive/20 bg-surface p-1"
                          aria-label="Color del tipo de daño"
                          title="Color"
                        />
                        <Button
                          type="button"
                          variant="destructive"
                          disabled={createTipoDanoMutation.isPending}
                          onClick={() => createTipoDanoMutation.mutate()}
                        >
                          {createTipoDanoMutation.isPending ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <Save className="mr-2 h-4 w-4" />}
                          Guardar
                        </Button>
                      </div>
                    </div>
                  ) : null}
                </div>

                <div className="rounded-xl border border-border bg-muted p-4 text-sm text-muted-foreground">
                  <div className="flex items-center gap-3">
                    <span className="h-3 w-3 rounded-full" style={{ backgroundColor: selectedTipo?.color || '#cbd5e1' }} />
                    <strong className="text-foreground">{selectedTipo?.nombre || 'Tipo pendiente'}</strong>
                  </div>
                  <p className="mt-2">Zona seleccionada: <strong>{selectedZone?.label || 'Pendiente'}</strong></p>
                </div>

                <div>
                  <label className="mb-2 block text-sm font-medium text-foreground">Descripción</label>
                  <textarea value={descripcion} onChange={(event) => setDescripcion(event.target.value)} rows={4} className="w-full rounded-xl border border-border bg-surface p-4 text-sm text-foreground shadow-sm transition-colors duration-150 ease-out focus-visible:border-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30" placeholder="Ejemplo: golpe leve en guardafango delantero izquierdo" />
                </div>

                <div className="space-y-3 rounded-xl border border-border bg-muted p-4">
                  <div className="flex flex-col gap-3">
                    <div className="min-w-0">
                      <p className="text-sm font-semibold text-foreground">Fotos del daño</p>
                      <p className="text-sm text-muted-foreground">{usaFotos ? 'Puedes tomar varias fotos del mismo punto.' : 'Puedes adjuntar una foto del daño.'}</p>
                    </div>
                    <div className="flex flex-wrap gap-2">
                      <label className={`inline-flex min-h-11 cursor-pointer items-center rounded-md border border-border bg-surface px-4 py-2 text-sm font-semibold text-foreground transition-colors duration-150 ease-out active:scale-[0.98] [@media(hover:hover)]:hover:bg-muted ${locked ? 'opacity-60' : ''}`}>
                        <Camera className="mr-2 h-4 w-4" />Tomar
                        <input
                          type="file"
                          accept="image/*"
                          capture="environment"
                          className="hidden"
                          disabled={locked}
                          onChange={(event) => {
                            addSelectedFiles(Array.from(event.target.files || []));
                            event.currentTarget.value = '';
                          }}
                        />
                      </label>
                      <label className={`inline-flex min-h-11 cursor-pointer items-center rounded-md border border-border bg-surface px-4 py-2 text-sm font-semibold text-foreground transition-colors duration-150 ease-out active:scale-[0.98] [@media(hover:hover)]:hover:bg-muted ${locked ? 'opacity-60' : ''}`}>
                        <Images className="mr-2 h-4 w-4" />Galeria
                        <input
                          type="file"
                          accept="image/*"
                          multiple
                          className="hidden"
                          disabled={locked}
                          onChange={(event) => {
                            addSelectedFiles(Array.from(event.target.files || []));
                            event.currentTarget.value = '';
                          }}
                        />
                      </label>
                    </div>
                  </div>

                  {selectedPreviews.length ? (
                    <div className="grid grid-cols-2 gap-3">
                      {selectedPreviews.map((preview, index) => (
                        <div key={preview} className="relative">
                          <img src={preview} alt={`Foto daño ${index + 1}`} className="h-32 w-full rounded-xl object-cover" />
                          <button
                            type="button"
                            className="absolute right-1.5 top-1.5 flex h-9 w-9 items-center justify-center rounded-full bg-foreground/80 text-background active:scale-[0.98]"
                            onClick={() => removeSelectedFile(index)}
                            aria-label={`Quitar foto ${index + 1}`}
                            title="Quitar foto"
                          >
                            <X className="h-4 w-4" />
                          </button>
                        </div>
                      ))}
                    </div>
                  ) : null}
                </div>

                <div className="grid gap-2">
                  <Button type="button" variant="destructive" onClick={addDraftDamage} disabled={locked || saveInspectionMutation.isPending}>
                    <Plus className="mr-2 h-4 w-4 shrink-0" />
                    Agregar a lista
                  </Button>
                  <Button type="button" variant="outline" onClick={clearCurrentDamage} disabled={saveInspectionMutation.isPending}>
                    Limpiar
                  </Button>
                </div>

                {saveInspectionMutation.isPending ? (
                  <div className="rounded-xl border border-primary/30 bg-primary-soft p-4">
                    <div className="flex items-center justify-between text-sm text-primary"><span>{uploadStatus || 'Guardando inspección...'}</span><span>{uploadProgress}%</span></div>
                    <div className="mt-3 h-2 overflow-hidden rounded-full bg-primary-soft"><div className="h-full rounded-full bg-primary transition-[width] duration-150 ease-out" style={{ width: `${uploadProgress}%` }} /></div>
                  </div>
                ) : null}
                {saveError ? (
                  <div className="rounded-xl border border-destructive/20 bg-destructive-soft px-4 py-3 text-sm font-medium text-destructive">{saveError}</div>
                ) : null}
              </div>
            </div>
          </DashboardSection>

          <div className="space-y-6">
            <DashboardSection title="Daños por guardar" description="Cada item se guardara como un daño independiente.">
              {drafts.length ? (
                <div className="space-y-3">
                  {drafts.map((draft, index) => (
                    <div key={draft.id} className="rounded-xl border border-warning/30 bg-warning-soft p-4">
                      <div className="flex items-start justify-between gap-3">
                        <div className="min-w-0">
                          <div className="flex flex-wrap items-center gap-2">
                            <Badge variant="warning">{index + 1}</Badge>
                            <span className="rounded-full bg-surface px-3 py-1 text-xs font-semibold text-destructive">{draft.tipoDanoNombre}</span>
                            <span className="rounded-full bg-surface px-3 py-1 text-xs font-semibold text-muted-foreground">{draft.zonaLabel}</span>
                          </div>
                          {draft.descripcion ? <p className="mt-3 text-sm text-foreground">{draft.descripcion}</p> : null}
                          <p className="mt-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">{draft.files.length} foto{draft.files.length === 1 ? '' : 's'}</p>
                        </div>
                        <Button variant="outline" size="icon" aria-label={`Quitar daño ${index + 1} de la lista`} onClick={() => removeDraftDamage(draft.id)}>
                          <Trash2 className="h-4 w-4" />
                        </Button>
                      </div>
                    </div>
                  ))}
                </div>
              ) : (
                <div className="rounded-xl border border-dashed border-border-strong bg-muted p-5 text-sm text-muted-foreground">Aún no hay daños pendientes. Marca un punto en el carro y toca Agregar otro daño.</div>
              )}
            </DashboardSection>

            <DashboardSection title="Daños registrados" description="Listado rápido para validar la inspección antes de cotizar.">
              {ot.danos?.length ? (
                <div className="space-y-3">
                  {ot.danos.map((item: any) => (
                    <div key={item.id} className="rounded-xl border border-border bg-surface p-4 shadow-sm">
                      <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
                        <div className="min-w-0 flex-1 space-y-2">
                          <div className="flex flex-wrap items-center gap-2">
                            <Badge variant="destructive">{item.tipoDano?.nombre || 'Daño'}</Badge>
                            <Badge variant="neutral">{damageZones.find((zoneItem) => zoneItem.key === item.zona)?.label || item.zona}</Badge>
                          </div>
                          {item.descripcion ? <p className="text-sm text-muted-foreground">{item.descripcion}</p> : null}
                          {item.fotoUrl ? <img src={normalizePrintAssetUrl(item.fotoUrl)} alt={item.descripcion || 'Foto daño'} className="h-40 w-full rounded-xl object-cover" /> : null}
                        </div>

                        <Button variant="outline" disabled={!canMutate || deleteMutation.isPending} onClick={() => deleteMutation.mutate(Number(item.id))}>
                          <Trash2 className="mr-2 h-4 w-4" />Eliminar
                        </Button>
                      </div>
                    </div>
                  ))}
                </div>
              ) : (
                <DashboardEmptyState title="Sin daños registrados" description="Registra la inspección visual de la unidad para que la orden y la cotización tengan evidencia completa." icon={AlertTriangle} className="border-none bg-muted shadow-none" />
              )}
            </DashboardSection>
          </div>
        </div>
      </main>
    </div>
  );
}