"use client";

import { useConfirm } from "@/components/confirm-provider";
import {
  DashboardEmptyState,
  DashboardListRow,
  DashboardPageIntro,
  DashboardSection,
  DashboardToolbar,
} from "@/components/dashboard-page";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { ErrorState } from "@/components/ui/error-state";
import { Input } from "@/components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { SkeletonListRow } from "@/components/ui/skeleton";
import { useFlagsConfiguracion } from "@/hooks/use-flags-configuracion";
import { useToast } from "@/hooks/use-toast";
import { catalogosApi } from "@/lib/api";
import {
  type CatalogType,
  createCatalogWithOffline,
  fetchCatalogWithCache,
  getPendingCatalogIds,
  inactivateCatalogWithOffline,
  updateCatalogWithOffline,
} from "@/lib/catalogos-offline";
import { cn } from "@/lib/utils";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import {
  BookOpen,
  Car,
  ClipboardList,
  Edit3,
  Loader2,
  MoreVertical,
  Package,
  Plus,
  Search,
  Settings,
  ShieldAlert,
  Wrench,
} from "lucide-react";
import { useRouter, useSearchParams } from "next/navigation";
import type { ReactNode } from "react";
import { useMemo, useState } from "react";

type AreaId = "recepcion" | "vehicular";
type BasicPanelId = "cosas-trae" | "tipos-dano" | "tipos-vehiculo";
type VehicularPanelId = "marca" | "modelo" | "motor" | "cilindraje";
type PanelId = BasicPanelId | VehicularPanelId;

type BasicFormValues = {
  nombre: string;
  descripcion?: string;
  plantillaDanos?: string;
  icono?: string;
  color?: string;
};

type OfflineCatalogConfig = {
  panelId: BasicPanelId;
  title: string;
  singular: string;
  description: string;
  catalogType: CatalogType;
  queryKey: string[];
  fetchFn: () => Promise<any[]>;
  fetchInactiveFn: () => Promise<any[]>;
  createFn: (data: any) => Promise<any>;
  updateFn: (id: number, data: any) => Promise<any>;
  inactivateFn: (id: number) => Promise<any>;
  activateFn: (id: number) => Promise<any>;
  defaultValues: () => BasicFormValues;
  toPayload: (values: BasicFormValues) => any;
  toFormValues: (item: any) => BasicFormValues;
  tone: string;
};

const areaOptions: Array<{ id: AreaId; label: string; description: string }> = [
  {
    id: "recepcion",
    label: "Recepción",
    description: "Lo que acompaña al vehículo y cómo se documenta el daño.",
  },
  {
    id: "vehicular",
    label: "Ficha vehicular",
    description:
      "La cadena técnica para registrar marca, modelo, motor y cilindraje.",
  },
];

const panelMeta: Record<
  PanelId,
  { area: AreaId; title: string; description: string; icon: any; hint: string }
> = {
  "cosas-trae": {
    area: "recepcion",
    title: "Cosas que trae",
    description: "Accesorios u objetos que ingresan con el vehículo.",
    icon: ClipboardList,
    hint: "Recepción",
  },
  "tipos-dano": {
    area: "recepcion",
    title: "Tipos de daño",
    description: "Clasifica daños para recepción, fotos y diagnóstico.",
    icon: ShieldAlert,
    hint: "Recepción",
  },
  "tipos-vehiculo": {
    area: "vehicular",
    title: "Tipos de vehículo",
    description: "Base para separar sedán, pickup, moto, camión y más.",
    icon: Car,
    hint: "Vehicular",
  },
  marca: {
    area: "vehicular",
    title: "Marcas",
    description: "Marca el primer paso de la cadena técnica.",
    icon: BookOpen,
    hint: "Vehicular",
  },
  modelo: {
    area: "vehicular",
    title: "Modelos",
    description: "Relaciona modelos por marca y tipo de vehículo.",
    icon: BookOpen,
    hint: "Vehicular",
  },
  motor: {
    area: "vehicular",
    title: "Motores",
    description: "Completa la ficha técnica para OTs y cotización.",
    icon: Wrench,
    hint: "Vehicular",
  },
  cilindraje: {
    area: "vehicular",
    title: "Cilindrajes",
    description: "Último filtro técnico antes de registrar un vehículo.",
    icon: Settings,
    hint: "Vehicular",
  },
};

const areaPanels: Record<AreaId, PanelId[]> = {
  recepcion: ["cosas-trae", "tipos-dano"],
  vehicular: ["tipos-vehiculo", "marca", "modelo", "motor", "cilindraje"],
};

