"use client";

import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { useFlagsConfiguracion } from "@/hooks/use-flags-configuracion";
import { useToast } from "@/hooks/use-toast";
import { fetchCatalogWithCache } from "@/lib/catalogos-offline";
import {
  catalogosApi,
  clientesApi,
  mecanicosApi,
  otsApi,
  vehiculosApi,
} from "@/lib/api";
import { createClientId } from "@/lib/client-id";
import { db } from "@/lib/db";
import { cacheRemoteOtList } from "@/lib/offline-ots";
import { syncEngine } from "@/lib/sync-engine";
import { zodResolver } from "@hookform/resolvers/zod";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import {
  AlertTriangle,
  ArrowLeft,
  Calendar,
  Car,
  Check,
  ClipboardList,
  Fuel,
  Gauge,
  Loader2,
  Plus,
  Save,
  Search,
  User,
  Wrench,
} from "lucide-react";
import { useRouter } from "next/navigation";
import { useMemo, useState } from "react";
import { useForm } from "react-hook-form";
import { z } from "zod";

const optionalVehicleYear = z.preprocess(
  (value) =>
    value === "" || value === undefined || value === null
      ? undefined
      : Number(value),
  z
    .number()
    .int()
    .min(1900, "Año inválido")
    .max(2100, "Año inválido")
    .optional(),
);

const optionalPositiveNumber = z.preprocess(
  (value) => {
    if (value === "" || value === undefined || value === null) {
      return undefined;
    }
    const numeric = Number(value);
    return Number.isFinite(numeric) && numeric > 0 ? numeric : undefined;
  },
  z.number().optional(),
);

const otSchema = z.object({
  clienteTarjeta: z.string().min(1, "Selecciona un cliente"),
  fechaEntrada: z.string().min(1, "Selecciona la fecha de entrada"),
  vehiculoId: z.number().optional(),
  newVehiculo: z
    .object({
      placa: z.string().min(1, "Placa requerida"),
      marca: z.string().min(1, "Marca requerida"),
      modelo: z.string().min(1, "Modelo requerido"),
      tipoVehiculoId: z.number().min(1, "Tipo de vehículo requerido"),
      anio: optionalVehicleYear,
      motor: z.string().trim().optional(),
      cilindraje: z.string().trim().optional(),
      color: z.string().trim().optional(),
    })
    .optional(),
  km: z.coerce.number().min(1, "Ingresa el kilometraje actual"),
  nivelGasolina: z.number().min(0).max(100),
  mecanicoId: optionalPositiveNumber,
  requerimientoCliente: z
    .string()
    .trim()
    .min(1, "Registra el requerimiento del cliente"),
  observaciones: z.string().optional(),
  cosasTrae: z.array(z.number()).default([]),
});

type OTFormInput = z.input<typeof otSchema>;
type OTFormData = z.output<typeof otSchema>;

const steps = ["Vehículo", "Cliente", "Estado", "Solicitud", "Guardar"];

function toDatetimeLocalValue(date = new Date()) {
  const offsetMs = date.getTimezoneOffset() * 60 * 1000;
  return new Date(date.getTime() - offsetMs).toISOString().slice(0, 16);
}

function uniqByNombre(items: any[]) {
  const map = new Map<string, any>();
  for (const item of items || []) {
    const key = String(item?.nombre || "")
      .trim()
      .toLowerCase();
    if (key && !map.has(key)) {
      map.set(key, item);
    }
  }
  return Array.from(map.values());
}

function toOptionList(values: string[]) {
  return uniqByNombre(
    values
      .filter(Boolean)
      .map((nombre, idx) => ({ id: `local-${idx}-${nombre}`, nombre })),
  );
}

function normalizePlateInput(value: string) {
  return String(value || "").toUpperCase();
}

function mergeOptions(primary: any[], secondary: any[]) {
  return uniqByNombre([...(primary || []), ...(secondary || [])]);
}

function isNetworkLikeError(error: any): boolean {
  if (typeof navigator !== "undefined" && !navigator.onLine) {
    return true;
  }

  const status = Number(error?.status);
  if (Number.isFinite(status) && status >= 500) {
    return true;
  }

  const message = String(error?.message || "");
  return /Failed to fetch|NetworkError|ERR_EMPTY_RESPONSE|ECONNREFUSED|ECONNRESET|Internal server error/i.test(
    message,
  );
}

function mapDbVehiculo(row: any) {
  return {
    id: row.serverId || `local-${row.localId}`,
    serverId: row.serverId,
    localId: row.localId,
    placa: row.placa,
    marca: row.marca,
    modelo: row.modelo,
    anio: row.anio,
    motor: row.motor,
    cilindraje: row.cilindraje,
    color: row.color,
    tipoVehiculoId: row.tipoVehiculoId,
    clienteId: row.clienteId,
    clienteIds: row.clienteIds || (row.clienteId ? [row.clienteId] : []),
    syncStatus: row.syncStatus,
  };
}

const ACTIVE_OT_STATES = new Set([
  "borrador",
  "en_proceso",
  "cotizada",
  "aprobada",
  "terminada",
]);