const basicCatalogConfigs: Record<BasicPanelId, OfflineCatalogConfig> = {
  "cosas-trae": {
    panelId: "cosas-trae",
    title: "Cosas que trae",
    singular: "ítem",
    description:
      "Úsalo para dejar listo lo que recepción puede marcar en segundos al ingresar el vehículo.",
    catalogType: "cosa_trae",
    queryKey: ["catalogos", "cosas-trae"],
    fetchFn: catalogosApi.cosasTrae,
    fetchInactiveFn: () => catalogosApi.cosasTrae({ activo: false }),
    createFn: catalogosApi.createCosaTrae,
    updateFn: catalogosApi.updateCosaTrae,
    inactivateFn: catalogosApi.inactivateCosaTrae,
    activateFn: catalogosApi.activateCosaTrae,
    defaultValues: () => ({ nombre: "", descripcion: "" }),
    toPayload: (values) => ({
      nombre: values.nombre.trim(),
      descripcion: values.descripcion?.trim() || undefined,
    }),
    toFormValues: (item) => ({
      nombre: item.nombre || "",
      descripcion: item.descripcion || "",
    }),
    tone: "border-primary/30 bg-primary-soft text-primary",
  },
  "tipos-dano": {
    panelId: "tipos-dano",
    title: "Tipos de daño",
    singular: "tipo",
    description:
      "Sirve para hablar el mismo idioma entre recepción, diagnóstico y aprobación del cliente.",
    catalogType: "tipo_dano",
    queryKey: ["catalogos", "tipos-dano"],
    fetchFn: catalogosApi.tiposDano,
    fetchInactiveFn: () => catalogosApi.tiposDano({ activo: false }),
    createFn: catalogosApi.createTipoDano,
    updateFn: catalogosApi.updateTipoDano,
    inactivateFn: catalogosApi.inactivateTipoDano,
    activateFn: catalogosApi.activateTipoDano,
    defaultValues: () => ({ nombre: "", icono: "", color: "#ef4444" }),
    toPayload: (values) => ({
      nombre: values.nombre.trim(),
      icono: values.icono?.trim() || undefined,
      color: normalizeHexColor(values.color),
    }),
    toFormValues: (item) => ({
      nombre: item.nombre || "",
      icono: item.icono || "",
      color: item.color || "#ef4444",
    }),
    tone: "border-destructive/30 bg-destructive-soft text-destructive",
  },
  "tipos-vehiculo": {
    panelId: "tipos-vehiculo",
    title: "Tipos de vehículo",
    singular: "tipo",
    description:
      "Ordena el parque vehicular para que el registro técnico no obligue a escribir de más.",
    catalogType: "tipo_vehiculo",
    queryKey: ["catalogos", "tipos-vehiculo"],
    fetchFn: catalogosApi.tiposVehiculo,
    fetchInactiveFn: () => catalogosApi.tiposVehiculo({ activo: false }),
    createFn: catalogosApi.createTipoVehiculo,
    updateFn: catalogosApi.updateTipoVehiculo,
    inactivateFn: catalogosApi.inactivateTipoVehiculo,
    activateFn: catalogosApi.activateTipoVehiculo,
    defaultValues: () => ({
      nombre: "",
      descripcion: "",
      plantillaDanos: "carro",
    }),
    toPayload: (values) => ({
      nombre: values.nombre.trim(),
      descripcion: values.descripcion?.trim() || undefined,
      plantillaDanos: values.plantillaDanos?.trim() || "carro",
    }),
    toFormValues: (item) => ({
      nombre: item.nombre || "",
      descripcion: item.descripcion || "",
      plantillaDanos: item.plantillaDanos || "carro",
    }),
    tone: "border-warning/30 bg-warning-soft text-warning",
  },
};

function normalizeHexColor(color?: string) {
  return /^#[0-9a-fA-F]{6}$/.test(color || "") ? (color as string) : "#ef4444";
}

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

function getInitialArea(
  searchParams: ReturnType<typeof useSearchParams>,
): AreaId {
  return searchParams.get("area") === "vehicular" ? "vehicular" : "recepcion";
}

function getInitialPanel(
  searchParams: ReturnType<typeof useSearchParams>,
  area: AreaId,
): PanelId {
  const raw = searchParams.get("panel") as PanelId | null;
  if (raw && areaPanels[area].includes(raw)) {
    return raw;
  }
  return areaPanels[area][0];
}

function useOfflineCatalogManager(config: OfflineCatalogConfig, habilitado = true) {
  const { toast } = useToast();
  const queryClient = useQueryClient();
  const [form, setForm] = useState<BasicFormValues>(config.defaultValues());
  const [editingItem, setEditingItem] = useState<any | null>(null);
  const [query, setQuery] = useState("");

  const {
    data: items = [],
    isLoading,
    isError,
    refetch,
  } = useQuery({
    queryKey: config.queryKey,
    queryFn: () => fetchCatalogWithCache(config.catalogType, config.fetchFn),
    enabled: habilitado,
  });

  const { data: inactiveItems = [] } = useQuery({
    queryKey: [...config.queryKey, "inactivos"],
    queryFn: config.fetchInactiveFn,
    enabled: habilitado && (typeof navigator === "undefined" || navigator.onLine),
  });

  const { data: pendingIds = [] } = useQuery({
    queryKey: ["catalogos", "pending", config.catalogType],
    queryFn: () => getPendingCatalogIds(config.catalogType),
    refetchInterval: 3000,
  });

  const saveMutation = useMutation({
    mutationFn: async (values: BasicFormValues) => {
      const payload = config.toPayload(values);
      if (editingItem) {
        return updateCatalogWithOffline(
          config.catalogType,
          editingItem.id,
          payload,
          config.updateFn,
        );
      }
      return createCatalogWithOffline(
        config.catalogType,
        payload,
        config.createFn,
      );
    },
    onSuccess: (result: any) => {
      queryClient.invalidateQueries({ queryKey: config.queryKey });
      queryClient.invalidateQueries({
        queryKey: [...config.queryKey, "inactivos"],
      });
      queryClient.invalidateQueries({
        queryKey: ["catalogos", "pending", config.catalogType],
      });
      if (result?.offlineQueued) {
        toast({
          title: "Guardado sin conexión",
          description: "Se sincronizará al volver la conexión.",
        });
      } else {
        toast({
          title: editingItem
            ? "Actualizado correctamente"
            : "Creado correctamente",
        });
      }
      setEditingItem(null);
      setForm(config.defaultValues());
    },
    onError: (error: any) => {
      toast({
        variant: "destructive",
        title: "Error",
        description: error?.message || "No se pudo guardar el cambio.",
      });
    },
  });

  const inactivateMutation = useMutation({
    mutationFn: (id: number) =>
      inactivateCatalogWithOffline(config.catalogType, id, config.inactivateFn),
    onSuccess: (result: any) => {
      queryClient.invalidateQueries({ queryKey: config.queryKey });
      queryClient.invalidateQueries({
        queryKey: ["catalogos", "pending", config.catalogType],
      });
      if (result?.offlineQueued) {
        toast({
          title: "Pendiente de sincronización",
          description: "Se dará de baja en cuanto vuelva la conexión.",
        });
      } else {
        toast({ title: "Registro inactivado" });
      }
    },
    onError: (error: any) => {
      toast({
        variant: "destructive",
        title: "Error",
        description: error?.message || "No se pudo inactivar el registro.",
      });
    },
  });

  const activateMutation = useMutation({
    mutationFn: (id: number) => config.activateFn(id),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: config.queryKey });
      queryClient.invalidateQueries({
        queryKey: [...config.queryKey, "inactivos"],
      });
      toast({ title: "Registro activado" });
    },
    onError: (error: any) => {
      toast({
        variant: "destructive",
        title: "Error",
        description: error?.message || "No se pudo activar el registro.",
      });
    },
  });

  const filteredItems = useMemo(() => {
    const normalized = query.trim().toLowerCase();
    if (!normalized) return items;
    return items.filter((item: any) =>
      [item.nombre, item.descripcion, item.plantillaDanos, item.icono]
        .filter(Boolean)
        .some((value) => String(value).toLowerCase().includes(normalized)),
    );
  }, [items, query]);

  const startEdit = (item: any) => {
    setEditingItem(item);
    setForm(config.toFormValues(item));
  };

  const cancelEdit = () => {
    setEditingItem(null);
    setForm(config.defaultValues());
  };

  return {
    config,
    form,
    setForm,
    editingItem,
    isLoading,
    isError,
    refetch,
    items,
    inactiveItems,
    filteredItems,
    pendingIds,
    query,
    setQuery,
    saveMutation,
    inactivateMutation,
    activateMutation,
    startEdit,
    cancelEdit,
  };
}

function CatalogSelectorCard({
  panelId,
  active,
  count,
  onSelect,
}: {
  panelId: PanelId;
  active: boolean;
  count?: number;
  onSelect: () => void;
}) {
  const meta = panelMeta[panelId];
  const Icon = meta.icon;

  return (
    <button
      type="button"
      onClick={onSelect}
      className={cn(
        "rounded-xl border p-4 text-left transition-[background-color,border-color,color,transform] duration-150 ease-out active:scale-[0.98]",
        active
          ? "border-border-strong bg-foreground text-background shadow-sm"
          : "border-border bg-surface [@media(hover:hover)]:hover:border-border-strong [@media(hover:hover)]:hover:bg-muted",
      )}
    >
      <div className="flex items-start justify-between gap-3">
        <span
          className={cn(
            "flex h-11 w-11 items-center justify-center rounded-md border",
            active
              ? "border-border-strong bg-foreground text-background"
              : "border-border bg-muted text-foreground",
          )}
        >
          <Icon className="h-5 w-5" />
        </span>
        {typeof count === "number" ? (
          <Badge
            variant="neutral"
            className={cn(active && "bg-foreground/90 text-background")}
          >
            {count}
          </Badge>
        ) : null}
      </div>
      <div className="mt-4">
        <div
          className={cn(
            "text-sm font-semibold",
            active ? "text-background" : "text-foreground",
          )}
        >
          {meta.title}
        </div>
        <div
          className={cn(
            "mt-2 text-sm leading-6",
            active ? "text-subtle-foreground" : "text-muted-foreground",
          )}
        >
          {meta.description}
        </div>
      </div>
    </button>
  );
}

function FieldLabel({ children }: { children: ReactNode }) {
  return (
    <label className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
      {children}
    </label>
  );
}

// Numera el paso antes de la etiqueta -- pensado para alguien que nunca usó
// un sistema asi: sin esto, un select "gris"/deshabilitado no explica POR
// QUE esta deshabilitado ni que hay que hacer primero. El numero hace
// visible el orden (1, 2, 3...) en vez de dejarlo implicito en el diseño.
function StepFieldLabel({ step, children }: { step: number; children: ReactNode }) {
  return (
    <div className="flex items-center gap-2">
      <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-foreground text-[11px] font-bold text-background">
        {step}
      </span>
      <FieldLabel>{children}</FieldLabel>
    </div>
  );
}