export default function NuevaOTPage() {
  const router = useRouter();
  const { toast } = useToast();
  const queryClient = useQueryClient();
  const flags = useFlagsConfiguracion();

  const [step, setStep] = useState(1);
  const [clienteSearch, setClienteSearch] = useState("");
  const [vehiculoSearch, setVehiculoSearch] = useState("");
  const [selectedCliente, setSelectedCliente] = useState<any>(null);
  const [selectedVehiculo, setSelectedVehiculo] = useState<any>(null);
  const [createNewVehiculo, setCreateNewVehiculo] = useState(false);
  const [showClientForm, setShowClientForm] = useState(false);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [showQuickTypeForm, setShowQuickTypeForm] = useState(false);
  const [quickTypeName, setQuickTypeName] = useState("");
  const [showQuickBrandForm, setShowQuickBrandForm] = useState(false);
  const [quickBrandName, setQuickBrandName] = useState("");
  const [showQuickModelForm, setShowQuickModelForm] = useState(false);
  const [quickModelName, setQuickModelName] = useState("");
  const [clientForm, setClientForm] = useState({
    nombre: "",
    nit: "",
    direccion: "",
    telefono: "",
    celular: "",
    email: "",
  });

  const { register, handleSubmit, setValue, watch, resetField, unregister } = useForm<
    OTFormInput,
    unknown,
    OTFormData
  >({
    resolver: zodResolver(otSchema),
    defaultValues: {
      fechaEntrada: toDatetimeLocalValue(),
      nivelGasolina: 50,
      cosasTrae: [],
      mecanicoId: undefined,
    },
  });

  const clearNewVehiculoDraft = () => {
    unregister("newVehiculo");
  };

  const chooseCliente = (cliente: any) => {
    setSelectedCliente(cliente);
    setClienteSearch("");
    setValue("clienteTarjeta", cliente.tarjeta, { shouldValidate: true });
  };

  const resetClientForm = () => {
    setShowClientForm(false);
    setClientForm({
      nombre: "",
      nit: "",
      direccion: "",
      telefono: "",
      celular: "",
      email: "",
    });
  };

  const createClientMutation = useMutation({
    mutationFn: async () => {
      const nombre = clientForm.nombre.trim();
      const direccion = clientForm.direccion.trim();

      if (!nombre) {
        throw new Error("Hace falta el nombre.");
      }

      if (!direccion) {
        throw new Error("Hace falta la dirección.");
      }

      const payload = {
        nombre,
        nit: clientForm.nit.trim() || "CF",
        direccion,
        telefono: clientForm.telefono.trim() || undefined,
        celular: clientForm.celular.trim() || undefined,
        email: clientForm.email.trim() || undefined,
      };

      try {
        const created = await clientesApi.create(payload);
        await db.clientes.put({
          tarjeta: created.tarjeta,
          nombre: created.nombre,
          nit: created.nit,
          direccion: created.direccion,
          telefono: created.telefono,
          celular: created.celular,
          email: created.email,
          syncStatus: "synced",
          lastModified: Date.now(),
        });
        return created;
      } catch (error: any) {
        if (!isNetworkLikeError(error)) {
          throw error;
        }

        const localTarjeta = `PENDING-${Date.now()}`;
        await db.clientes.put({
          tarjeta: localTarjeta,
          nombre: payload.nombre,
          nit: payload.nit,
          direccion: payload.direccion,
          telefono: payload.telefono,
          celular: payload.celular,
          email: payload.email,
          syncStatus: "pending",
          lastModified: Date.now(),
        });

        await syncEngine.queueEvent({
          eventId: createClientId("cliente-event"),
          eventType: "CREATE_CLIENT",
          entityType: "client",
          localId: localTarjeta,
          payload,
        });

        return { ...payload, tarjeta: localTarjeta, offlineQueued: true };
      }
    },
    onSuccess: (cliente: any) => {
      queryClient.invalidateQueries({ queryKey: ["clientes"] });
      queryClient.invalidateQueries({ queryKey: ["vehiculos"] });
      chooseCliente(cliente);
      resetClientForm();
      toast({
        variant: "success",
        title: cliente?.offlineQueued
          ? "Cliente guardado sin conexión"
          : "Cliente creado",
        description: cliente?.offlineQueued
          ? "Se sincronizara automaticamente al reconectar."
          : "Cliente listo para usar en esta OT.",
      });
    },
    onError: (error: any) => {
      toast({
        variant: "destructive",
        title: "Error",
        description: error.message || "No se pudo crear el cliente",
      });
    },
  });

  const { data: clientes = [], isLoading: loadingClientes } = useQuery({
    queryKey: ["clientes", "search", clienteSearch],
    queryFn: async () => {
      if (navigator.onLine) {
        try {
          return await clientesApi.search(clienteSearch);
        } catch (error) {
          console.warn("API search failed, falling back to local DB", error);
        }
      }

      const term = clienteSearch.toLowerCase();
      return db.clientes
        .filter(
          (cliente) =>
            cliente.nombre.toLowerCase().includes(term) ||
            cliente.tarjeta.toLowerCase().includes(term) ||
            (cliente.nit || "").toLowerCase().includes(term),
        )
        .limit(20)
        .toArray();
    },
    enabled: clienteSearch.length >= 2,
  });

  const { data: vehiculos = [], isLoading: loadingVehiculos } = useQuery({
    queryKey: [
      "vehiculos",
      "ot-picker",
      selectedCliente?.tarjeta || "",
      vehiculoSearch,
    ],
    queryFn: async () => {
      const normalizedSearch = vehiculoSearch.trim().toLowerCase();
      const { cacheRemoteVehiculos, getLocalVehiculos } =
        await import("@/lib/offline-vehiculos");

      if (selectedCliente?.tarjeta) {
        if (navigator.onLine) {
          try {
            const remote = await vehiculosApi.list(selectedCliente.tarjeta);
            if (Array.isArray(remote) && remote.length > 0) {
              await cacheRemoteVehiculos(remote);
            }
          } catch (error) {
            console.warn(
              "Vehicle list by client failed, using local cache",
              error,
            );
          }
        }

        const localRows = await db.vehiculos.toArray();
        return localRows
          .filter((vehiculo) => {
            const matchesClient =
              vehiculo.clienteId === selectedCliente.tarjeta ||
              (vehiculo.clienteIds || []).includes(selectedCliente.tarjeta);
            if (!matchesClient) {
              return false;
            }

            if (normalizedSearch.length < 2) {
              return true;
            }

            const composite =
              `${vehiculo.placa || ""} ${vehiculo.marca || ""} ${vehiculo.modelo || ""}`.toLowerCase();
            return composite.includes(normalizedSearch);
          })
          .sort((a, b) => (a.placa || "").localeCompare(b.placa || ""))
          .slice(0, 50)
          .map(mapDbVehiculo);
      }

      if (normalizedSearch.length < 2) {
        return [];
      }

      if (navigator.onLine) {
        try {
          const remote = await vehiculosApi.search(vehiculoSearch);
          if (Array.isArray(remote)) {
            await cacheRemoteVehiculos(remote);
            return remote;
          }
        } catch (error) {
          console.warn("Vehicle API search failed, using local cache", error);
        }
      }

      return (await getLocalVehiculos(vehiculoSearch, 20)).data;
    },
    enabled: Boolean(selectedCliente?.tarjeta) || vehiculoSearch.length >= 2,
  });

  const { data: activeVehicleLocks = { byId: {}, byPlaca: {} } } = useQuery({
    queryKey: ["ots", "active-vehicle-locks"],
    enabled: flags.unaOtPorVehiculo,
    queryFn: async () => {
      if (navigator.onLine) {
        try {
          const response = await otsApi.list({ page: 1, limit: 1000 });
          const remoteRows = response?.data || [];
          if (Array.isArray(remoteRows) && remoteRows.length > 0) {
            await cacheRemoteOtList(remoteRows);
          }
        } catch (error) {
          console.warn(
            "Active OT lock refresh failed, using local cache",
            error,
          );
        }
      }

      const rows = await db.ordenesTrabajo.toArray();
      const locks = {
        byId: {} as Record<string, any>,
        byPlaca: {} as Record<string, any>,
      };

      for (const ot of rows) {
        if (!ACTIVE_OT_STATES.has(String(ot.estado || ""))) {
          continue;
        }

        const lock = {
          numeroOt:
            ot.numeroOt ||
            `OT-LOCAL-${String(ot.localId || "")
              .slice(0, 8)
              .toUpperCase()}`,
          estado: ot.estado,
        };
        const vehiculoId = Number(ot.vehiculo?.id || ot.vehiculo?.serverId);
        const placa = String(ot.vehiculo?.placa || "")
          .trim()
          .toUpperCase();

        if (Number.isFinite(vehiculoId) && vehiculoId > 0) {
          locks.byId[String(vehiculoId)] = lock;
        }

        if (placa) {
          locks.byPlaca[placa] = lock;
        }
      }

      return locks;
    },
  });

  const { data: tiposVehiculo } = useQuery({
    queryKey: ["catalogos", "tipos-vehiculo"],
    queryFn: () =>
      fetchCatalogWithCache("tipo_vehiculo", catalogosApi.tiposVehiculo),
  });

  const { data: cosasTrae } = useQuery({
    queryKey: ["catalogos", "cosas-trae"],
    queryFn: () => catalogosApi.cosasTrae(),
    enabled: flags.usaCosasTrae,
  });

  const { data: mecanicos = [] } = useQuery({
    queryKey: ["mecanicos", "activos", "recepcion"],
    queryFn: () => mecanicosApi.list({ activo: true }),
    enabled: flags.usaMecanicos,
  });

  const newVehiculoPlaca = watch("newVehiculo.placa");
  const newVehiculoTipo = watch("newVehiculo.tipoVehiculoId");
  const newVehiculoMarca = watch("newVehiculo.marca");
  const newVehiculoModelo = watch("newVehiculo.modelo");
  const selectedCosasTrae = watch("cosasTrae") || [];
  const currentFechaEntrada = watch("fechaEntrada");
  const currentKm = Number(watch("km"));
  const currentRequerimiento = watch("requerimientoCliente") || "";
  const selectedTipoVehiculoId =
    Number(newVehiculoTipo) > 0 ? Number(newVehiculoTipo) : undefined;

  const { data: vehiculosCatalogSource = [] } = useQuery({
    queryKey: ["vehiculos", "ot-form-source"],
    queryFn: () => db.vehiculos.toArray(),
  });

  const { data: marcasRaw = [] } = useQuery({
    queryKey: ["catalogos", "vehicular", "ot", "marca", selectedTipoVehiculoId],
    queryFn: () =>
      catalogosApi.vehicular(
        "marca",
        selectedTipoVehiculoId
          ? { tipoVehiculoId: selectedTipoVehiculoId }
          : {},
      ),
    enabled: Boolean(createNewVehiculo && selectedTipoVehiculoId),
  });

  const { data: modelosRaw = [] } = useQuery({
    queryKey: [
      "catalogos",
      "vehicular",
      "ot",
      "modelo",
      selectedTipoVehiculoId,
      newVehiculoMarca,
    ],
    queryFn: () =>
      catalogosApi.vehicular(
        "modelo",
        selectedTipoVehiculoId && newVehiculoMarca
          ? { marca: newVehiculoMarca, tipoVehiculoId: selectedTipoVehiculoId }
          : {},
      ),
    enabled: Boolean(
      createNewVehiculo && selectedTipoVehiculoId && newVehiculoMarca,
    ),
  });

  const vehiculosPorTipo = useMemo(() => {
    if (!selectedTipoVehiculoId) return vehiculosCatalogSource;
    return vehiculosCatalogSource.filter(
      (vehiculo: any) =>
        Number(vehiculo?.tipoVehiculoId) === selectedTipoVehiculoId,
    );
  }, [vehiculosCatalogSource, selectedTipoVehiculoId]);

  const marcasPorTipo = useMemo(
    () =>
      toOptionList(vehiculosPorTipo.map((vehiculo: any) => vehiculo?.marca)),
    [vehiculosPorTipo],
  );

  const modelosPorTipoMarca = useMemo(
    () =>
      toOptionList(
        vehiculosPorTipo
          .filter(
            (vehiculo: any) =>
              String(vehiculo?.marca || "").toLowerCase() ===
              String(newVehiculoMarca || "").toLowerCase(),
          )
          .map((vehiculo: any) => vehiculo?.modelo),
      ),
    [vehiculosPorTipo, newVehiculoMarca],
  );

  const marcaOptions = useMemo(
    () => mergeOptions(uniqByNombre(marcasRaw), marcasPorTipo),
    [marcasRaw, marcasPorTipo],
  );
  const modeloOptions = useMemo(
    () => mergeOptions(uniqByNombre(modelosRaw), modelosPorTipoMarca),
    [modelosRaw, modelosPorTipoMarca],
  );

  const getVehicleLock = (vehiculo: any) => {
    if (!flags.unaOtPorVehiculo) {
      return null;
    }

    const vehiculoId = Number(vehiculo?.serverId || vehiculo?.id);
    const placa = String(vehiculo?.placa || "")
      .trim()
      .toUpperCase();

    if (
      Number.isFinite(vehiculoId) &&
      vehiculoId > 0 &&
      activeVehicleLocks.byId[String(vehiculoId)]
    ) {
      return activeVehicleLocks.byId[String(vehiculoId)];
    }

    if (placa && activeVehicleLocks.byPlaca[placa]) {
      return activeVehicleLocks.byPlaca[placa];
    }

    return null;
  };
  const selectedVehiculoLock = selectedVehiculo
    ? getVehicleLock(selectedVehiculo)
    : null;
  const newVehiculoPlacaField = createNewVehiculo
    ? register("newVehiculo.placa")
    : undefined;

  const createTipoVehiculoMutation = useMutation({
    mutationFn: async () => {
      const nombre = quickTypeName.trim().toUpperCase();

      if (!nombre) {
        throw new Error("Escribe el tipo de vehículo.");
      }

      return catalogosApi.createTipoVehiculo({
        nombre,
        descripcion: "",
        plantillaDanos: "carro",
      });
    },
    onSuccess: (tipo: any) => {
      setValue("newVehiculo.tipoVehiculoId", Number(tipo.id), {
        shouldValidate: true,
      });
      setValue("newVehiculo.marca", "");
      setValue("newVehiculo.modelo", "");
      setQuickTypeName("");
      setShowQuickTypeForm(false);
      queryClient.invalidateQueries({
        queryKey: ["catalogos", "tipos-vehiculo"],
      });
      toast({
        variant: "success",
        title: "Tipo agregado",
        description: "Ya puedes usarlo en esta recepción.",
      });
    },
    onError: (error: any) => {
      toast({
        variant: "destructive",
        title: "No se pudo agregar",
        description: error?.message || "Revisa el nombre del tipo de vehículo.",
      });
    },
  });

  const createMarcaMutation = useMutation({
    mutationFn: async () => {
      const nombre = quickBrandName.trim().toUpperCase();

      if (!selectedTipoVehiculoId) {
        throw new Error("Primero elige el tipo de vehículo.");
      }

      if (!nombre) {
        throw new Error("Escribe el nombre de la marca.");
      }

      return catalogosApi.createVehicular({
        tipo: "marca",
        nombre,
        tipoVehiculoId: selectedTipoVehiculoId,
      });
    },
    onSuccess: (marca: any) => {
      const nombre = marca?.nombre || quickBrandName.trim().toUpperCase();
      setValue("newVehiculo.marca", nombre, { shouldValidate: true });
      setValue("newVehiculo.modelo", "");
      setQuickBrandName("");
      setShowQuickBrandForm(false);
      queryClient.invalidateQueries({ queryKey: ["catalogos", "vehicular"] });
      queryClient.invalidateQueries({ queryKey: ["catalogos-vehiculares"] });
      toast({
        variant: "success",
        title: "Marca agregada",
        description: "Ya puedes elegir modelos para esta marca.",
      });
    },
    onError: (error: any) => {
      toast({
        variant: "destructive",
        title: "No se pudo agregar",
        description: error?.message || "Revisa tipo de vehículo y marca.",
      });
    },
  });

  const createModeloMutation = useMutation({
    mutationFn: async () => {
      const nombre = quickModelName.trim();

      if (!selectedTipoVehiculoId) {
        throw new Error("Primero elige el tipo de vehículo.");
      }

      if (!newVehiculoMarca?.trim()) {
        throw new Error("Primero elige la marca.");
      }

      if (!nombre) {
        throw new Error("Escribe el nombre del modelo.");
      }

      return catalogosApi.createVehicular({
        tipo: "modelo",
        nombre,
        marca: newVehiculoMarca.trim(),
        tipoVehiculoId: selectedTipoVehiculoId,
      });
    },
    onSuccess: (modelo: any) => {
      const nombre = modelo?.nombre || quickModelName.trim();
      setValue("newVehiculo.modelo", nombre, { shouldValidate: true });
      setQuickModelName("");
      setShowQuickModelForm(false);
      queryClient.invalidateQueries({ queryKey: ["catalogos", "vehicular"] });
      queryClient.invalidateQueries({ queryKey: ["catalogos-vehiculares"] });
      toast({
        variant: "success",
        title: "Modelo agregado",
        description: "Ya puedes usarlo en esta recepción.",
      });
    },
    onError: (error: any) => {
      toast({
        variant: "destructive",
        title: "No se pudo agregar",
        description: error?.message || "Revisa tipo, marca y modelo.",
      });
    },
  });

  const canContinueFromStepOne = useMemo(() => {
    if (selectedVehiculo && !selectedVehiculoLock) {
      return true;
    }

    if (!createNewVehiculo) {
      return false;
    }

    return Boolean(
      newVehiculoPlaca?.trim() &&
      Number.isFinite(Number(newVehiculoTipo)) &&
      Number(newVehiculoTipo) > 0 &&
      newVehiculoMarca?.trim() &&
      newVehiculoModelo?.trim(),
    );
  }, [
    selectedVehiculo,
    selectedVehiculoLock,
    createNewVehiculo,
    newVehiculoMarca,
    newVehiculoModelo,
    newVehiculoPlaca,
    newVehiculoTipo,
  ]);
  const canContinueFromStateStep = Number.isFinite(currentKm) && currentKm > 0;
  const canContinueFromRequestStep = Boolean(currentRequerimiento.trim());

  const getStepBlocker = () => {
    if (step === 1) {
      if (selectedVehiculoLock) {
        return `Este vehículo ya tiene una orden activa: ${selectedVehiculoLock.numeroOt}.`;
      }

      if (selectedVehiculo) {
        return null;
      }

      if (!createNewVehiculo) {
        return "Hace falta seleccionar o crear un vehículo.";
      }

      if (!newVehiculoPlaca?.trim()) {
        return "Hace falta la placa.";
      }

      if (
        !Number.isFinite(Number(newVehiculoTipo)) ||
        Number(newVehiculoTipo) <= 0
      ) {
        return "Hace falta el tipo de vehículo.";
      }

      if (!newVehiculoMarca?.trim()) {
        return "Hace falta la marca.";
      }

      if (!newVehiculoModelo?.trim()) {
        return "Hace falta el modelo.";
      }
    }

    if (step === 2 && !selectedCliente) {
      return "Hace falta seleccionar o crear el cliente.";
    }

    if (step === 3 && !canContinueFromStateStep) {
      return "Hace falta ingresar el kilometraje actual.";
    }

    if (step === 4 && !canContinueFromRequestStep) {
      return "Hace falta la solicitud del cliente.";
    }

    return null;
  };

  const goToNextStep = () => {
    const blocker = getStepBlocker();

    if (blocker) {
      toast({
        variant: "destructive",
        title: "Campo obligatorio",
        description: blocker,
      });
      return;
    }

    setStep(step + 1);
  };

  const onInvalidSubmit = (errors: any) => {
    const message =
      errors?.clienteTarjeta?.message ||
      errors?.fechaEntrada?.message ||
      errors?.newVehiculo?.placa?.message ||
      errors?.newVehiculo?.tipoVehiculoId?.message ||
      errors?.newVehiculo?.marca?.message ||
      errors?.newVehiculo?.modelo?.message ||
      errors?.km?.message ||
      errors?.requerimientoCliente?.message ||
      "Revisa los campos obligatorios antes de guardar.";

    toast({
      variant: "destructive",
      title: "Campo obligatorio",
      description: message,
    });
  };

  const onSubmit = async (data: OTFormData) => {
    if (selectedVehiculoLock) {
      toast({
        variant: "destructive",
        title: "Vehículo bloqueado",
        description: `Ya tiene una orden activa: ${selectedVehiculoLock.numeroOt}.`,
      });
      return;
    }

    const payload: any = {
      clienteTarjeta: data.clienteTarjeta,
      fechaEntrada: new Date(data.fechaEntrada).toISOString(),
      km: data.km,
      nivelGasolina: data.nivelGasolina,
      mecanicoId: flags.usaMecanicos && data.mecanicoId ? Number(data.mecanicoId) : undefined,
      requerimientoCliente: data.requerimientoCliente.trim(),
      observaciones: data.observaciones?.trim() || undefined,
      cosasTrae: flags.usaCosasTrae ? data.cosasTrae : [],
    };

    const selectedVehiculoServerId = Number(
      selectedVehiculo?.serverId || selectedVehiculo?.id,
    );

    if (
      selectedVehiculo &&
      Number.isFinite(selectedVehiculoServerId) &&
      selectedVehiculoServerId > 0
    ) {
      payload.vehiculoId = selectedVehiculoServerId;
    } else if (selectedVehiculo) {
      payload.vehiculo = {
        placa: selectedVehiculo.placa,
        marca: selectedVehiculo.marca,
        modelo: selectedVehiculo.modelo,
        anio: selectedVehiculo.anio,
        motor: selectedVehiculo.motor,
        cilindraje: selectedVehiculo.cilindraje,
        color: selectedVehiculo.color,
        tipoVehiculoId: Number(selectedVehiculo.tipoVehiculoId),
        clienteIds: [data.clienteTarjeta],
      };
    } else if (createNewVehiculo && data.newVehiculo) {
      payload.vehiculo = {
        ...data.newVehiculo,
        anio: data.newVehiculo.anio ? Number(data.newVehiculo.anio) : undefined,
        motor: data.newVehiculo.motor?.trim() || undefined,
        cilindraje: data.newVehiculo.cilindraje?.trim() || undefined,
        color: data.newVehiculo.color?.trim() || undefined,
        tipoVehiculoId: Number(data.newVehiculo.tipoVehiculoId),
        clienteIds: [data.clienteTarjeta],
      };
    }

    setIsSubmitting(true);
    try {
      const { createOT } = await import("@/services/ot.service");
      const result = await createOT(payload);

      await queryClient.invalidateQueries({ queryKey: ["ots"] });
      await queryClient.invalidateQueries({ queryKey: ["vehiculos"] });

      toast({
        variant: "default",
        title: result.serverId ? "OT creada" : "Recepción guardada sin conexión",
        description: result.serverId
          ? `Se creo como ${result.numeroOt}.`
          : `Guardada localmente como ${result.numeroOt}. Se sincronizara automaticamente.`,
      });

      router.push(`/dashboard/ots/${result.routeId}`);
    } catch (error: any) {
      toast({
        variant: "destructive",
        title: "Error",
        description: error.message || "Error al crear la OT",
      });
    } finally {
      setIsSubmitting(false);
    }
  };

  const toggleCosaTrae = (id: number) => {
    const current = watch("cosasTrae") || [];
    if (current.includes(id)) {
      setValue(
        "cosasTrae",
        current.filter((item) => item !== id),
      );
    } else {
      setValue("cosasTrae", [...current, id]);
    }
  };

  return (
    <div className="min-h-screen bg-background pb-44 lg:pb-28">
      {/* top-16 calza exacto con el header global (h-16 en dashboard-shell.tsx); un valor en px suelto se desalinea si ese alto cambia. */}
      <header className="sticky top-16 z-20 border-b bg-surface">
        <div className="flex items-center gap-4 p-4">
          <Button variant="ghost" size="icon" aria-label="Volver" onClick={() => router.back()}>
            <ArrowLeft size={20} />
          </Button>
          <div className="flex-1">
            <h1 className="text-lg font-semibold">Recibir vehículo</h1>
            <p className="text-sm font-semibold text-muted-foreground">
              {steps[step - 1]}
            </p>
          </div>
        </div>

        {/* En teléfono los 5 pasos no caben: antes quedaban en una tira que se
            cortaba a la mitad y había que arrastrarla de lado para ver el
            último. Ahí se muestra "Paso X de 5" con una barra de avance (el
            nombre del paso ya está justo arriba, en el subtítulo) y se vuelve
            atrás con el botón Atrás del pie. Desde tablet en adelante sí
            caben las pastillas completas, que además permiten volver a un
            paso anterior tocándolo. */}
        <div className="px-4 pb-3 sm:hidden">
          <div className="flex items-baseline justify-between">
            <span className="text-xs font-black uppercase tracking-wide text-muted-foreground">
              Paso {step} de {steps.length}
            </span>
            <span className="text-xs font-bold text-success">
              {Math.round((step / steps.length) * 100)}%
            </span>
          </div>
          <div className="mt-2 h-2 overflow-hidden rounded-full bg-muted">
            <div
              className="h-full rounded-full bg-primary transition-[width] duration-150 ease-out"
              style={{ width: `${(step / steps.length) * 100}%` }}
            />
          </div>
        </div>

        <div className="hidden sm:block">
          <div className="flex flex-wrap gap-2 px-4 pb-3">
            {steps.map((label, index) => (
              <button
                key={label}
                type="button"
                onClick={() => {
                  if (index + 1 < step) {
                    setStep(index + 1);
                  }
                }}
                disabled={index + 1 > step}
                className={`shrink-0 rounded-full px-3 py-1 text-xs font-black ${
                  index + 1 <= step
                    ? "bg-success text-success-foreground"
                    : "bg-muted text-muted-foreground"
                }`}
              >
                {label}
              </button>
            ))}
          </div>
        </div>
      </header>

      <main className="px-0 py-4 sm:px-4">
        <form onSubmit={handleSubmit(onSubmit, onInvalidSubmit)}>
          {step === 2 && (
            <div className="space-y-6">
              <Card>
                <CardHeader className="pb-3">
                  <CardTitle className="flex items-center gap-2 text-base">
                    <User size={18} />
                    Cliente
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  {selectedCliente ? (
                    <div className="rounded-3xl border-2 border-success bg-success-soft p-4 shadow-sm sm:p-6">
                      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
                        <div>
                          <p className="text-xs font-bold uppercase tracking-widest text-success">
                            Cliente seleccionado
                          </p>
                          <p className="mt-2 text-xl font-black text-foreground sm:text-2xl">
                            {selectedCliente.nombre}
                          </p>
                          <p className="mt-1 text-sm font-semibold text-success">
                            {selectedCliente.tarjeta} |{" "}
                            {selectedCliente.nit || "Sin NIT"}
                          </p>
                        </div>
                        <Button
                          type="button"
                          variant="outline"
                          size="lg"
                          className="border-success/40 text-success [@media(hover:hover)]:hover:bg-success-soft"
                          onClick={() => {
                            setSelectedCliente(null);
                            setValue("clienteTarjeta", "");
                          }}
                        >
                          Cambiar Cliente
                        </Button>
                      </div>
                    </div>
                  ) : (
                    <div className="space-y-6">
                      <div className="flex flex-col gap-4 md:flex-row md:items-center">
                        <div className="relative flex-1">
                          <Search
                            className="absolute left-4 top-1/2 -translate-y-1/2 text-subtle-foreground"
                            size={24}
                          />
                          <Input
                            placeholder="Buscar cliente"
                            value={clienteSearch}
                            onChange={(e) => setClienteSearch(e.target.value)}
                            className="h-16 rounded-2xl border-2 border-border bg-muted pl-14 text-lg shadow-inner focus-visible:ring-primary"
                          />
                        </div>
                        <Button
                          type="button"
                          variant="outline"
                          className="h-14 shrink-0 rounded-2xl px-6 text-base font-bold sm:h-16 sm:text-lg"
                          onClick={() => setShowClientForm((value) => !value)}
                        >
                          <Plus size={24} className="mr-2" />
                          Nuevo cliente
                        </Button>
                      </div>

                      {showClientForm && (
                        <div className="space-y-4 rounded-3xl border-2 border-border bg-surface p-4 shadow-sm sm:p-6">
                          <h3 className="text-lg font-bold text-foreground">
                            Nuevo cliente
                          </h3>
                          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
                            <div>
                              <Label className="mb-2 text-sm font-bold text-foreground">
                                Nombre *
                              </Label>
                              <Input
                                className="h-14 rounded-2xl border-border bg-muted text-base"
                                value={clientForm.nombre}
                                onChange={(e) =>
                                  setClientForm({
                                    ...clientForm,
                                    nombre: e.target.value,
                                  })
                                }
                              />
                            </div>
                            <div>
                              <Label className="mb-2 text-sm font-bold text-foreground">
                                NIT
                              </Label>
                              <Input
                                className="h-14 rounded-2xl border-border bg-muted text-base"
                                placeholder="CF si no lo proporciona"
                                value={clientForm.nit}
                                onChange={(e) =>
                                  setClientForm({
                                    ...clientForm,
                                    nit: e.target.value,
                                  })
                                }
                              />
                            </div>
                          </div>
                          <div>
                            <Label className="mb-2 text-sm font-bold text-foreground">
                              Dirección *
                            </Label>
                            <Input
                              className="h-14 rounded-2xl border-border bg-muted text-base"
                              value={clientForm.direccion}
                              onChange={(e) =>
                                setClientForm({
                                  ...clientForm,
                                  direccion: e.target.value,
                                })
                              }
                            />
                          </div>
                          <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
                            <div>
                              <Label className="mb-2 text-sm font-bold text-foreground">
                                Teléfono
                              </Label>
                              <Input
                                className="h-14 rounded-2xl border-border bg-muted text-base"
                                value={clientForm.telefono}
                                onChange={(e) =>
                                  setClientForm({
                                    ...clientForm,
                                    telefono: e.target.value,
                                  })
                                }
                              />
                            </div>
                            <div>
                              <Label className="mb-2 text-sm font-bold text-foreground">
                                Celular
                              </Label>
                              <Input
                                className="h-14 rounded-2xl border-border bg-muted text-base"
                                value={clientForm.celular}
                                onChange={(e) =>
                                  setClientForm({
                                    ...clientForm,
                                    celular: e.target.value,
                                  })
                                }
                              />
                            </div>
                            <div>
                              <Label className="mb-2 text-sm font-bold text-foreground">
                                Email
                              </Label>
                              <Input
                                className="h-14 rounded-2xl border-border bg-muted text-base"
                                type="email"
                                value={clientForm.email}
                                onChange={(e) =>
                                  setClientForm({
                                    ...clientForm,
                                    email: e.target.value,
                                  })
                                }
                              />
                            </div>
                          </div>
                          <div className="mt-2 flex flex-col-reverse gap-3 sm:flex-row">
                            <Button
                              type="button"
                              variant="outline"
                              className="h-14 rounded-2xl sm:w-1/3"
                              onClick={resetClientForm}
                            >
                              Cancelar
                            </Button>
                            <Button
                              type="button"
                              className="h-14 text-base sm:w-2/3"
                              disabled={createClientMutation.isPending}
                              onClick={() => createClientMutation.mutate()}
                            >
                              {createClientMutation.isPending
                                ? "Guardando..."
                                : "Guardar cliente"}
                            </Button>
                          </div>
                        </div>
                      )}

                      {loadingClientes && (
                        <div className="py-8 text-center text-lg font-semibold text-muted-foreground">
                          Buscando clientes...
                        </div>
                      )}

                      {!loadingClientes &&
                        clienteSearch.length >= 2 &&
                        clientes.length === 0 && (
                          <div className="rounded-3xl border-2 border-dashed border-border-strong bg-muted p-8 text-center text-lg font-medium text-muted-foreground">
                            No se encontraron clientes con &quot;{clienteSearch}
                            &quot;. Toca &quot;Nuevo cliente&quot; para crearlo.
                          </div>
                        )}

                      {clientes.length > 0 && (
                        <div className="grid gap-3 sm:grid-cols-2">
                          {clientes.slice(0, 6).map((cliente: any) => (
                            <button
                              key={cliente.tarjeta}
                              type="button"
                              className="group flex flex-col items-start justify-center rounded-3xl border-2 border-border bg-surface p-5 text-left transition-[transform,box-shadow,background-color,border-color] duration-150 ease-out active:scale-[0.98] [@media(hover:hover)]:hover:-translate-y-1 [@media(hover:hover)]:hover:border-primary/30 [@media(hover:hover)]:hover:bg-primary-soft [@media(hover:hover)]:hover:shadow-md"
                              onClick={() => chooseCliente(cliente)}
                            >
                              <p className="text-xl font-black text-foreground [@media(hover:hover)]:group-hover:text-primary">
                                {cliente.nombre}
                              </p>
                              <p className="mt-1 text-sm font-semibold text-muted-foreground">
                                {cliente.tarjeta} | NIT: {cliente.nit || "N/A"}
                              </p>
                            </button>
                          ))}
                        </div>
                      )}
                    </div>
                  )}
                </CardContent>
              </Card>
            </div>
          )}

          {step === 1 && (
            <div className="space-y-6">
              <Card>
                <CardHeader className="pb-3">
                  <CardTitle className="flex items-center gap-2 text-base">
                    <Car size={18} />
                    Vehículo
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  {selectedVehiculo ? (
                    <div className="rounded-3xl border-2 border-success bg-success-soft p-4 shadow-sm sm:p-6">
                      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
                        <div>
                          <p className="text-xs font-bold uppercase tracking-widest text-success">
                            Vehículo seleccionado
                          </p>
                          <p className="mt-2 text-2xl font-black uppercase text-foreground sm:text-3xl">
                            {selectedVehiculo.placa}
                          </p>
                          <p className="mt-1 text-base font-semibold text-success">
                            {selectedVehiculo.marca} {selectedVehiculo.modelo}
                            {selectedVehiculo.anio
                              ? ` (${selectedVehiculo.anio})`
                              : ""}
                          </p>
                        </div>
                        <Button
                          type="button"
                          variant="outline"
                          size="lg"
                          className="border-success/40 text-success [@media(hover:hover)]:hover:bg-success-soft"
                          onClick={() => {
                            setSelectedVehiculo(null);
                            clearNewVehiculoDraft();
                          }}
                        >
                          Cambiar vehículo
                        </Button>
                      </div>
                    </div>
                  ) : createNewVehiculo ? (
                    <div className="space-y-4 rounded-3xl border-2 border-border bg-surface p-4 shadow-sm sm:p-6">
                      <div className="flex items-center justify-between border-b border-border pb-4">
                        <h3 className="text-lg font-bold text-foreground">
                          Nuevo vehículo
                        </h3>
                        <Button
                          type="button"
                          variant="ghost"
                          className="rounded-2xl text-muted-foreground"
                          onClick={() => {
                            setCreateNewVehiculo(false);
                            clearNewVehiculoDraft();
                          }}
                        >
                          Cancelar
                        </Button>
                      </div>

                      <div className="pt-2">
                        <Label className="mb-2 text-sm font-bold text-foreground">
                          Placa *
                        </Label>
                        <Input
                          {...newVehiculoPlacaField}
                          onChange={(event) => {
                            event.target.value = normalizePlateInput(
                              event.target.value,
                            );
                            newVehiculoPlacaField?.onChange(event);
                          }}
                          placeholder="A123BCD"
                          className="h-14 rounded-2xl border-2 border-border bg-muted text-xl font-black uppercase tracking-wider text-foreground shadow-inner focus-visible:ring-primary sm:h-16 sm:text-2xl"
                        />
                      </div>

                      <div>
                        <div className="mb-2 flex items-center justify-between gap-3">
                          <Label className="text-sm font-bold text-foreground">
                            Tipo de vehículo *
                          </Label>
                          <Button
                            type="button"
                            variant="outline"
                            size="sm"
                            className="h-9 rounded-xl border-border px-3 text-sm font-bold"
                            disabled={createTipoVehiculoMutation.isPending}
                            onClick={() => {
                              setQuickTypeName("");
                              setShowQuickTypeForm((value) => !value);
                            }}
                          >
                            <Plus className="mr-1 h-4 w-4" />
                            Agregar tipo
                          </Button>
                        </div>
                        <Select
                          value={newVehiculoTipo ? String(newVehiculoTipo) : ""}
                          onValueChange={(value) => {
                            setValue("newVehiculo.tipoVehiculoId", Number(value), {
                              shouldValidate: true,
                            });
                            setValue("newVehiculo.marca", "");
                            setValue("newVehiculo.modelo", "");
                          }}
                        >
                          <SelectTrigger className="h-16 rounded-2xl border-2 border-border bg-surface px-5 text-lg font-semibold shadow-sm">
                            <SelectValue placeholder="Toca para elegir..." />
                          </SelectTrigger>
                          <SelectContent>
                            {tiposVehiculo?.map((tipo: any) => (
                              <SelectItem key={tipo.id} value={String(tipo.id)}>
                                {tipo.nombre}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                        {showQuickTypeForm && (
                          <div className="mt-3 rounded-2xl border border-primary/30 bg-primary-soft p-3">
                            <Label className="mb-2 text-sm font-bold text-primary">
                              Nuevo tipo de vehículo
                            </Label>
                            <div className="flex flex-col gap-2 sm:flex-row">
                              <Input
                                value={quickTypeName}
                                onChange={(e) =>
                                  setQuickTypeName(e.target.value.toUpperCase())
                                }
                                placeholder="Ej: PICKUP"
                                className="h-12 rounded-xl border-primary/30 bg-surface text-base font-bold uppercase"
                              />
                              <Button
                                type="button"
                                className="h-12 px-5"
                                disabled={createTipoVehiculoMutation.isPending}
                                onClick={() =>
                                  createTipoVehiculoMutation.mutate()
                                }
                              >
                                {createTipoVehiculoMutation.isPending ? (
                                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                                ) : (
                                  <Check className="mr-2 h-4 w-4" />
                                )}
                                Guardar
                              </Button>
                            </div>
                          </div>
                        )}
                      </div>

                      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
                        <div>
                          <div className="mb-2 flex items-center justify-between gap-3">
                            <Label className="text-sm font-bold text-foreground">
                              Marca *
                            </Label>
                            <Button
                              type="button"
                              variant="outline"
                              size="sm"
                              className="h-9 rounded-xl border-border px-3 text-sm font-bold"
                              disabled={
                                !selectedTipoVehiculoId ||
                                createMarcaMutation.isPending
                              }
                              onClick={() => {
                                setQuickBrandName("");
                                setShowQuickBrandForm((value) => !value);
                              }}
                            >
                              <Plus className="mr-1 h-4 w-4" />
                              Agregar marca
                            </Button>
                          </div>
                          <Select
                            value={newVehiculoMarca || ""}
                            disabled={!selectedTipoVehiculoId}
                            onValueChange={(value) => {
                              setValue("newVehiculo.marca", value, {
                                shouldValidate: true,
                              });
                              setValue("newVehiculo.modelo", "");
                            }}
                          >
                            <SelectTrigger className="h-16 rounded-2xl border-2 border-border bg-surface px-5 text-lg font-semibold shadow-sm disabled:opacity-50">
                              <SelectValue
                                placeholder={
                                  selectedTipoVehiculoId
                                    ? "Toca para elegir marca..."
                                    : "Falta tipo"
                                }
                              />
                            </SelectTrigger>
                            <SelectContent>
                              {marcaOptions.map((marca: any) => (
                                <SelectItem key={marca.id} value={marca.nombre}>
                                  {marca.nombre}
                                </SelectItem>
                              ))}
                            </SelectContent>
                          </Select>
                          {showQuickBrandForm && (
                            <div className="mt-3 rounded-2xl border border-primary/30 bg-primary-soft p-3">
                              <Label className="mb-2 text-sm font-bold text-primary">
                                Nueva marca
                              </Label>
                              <div className="flex flex-col gap-2 sm:flex-row">
                                <Input
                                  value={quickBrandName}
                                  onChange={(e) =>
                                    setQuickBrandName(
                                      e.target.value.toUpperCase(),
                                    )
                                  }
                                  placeholder="Ej: TOYOTA"
                                  className="h-12 rounded-xl border-primary/30 bg-surface text-base font-bold uppercase"
                                />
                                <Button
                                  type="button"
                                  className="h-12 px-5"
                                  disabled={createMarcaMutation.isPending}
                                  onClick={() => createMarcaMutation.mutate()}
                                >
                                  {createMarcaMutation.isPending ? (
                                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                                  ) : (
                                    <Check className="mr-2 h-4 w-4" />
                                  )}
                                  Guardar
                                </Button>
                              </div>
                            </div>
                          )}
                        </div>
                        <div>
                          <div className="mb-2 flex items-center justify-between gap-3">
                            <Label className="text-sm font-bold text-foreground">
                              Modelo *
                            </Label>
                            <Button
                              type="button"
                              variant="outline"
                              size="sm"
                              className="h-9 rounded-xl border-border px-3 text-sm font-bold"
                              disabled={
                                !newVehiculoMarca ||
                                createModeloMutation.isPending
                              }
                              onClick={() => {
                                setQuickModelName("");
                                setShowQuickModelForm((value) => !value);
                              }}
                            >
                              <Plus className="mr-1 h-4 w-4" />
                              Agregar modelo
                            </Button>
                          </div>
                          <Select
                            value={watch("newVehiculo.modelo") || ""}
                            disabled={!newVehiculoMarca}
                            onValueChange={(value) =>
                              setValue("newVehiculo.modelo", value, {
                                shouldValidate: true,
                              })
                            }
                          >
                            <SelectTrigger className="h-16 rounded-2xl border-2 border-border bg-surface px-5 text-lg font-semibold shadow-sm disabled:opacity-50">
                              <SelectValue
                                placeholder={
                                  newVehiculoMarca
                                    ? "Toca para elegir modelo..."
                                    : "Falta marca"
                                }
                              />
                            </SelectTrigger>
                            <SelectContent>
                              {modeloOptions.map((modelo: any) => (
                                <SelectItem key={modelo.id} value={modelo.nombre}>
                                  {modelo.nombre}
                                </SelectItem>
                              ))}
                            </SelectContent>
                          </Select>
                          {newVehiculoMarca &&
                            modeloOptions.length === 0 &&
                            !showQuickModelForm && (
                              <p className="mt-2 text-sm font-semibold text-warning">
                                No hay modelos para esta marca. Usa Agregar
                                modelo.
                              </p>
                            )}
                          {showQuickModelForm && (
                            <div className="mt-3 rounded-2xl border border-success/30 bg-success-soft p-3">
                              <Label className="mb-2 text-sm font-bold text-success">
                                Nuevo modelo
                              </Label>
                              <div className="flex flex-col gap-2 sm:flex-row">
                                <Input
                                  value={quickModelName}
                                  onChange={(e) =>
                                    setQuickModelName(
                                      e.target.value.toUpperCase(),
                                    )
                                  }
                                  placeholder="Ej: COROLLA"
                                  className="h-12 rounded-xl border-success/30 bg-surface text-base font-bold uppercase"
                                />
                                <Button
                                  type="button"
                                  className="h-12 px-5"
                                  disabled={createModeloMutation.isPending}
                                  onClick={() => createModeloMutation.mutate()}
                                >
                                  {createModeloMutation.isPending ? (
                                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                                  ) : (
                                    <Check className="mr-2 h-4 w-4" />
                                  )}
                                  Guardar
                                </Button>
                              </div>
                            </div>
                          )}
                        </div>
                      </div>

                      <div className="rounded-3xl border border-border bg-muted p-4">
                        <div className="mb-4 flex items-center gap-2">
                          <Car className="h-5 w-5 text-muted-foreground" />
                          <div>
                            <h4 className="text-base font-black text-foreground">
                              Datos técnicos opcionales
                            </h4>
                            <p className="text-sm font-medium text-muted-foreground">
                              Completa lo que tengas a mano; no bloquea la
                              recepción.
                            </p>
                          </div>
                        </div>
                        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
                          <div>
                            <Label className="mb-2 text-sm font-bold text-foreground">
                              Año
                            </Label>
                            <Input
                              type="number"
                              min={1900}
                              max={2100}
                              {...register("newVehiculo.anio")}
                              placeholder="Ej: 2020"
                              className="h-14 rounded-2xl border-2 border-border bg-surface text-base font-semibold"
                            />
                          </div>
                          <div>
                            <Label className="mb-2 text-sm font-bold text-foreground">
                              Color
                            </Label>
                            <Input
                              {...register("newVehiculo.color")}
                              placeholder="Ej: Blanco"
                              className="h-14 rounded-2xl border-2 border-border bg-surface text-base font-semibold"
                            />
                          </div>
                          <div>
                            <Label className="mb-2 text-sm font-bold text-foreground">
                              SERIE MOTOR
                            </Label>
                            <Input
                              {...register("newVehiculo.motor")}
                              placeholder="Número o descripción"
                              className="h-14 rounded-2xl border-2 border-border bg-surface text-base font-semibold"
                            />
                          </div>
                          <div>
                            <Label className="mb-2 text-sm font-bold text-foreground">
                              C.C.
                            </Label>
                            <Input
                              {...register("newVehiculo.cilindraje")}
                              placeholder="Ej: 1600 cc"
                              className="h-14 rounded-2xl border-2 border-border bg-surface text-base font-semibold"
                            />
                          </div>
                        </div>
                      </div>
                    </div>
                  ) : (
                    <div className="space-y-6">
                      <div className="relative">
                        <Search
                          className="absolute left-4 top-1/2 -translate-y-1/2 text-subtle-foreground"
                          size={24}
                        />
                        <Input
                          placeholder={
                            selectedCliente
                              ? "Buscar vehículo del cliente"
                              : "Buscar por placa"
                          }
                          value={vehiculoSearch}
                          onChange={(e) =>
                            setVehiculoSearch(
                              normalizePlateInput(e.target.value),
                            )
                          }
                          className="h-16 rounded-2xl border-2 border-border bg-muted pl-14 text-lg shadow-inner focus-visible:ring-primary"
                        />
                      </div>

                      {selectedCliente && (
                        <p className="text-base font-medium text-muted-foreground">
                          Vehículos de{" "}
                          <strong className="text-foreground">
                            {selectedCliente.nombre}
                          </strong>
                        </p>
                      )}

                      {loadingVehiculos && (
                        <div className="py-8 text-center text-lg font-semibold text-muted-foreground">
                          Cargando vehículos...
                        </div>
                      )}

                      {!loadingVehiculos &&
                        selectedCliente &&
                        vehiculos.length === 0 && (
                          <div className="rounded-3xl border-2 border-dashed border-border-strong bg-muted p-8 text-center text-lg font-medium text-muted-foreground">
                            Este cliente no tiene vehículos.
                          </div>
                        )}

                      {!loadingVehiculos &&
                        !selectedCliente &&
                        vehiculoSearch.length >= 2 &&
                        vehiculos.length === 0 && (
                          <div className="rounded-3xl border-2 border-dashed border-border-strong bg-muted p-8 text-center text-lg font-medium text-muted-foreground">
                            No se encontraron vehículos.
                          </div>
                        )}

                      {vehiculos.length > 0 && (
                        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
                          {vehiculos.slice(0, 9).map((vehiculo: any) => {
                            const lock = getVehicleLock(vehiculo);

                            return (
                              <button
                                key={vehiculo.id || vehiculo.localId}
                                type="button"
                                disabled={Boolean(lock)}
                                className={`group flex flex-col items-center justify-center rounded-3xl border-2 p-4 text-center transition-[transform,box-shadow,background-color,border-color] duration-150 ease-out active:scale-[0.98] sm:p-6 ${
                                  lock
                                    ? "cursor-not-allowed border-destructive/30 bg-destructive-soft text-destructive opacity-90"
                                    : "border-border bg-surface [@media(hover:hover)]:hover:-translate-y-1 [@media(hover:hover)]:hover:border-primary/30 [@media(hover:hover)]:hover:bg-primary-soft [@media(hover:hover)]:hover:shadow-md"
                                }`}
                                onClick={() => {
                                  if (lock) {
                                    return;
                                  }

                                  setSelectedVehiculo(vehiculo);
                                  setCreateNewVehiculo(false);
                                  clearNewVehiculoDraft();
                                  setVehiculoSearch("");
                                }}
                              >
                                {lock ? (
                                  <AlertTriangle className="mb-3 h-10 w-10 text-destructive" />
                                ) : (
                                  <Car className="mb-3 h-10 w-10 text-subtle-foreground [@media(hover:hover)]:group-hover:text-primary/70" />
                                )}
                                <p
                                  className={`text-xl font-black uppercase tracking-wider sm:text-2xl ${lock ? "text-destructive" : "text-foreground [@media(hover:hover)]:group-hover:text-primary"}`}
                                >
                                  {vehiculo.placa}
                                </p>
                                <p
                                  className={`mt-1 text-sm font-semibold ${lock ? "text-destructive" : "text-muted-foreground"}`}
                                >
                                  {vehiculo.marca} {vehiculo.modelo}
                                </p>
                                {lock ? (
                                  <p className="mt-3 rounded-full bg-destructive-soft px-3 py-1 text-xs font-black uppercase tracking-wider text-destructive">
                                    Bloqueado | {lock.numeroOt}
                                  </p>
                                ) : null}
                              </button>
                            );
                          })}
                        </div>
                      )}

                      <Button
                        type="button"
                        variant="outline"
                        className="h-16 w-full rounded-2xl border-2 border-primary bg-primary-soft text-lg font-bold text-primary disabled:opacity-50"
                        onClick={() => {
                          const searchedPlate = normalizePlateInput(
                            vehiculoSearch,
                          ).trim();
                          setCreateNewVehiculo(true);
                          setSelectedVehiculo(null);
                          clearNewVehiculoDraft();
                          if (searchedPlate) {
                            setValue("newVehiculo.placa", searchedPlate, {
                              shouldDirty: true,
                              shouldValidate: true,
                            });
                          }
                        }}
                      >
                        <Plus size={24} className="mr-2" />
                        Nuevo vehículo
                      </Button>
                    </div>
                  )}
                </CardContent>
              </Card>
            </div>
          )}

          {step === 3 && (
            <div className="space-y-6">
              <div className="rounded-3xl border-2 border-border bg-surface p-4 shadow-sm sm:p-6">
                <h3 className="mb-4 flex items-center gap-3 text-xl font-bold text-foreground">
                  <Calendar className="text-success" size={28} />
                  Fecha de entrada
                </h3>
                <Input
                  type="datetime-local"
                  {...register("fechaEntrada")}
                  className="h-16 rounded-2xl border-2 border-border bg-muted px-5 text-lg font-bold text-foreground shadow-inner focus-visible:ring-primary"
                />
                <p className="mt-2 text-sm font-medium text-muted-foreground">
                  Ajusta la fecha si la recepción se registró después de recibir
                  el vehículo.
                </p>
              </div>

              <div className="rounded-3xl border-2 border-border bg-surface p-4 shadow-sm sm:p-6">
                <h3 className="mb-4 flex items-center gap-3 text-xl font-bold text-foreground">
                  <Gauge className="text-primary" size={28} />
                  Kilometraje actual
                </h3>
                <div className="relative">
                  <Input
                    type="number"
                    {...register("km", { valueAsNumber: true })}
                    placeholder="Ej: 45000"
                    className="h-20 w-full rounded-2xl border-2 border-border bg-muted text-center text-3xl font-black text-foreground shadow-inner focus-visible:ring-primary sm:h-24 sm:text-4xl"
                  />
                  <span className="absolute bottom-4 right-5 text-xl font-bold text-subtle-foreground sm:right-6 sm:text-2xl">
                    km
                  </span>
                </div>
              </div>

              {flags.usaMecanicos ? (
              <div className="rounded-3xl border-2 border-border bg-surface p-4 shadow-sm sm:p-6">
                <h3 className="mb-4 flex items-center gap-3 text-xl font-bold text-foreground">
                  <Wrench className="text-success" size={28} />
                  Mecánico asignado
                </h3>
                <Select
                  value={watch("mecanicoId") ? String(watch("mecanicoId")) : "pendiente"}
                  onValueChange={(value) =>
                    setValue("mecanicoId", value === "pendiente" ? undefined : Number(value))
                  }
                >
                  <SelectTrigger className="h-16 rounded-2xl border-2 border-border bg-surface px-5 text-lg font-semibold shadow-sm">
                    <SelectValue placeholder="Pendiente de asignar" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="pendiente">Pendiente de asignar</SelectItem>
                    {mecanicos.map((mecanico: any) => (
                      <SelectItem key={mecanico.id} value={String(mecanico.id)}>
                        {mecanico.nombre}
                        {mecanico.especialidad ? ` - ${mecanico.especialidad}` : ""}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
                <p className="mt-2 text-sm font-medium text-muted-foreground">
                  Puedes dejarlo pendiente y asignarlo después desde Editar OT.
                </p>
              </div>
              ) : null}

              <div className="rounded-3xl border-2 border-border bg-surface p-4 shadow-sm sm:p-6">
                <div className="mb-4 flex items-center justify-between">
                  <h3 className="flex items-center gap-3 text-xl font-bold text-foreground">
                    <Fuel className="text-amber-500" size={28} />
                    Nivel de Gasolina
                  </h3>
                  <span className="rounded-full bg-muted px-4 py-1 text-lg font-black text-foreground">
                    {watch("nivelGasolina")}%
                  </span>
                </div>

                <div className="grid grid-cols-2 gap-2 sm:grid-cols-5">
                  {[
                    {
                      value: 0,
                      label: "Vacío",
                      color: "bg-red-500",
                      active: "ring-red-500",
                    },
                    {
                      value: 25,
                      label: "1/4",
                      color: "bg-orange-500",
                      active: "ring-orange-500",
                    },
                    {
                      value: 50,
                      label: "1/2",
                      color: "bg-amber-400",
                      active: "ring-amber-400",
                    },
                    {
                      value: 75,
                      label: "3/4",
                      color: "bg-lime-500",
                      active: "ring-lime-500",
                    },
                    {
                      value: 100,
                      label: "Lleno",
                      color: "bg-emerald-500",
                      active: "ring-emerald-500",
                    },
                  ].map((level) => {
                    const current = watch("nivelGasolina") || 0;
                    const isActive =
                      current === level.value ||
                      (level.value === 0 && current < 25 && current > 0);

                    return (
                      <button
                        key={level.value}
                        type="button"
                        onClick={() =>
                          setValue("nivelGasolina", level.value, {
                            shouldValidate: true,
                          })
                        }
                        className={`flex h-16 flex-col items-center justify-center rounded-2xl border-2 transition-[background-color,box-shadow,transform] duration-150 ease-out active:scale-[0.98] sm:h-20 ${
                          isActive
                            ? `border-transparent ${level.color} text-white shadow-lg ring-4 ring-offset-2 ${level.active}`
                            : "border-border bg-muted text-muted-foreground [@media(hover:hover)]:hover:bg-muted"
                        }`}
                      >
                        <span className="text-lg font-black sm:text-xl">
                          {level.label}
                        </span>
                      </button>
                    );
                  })}
                </div>
              </div>

              {flags.usaCosasTrae ? (
              <div className="rounded-3xl border-2 border-border bg-surface p-4 shadow-sm sm:p-6">
                <h3 className="mb-4 flex items-center gap-3 text-xl font-bold text-foreground">
                  <ClipboardList className="text-muted-foreground" size={28} />
                  Accesorios
                </h3>
                <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3">
                  {cosasTrae?.map((cosa: any) => {
                    const isSelected = selectedCosasTrae.includes(cosa.id);
                    return (
                      <button
                        key={cosa.id}
                        type="button"
                        onClick={() => toggleCosaTrae(cosa.id)}
                        className={`flex min-h-[5rem] items-center gap-3 rounded-2xl border-2 p-4 text-left transition-[background-color,border-color,transform] duration-150 ease-out active:scale-[0.98] ${
                          isSelected
                            ? "border-primary bg-muted text-foreground shadow-sm"
                            : "border-border bg-surface [@media(hover:hover)]:hover:border-border-strong [@media(hover:hover)]:hover:bg-muted"
                        }`}
                      >
                        <div
                          className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-full transition-colors duration-150 ease-out ${isSelected ? "bg-primary text-primary-foreground" : "bg-border"}`}
                        >
                          {isSelected && <Check strokeWidth={3} size={18} />}
                        </div>
                        <span
                          className={`text-lg font-bold leading-tight ${isSelected ? "text-foreground" : "text-muted-foreground"}`}
                        >
                          {cosa.nombre}
                        </span>
                      </button>
                    );
                  })}
                </div>
              </div>
              ) : null}
            </div>
          )}

          {step === 4 && (
            <div className="space-y-6">
              <div className="rounded-3xl border-2 border-border bg-surface p-4 shadow-sm sm:p-6">
                <h3 className="mb-4 text-xl font-bold text-foreground">
                  Solicitud del cliente
                </h3>
                <textarea
                  {...register("requerimientoCliente")}
                  placeholder="Qué pide el cliente"
                  rows={4}
                  className="w-full resize-none rounded-2xl border-2 border-border bg-muted p-5 text-lg shadow-inner focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
                />
              </div>

              <div className="rounded-3xl border-2 border-border bg-surface p-4 shadow-sm sm:p-6">
                <h3 className="mb-4 text-xl font-bold text-foreground">
                  Observaciones
                </h3>
                <textarea
                  {...register("observaciones")}
                  placeholder="Ej: Trae golpe en puerta derecha, llanta de repuesto desgastada..."
                  rows={3}
                  className="w-full resize-none rounded-2xl border-2 border-border bg-muted p-5 text-lg shadow-inner focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
                />
              </div>
            </div>
          )}
          {step === 5 && (
            <div className="space-y-6">
              <div className="rounded-3xl border-2 border-success bg-success-soft p-4 shadow-sm sm:p-6">
                <h3 className="mb-4 text-xl font-black text-foreground">
                  Revisar y guardar
                </h3>
                <div className="grid gap-3 text-lg">
                  <div className="flex justify-between border-b border-success/20 pb-2">
                    <span className="font-semibold text-success">
                      Cliente:
                    </span>
                    <span className="font-black text-foreground">
                      {selectedCliente?.nombre || "-"}
                    </span>
                  </div>
                  <div className="flex justify-between border-b border-success/20 pb-2">
                    <span className="font-semibold text-success">
                      Vehículo:
                    </span>
                    <span className="font-black uppercase text-foreground">
                      {selectedVehiculo?.placa ||
                        watch("newVehiculo.placa") ||
                        "-"}
                    </span>
                  </div>
                  <div className="flex justify-between border-b border-success/20 pb-2">
                    <span className="font-semibold text-success">
                      Entrada:
                    </span>
                    <span className="font-black text-foreground">
                      {currentFechaEntrada
                        ? new Date(currentFechaEntrada).toLocaleString()
                        : "-"}
                    </span>
                  </div>
                  <div className="flex justify-between border-b border-success/20 pb-2">
                    <span className="font-semibold text-success">
                      Kilometraje:
                    </span>
                    <span className="font-black text-foreground">
                      {(watch("km") || 0).toLocaleString()} km
                    </span>
                  </div>
                  <div className="flex justify-between border-b border-success/20 pb-2">
                    <span className="font-semibold text-success">
                      Gasolina:
                    </span>
                    <span className="font-black text-foreground">
                      {watch("nivelGasolina")}%
                    </span>
                  </div>
                  {flags.usaMecanicos ? (
                    <div className="flex justify-between border-b border-success/20 pb-2">
                      <span className="font-semibold text-success">
                        Mecánico:
                      </span>
                      <span className="font-black text-foreground">
                        {mecanicos.find(
                          (item: any) => Number(item.id) === Number(watch("mecanicoId")),
                        )?.nombre || "Pendiente"}
                      </span>
                    </div>
                  ) : null}
                  {flags.usaCosasTrae ? (
                    <div className="flex justify-between">
                      <span className="font-semibold text-success">
                        Accesorios marcados:
                      </span>
                      <span className="font-black text-foreground">
                        {selectedCosasTrae.length} ítems
                      </span>
                    </div>
                  ) : null}
                </div>
              </div>
            </div>
          )}

          {/*
            bottom-[var(--bottom-nav-height)] despeja la barra de navegación móvil real
            (incluida el área segura de iOS) en vez de un 4rem fijo que queda corto en
            celulares con notch. El nav de abajo desaparece en `lg` (dashboard-shell.tsx),
            así que este footer vuelve a bottom-0 en el mismo punto — antes lo hacía hasta
            `2xl`, dejando un hueco vacío de 4rem en tablets/laptops de 1024-1536px.
          */}
          <div className="fixed bottom-[var(--bottom-nav-height)] left-0 right-0 z-50 border-t-2 border-border bg-surface p-3 pb-4 backdrop-blur-md lg:bottom-0 sm:p-4 sm:pb-6">
            <div className="mx-auto flex max-w-4xl gap-4">
              {step > 1 && (
                <Button
                  type="button"
                  variant="outline"
                  className="h-14 w-1/3 rounded-2xl border-2 border-border-strong text-base font-bold text-foreground sm:h-16 sm:text-lg"
                  onClick={() => setStep(step - 1)}
                >
                  <ArrowLeft className="mr-2" size={24} /> Atrás
                </Button>
              )}

              {step < 5 ? (
                <Button
                  type="button"
                  className="h-14 flex-1 text-base active:scale-[0.98] sm:h-16"
                  onClick={goToNextStep}
                >
                  Siguiente
                </Button>
              ) : (
                <Button
                  type="submit"
                  className="h-14 flex-1 text-base active:scale-[0.98] sm:h-16"
                  disabled={isSubmitting}
                >
                  {isSubmitting ? (
                    <>
                      <Loader2 className="mr-3 h-6 w-6 animate-spin" />
                      Guardando...
                    </>
                  ) : (
                    <>
                      <Save className="mr-3" size={24} />
                      Guardar recepción
                    </>
                  )}
                </Button>
              )}
            </div>
          </div>
        </form>
      </main>
    </div>
  );
}