function SimpleCatalogWorkspace({
  manager,
}: {
  manager: ReturnType<typeof useOfflineCatalogManager>;
}) {
  const {
    config,
    form,
    setForm,
    editingItem,
    isLoading,
    isError,
    refetch,
    filteredItems,
    inactiveItems,
    pendingIds,
    query,
    setQuery,
    saveMutation,
    inactivateMutation,
    activateMutation,
    startEdit,
    cancelEdit,
  } = manager;

  const confirm = useConfirm();

  // El formulario de alta arrancaba siempre visible, ocupando un tercio de
  // la pantalla aunque solo se quisiera revisar el listado -- sin ningun
  // boton "Nuevo" a la vista, distinto del resto del sistema (clientes,
  // vehiculos, productos). Ahora se comporta igual: arranca oculto y un
  // boton lo abre o lo cierra; al editar un registro existente se abre solo.
  const [showForm, setShowForm] = useState(false);
  const formVisible = showForm || Boolean(editingItem);

  const closeForm = () => {
    cancelEdit();
    setShowForm(false);
  };

  const canSave = form.nombre?.trim().length > 0;
  const hasSearch = query.trim().length > 0;

  return (
    <div className={cn("grid gap-4", formVisible && "xl:grid-cols-[340px,minmax(0,1fr)]")}>
      {formVisible ? (
      <Card className="bg-muted/70">
        <CardContent className="space-y-4 p-5">
          <span
            className={cn(
              "inline-flex rounded-full border px-3 py-1 text-[11px] font-semibold uppercase tracking-wider",
              config.tone,
            )}
          >
            {editingItem ? "Editando" : "Nuevo registro"}
          </span>

          <div className="space-y-3">
            <div className="space-y-2">
              <FieldLabel>Nombre</FieldLabel>
              <Input
                value={form.nombre || ""}
                onChange={(event) =>
                  setForm((current) => ({
                    ...current,
                    nombre: event.target.value,
                  }))
                }
                placeholder={`Nombre del ${config.singular}`}
                className="h-11"
              />
            </div>

            {"descripcion" in form ? (
              <div className="space-y-2">
                <FieldLabel>Descripción</FieldLabel>
                <Input
                  value={form.descripcion || ""}
                  onChange={(event) =>
                    setForm((current) => ({
                      ...current,
                      descripcion: event.target.value,
                    }))
                  }
                  placeholder="Detalle opcional"
                  className="h-11"
                />
              </div>
            ) : null}

            {"plantillaDanos" in form ? (
              <div className="space-y-2">
                <FieldLabel>Plantilla de daños</FieldLabel>
                <Input
                  value={form.plantillaDanos || ""}
                  onChange={(event) =>
                    setForm((current) => ({
                      ...current,
                      plantillaDanos: event.target.value,
                    }))
                  }
                  placeholder="carro | moto | camión"
                  className="h-11"
                />
              </div>
            ) : null}

            {"icono" in form ? (
              <div className="space-y-2">
                <FieldLabel>Ícono</FieldLabel>
                <Input
                  value={form.icono || ""}
                  onChange={(event) =>
                    setForm((current) => ({
                      ...current,
                      icono: event.target.value,
                    }))
                  }
                  placeholder="Ej. golpe"
                  className="h-11"
                />
              </div>
            ) : null}

            {"color" in form ? (
              <div className="space-y-2">
                <FieldLabel>Color</FieldLabel>
                <div className="flex items-center gap-3">
                  <input
                    type="color"
                    value={normalizeHexColor(form.color)}
                    onChange={(event) =>
                      setForm((current) => ({
                        ...current,
                        color: event.target.value,
                      }))
                    }
                    className="h-11 w-14 cursor-pointer rounded-md border border-border bg-surface p-1"
                    aria-label="Seleccionar color"
                  />
                  <Input
                    value={form.color || ""}
                    onChange={(event) =>
                      setForm((current) => ({
                        ...current,
                        color: event.target.value,
                      }))
                    }
                    placeholder="#ef4444"
                    className="h-11"
                  />
                </div>
              </div>
            ) : null}
          </div>

          <div className="flex flex-wrap gap-2 pt-2">
            <Button
              onClick={() =>
                saveMutation.mutate(form, {
                  onSuccess: () => {
                    if (!editingItem) setShowForm(false);
                  },
                })
              }
              disabled={!canSave || saveMutation.isPending}
            >
              {saveMutation.isPending ? (
                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
              ) : (
                <Plus className="mr-2 h-4 w-4" />
              )}
              {editingItem ? "Guardar cambios" : "Crear"}
            </Button>
            <Button variant="outline" onClick={closeForm}>
              {editingItem ? "Cancelar edición" : "Cancelar"}
            </Button>
          </div>
        </CardContent>
      </Card>
      ) : null}

      <Card>
        <CardContent className="space-y-4 p-5">
          <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
            <div>
              <h3 className="text-base font-semibold text-foreground">
                Listado activo
              </h3>
              <p className="mt-1 text-sm text-muted-foreground">
                Todo se administra desde esta misma pantalla.
              </p>
            </div>
            {!formVisible ? (
              <Button
                className="w-full sm:w-auto"
                onClick={() => setShowForm(true)}
              >
                <Plus className="mr-2 h-4 w-4" />
                Nuevo registro
              </Button>
            ) : null}
          </div>

          <DashboardToolbar
            searchValue={query}
            onSearchChange={setQuery}
            searchPlaceholder="Filtrar registros"
          />

          {isLoading ? (
            <div className="overflow-hidden rounded-md border border-border">
              {Array.from({ length: 4 }).map((_, index) => (
                <SkeletonListRow key={index} />
              ))}
            </div>
          ) : isError ? (
            <ErrorState
              onRetry={() => refetch()}
              description="No se pudo cargar el listado guardado en este dispositivo."
            />
          ) : filteredItems.length === 0 ? (
            <DashboardEmptyState
              title={hasSearch ? "Sin resultados" : "Todavía no hay registros"}
              description={
                hasSearch
                  ? "Ningún registro coincide con tu búsqueda. Prueba con otro nombre."
                  : "Cuando agregues elementos aquí, recepción y el resto del flujo los reutilizarán de inmediato."
              }
              icon={hasSearch ? Search : Package}
            />
          ) : (
            <div className="overflow-hidden rounded-md border border-border">
              {filteredItems.map((item: any) => {
                const isPending = pendingIds.includes(item.id);
                const metaParts = [
                  item.descripcion,
                  "plantillaDanos" in item && item.plantillaDanos
                    ? `Plantilla: ${item.plantillaDanos}`
                    : null,
                  "icono" in item && item.icono ? `Ícono: ${item.icono}` : null,
                ].filter(Boolean);

                return (
                  <DashboardListRow
                    key={item.id}
                    icon={
                      "color" in item ? (
                        <span
                          className="h-3 w-3 rounded-full"
                          style={{ backgroundColor: item.color || "#ef4444" }}
                        />
                      ) : (
                        <Package className="h-4 w-4" />
                      )
                    }
                    title={
                      <span className="flex min-w-0 items-center gap-2">
                        <span className="truncate">{item.nombre}</span>
                        {isPending ? (
                          <Badge variant="warning">Pendiente</Badge>
                        ) : null}
                      </span>
                    }
                    meta={metaParts.length > 0 ? metaParts.join(" · ") : undefined}
                    actions={
                      <DropdownMenu>
                        <DropdownMenuTrigger asChild>
                          <Button variant="ghost" size="icon" aria-label="Más acciones">
                            <MoreVertical className="h-4 w-4" />
                          </Button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent align="end">
                          <DropdownMenuItem onClick={() => startEdit(item)}>
                            <Edit3 className="h-4 w-4" />
                            Editar
                          </DropdownMenuItem>
                          <DropdownMenuItem
                            onClick={async () => {
                              const ok = await confirm({
                                title: "¿Dar de baja este registro?",
                                description:
                                  "Deja de aparecer para elegir en pantallas nuevas. Lo podés volver a activar cuando quieras.",
                                confirmLabel: "Dar de baja",
                              });
                              if (ok) {
                                inactivateMutation.mutate(item.id);
                              }
                            }}
                          >
                            Dar de baja
                          </DropdownMenuItem>
                        </DropdownMenuContent>
                      </DropdownMenu>
                    }
                  />
                );
              })}
            </div>
          )}

          {inactiveItems.length > 0 ? (
            <div className="border-t border-border pt-4">
              <h3 className="text-base font-semibold text-foreground">
                Dados de baja
              </h3>
              <p className="mt-1 text-sm text-muted-foreground">
                Puedes reactivar registros sin crearlos de nuevo.
              </p>
              <div className="mt-3 overflow-hidden rounded-md border border-border">
                {inactiveItems.map((item: any) => (
                  <DashboardListRow
                    key={item.id}
                    title={item.nombre}
                    meta={item.descripcion || undefined}
                    actions={
                      <Button
                        variant="outline"
                        size="sm"
                        disabled={activateMutation.isPending}
                        onClick={async () => {
                          const ok = await confirm({
                            title: "¿Dar de alta este registro?",
                            description:
                              "Vuelve a aparecer para elegir en las pantallas del sistema.",
                            confirmLabel: "Dar de alta",
                          });
                          if (ok) {
                            activateMutation.mutate(item.id);
                          }
                        }}
                      >
                        Dar de alta
                      </Button>
                    }
                  />
                ))}
              </div>
            </div>
          ) : null}
        </CardContent>
      </Card>
    </div>
  );
}

export default function CatalogosPage() {
  const confirm = useConfirm();
  const router = useRouter();
  const searchParams = useSearchParams();
  const { toast } = useToast();
  const queryClient = useQueryClient();

  const initialArea = getInitialArea(searchParams);
  const flags = useFlagsConfiguracion();
  const panelHabilitado = (panel: PanelId) =>
    panel === "cosas-trae" ? flags.usaCosasTrae : panel === "tipos-dano" ? flags.usaDanos : true;
  const [activeAreaRaw, setActiveArea] = useState<AreaId>(initialArea);
  const [activePanelRaw, setActivePanel] = useState<PanelId>(() =>
    getInitialPanel(searchParams, initialArea),
  );
  const activePanel: PanelId = panelHabilitado(activePanelRaw) ? activePanelRaw : "tipos-vehiculo";
  const activeArea: AreaId =
    activePanel === activePanelRaw ? activeAreaRaw : panelMeta[activePanel].area;
  const panelesPorArea = (area: AreaId) => areaPanels[area].filter(panelHabilitado);

  const cosasManager = useOfflineCatalogManager(
    basicCatalogConfigs["cosas-trae"],
    flags.usaCosasTrae,
  );
  const danosManager = useOfflineCatalogManager(
    basicCatalogConfigs["tipos-dano"],
    flags.usaDanos,
  );
  const tiposVehiculoManager = useOfflineCatalogManager(
    basicCatalogConfigs["tipos-vehiculo"],
  );

  const managers: Record<
    BasicPanelId,
    ReturnType<typeof useOfflineCatalogManager>
  > = {
    "cosas-trae": cosasManager,
    "tipos-dano": danosManager,
    "tipos-vehiculo": tiposVehiculoManager,
  };

  const [vehicularNombre, setVehicularNombre] = useState("");
  const [tipoVehiculoId, setTipoVehiculoId] = useState("");
  const [marca, setMarca] = useState("");
  const [modelo, setModelo] = useState("");
  const [motor, setMotor] = useState("");
  const [editingVehicular, setEditingVehicular] = useState<any | null>(null);

  const vehicularPanel = (
    areaPanels.vehicular.includes(activePanel) ? activePanel : "tipos-vehiculo"
  ) as PanelId;
  const vehicularTipo = (
    ["marca", "modelo", "motor", "cilindraje"].includes(vehicularPanel)
      ? vehicularPanel
      : "marca"
  ) as VehicularPanelId;

  const selectedTipoVehiculoId = tipoVehiculoId
    ? Number(tipoVehiculoId)
    : undefined;
  const needsMarca =
    vehicularTipo === "modelo" ||
    vehicularTipo === "motor" ||
    vehicularTipo === "cilindraje";
  const needsModelo =
    vehicularTipo === "motor" || vehicularTipo === "cilindraje";
  const needsMotor = vehicularTipo === "cilindraje";

  const syncRoute = (area: AreaId, panel: PanelId) => {
    setActiveArea(area);
    setActivePanel(panel);
    const params = new URLSearchParams(searchParams.toString());
    params.set("area", area);
    params.set("panel", panel);
    router.replace(`/dashboard/catalogos?${params.toString()}`);
  };

  const openPanel = (panel: PanelId) => {
    const meta = panelMeta[panel];
    syncRoute(meta.area, panel);
  };

  const resetVehicularForm = () => {
    setVehicularNombre("");
    setEditingVehicular(null);
  };

  const startEditVehicular = (item: any) => {
    setEditingVehicular(item);
    setVehicularNombre(item.nombre || "");

    if (item.tipoVehiculoId) {
      setTipoVehiculoId(String(item.tipoVehiculoId));
    }

    setMarca(item.marca || "");
    setModelo(item.modelo || "");
    setMotor(item.motor || "");
  };

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

  const { data: modelosRaw = [] } = useQuery({
    queryKey: [
      "catalogos-vehiculares",
      "modelo",
      selectedTipoVehiculoId,
      marca,
    ],
    queryFn: () =>
      catalogosApi.vehicular(
        "modelo",
        selectedTipoVehiculoId
          ? { marca, tipoVehiculoId: selectedTipoVehiculoId }
          : { marca },
      ),
    enabled:
      activeArea === "vehicular" &&
      needsMarca &&
      !!marca &&
      !!selectedTipoVehiculoId,
  });

  const { data: motoresRaw = [] } = useQuery({
    queryKey: [
      "catalogos-vehiculares",
      "motor",
      selectedTipoVehiculoId,
      marca,
      modelo,
    ],
    queryFn: () =>
      catalogosApi.vehicular(
        "motor",
        selectedTipoVehiculoId
          ? { marca, modelo, tipoVehiculoId: selectedTipoVehiculoId }
          : { marca, modelo },
      ),
    enabled:
      activeArea === "vehicular" &&
      needsModelo &&
      !!marca &&
      !!modelo &&
      !!selectedTipoVehiculoId,
  });

  const vehicularFilters = useMemo(() => {
    if (!selectedTipoVehiculoId) return {};
    if (vehicularTipo === "marca")
      return { tipoVehiculoId: selectedTipoVehiculoId };
    if (vehicularTipo === "modelo")
      return marca ? { marca, tipoVehiculoId: selectedTipoVehiculoId } : {};
    if (vehicularTipo === "motor")
      return marca && modelo
        ? { marca, modelo, tipoVehiculoId: selectedTipoVehiculoId }
        : {};
    return marca && modelo && motor
      ? { marca, modelo, motor, tipoVehiculoId: selectedTipoVehiculoId }
      : {};
  }, [vehicularTipo, marca, modelo, motor, selectedTipoVehiculoId]);

  const canQueryVehicular =
    !!selectedTipoVehiculoId &&
    (vehicularTipo === "marca" ||
      (vehicularTipo === "modelo" && !!marca) ||
      (vehicularTipo === "motor" && !!marca && !!modelo) ||
      (vehicularTipo === "cilindraje" && !!marca && !!modelo && !!motor));

  const {
    data: vehicularItems = [],
    isLoading: vehicularLoading,
    isError: vehicularError,
    refetch: refetchVehicular,
  } = useQuery({
    queryKey: ["catalogos-vehiculares", vehicularTipo, vehicularFilters],
    queryFn: () => catalogosApi.vehicular(vehicularTipo, vehicularFilters),
    enabled:
      activeArea === "vehicular" &&
      ["marca", "modelo", "motor", "cilindraje"].includes(activePanel) &&
      canQueryVehicular,
  });

  const { data: inactiveVehicularItems = [] } = useQuery({
    queryKey: [
      "catalogos-vehiculares",
      vehicularTipo,
      vehicularFilters,
      "inactivos",
    ],
    queryFn: () =>
      catalogosApi.vehicular(vehicularTipo, {
        ...vehicularFilters,
        activo: false,
      }),
    enabled:
      activeArea === "vehicular" &&
      ["marca", "modelo", "motor", "cilindraje"].includes(activePanel) &&
      canQueryVehicular,
  });

  const createOrUpdateVehicular = useMutation({
    mutationFn: async () => {
      const payload = {
        tipo: vehicularTipo,
        nombre: vehicularNombre.trim(),
        tipoVehiculoId: selectedTipoVehiculoId,
        marca: needsMarca ? marca : undefined,
        modelo: needsModelo ? modelo : undefined,
        motor: needsMotor ? motor : undefined,
      };

      if (editingVehicular) {
        return catalogosApi.updateVehicular(editingVehicular.id, payload);
      }

      return catalogosApi.createVehicular(payload);
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["catalogos-vehiculares"] });
      toast({
        title: editingVehicular ? "Registro actualizado" : "Registro creado",
      });
      resetVehicularForm();
    },
    onError: (error: any) => {
      toast({
        variant: "destructive",
        title: "Error",
        description:
          error?.message || "No se pudo guardar el catálogo vehicular.",
      });
    },
  });

  const inactivateVehicular = useMutation({
    mutationFn: (id: number) => catalogosApi.inactivateVehicular(id),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["catalogos-vehiculares"] });
      toast({ title: "Registro inactivado" });
    },
    onError: (error: any) => {
      toast({
        variant: "destructive",
        title: "Error",
        description: error?.message || "No se pudo inactivar el registro.",
      });
    },
  });

  const activateVehicular = useMutation({
    mutationFn: (id: number) => catalogosApi.activateVehicular(id),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["catalogos-vehiculares"] });
      toast({ title: "Registro activado" });
    },
    onError: (error: any) => {
      toast({
        variant: "destructive",
        title: "Error",
        description: error?.message || "No se pudo activar el registro.",
      });
    },
  });

  const marcas = useMemo(() => uniqByNombre(marcasRaw), [marcasRaw]);
  const modelos = useMemo(() => uniqByNombre(modelosRaw), [modelosRaw]);
  const motores = useMemo(() => uniqByNombre(motoresRaw), [motoresRaw]);

  const panelCounts: Partial<Record<PanelId, number>> = {
    "cosas-trae": cosasManager.items.length,
    "tipos-dano": danosManager.items.length,
    "tipos-vehiculo": tiposVehiculoManager.items.length,
  };

  const activeMeta = panelMeta[activePanel];
  const canSaveVehicular =
    !!selectedTipoVehiculoId &&
    vehicularNombre.trim().length > 0 &&
    (!needsMarca || !!marca) &&
    (!needsModelo || !!modelo) &&
    (!needsMotor || !!motor);

  const renderWorkspace = () => {
    if (
      activePanel === "cosas-trae" ||
      activePanel === "tipos-dano" ||
      activePanel === "tipos-vehiculo"
    ) {
      return <SimpleCatalogWorkspace manager={managers[activePanel]} />;
    }

    return (
      <div className="grid gap-4 xl:grid-cols-[360px,minmax(0,1fr)]">
        <Card className="bg-muted/70">
          <CardContent className="space-y-4 p-5">
            <span className="inline-flex rounded-full border border-success/30 bg-success-soft px-3 py-1 text-[11px] font-semibold uppercase tracking-wider text-success">
              {editingVehicular ? "Editando" : "Nuevo registro"}
            </span>
            <p className="text-sm leading-6 text-muted-foreground">
              {needsMarca
                ? "Completa los pasos en orden: cada campo se activa cuando termines el anterior."
                : "Elige el tipo de vehículo y escribe el nombre para crear el registro."}
            </p>

            <div className="space-y-3">
              <div className="space-y-2">
                <StepFieldLabel step={1}>Tipo de vehículo</StepFieldLabel>
                <Select
                  value={tipoVehiculoId}
                  onValueChange={(value) => {
                    setTipoVehiculoId(value);
                    setMarca("");
                    setModelo("");
                    setMotor("");
                    resetVehicularForm();
                  }}
                >
                  <SelectTrigger aria-label="Tipo de vehículo">
                    <SelectValue placeholder="Selecciona un tipo" />
                  </SelectTrigger>
                  <SelectContent>
                    {tiposVehiculoManager.items.map((item: any) => (
                      <SelectItem key={item.id} value={String(item.id)}>
                        {item.nombre}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>

              {needsMarca ? (
                <div className="space-y-2">
                  <StepFieldLabel step={2}>Marca</StepFieldLabel>
                  <Select
                    value={marca}
                    onValueChange={(value) => {
                      setMarca(value);
                      setModelo("");
                      setMotor("");
                      resetVehicularForm();
                    }}
                    disabled={!selectedTipoVehiculoId}
                  >
                    <SelectTrigger aria-label="Marca">
                      <SelectValue
                        placeholder={
                          selectedTipoVehiculoId
                            ? "Selecciona una marca"
                            : "Primero elige el tipo de vehículo"
                        }
                      />
                    </SelectTrigger>
                    <SelectContent>
                      {marcas.map((item: any) => (
                        <SelectItem key={item.id} value={item.nombre}>
                          {item.nombre}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              ) : null}

              {needsModelo ? (
                <div className="space-y-2">
                  <StepFieldLabel step={3}>Modelo</StepFieldLabel>
                  <Select
                    value={modelo}
                    onValueChange={(value) => {
                      setModelo(value);
                      setMotor("");
                      resetVehicularForm();
                    }}
                    disabled={!marca}
                  >
                    <SelectTrigger aria-label="Modelo">
                      <SelectValue
                        placeholder={marca ? "Selecciona un modelo" : "Primero elige la marca"}
                      />
                    </SelectTrigger>
                    <SelectContent>
                      {modelos.map((item: any) => (
                        <SelectItem key={item.id} value={item.nombre}>
                          {item.nombre}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              ) : null}

              {needsMotor ? (
                <div className="space-y-2">
                  <StepFieldLabel step={4}>Motor</StepFieldLabel>
                  <Select
                    value={motor}
                    onValueChange={(value) => {
                      setMotor(value);
                      resetVehicularForm();
                    }}
                    disabled={!modelo}
                  >
                    <SelectTrigger aria-label="Motor">
                      <SelectValue
                        placeholder={modelo ? "Selecciona un motor" : "Primero elige el modelo"}
                      />
                    </SelectTrigger>
                    <SelectContent>
                      {motores.map((item: any) => (
                        <SelectItem key={item.id} value={item.nombre}>
                          {item.nombre}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              ) : null}

              <div className="space-y-2">
                <StepFieldLabel step={1 + Number(needsMarca) + Number(needsModelo) + Number(needsMotor) + 1}>
                  Nombre de {activeMeta.title.toLowerCase()}
                </StepFieldLabel>
                <Input
                  value={vehicularNombre}
                  onChange={(event) => setVehicularNombre(event.target.value)}
                  placeholder={`Nombre de ${activeMeta.title.toLowerCase()}`}
                  className="h-11"
                />
              </div>
            </div>

            <div className="flex flex-wrap gap-2 pt-2">
              <Button
                onClick={() => createOrUpdateVehicular.mutate()}
                disabled={
                  !canSaveVehicular || createOrUpdateVehicular.isPending
                }
              >
                {createOrUpdateVehicular.isPending ? (
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                ) : (
                  <Plus className="mr-2 h-4 w-4" />
                )}
                {editingVehicular ? "Guardar cambios" : "Crear"}
              </Button>
              {editingVehicular ? (
                <Button variant="outline" onClick={() => resetVehicularForm()}>
                  Cancelar edición
                </Button>
              ) : null}
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardContent className="space-y-4 p-5">
            <div className="flex flex-col gap-2 md:flex-row md:items-start md:justify-between">
              <div>
                <h3 className="text-base font-semibold text-foreground">
                  Listado activo
                </h3>
                <p className="mt-1 text-sm text-muted-foreground">
                  Primero eliges contexto técnico y luego administras el
                  catálogo correcto.
                </p>
              </div>
              <Badge variant="neutral">
                {canQueryVehicular
                  ? `${vehicularItems.length} registros visibles`
                  : "Completa el contexto para listar"}
              </Badge>
            </div>

            {!selectedTipoVehiculoId ? (
              <DashboardEmptyState
                title="Selecciona un tipo de vehículo"
                description="Así evitamos menús duplicados y trabajas toda la cadena desde el mismo lugar."
                icon={Car}
              />
            ) : !canQueryVehicular ? (
              <DashboardEmptyState
                title="Faltan filtros de contexto"
                description="Para continuar, elige la marca, modelo o motor requerido según el catálogo activo."
                icon={Search}
              />
            ) : vehicularLoading ? (
              <div className="overflow-hidden rounded-md border border-border">
                {Array.from({ length: 4 }).map((_, index) => (
                  <SkeletonListRow key={index} />
                ))}
              </div>
            ) : vehicularError ? (
              <ErrorState
                onRetry={() => refetchVehicular()}
                description="No se pudo cargar el listado de este tramo vehicular."
              />
            ) : vehicularItems.length === 0 ? (
              <DashboardEmptyState
                title="Sin registros en este tramo"
                description="Puedes crear el primer elemento desde el panel izquierdo sin abandonar esta vista."
                icon={Package}
              />
            ) : (
              <div className="overflow-hidden rounded-md border border-border">
                {vehicularItems.map((item: any) => (
                  <DashboardListRow
                    key={item.id}
                    title={item.nombre}
                    meta={`${item.marca || "Sin marca"} · ${item.modelo || "Sin modelo"} · ${item.motor || "Sin motor"}`}
                    actions={
                      <DropdownMenu>
                        <DropdownMenuTrigger asChild>
                          <Button variant="ghost" size="icon" aria-label="Más acciones">
                            <MoreVertical className="h-4 w-4" />
                          </Button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent align="end">
                          <DropdownMenuItem onClick={() => startEditVehicular(item)}>
                            <Edit3 className="h-4 w-4" />
                            Editar
                          </DropdownMenuItem>
                          <DropdownMenuItem
                            onClick={async () => {
                              const ok = await confirm({
                                title: "¿Dar de baja este registro?",
                                description:
                                  "Deja de aparecer para elegir en pantallas nuevas. Lo podés volver a activar cuando quieras.",
                                confirmLabel: "Dar de baja",
                              });
                              if (ok) {
                                inactivateVehicular.mutate(item.id);
                              }
                            }}
                          >
                            Dar de baja
                          </DropdownMenuItem>
                        </DropdownMenuContent>
                      </DropdownMenu>
                    }
                  />
                ))}
              </div>
            )}

            {inactiveVehicularItems.length > 0 ? (
              <div className="border-t border-border pt-4">
                <h3 className="text-base font-semibold text-foreground">
                  Dados de baja
                </h3>
                <p className="mt-1 text-sm text-muted-foreground">
                  Reactiva registros sin duplicarlos.
                </p>
                <div className="mt-3 overflow-hidden rounded-md border border-border">
                  {inactiveVehicularItems.map((item: any) => (
                    <DashboardListRow
                      key={item.id}
                      title={item.nombre}
                      meta={`${item.marca || "Sin marca"} · ${item.modelo || "Sin modelo"} · ${item.motor || "Sin motor"}`}
                      actions={
                        <Button
                          variant="outline"
                          size="sm"
                          disabled={activateVehicular.isPending}
                          onClick={async () => {
                            const ok = await confirm({
                              title: "¿Dar de alta este registro?",
                              description:
                                "Vuelve a aparecer para elegir en las pantallas del sistema.",
                              confirmLabel: "Dar de alta",
                            });
                            if (ok) {
                              activateVehicular.mutate(item.id);
                            }
                          }}
                        >
                          Dar de alta
                        </Button>
                      }
                    />
                  ))}
                </div>
              </div>
            ) : null}
          </CardContent>
        </Card>
      </div>
    );
  };

  return (
    <div className="min-h-full pb-16 md:pb-10">
      <main className="mx-auto flex max-w-6xl flex-col gap-6">
        <DashboardPageIntro
          title="Catálogos"
          description="Administra la Configuración del taller desde una sola pantalla: recepción, tipos de daño y la ficha vehicular completa."
          icon={Settings}
          tone="amber"
          badge="Configuración"
          onBack={() => router.push("/dashboard")}
          actions={
            <Button variant="outline" onClick={() => router.push("/dashboard/ots/nueva")}>
              Ir a nueva OT
            </Button>
          }
          stats={[
            ...(flags.usaCosasTrae || flags.usaDanos
              ? [
                  {
                    label: "Recepción",
                    value: cosasManager.items.length + danosManager.items.length,
                    hint: "Cosas que trae y tipos de daño",
                    icon: ClipboardList,
                  },
                ]
              : []),
            {
              label: "Tipos base",
              value: tiposVehiculoManager.items.length,
              hint: "Tipos de vehículo activos",
              icon: Car,
            },
          ]}
        />

        {/*
         * Antes había que elegir una pestaña "Área de trabajo" (Recepción /
         * Ficha vehicular) para recién ver las tarjetas de catálogo de esa
         * área -- dos clics para llegar a cualquier catálogo, y "Recepción"
         * aparecía repetido como pestaña y como tarjeta de conteo arriba.
         * Ahora se listan las dos áreas de una vez, agrupadas con su propio
         * encabezado: un clic directo a cualquier catálogo.
         */}
        <DashboardSection
          title="Catálogos disponibles"
          description="Elige el catálogo que quieres administrar y trabaja debajo sin salir del módulo."
        >
          <div className="space-y-6">
            {areaOptions
              .filter((option) => panelesPorArea(option.id).length > 0)
              .map((option) => (
              <div key={option.id}>
                <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                  {option.label}
                </p>
                <p className="mt-1 text-sm text-muted-foreground">{option.description}</p>
                <div className="mt-3 grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
                  {panelesPorArea(option.id).map((panelId) => (
                    <CatalogSelectorCard
                      key={panelId}
                      panelId={panelId}
                      active={activePanel === panelId}
                      count={panelCounts[panelId]}
                      onSelect={() => openPanel(panelId)}
                    />
                  ))}
                </div>
              </div>
            ))}
          </div>
        </DashboardSection>

        <DashboardSection
          title={activeMeta.title}
          description={activeMeta.description}
        >
          {renderWorkspace()}
        </DashboardSection>
      </main>
    </div>
  );
}