"use client";

import { type FormEvent, useEffect, useRef, useState } from "react";
import dynamic from "next/dynamic";
import { useRouter } from "next/navigation";
import { createPortal } from "react-dom";
import { io, type Socket } from "socket.io-client";

import {
  DEFAULT_VEHICLE_COLOR_KEY,
  VEHICLE_COLOR_OPTIONS,
  getVehicleColorHex,
} from "@tracker/shared";
import type { HistoryPoint, PositionSnapshot, VehicleAlertSummary, VehicleColorKey, VehicleKind, VehicleSummary } from "@tracker/shared";

import {
  acknowledgeAlert,
  clearSession,
  createUser,
  createDevice,
  createVehicle,
  deleteDevice,
  deleteUser,
  fetchCompanyRoute,
  fetchCompanySettings,
  fetchDevices,
  fetchUsers,
  fetchActiveAlerts,
  fetchRecentAlerts,
  deleteVehicle,
  fetchVehicleHistory,
  fetchVehicles,
  loadSession,
  reverseGeocode,
  saveSession,
  updateCompanySettings,
  type AdminDeviceSummary,
  type AdminUserSummary,
  type CompanyRouteSummary,
  type CompanySettingsSummary,
  updateDevice,
  updateUser,
  updateVehicle,
} from "../../lib/api";

const DynamicMap = dynamic(
  () => import("../../components/map-view").then((module) => module.MapView),
  { ssr: false },
);

type UserAccessCardProps = {
  currentUserId: string;
  user: AdminUserSummary;
  vehicles: VehicleSummary[];
  isSaved: boolean;
  onSave: (
    userId: string,
    firstName: string,
    lastName: string,
    role: "admin" | "user",
    vehicleIds: string[],
    password?: string,
  ) => void;
  onDelete: (userId: string, email: string) => void;
};

const clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));

const formatSpeedKmh = (speed?: number | null) => {
  if (speed == null || Number.isNaN(speed) || !Number.isFinite(speed)) {
    return "0 km/h";
  }

  const normalized = clamp(Math.ceil(speed), 0, 240);
  return `${normalized} km/h`;
};

const getVehicleOptionLabel = (vehicle: Pick<VehicleSummary, "name">) =>
  vehicle.name;

const getVehicleStatusTextColor = (status: VehicleSummary["status"]) => (
  status === "online"
    ? "text-mint"
    : status === "offline"
      ? "text-coral"
      : "text-amber"
);

function VehicleStatusTruckIcon({ status, className = "h-3 w-3" }: { status: VehicleSummary["status"]; className?: string }) {
  return (
    <svg viewBox="0 0 24 24" className={`${className} ${getVehicleStatusTextColor(status)}`} fill="currentColor" aria-hidden="true">
      <path d="M20 8H17V4H1V17H3A3 3 0 0 0 6 20A3 3 0 0 0 9 17H15A3 3 0 0 0 18 20A3 3 0 0 0 21 17H23V12L20 8M6 18.5A1.5 1.5 0 1 1 7.5 17A1.5 1.5 0 0 1 6 18.5M18 18.5A1.5 1.5 0 1 1 19.5 17A1.5 1.5 0 0 1 18 18.5M17 9.5H19.5L21.46 12H17V9.5Z" />
    </svg>
  );
}

const OFFLINE_ALERT_THRESHOLD_MS = 60 * 60 * 1000;

type TimelineScrubberProps = {
  min: number;
  max: number;
  value: number;
  color: string;
  onChange: (nextValue: number) => void;
};

type DesktopDateTimeFieldProps = {
  label: string;
  value: string;
  min?: string | null;
  max?: string | null;
  isOpen: boolean;
  focusTarget?: "date" | "time" | null;
  onToggle: () => void;
  onClose: () => void;
  onChange: (nextValue: string) => void;
  onTimeTabForward?: () => void;
};

function DesktopDateTimeField({
  label,
  value,
  min,
  max,
  isOpen,
  focusTarget,
  onToggle,
  onClose,
  onChange,
  onTimeTabForward,
}: DesktopDateTimeFieldProps) {
  const fieldRef = useRef<HTMLDivElement | null>(null);
  const dateInputRef = useRef<HTMLInputElement | null>(null);
  const hourSelectRef = useRef<HTMLSelectElement | null>(null);

  useEffect(() => {
    if (!isOpen) {
      return;
    }

    const handlePointerDown = (event: MouseEvent) => {
      const target = event.target as Node | null;
      if (fieldRef.current && target && !fieldRef.current.contains(target)) {
        onClose();
      }
    };

    document.addEventListener("mousedown", handlePointerDown);
    return () => document.removeEventListener("mousedown", handlePointerDown);
  }, [isOpen, onClose]);

  useEffect(() => {
    if (!isOpen || !focusTarget) {
      return;
    }

    const targetRef = focusTarget === "time" ? hourSelectRef : dateInputRef;
    const timer = window.setTimeout(() => {
      targetRef.current?.focus();
      if ("showPicker" in (targetRef.current ?? {})) {
        (targetRef.current as HTMLInputElement | null)?.showPicker?.();
      }
    }, 0);

    return () => window.clearTimeout(timer);
  }, [focusTarget, isOpen]);

  return (
    <label className="flex min-w-0 flex-col items-start gap-1">
      <span className="text-sm font-medium text-slate-200">{label}</span>
      <div ref={fieldRef} className="relative w-full">
        <button
          type="button"
          onClick={onToggle}
          className="neo-field flex h-10 w-full items-center justify-between rounded-xl px-3 text-left text-[13px] text-white"
        >
          <span className="truncate">{formatDateTimeLocalLabel(value)}</span>
          <svg
            viewBox="0 0 24 24"
            className={`ml-2 h-4 w-4 shrink-0 text-cyan-200 transition-transform ${isOpen ? "rotate-180" : ""}`}
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
            aria-hidden="true"
          >
            <path d="m6 9 6 6 6-6" />
          </svg>
        </button>
        {isOpen ? (
          <div className="absolute left-0 top-[calc(100%+8px)] z-[80] w-[260px] rounded-2xl border border-cyan-300/25 bg-[#121b2a] p-3 shadow-[0_18px_40px_rgba(2,8,23,0.72)]">
            <div className="grid gap-2">
              <input
                ref={dateInputRef}
                type="date"
                value={getDatePartFromDateTimeLocalValue(value)}
                min={getDatePartFromDateTimeLocalValue(min) || undefined}
                max={getDatePartFromDateTimeLocalValue(max) || undefined}
                onChange={(event) => {
                  onChange(
                    clampDateTimeLocalValue(
                      mergeDateAndTimeParts(event.target.value, getTimePartFromDateTimeLocalValue(value)),
                      min,
                      max,
                    ),
                  );
                }}
                className="neo-field h-10 w-full rounded-xl px-3 text-[13px] text-white"
              />
              <div className="grid grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center gap-2">
                <select
                  ref={hourSelectRef}
                  value={getHourPartFromDateTimeLocalValue(value)}
                  onChange={(event) => {
                    onChange(
                      clampDateTimeLocalValue(
                        mergeDateAndTimeParts(
                          getDatePartFromDateTimeLocalValue(value),
                          `${event.target.value}:${getMinutePartFromDateTimeLocalValue(value)}`,
                        ),
                        min,
                        max,
                      ),
                    );
                  }}
                  className="neo-field h-10 w-full rounded-xl px-3 text-[13px] text-white"
                >
                  {Array.from({ length: 24 }, (_, index) => String(index).padStart(2, "0")).map((hour) => (
                    <option key={hour} value={hour} className="bg-slate-900 text-white">
                      {hour}
                    </option>
                  ))}
                </select>
                <span className="text-sm font-semibold text-slate-300">:</span>
                <select
                  value={getMinutePartFromDateTimeLocalValue(value)}
                  onChange={(event) => {
                    onChange(
                      clampDateTimeLocalValue(
                        mergeDateAndTimeParts(
                          getDatePartFromDateTimeLocalValue(value),
                          `${getHourPartFromDateTimeLocalValue(value)}:${event.target.value}`,
                        ),
                        min,
                        max,
                      ),
                    );
                  }}
                  onKeyDown={(event) => {
                    if (event.key === "Tab" && !event.shiftKey && onTimeTabForward) {
                      event.preventDefault();
                      onTimeTabForward();
                    }
                  }}
                  className="neo-field h-10 w-full rounded-xl px-3 text-[13px] text-white"
                >
                  {Array.from({ length: 60 }, (_, index) => String(index).padStart(2, "0")).map((minute) => (
                    <option key={minute} value={minute} className="bg-slate-900 text-white">
                      {minute}
                    </option>
                  ))}
                </select>
              </div>
            </div>
          </div>
        ) : null}
      </div>
    </label>
  );
}

function TimelineScrubber({ min, max, value, color, onChange }: TimelineScrubberProps) {
  const trackRef = useRef<HTMLDivElement | null>(null);
  const draggingRef = useRef(false);
  const safeRange = Math.max(1, max - min);
  const progress = ((value - min) / safeRange) * 100;

  const updateFromClientX = (clientX: number) => {
    const track = trackRef.current;
    if (!track) {
      return;
    }

    const rect = track.getBoundingClientRect();
    if (rect.width <= 0) {
      return;
    }

    const ratio = clamp((clientX - rect.left) / rect.width, 0, 1);
    const rawValue = min + ratio * safeRange;
    onChange(Math.round(rawValue));
  };

  return (
    <div
      ref={trackRef}
      className="timeline-scrubber"
      style={
        {
          "--timeline-progress": `${progress}%`,
          "--timeline-color": color,
        } as React.CSSProperties
      }
      onPointerDown={(event) => {
        event.preventDefault();
        event.stopPropagation();
        draggingRef.current = true;
        event.currentTarget.setPointerCapture(event.pointerId);
        updateFromClientX(event.clientX);
      }}
      onPointerMove={(event) => {
        if (!draggingRef.current) {
          return;
        }

        event.preventDefault();
        event.stopPropagation();
        updateFromClientX(event.clientX);
      }}
      onPointerUp={(event) => {
        draggingRef.current = false;
        event.stopPropagation();
        if (event.currentTarget.hasPointerCapture(event.pointerId)) {
          event.currentTarget.releasePointerCapture(event.pointerId);
        }
      }}
      onPointerCancel={(event) => {
        draggingRef.current = false;
        if (event.currentTarget.hasPointerCapture(event.pointerId)) {
          event.currentTarget.releasePointerCapture(event.pointerId);
        }
      }}
      role="slider"
      aria-valuemin={min}
      aria-valuemax={max}
      aria-valuenow={value}
      aria-label="Timeline historii pojazdu"
      tabIndex={0}
      onKeyDown={(event) => {
        const step = 1000;
        if (event.key === "ArrowLeft" || event.key === "ArrowDown") {
          event.preventDefault();
          onChange(Math.max(min, value - step));
        }

        if (event.key === "ArrowRight" || event.key === "ArrowUp") {
          event.preventDefault();
          onChange(Math.min(max, value + step));
        }

        if (event.key === "Home") {
          event.preventDefault();
          onChange(min);
        }

        if (event.key === "End") {
          event.preventDefault();
          onChange(max);
        }
      }}
    >
      <div className="timeline-scrubber__thumb" />
    </div>
  );
}

function UserAccessCard({ currentUserId, user, vehicles, isSaved, onSave, onDelete }: UserAccessCardProps) {
  const [firstName, setFirstName] = useState(user.firstName);
  const [lastName, setLastName] = useState(user.lastName);
  const [role, setRole] = useState<"admin" | "user">(user.role);
  const [vehicleIds, setVehicleIds] = useState<string[]>(user.vehicleIds);
  const [isPasswordEditorOpen, setIsPasswordEditorOpen] = useState(false);
  const [newPassword, setNewPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");

  useEffect(() => {
    setFirstName(user.firstName);
    setLastName(user.lastName);
    setRole(user.role);
    setVehicleIds(user.vehicleIds);
    setIsPasswordEditorOpen(false);
    setNewPassword("");
    setConfirmPassword("");
  }, [user]);

  const toggleVehicle = (vehicleId: string) => {
    setVehicleIds((current) =>
      current.includes(vehicleId)
        ? current.filter((currentId) => currentId !== vehicleId)
        : [...current, vehicleId],
    );
  };

  return (
    <div className="rounded-[1.4rem] border border-slate-200 bg-white/80 p-4">
      <div className="flex items-start justify-between gap-3">
        <div className="min-w-0">
          <div className="truncate text-sm font-semibold text-ink">{user.firstName} {user.lastName}</div>
          <div className="mt-1 truncate text-xs text-steel">{user.email}</div>
          <div
            className={`mt-1 text-xs transition-colors duration-300 ${
              isSaved ? "text-mint" : "text-steel"
            }`}
          >
            Utworzony: {new Date(user.createdAt).toLocaleDateString("pl-PL")}
          </div>
        </div>
        <select
          value={role}
          onChange={(event) => setRole(event.target.value as "admin" | "user")}
          className="h-9 rounded-2xl border border-slate-200 bg-white px-3 text-sm text-ink"
        >
          <option value="admin">Admin</option>
          <option value="user">User</option>
        </select>
      </div>
      <div className="mt-3 flex items-center justify-end gap-2">
        <button
          type="button"
          onClick={() => {
            setIsPasswordEditorOpen((current) => !current);
            setNewPassword("");
            setConfirmPassword("");
          }}
          className={`text-[11px] italic underline underline-offset-2 transition ${
            isPasswordEditorOpen
              ? "text-ink"
              : "text-steel hover:text-ink"
          }`}
          aria-label="Hasło"
          title="Hasło"
        >
          Hasło
        </button>
      </div>
      {isPasswordEditorOpen ? (
        <div className="mt-3 grid gap-2 sm:grid-cols-2">
          <input
            type="password"
            value={newPassword}
            onChange={(event) => setNewPassword(event.target.value)}
            className="h-9 w-full rounded-2xl border border-slate-200 bg-white px-3 text-sm text-ink"
            placeholder="Nowe hasło"
            minLength={8}
          />
          <input
            type="password"
            value={confirmPassword}
            onChange={(event) => setConfirmPassword(event.target.value)}
            className="h-9 w-full rounded-2xl border border-slate-200 bg-white px-3 text-sm text-ink"
            placeholder="Powtórz hasło"
            minLength={8}
          />
        </div>
      ) : null}
      <div className="mt-3 flex flex-wrap gap-2">
        {vehicles.map((vehicle) => {
          const isActive = vehicleIds.includes(vehicle.id);
          return (
            <button
              key={vehicle.id}
              type="button"
              onClick={() => toggleVehicle(vehicle.id)}
              className={`rounded-full border px-3 py-1 text-xs font-medium transition ${
                isActive
                  ? "border-slate-900 bg-slate-900 text-white"
                  : "border-slate-200 bg-white text-ink"
              }`}
            >
              {vehicle.name}
            </button>
          );
        })}
      </div>
      <div className="mt-3 flex justify-between gap-2">
        <button
          type="button"
          onClick={() => {
            const trimmedPassword = newPassword.trim();
            if (isPasswordEditorOpen) {
              if (!trimmedPassword) {
                window.alert("Wpisz nowe hasło");
                return;
              }

              if (trimmedPassword.length < 8) {
                window.alert("Hasło musi mieć co najmniej 8 znaków");
                return;
              }

              if (trimmedPassword !== confirmPassword.trim()) {
                window.alert("Hasła nie są takie same");
                return;
              }
            }

            onSave(
              user.id,
              firstName.trim(),
              lastName.trim(),
              role,
              vehicleIds,
              isPasswordEditorOpen ? trimmedPassword : undefined,
            );
            setIsPasswordEditorOpen(false);
            setNewPassword("");
            setConfirmPassword("");
          }}
          className="rounded-2xl bg-ink px-4 py-2 text-sm font-semibold text-white"
        >
          Zapisz dostęp
        </button>
        <button
          type="button"
          onClick={() => onDelete(user.id, user.email)}
          disabled={user.id === currentUserId}
          className="rounded-2xl bg-coral px-4 py-2 text-sm font-semibold text-white disabled:cursor-not-allowed disabled:opacity-40"
        >
          Usuń
        </button>
      </div>
    </div>
  );
}

const isPrivateOrLocalHost = (hostname: string) => {
  if (hostname === "localhost" || hostname === "127.0.0.1") {
    return true;
  }

  if (/^192\.168\.\d{1,3}\.\d{1,3}$/.test(hostname)) {
    return true;
  }

  if (/^10\.\d{1,3}\.\d{1,3}\.\d{1,3}$/.test(hostname)) {
    return true;
  }

  const match172 = hostname.match(/^172\.(\d{1,3})\.\d{1,3}\.\d{1,3}$/);
  if (match172) {
    const secondOctet = Number(match172[1]);
    return secondOctet >= 16 && secondOctet <= 31;
  }

  return false;
};

const getPointTimeMs = (point?: Pick<HistoryPoint, "deviceTime" | "serverTime"> | null) => {
  if (!point) {
    return null;
  }

  const rawValue = point.deviceTime ?? point.serverTime;
  if (!rawValue) {
    return null;
  }

  const timestamp = new Date(rawValue).getTime();
  return Number.isNaN(timestamp) ? null : timestamp;
};

const toDateTimeLocalValue = (value?: string | null) => {
  if (!value) {
    return "";
  }

  const date = new Date(value);
  if (Number.isNaN(date.getTime())) {
    return "";
  }

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

const parseDateTimeLocalValue = (value?: string | null) => {
  if (!value) {
    return null;
  }

  const match = value.trim().match(/^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})$/);
  if (!match) {
    return null;
  }

  const [, year, month, day, hour, minute] = match;
  const date = new Date(
    Number(year),
    Number(month) - 1,
    Number(day),
    Number(hour),
    Number(minute),
    0,
    0,
  );

  return Number.isNaN(date.getTime()) ? null : date;
};

const getDateTimeLocalTimestamp = (value?: string | null) =>
  parseDateTimeLocalValue(value)?.getTime() ?? Number.NaN;

const toIsoFromDateTimeLocalValue = (value?: string | null) =>
  parseDateTimeLocalValue(value)?.toISOString() ?? "";

const getDatePartFromDateTimeLocalValue = (value?: string | null) =>
  value?.split("T")[0] ?? "";

const getTimePartFromDateTimeLocalValue = (value?: string | null) =>
  value?.split("T")[1]?.slice(0, 5) ?? "00:00";

const getHourPartFromDateTimeLocalValue = (value?: string | null) =>
  getTimePartFromDateTimeLocalValue(value).split(":")[0] ?? "00";

const getMinutePartFromDateTimeLocalValue = (value?: string | null) =>
  getTimePartFromDateTimeLocalValue(value).split(":")[1] ?? "00";

const mergeDateAndTimeParts = (datePart?: string | null, timePart?: string | null) => {
  if (!datePart) {
    return "";
  }

  return `${datePart}T${timePart || "00:00"}`;
};

const formatDateTimeLocalLabel = (value?: string | null) => {
  const parsed = parseDateTimeLocalValue(value);
  if (!parsed) {
    return "";
  }

  return parsed.toLocaleString("pl-PL", {
    day: "2-digit",
    month: "2-digit",
    year: "numeric",
    hour: "2-digit",
    minute: "2-digit",
  });
};

const clampDateTimeLocalValue = (value: string, minValue?: string | null, maxValue?: string | null) => {
  if (!value) {
    return value;
  }

  if (minValue && value < minValue) {
    return minValue;
  }

  if (maxValue && value > maxValue) {
    return maxValue;
  }

  return value;
};

const MAX_HISTORY_RANGE_MS = 1000 * 60 * 60 * 48;
const selectedVehicleStorageKey = (userId: string) => `tracker.selectedVehicle.${userId}`;
const dailyOverviewStorageKey = (userId: string) => `tracker.dailyOverview.${userId}`;
const mapTileModeStorageKey = (userId: string) => `tracker.mapTileMode.${userId}`;

const getLocalDateKey = () => {
  const now = new Date();
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, "0");
  const day = String(now.getDate()).padStart(2, "0");
  return `${year}-${month}-${day}`;
};

const isNetworkLoadError = (error: unknown) => {
  if (!(error instanceof Error)) {
    return false;
  }

  const normalizedMessage = error.message.trim().toLowerCase();
  return (
    normalizedMessage === "load failed"
    || normalizedMessage === "failed to fetch"
    || normalizedMessage.includes("networkerror")
  );
};

const getFriendlyLoadErrorMessage = (error: unknown, fallback: string) => {
  if (isNetworkLoadError(error)) {
    return fallback;
  }

  if (error instanceof Error && error.message.trim()) {
    return error.message;
  }

  return fallback;
};

const getHeadingLabel = (heading?: number | null) => {
  if (heading == null || Number.isNaN(heading)) {
    return "N";
  }

  const normalized = ((heading % 360) + 360) % 360;
  const directions = ["N", "NE", "E", "SE", "S", "SW", "W", "NW"];
  return directions[Math.round(normalized / 45) % 8];
};

const getBearingBetweenPoints = (
  start: Pick<HistoryPoint, "lat" | "lon">,
  end: Pick<HistoryPoint, "lat" | "lon">,
) => {
  const toRad = (value: number) => (value * Math.PI) / 180;
  const toDeg = (value: number) => (value * 180) / Math.PI;
  const lat1 = toRad(start.lat);
  const lat2 = toRad(end.lat);
  const deltaLon = toRad(end.lon - start.lon);

  const y = Math.sin(deltaLon) * Math.cos(lat2);
  const x = Math.cos(lat1) * Math.sin(lat2)
    - Math.sin(lat1) * Math.cos(lat2) * Math.cos(deltaLon);

  return (toDeg(Math.atan2(y, x)) + 360) % 360;
};

const getPlaybackPosition = (
  points: HistoryPoint[],
  playbackTimestamp: number | null,
  playbackDirection: "forward" | "backward",
): PositionSnapshot | null => {
  if (points.length === 0) {
    return null;
  }

  if (points.length === 1 || playbackTimestamp == null) {
    return points[points.length - 1] ?? null;
  }

  const stampedPoints = points
    .map((point) => ({
      point,
      timestamp: getPointTimeMs(point),
    }))
    .filter((entry): entry is { point: HistoryPoint; timestamp: number } => entry.timestamp != null);

  if (stampedPoints.length === 0) {
    return points[points.length - 1] ?? null;
  }

  if (stampedPoints.length === 1) {
    return stampedPoints[0].point;
  }

  if (playbackTimestamp <= stampedPoints[0].timestamp) {
    const heading = playbackDirection === "backward"
      ? getBearingBetweenPoints(stampedPoints[1].point, stampedPoints[0].point)
      : getBearingBetweenPoints(stampedPoints[0].point, stampedPoints[1].point);
    return { ...stampedPoints[0].point, heading };
  }

  const lastStampedPoint = stampedPoints[stampedPoints.length - 1];
  if (playbackTimestamp >= lastStampedPoint.timestamp) {
    const previousStampedPoint = stampedPoints[stampedPoints.length - 2];
    const heading = playbackDirection === "backward"
      ? getBearingBetweenPoints(lastStampedPoint.point, previousStampedPoint.point)
      : getBearingBetweenPoints(previousStampedPoint.point, lastStampedPoint.point);
    return { ...lastStampedPoint.point, heading };
  }

  for (let index = 0; index < stampedPoints.length - 1; index += 1) {
    const current = stampedPoints[index];
    const next = stampedPoints[index + 1];

    if (playbackTimestamp < current.timestamp || playbackTimestamp > next.timestamp) {
      continue;
    }

    const segmentDuration = next.timestamp - current.timestamp;
    const progress = segmentDuration === 0 ? 0 : (playbackTimestamp - current.timestamp) / segmentDuration;
    const lat = current.point.lat + (next.point.lat - current.point.lat) * progress;
    const lon = current.point.lon + (next.point.lon - current.point.lon) * progress;
    const heading = playbackDirection === "backward"
      ? getBearingBetweenPoints(next.point, current.point)
      : getBearingBetweenPoints(current.point, next.point);
    const referencePoint = progress < 0.5 ? current.point : next.point;

    return {
      ...referencePoint,
      lat,
      lon,
      heading,
      speed: current.point.speed != null && next.point.speed != null
        ? current.point.speed + (next.point.speed - current.point.speed) * progress
        : referencePoint.speed ?? null,
      serverTime: new Date(playbackTimestamp).toISOString(),
      deviceTime: new Date(playbackTimestamp).toISOString(),
    };
  }

  return lastStampedPoint.point;
};

const sortHistoryPoints = (points: HistoryPoint[]) =>
  points
    .slice()
    .sort((left, right) => (getPointTimeMs(left) ?? 0) - (getPointTimeMs(right) ?? 0));

const getTimelineStartTimestamp = (points: HistoryPoint[], fromIso: string) => {
  if (points.length === 0) {
    return null;
  }

  const firstPointTimestamp = getPointTimeMs(points[0]) ?? null;
  const fromTimestamp = new Date(fromIso).getTime();

  if (firstPointTimestamp == null) {
    return Number.isNaN(fromTimestamp) ? null : fromTimestamp;
  }

  if (Number.isNaN(fromTimestamp)) {
    return firstPointTimestamp;
  }

  return Math.max(firstPointTimestamp, fromTimestamp);
};

const getStampedHistoryPoints = (points: HistoryPoint[]) =>
  points
    .map((point) => ({
      point,
      timestamp: getPointTimeMs(point),
    }))
    .filter((entry): entry is { point: HistoryPoint; timestamp: number } => entry.timestamp != null);

const findIgnitionResumeTimestamp = (
  points: HistoryPoint[],
  targetTimestamp: number,
  direction: "forward" | "backward",
) => {
  const stampedPoints = getStampedHistoryPoints(points);
  if (stampedPoints.length === 0) {
    return targetTimestamp;
  }

  let currentIndex = 0;
  for (let index = 1; index < stampedPoints.length; index += 1) {
    if (stampedPoints[index].timestamp > targetTimestamp) {
      break;
    }
    currentIndex = index;
  }

  const currentPoint = stampedPoints[currentIndex]?.point;
  if (currentPoint?.ignition !== false) {
    return targetTimestamp;
  }

  if (direction === "forward") {
    for (let index = currentIndex + 1; index < stampedPoints.length; index += 1) {
      if (stampedPoints[index].point.ignition === true) {
        return stampedPoints[index].timestamp;
      }
    }
    return null;
  }

  for (let index = currentIndex - 1; index >= 0; index -= 1) {
    if (stampedPoints[index].point.ignition === true) {
      return stampedPoints[index].timestamp;
    }
  }

  return null;
};

const distanceMeters = (
  start: { lat: number; lon: number },
  end: { lat: number; lon: number },
) => {
  const toRad = (value: number) => (value * Math.PI) / 180;
  const earthRadius = 6_371_000;
  const dLat = toRad(end.lat - start.lat);
  const dLon = toRad(end.lon - start.lon);
  const lat1 = toRad(start.lat);
  const lat2 = toRad(end.lat);
  const haversine = Math.sin(dLat / 2) ** 2
    + Math.cos(lat1) * Math.cos(lat2) * Math.sin(dLon / 2) ** 2;

  return 2 * earthRadius * Math.atan2(Math.sqrt(haversine), Math.sqrt(1 - haversine));
};

const getAddressReachedTimestamp = (
  points: HistoryPoint[],
  currentPoint?: PositionSnapshot | null,
  thresholdMeters = 50,
) => {
  if (!currentPoint) {
    return null;
  }

  const currentTimestamp = getPointTimeMs(currentPoint);
  if (currentTimestamp == null) {
    return null;
  }

  const stampedPoints = getStampedHistoryPoints(points);
  if (stampedPoints.length === 0) {
    return currentTimestamp;
  }

  let reachedAt = currentTimestamp;

  for (let index = stampedPoints.length - 1; index >= 0; index -= 1) {
    const candidate = stampedPoints[index];

    if (candidate.timestamp > currentTimestamp) {
      continue;
    }

    if (
      distanceMeters(
        { lat: candidate.point.lat, lon: candidate.point.lon },
        { lat: currentPoint.lat, lon: currentPoint.lon },
      ) > thresholdMeters
    ) {
      break;
    }

    reachedAt = candidate.timestamp;
  }

  return reachedAt;
};

export default function DashboardPage() {
  const router = useRouter();
  const [token, setToken] = useState<string | null>(null);
  const [currentUserId, setCurrentUserId] = useState<string | null>(null);
  const [currentUserEmail, setCurrentUserEmail] = useState<string | null>(null);
  const [currentUserFirstName, setCurrentUserFirstName] = useState<string | null>(null);
  const [currentUserLastName, setCurrentUserLastName] = useState<string | null>(null);
  const [userRole, setUserRole] = useState<"admin" | "user">("user");
  const [vehicles, setVehicles] = useState<VehicleSummary[]>([]);
  const [animatedVehicles, setAnimatedVehicles] = useState<VehicleSummary[]>([]);
  const [selectedVehicleId, setSelectedVehicleId] = useState<string | null>(null);
  const [vehicleFocusNonce, setVehicleFocusNonce] = useState(0);
  const [dailyOverviewKey, setDailyOverviewKey] = useState<string | null>(null);
  const [mapTileMode, setMapTileMode] = useState<"standard" | "satellite">("standard");
  const [history, setHistory] = useState<HistoryPoint[]>([]);
  const [playbackTimestamp, setPlaybackTimestamp] = useState<number | null>(null);
  const [playbackDirection, setPlaybackDirection] = useState<"forward" | "backward">("forward");
  const [isPlaybackRunning, setIsPlaybackRunning] = useState(false);
  const [playbackSpeed, setPlaybackSpeed] = useState<2 | 5 | 10 | 50>(2);
  const [skipStopsDuringPlayback, setSkipStopsDuringPlayback] = useState(true);
  const [selectedPositionAddress, setSelectedPositionAddress] = useState<string | null>(null);
  const [selectedPositionAddressLoading, setSelectedPositionAddressLoading] = useState(false);
  const selectedPositionAddressKeyRef = useRef<string | null>(null);
  const [isTimelineVisible, setIsTimelineVisible] = useState(false);
  const [actionError, setActionError] = useState<string | null>(null);
  const [loadError, setLoadError] = useState<string | null>(null);
  const [adminMessage, setAdminMessage] = useState<string | null>(null);
  const [vehicleSuccessMessage, setVehicleSuccessMessage] = useState<string | null>(null);
  const [from, setFrom] = useState(() => toDateTimeLocalValue(new Date(Date.now() - 1000 * 60 * 60 * 24).toISOString()));
  const [to, setTo] = useState(() => toDateTimeLocalValue(new Date().toISOString()));
  const [vehicleName, setVehicleName] = useState("");
  const [vehiclePlateNumber, setVehiclePlateNumber] = useState("");
  const [vehicleColorKey, setVehicleColorKey] = useState<VehicleColorKey>(DEFAULT_VEHICLE_COLOR_KEY);
  const [vehicleKind, setVehicleKind] = useState<VehicleKind>("passenger");
  const [deviceImei, setDeviceImei] = useState("");
  const [devicePhoneNumber, setDevicePhoneNumber] = useState("");
  const [deviceVehicleId, setDeviceVehicleId] = useState("");
  const [activeAlerts, setActiveAlerts] = useState<VehicleAlertSummary[]>([]);
  const [recentAlerts, setRecentAlerts] = useState<VehicleAlertSummary[]>([]);
  const [systemUsers, setSystemUsers] = useState<AdminUserSummary[]>([]);
  const [systemDevices, setSystemDevices] = useState<AdminDeviceSummary[]>([]);
  const [companySettings, setCompanySettings] = useState<CompanySettingsSummary>(null);
  const [companyAddressInput, setCompanyAddressInput] = useState("");
  const [companyRouteSummary, setCompanyRouteSummary] = useState<CompanyRouteSummary | null>(null);
  const [companySettingsMessage, setCompanySettingsMessage] = useState<string | null>(null);
  const [deviceVehicleAssignments, setDeviceVehicleAssignments] = useState<Record<string, string>>({});
  const [isSystemSettingsOpen, setIsSystemSettingsOpen] = useState(false);
  const [systemSettingsTab, setSystemSettingsTab] = useState<"users" | "vehicles" | "devices" | "company">("users");
  const [isInfoPanelOpen, setIsInfoPanelOpen] = useState(false);
  const [isDetailsPanelOpen, setIsDetailsPanelOpen] = useState(true);
  const [isMobileLiveOpen, setIsMobileLiveOpen] = useState(false);
  const [isMobileHistoryOpen, setIsMobileHistoryOpen] = useState(false);
  const [isMobileGpsOpen, setIsMobileGpsOpen] = useState(false);
  const [isCompanyVehiclesOpen, setIsCompanyVehiclesOpen] = useState(false);
  const [isMovingVehiclesOpen, setIsMovingVehiclesOpen] = useState(false);
  const [isHeaderPanelOpen, setIsHeaderPanelOpen] = useState(true);
  const [isSelectedVehicleMenuOpen, setIsSelectedVehicleMenuOpen] = useState(false);
  const [openDesktopHistoryPicker, setOpenDesktopHistoryPicker] = useState<"from" | "to" | null>(null);
  const [desktopHistoryFocusTarget, setDesktopHistoryFocusTarget] = useState<"date" | "time" | null>(null);
  const [newUserEmail, setNewUserEmail] = useState("");
  const [newUserFirstName, setNewUserFirstName] = useState("");
  const [newUserLastName, setNewUserLastName] = useState("");
  const [newUserPassword, setNewUserPassword] = useState("");
  const [newUserRole, setNewUserRole] = useState<"admin" | "user">("user");
  const [newUserVehicleIds, setNewUserVehicleIds] = useState<string[]>([]);
  const [savedUserId, setSavedUserId] = useState<string | null>(null);
  const [isVehicleFormOpen, setIsVehicleFormOpen] = useState(false);
  const [isDeviceFormOpen, setIsDeviceFormOpen] = useState(false);
  const [isEditVehicleFormOpen, setIsEditVehicleFormOpen] = useState(false);
  const [editVehicleName, setEditVehicleName] = useState("");
  const [editVehiclePlateNumber, setEditVehiclePlateNumber] = useState("");
  const [editVehicleColorKey, setEditVehicleColorKey] = useState<VehicleColorKey>(DEFAULT_VEHICLE_COLOR_KEY);
  const [editVehicleKind, setEditVehicleKind] = useState<VehicleKind>("passenger");
  const [editAssignedDeviceId, setEditAssignedDeviceId] = useState("");
  const [editDeviceImei, setEditDeviceImei] = useState("");
  const [editDevicePhoneNumber, setEditDevicePhoneNumber] = useState("");
  const companyRouteKeyRef = useRef<string | null>(null);
  const hasHydratedSelectedVehicleRef = useRef(false);
  const playbackFrameRef = useRef<number | null>(null);
  const playbackLastTickRef = useRef<number | null>(null);
  const selectedVehicleMenuRef = useRef<HTMLDivElement | null>(null);
  const previousVehiclesRef = useRef<VehicleSummary[]>([]);
  const liveAnimationFrameRef = useRef<number | null>(null);
  const displayVehicles = vehicles.map((vehicle) =>
    isEditVehicleFormOpen && vehicle.id === selectedVehicleId
      ? {
          ...vehicle,
          colorKey: editVehicleColorKey,
        }
      : vehicle,
  );
  const animatedDisplayVehicles = (animatedVehicles.length > 0 ? animatedVehicles : vehicles).map((vehicle) =>
    isEditVehicleFormOpen && vehicle.id === selectedVehicleId
      ? {
          ...vehicle,
          colorKey: editVehicleColorKey,
        }
      : vehicle,
  );
  const offlineVehicles = displayVehicles.filter((vehicle) => vehicle.status === "offline");
  const offlineAlertVehicles = offlineVehicles.filter((vehicle) => {
    if (!vehicle.lastSeen) {
      return true;
    }

    const lastSeenTimestamp = new Date(vehicle.lastSeen).getTime();
    if (Number.isNaN(lastSeenTimestamp)) {
      return true;
    }

    return Date.now() - lastSeenTimestamp >= OFFLINE_ALERT_THRESHOLD_MS;
  });
  const clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));
  const shiftHex = (hex: string, amount: number) => {
    const normalized = hex.replace("#", "");
    const safeHex = normalized.length === 6 ? normalized : "4068F8";
    const [r, g, b] = [0, 2, 4].map((offset) => Number.parseInt(safeHex.slice(offset, offset + 2), 16));
    const shifted = [r, g, b]
      .map((channel) => clamp(channel + amount, 0, 255).toString(16).padStart(2, "0"))
      .join("");

    return `#${shifted}`;
  };
  const previewVehicleColor = getVehicleColorHex(editVehicleColorKey);
  const currentUserDisplayName = [currentUserFirstName, currentUserLastName].filter(Boolean).join(" ").trim();
  const currentUserPrimaryName = currentUserFirstName?.trim() || currentUserDisplayName || currentUserEmail || "Użytkownik";
  const hasInfoAttention = offlineAlertVehicles.length > 0 || activeAlerts.length > 0 || recentAlerts.length > 0;
  const activeMobileSection = isMobileLiveOpen
    ? "live"
    : isMobileHistoryOpen
      ? "history"
      : isMobileGpsOpen
        ? "gps"
        : null;
  const handleVehicleSelection = (vehicleId: string | null) => {
    setDailyOverviewKey(null);
    setHistory([]);
    setIsPlaybackRunning(false);
    setPlaybackTimestamp(null);
    setPlaybackDirection("forward");
    setIsTimelineVisible(false);
    setIsSelectedVehicleMenuOpen(false);
    setIsMovingVehiclesOpen(false);
    setIsCompanyVehiclesOpen(false);
    setSelectedVehicleId(vehicleId);
    if (vehicleId) {
      setVehicleFocusNonce((current) => current + 1);
    }
  };
  const handleShowAllVehicles = () => {
    setSelectedVehicleId(null);
    setHistory([]);
    setIsPlaybackRunning(false);
    setPlaybackTimestamp(null);
    setPlaybackDirection("forward");
    setIsTimelineVisible(false);
    setIsSelectedVehicleMenuOpen(false);
    setIsMovingVehiclesOpen(false);
    setIsCompanyVehiclesOpen(false);
    setDailyOverviewKey(`manual:${Date.now()}`);
  };
  const toggleMobileSection = (section: "live" | "history" | "gps") => {
    const isCurrentlyOpen =
      (section === "live" && isMobileLiveOpen)
      || (section === "history" && isMobileHistoryOpen)
      || (section === "gps" && isMobileGpsOpen);

    setIsMobileLiveOpen(section === "live" ? !isCurrentlyOpen : false);
    setIsMobileHistoryOpen(section === "history" ? !isCurrentlyOpen : false);
    setIsMobileGpsOpen(section === "gps" ? !isCurrentlyOpen : false);
  };

  const toggleMovingVehiclesPanel = () => {
    setIsMovingVehiclesOpen((current) => {
      const next = !current;
      if (next) {
        setIsCompanyVehiclesOpen(false);
      }
      return next;
    });
  };

  const toggleCompanyVehiclesPanel = () => {
    setIsCompanyVehiclesOpen((current) => {
      const next = !current;
      if (next) {
        setIsMovingVehiclesOpen(false);
      }
      return next;
    });
  };

  useEffect(() => {
    document.documentElement.classList.add("dashboard-page");
    document.body.classList.add("dashboard-page");

    return () => {
      document.documentElement.classList.remove("dashboard-page");
      document.body.classList.remove("dashboard-page");
    };
  }, []);

  useEffect(() => {
    if (!isSelectedVehicleMenuOpen) {
      return;
    }

    const handlePointerDown = (event: MouseEvent | TouchEvent) => {
      const target = event.target as Node | null;
      if (selectedVehicleMenuRef.current && target && !selectedVehicleMenuRef.current.contains(target)) {
        setIsSelectedVehicleMenuOpen(false);
      }
    };

    document.addEventListener("mousedown", handlePointerDown);
    document.addEventListener("touchstart", handlePointerDown, { passive: true });

    return () => {
      document.removeEventListener("mousedown", handlePointerDown);
      document.removeEventListener("touchstart", handlePointerDown);
    };
  }, [isSelectedVehicleMenuOpen]);

  useEffect(() => {
    if (!isVehicleFormOpen && !isDeviceFormOpen && !isEditVehicleFormOpen && !isSystemSettingsOpen) {
      return;
    }

    const onKeyDown = (event: KeyboardEvent) => {
      if (event.key === "Escape") {
        setIsVehicleFormOpen(false);
        setIsDeviceFormOpen(false);
        setIsEditVehicleFormOpen(false);
        setIsSystemSettingsOpen(false);
      }
    };

    window.addEventListener("keydown", onKeyDown);
    return () => window.removeEventListener("keydown", onKeyDown);
  }, [isDeviceFormOpen, isEditVehicleFormOpen, isSystemSettingsOpen, isVehicleFormOpen]);

  useEffect(() => {
    if (!savedUserId) {
      return;
    }

    const timeoutId = window.setTimeout(() => {
      setSavedUserId(null);
    }, 3000);

    return () => window.clearTimeout(timeoutId);
  }, [savedUserId]);

  useEffect(() => {
    const interpolateAngle = (from: number, to: number, progress: number) => {
      const delta = ((((to - from) % 360) + 540) % 360) - 180;
      return (from + delta * progress + 360) % 360;
    };

    if (liveAnimationFrameRef.current != null) {
      window.cancelAnimationFrame(liveAnimationFrameRef.current);
      liveAnimationFrameRef.current = null;
    }

    if (vehicles.length === 0) {
      setAnimatedVehicles([]);
      previousVehiclesRef.current = [];
      return;
    }

    const previousVehicles = previousVehiclesRef.current;
    previousVehiclesRef.current = vehicles;

    if (previousVehicles.length === 0) {
      setAnimatedVehicles(vehicles);
      return;
    }

    const previousById = new Map(previousVehicles.map((vehicle) => [vehicle.id, vehicle]));
    const animationStart = performance.now();

    const animationTargets = vehicles.map((vehicle) => {
      const previousVehicle = previousById.get(vehicle.id);
      const fromPosition = previousVehicle?.lastPosition ?? null;
      const toPosition = vehicle.lastPosition ?? null;
      const fromTimestamp = getPointTimeMs(fromPosition);
      const toTimestamp = getPointTimeMs(toPosition);

      const isAnimatable = Boolean(
        fromPosition
          && toPosition
          && fromTimestamp != null
          && toTimestamp != null
          && (
            fromPosition.lat !== toPosition.lat
            || fromPosition.lon !== toPosition.lon
            || (fromPosition.heading ?? null) !== (toPosition.heading ?? null)
          ),
      );

      return {
        vehicle,
        fromPosition,
        toPosition,
        isAnimatable,
        durationMs: isAnimatable
          ? clamp((toTimestamp ?? 0) - (fromTimestamp ?? 0), 1200, 10000)
          : 0,
      };
    });

    if (!animationTargets.some((target) => target.isAnimatable)) {
      setAnimatedVehicles(vehicles);
      return;
    }

    const tick = (now: number) => {
      let hasPendingAnimation = false;

      setAnimatedVehicles(animationTargets.map(({ vehicle, fromPosition, toPosition, isAnimatable, durationMs }) => {
        if (!isAnimatable || !fromPosition || !toPosition || durationMs <= 0) {
          return vehicle;
        }

        const progress = clamp((now - animationStart) / durationMs, 0, 1);
        if (progress < 1) {
          hasPendingAnimation = true;
        }

        return {
          ...vehicle,
          lastPosition: {
            ...toPosition,
            lat: fromPosition.lat + (toPosition.lat - fromPosition.lat) * progress,
            lon: fromPosition.lon + (toPosition.lon - fromPosition.lon) * progress,
            speed: fromPosition.speed != null && toPosition.speed != null
              ? fromPosition.speed + (toPosition.speed - fromPosition.speed) * progress
              : toPosition.speed ?? fromPosition.speed ?? null,
            heading: fromPosition.heading != null && toPosition.heading != null
              ? interpolateAngle(fromPosition.heading, toPosition.heading, progress)
              : toPosition.heading ?? fromPosition.heading ?? null,
          },
        };
      }));

      if (hasPendingAnimation) {
        liveAnimationFrameRef.current = window.requestAnimationFrame(tick);
      } else {
        liveAnimationFrameRef.current = null;
      }
    };

    liveAnimationFrameRef.current = window.requestAnimationFrame(tick);

    return () => {
      if (liveAnimationFrameRef.current != null) {
        window.cancelAnimationFrame(liveAnimationFrameRef.current);
        liveAnimationFrameRef.current = null;
      }
    };
  }, [vehicles]);

  useEffect(() => {
    if (!companySettingsMessage) {
      return;
    }

    const timeoutId = window.setTimeout(() => {
      setCompanySettingsMessage(null);
    }, 5000);

    return () => window.clearTimeout(timeoutId);
  }, [companySettingsMessage]);

  useEffect(() => {
    if (!vehicleSuccessMessage) {
      return;
    }

    const timeoutId = window.setTimeout(() => {
      setVehicleSuccessMessage(null);
    }, 5000);

    return () => window.clearTimeout(timeoutId);
  }, [vehicleSuccessMessage]);

  useEffect(() => {
    setDeviceVehicleAssignments(
      Object.fromEntries(systemDevices.map((device) => [device.id, device.vehicle_id ?? ""])),
    );
  }, [systemDevices]);

  useEffect(() => {
    if (!isVehicleFormOpen && !isDeviceFormOpen && !isEditVehicleFormOpen && !isSystemSettingsOpen) {
      return;
    }

    const previousBodyOverflow = document.body.style.overflow;
    const previousHtmlOverflow = document.documentElement.style.overflow;
    document.body.style.overflow = "hidden";
    document.documentElement.style.overflow = "hidden";

    return () => {
      document.body.style.overflow = previousBodyOverflow;
      document.documentElement.style.overflow = previousHtmlOverflow;
    };
  }, [isDeviceFormOpen, isEditVehicleFormOpen, isSystemSettingsOpen, isVehicleFormOpen]);

  const formatDateTime = (value?: string | null) => {
    if (!value) {
      return "Brak";
    }

    const date = new Date(value);
    if (Number.isNaN(date.getTime())) {
      return value;
    }

    return new Intl.DateTimeFormat("pl-PL", {
      year: "numeric",
      month: "2-digit",
      day: "2-digit",
      hour: "2-digit",
      minute: "2-digit",
      second: "2-digit",
    }).format(date);
  };

  const formatToggle = (value?: boolean | null, onLabel = "On", offLabel = "Off") => {
    if (value == null) {
      return "Brak";
    }
    return value ? onLabel : offLabel;
  };

  const formatDistanceKm = (value?: number | null) => {
    if (value == null || !Number.isFinite(value)) {
      return "Brak";
    }

    const decimals = value >= 100 ? 0 : 1;
    return `${value.toFixed(decimals).replace(".", ",")} km`;
  };

  const formatDurationMinutes = (value?: number | null) => {
    if (value == null || !Number.isFinite(value)) {
      return "Brak";
    }

    const roundedMinutes = Math.max(1, Math.round(value));
    if (roundedMinutes < 60) {
      return `${roundedMinutes} min`;
    }

    const hours = Math.floor(roundedMinutes / 60);
    const minutes = roundedMinutes % 60;
    return minutes > 0 ? `${hours} h ${minutes} min` : `${hours} h`;
  };

  const formatArrivalTime = (value?: number | null) => {
    if (value == null || !Number.isFinite(value)) {
      return "Brak";
    }

    const arrivalDate = new Date(Date.now() + Math.max(0, value) * 60 * 1000);
    return new Intl.DateTimeFormat("pl-PL", {
      hour: "2-digit",
      minute: "2-digit",
    }).format(arrivalDate);
  };

  const normalizePhoneNumber = (value?: string | null) => {
    const trimmed = (value ?? "").trim();
    if (!trimmed) {
      return null;
    }

    const hasLeadingPlus = trimmed.startsWith("+");
    const digits = trimmed.replace(/\D+/g, "");
    if (!digits) {
      return null;
    }

    if (hasLeadingPlus) {
      return `+${digits}`;
    }

    const firstThreeDigits = digits.slice(0, 3);
    if (firstThreeDigits.includes("48")) {
      if (digits.startsWith("048")) {
        return `+${digits.slice(1)}`;
      }
      if (digits.startsWith("48")) {
        return `+${digits}`;
      }
      return `+${digits}`;
    }

    return `+48${digits}`;
  };

  const handleFromDateTimeChange = (rawValue: string) => {
    const nextValue = clampDateTimeLocalValue(rawValue, historyMinInput, historyMaxInput);
    setFrom(nextValue);
  };

  const handleToDateTimeChange = (rawValue: string) => {
    const nextValue = clampDateTimeLocalValue(rawValue, historyMinInput, historyMaxInput);
    setTo(nextValue);
  };

  const getDeviceById = (deviceId?: string | null) =>
    systemDevices.find((device) => device.id === deviceId) ?? null;

  const getDeviceByImei = (imei?: string | null) =>
    systemDevices.find((device) => device.imei === (imei ?? "").trim()) ?? null;

  const detachDevice = async (currentToken: string, deviceId?: string | null) => {
    if (!deviceId) {
      return;
    }

    const device = getDeviceById(deviceId);
    if (!device) {
      return;
    }

    await updateDevice(currentToken, device.id, {
      imei: device.imei,
      phoneNumber: normalizePhoneNumber(device.phone_number),
      vehicleId: null,
    });
  };

  const assignDeviceToVehicle = async (
    currentToken: string,
    deviceId: string,
    vehicleId: string | null,
    overrides?: {
      imei?: string;
      phoneNumber?: string | null;
    },
  ) => {
    const device = getDeviceById(deviceId);
    if (!device) {
      throw new Error("Urządzenie nie istnieje");
    }

    if (vehicleId) {
      const currentVehicleDevice = vehicles.find(
        (vehicle) => vehicle.id === vehicleId && vehicle.deviceId && vehicle.deviceId !== deviceId,
      );
      if (currentVehicleDevice?.deviceId) {
        await detachDevice(currentToken, currentVehicleDevice.deviceId);
      }
    }

    await updateDevice(currentToken, deviceId, {
      imei: overrides?.imei?.trim() || device.imei,
      phoneNumber: normalizePhoneNumber(overrides?.phoneNumber ?? device.phone_number),
      vehicleId,
    });
  };

  const getPointTimestamp = (point?: Pick<HistoryPoint, "deviceTime" | "serverTime"> | null) => {
    if (!point) {
      return null;
    }

    const rawValue = point.deviceTime ?? point.serverTime;
    if (!rawValue) {
      return null;
    }

    const timestamp = new Date(rawValue).getTime();
    return Number.isNaN(timestamp) ? null : timestamp;
  };

  const getStationaryStartTimestamp = (points: HistoryPoint[], currentPoint?: PositionSnapshot | null) => {
    if (!currentPoint || (currentPoint.speed ?? 0) > 0) {
      return null;
    }

    const currentTimestamp = getPointTimestamp(currentPoint);
    if (currentTimestamp == null) {
      return null;
    }

    const relevantPoints = points
      .slice()
      .sort((a, b) => (getPointTimestamp(a) ?? 0) - (getPointTimestamp(b) ?? 0));

    let stationaryStartTimestamp = currentTimestamp;

    for (let index = relevantPoints.length - 1; index >= 0; index -= 1) {
      const candidate = relevantPoints[index];
      const candidateTimestamp = getPointTimestamp(candidate);

      if (candidateTimestamp == null || candidateTimestamp > currentTimestamp) {
        continue;
      }

      if ((candidate.speed ?? 0) > 0) {
        break;
      }

      stationaryStartTimestamp = candidateTimestamp;
    }

    return stationaryStartTimestamp;
  };

  useEffect(() => {
    const session = loadSession();
    if (!session) {
      router.replace("/login");
      return;
    }

    setToken(session.token);
    setCurrentUserId(session.user.id);
    setCurrentUserEmail(session.user.email);
    setCurrentUserFirstName(session.user.firstName);
    setCurrentUserLastName(session.user.lastName);
    setUserRole(session.user.role);
  }, [router]);

  useEffect(() => {
    if (typeof window === "undefined" || !currentUserId || hasHydratedSelectedVehicleRef.current) {
      return;
    }

    const storedVehicleId = window.localStorage.getItem(selectedVehicleStorageKey(currentUserId));
    if (storedVehicleId) {
      setSelectedVehicleId(storedVehicleId);
    }

    hasHydratedSelectedVehicleRef.current = true;
  }, [currentUserId]);

  useEffect(() => {
    if (typeof window === "undefined" || !currentUserId) {
      return;
    }

    const storedTileMode = window.localStorage.getItem(mapTileModeStorageKey(currentUserId));
    if (storedTileMode === "standard" || storedTileMode === "satellite") {
      setMapTileMode(storedTileMode);
      return;
    }

    setMapTileMode("standard");
  }, [currentUserId]);

  useEffect(() => {
    if (typeof window === "undefined" || !currentUserId) {
      return;
    }

    const todayKey = getLocalDateKey();
    const storageKey = dailyOverviewStorageKey(currentUserId);
    const storedDayKey = window.localStorage.getItem(storageKey);

    if (storedDayKey !== todayKey) {
      window.localStorage.setItem(storageKey, todayKey);
      setDailyOverviewKey(todayKey);
      return;
    }

    setDailyOverviewKey(null);
  }, [currentUserId]);

  useEffect(() => {
    if (!token) {
      return;
    }

    const load = async () => {
      try {
        const [{ items: nextVehicles }, usersResponse, devicesResponse, alertsResponse, recentAlertsResponse, companySettingsResponse] = await Promise.all([
          fetchVehicles(token),
          userRole === "admin" ? fetchUsers(token) : Promise.resolve({ items: [] }),
          userRole === "admin" ? fetchDevices(token) : Promise.resolve({ items: [] }),
          fetchActiveAlerts(token),
          fetchRecentAlerts(token),
          fetchCompanySettings(token),
        ]);

        setVehicles(nextVehicles);
        setSelectedVehicleId((current) => {
          const currentVehicleId = current?.trim() || null;
          const storedVehicleId = typeof window !== "undefined" && currentUserId
            ? window.localStorage.getItem(selectedVehicleStorageKey(currentUserId))
            : null;
          const preferredVehicleId = currentVehicleId ?? storedVehicleId;

          return preferredVehicleId && nextVehicles.some((vehicle) => vehicle.id === preferredVehicleId)
            ? preferredVehicleId
            : null;
        });
        setSystemUsers(usersResponse.items);
        setSystemDevices(devicesResponse.items);
        setActiveAlerts(alertsResponse.items);
        setRecentAlerts(recentAlertsResponse.items);
        setCompanySettings(companySettingsResponse.item);
        setCompanyAddressInput(companySettingsResponse.item?.addressInput ?? "");
        setLoadError(null);
      } catch (loadError) {
        setLoadError(getFriendlyLoadErrorMessage(loadError, "Nie udało się odświeżyć danych panelu."));
      }
    };

    void load();
  }, [currentUserId, token, userRole]);

  useEffect(() => {
    if (typeof window === "undefined" || !currentUserId) {
      return;
    }

    const storageKey = selectedVehicleStorageKey(currentUserId);
    if (selectedVehicleId) {
      window.localStorage.setItem(storageKey, selectedVehicleId);
      return;
    }

    window.localStorage.removeItem(storageKey);
  }, [currentUserId, selectedVehicleId]);

  useEffect(() => {
    if (typeof window === "undefined" || !currentUserId) {
      return;
    }

    window.localStorage.setItem(mapTileModeStorageKey(currentUserId), mapTileMode);
  }, [currentUserId, mapTileMode]);

  useEffect(() => {
    if (!token || !selectedVehicleId) {
      setHistory([]);
      setPlaybackTimestamp(null);
      setLoadError(null);
      return;
    }

    const fromMs = getDateTimeLocalTimestamp(from);
    const toMs = getDateTimeLocalTimestamp(to);
    if (Number.isNaN(fromMs) || Number.isNaN(toMs) || fromMs > toMs) {
      setHistory([]);
      setPlaybackTimestamp(null);
      return;
    }

    const load = async () => {
      try {
        const response = await fetchVehicleHistory(
          token,
          selectedVehicleId,
          toIsoFromDateTimeLocalValue(from),
          toIsoFromDateTimeLocalValue(to),
        );
        setHistory(sortHistoryPoints(response.items));
        setLoadError(null);
      } catch (historyError) {
        setLoadError(getFriendlyLoadErrorMessage(historyError, "Nie udało się wczytać historii pojazdu."));
      }
    };

    void load();
  }, [from, selectedVehicleId, to, token]);

  useEffect(() => {
    if (history.length === 0) {
      setPlaybackTimestamp(null);
      setIsTimelineVisible(false);
      return;
    }

    const firstPointTimestamp = getTimelineStartTimestamp(history, from);
    setPlaybackTimestamp((current) => current ?? firstPointTimestamp);
  }, [from, history]);

  useEffect(() => {
    if (!token) {
      return;
    }

    if (typeof window === "undefined" || !isPrivateOrLocalHost(window.location.hostname)) {
      return;
    }

    const wsBaseUrl = `${window.location.protocol}//${window.location.hostname}:4000`;

    const socket: Socket = io(wsBaseUrl, {
      path: "/ws/socket.io",
      transports: ["websocket"],
      auth: {
        token,
      },
    });

    socket.on("telemetry:update", (event) => {
      setVehicles((current) =>
        current.map((vehicle) =>
          vehicle.imei === event.imei
            ? {
                ...vehicle,
                status: event.status,
                lastSeen: event.telemetry.serverTime,
                lastPosition: {
                  lat: event.telemetry.lat,
                  lon: event.telemetry.lon,
                  speed: event.telemetry.speed ?? null,
                  heading: event.telemetry.heading ?? null,
                  deviceTime: event.telemetry.deviceTime ?? null,
                  serverTime: event.telemetry.serverTime,
                  ignition: event.telemetry.ignition ?? null,
                  battery: event.telemetry.battery ?? null,
                  gsmSignal: event.telemetry.gsmSignal ?? null,
                  satelliteCount: event.telemetry.satelliteCount ?? null,
                  gpsValid: event.telemetry.gpsValid ?? null,
                  charging: event.telemetry.charging ?? null,
                  defense: event.telemetry.defense ?? null,
                  positionType: event.telemetry.positionType ?? null,
                },
                deviceState: {
                  ...(vehicle.deviceState ?? {}),
                  phoneNumber: vehicle.phoneNumber ?? null,
                  deviceTime: event.telemetry.deviceTime ?? vehicle.deviceState?.deviceTime ?? null,
                  battery: event.telemetry.battery ?? vehicle.deviceState?.battery ?? null,
                  gsmSignal: event.telemetry.gsmSignal ?? vehicle.deviceState?.gsmSignal ?? null,
                  ignition: event.telemetry.ignition ?? vehicle.deviceState?.ignition ?? null,
                  charging: event.telemetry.charging ?? vehicle.deviceState?.charging ?? null,
                  defense: event.telemetry.defense ?? vehicle.deviceState?.defense ?? null,
                  gpsValid: event.telemetry.gpsValid ?? vehicle.deviceState?.gpsValid ?? null,
                  satelliteCount: event.telemetry.satelliteCount ?? vehicle.deviceState?.satelliteCount ?? null,
                  positionType: event.telemetry.positionType ?? vehicle.deviceState?.positionType ?? null,
                },
              }
            : vehicle,
        ),
      );
    });

    socket.on("vehicle-alert:update", (alert: VehicleAlertSummary) => {
      setActiveAlerts((current) => {
        if (current.some((item) => item.id === alert.id)) {
          return current;
        }

        return [alert, ...current];
      });
      setRecentAlerts((current) => {
        if (current.some((item) => item.id === alert.id)) {
          return current;
        }

        return [alert, ...current];
      });
    });

    socket.on("connect_error", (socketError) => {
      console.warn("socket connect error", socketError.message);
    });

    return () => {
      socket.close();
    };
  }, [token]);

  useEffect(() => {
    if (!token) {
      return;
    }

    const intervalId = window.setInterval(() => {
      void Promise.all([fetchVehicles(token), fetchActiveAlerts(token), fetchRecentAlerts(token)])
        .then(([vehiclesResponse, alertsResponse, recentAlertsResponse]) => {
          setVehicles(vehiclesResponse.items);
          setSelectedVehicleId((current) =>
            current && vehiclesResponse.items.some((vehicle) => vehicle.id === current) ? current : null,
          );
          setActiveAlerts(alertsResponse.items);
          setRecentAlerts(recentAlertsResponse.items);
        })
        .catch(() => {
          // Keep polling silent; transient network errors should not spam the UI.
        });
    }, 15000);

    return () => window.clearInterval(intervalId);
  }, [token]);

  const selectedVehicle = displayVehicles.find((vehicle) => vehicle.id === selectedVehicleId) ?? null;
  const onlineVehiclesCount = displayVehicles.filter((vehicle) => vehicle.status === "online").length;
  const movingVehicles = displayVehicles.filter((vehicle) => {
    const ignition = vehicle.deviceState?.ignition ?? vehicle.lastPosition?.ignition;
    const speed = vehicle.lastPosition?.speed ?? 0;
    return ignition === true && speed > 0;
  });
  const movingVehiclesCount = movingVehicles.length;
  const vehiclesAtCompany = companySettings
    ? displayVehicles.filter((vehicle) => {
        const point = vehicle.lastPosition;
        if (!point) {
          return false;
        }

        return distanceMeters(
          { lat: point.lat, lon: point.lon },
          { lat: companySettings.lat, lon: companySettings.lon },
        ) <= 50;
      })
    : [];
  const vehiclesAtCompanyCount = vehiclesAtCompany.length;
  const selectedDeviceState = selectedVehicle?.deviceState ?? null;
  const historyMinInput = toDateTimeLocalValue(selectedVehicle?.firstHistoryAt ?? null);
  const historyMaxInput = toDateTimeLocalValue(
    selectedVehicle?.lastPosition?.serverTime ?? selectedVehicle?.lastSeen ?? null,
  );
  const sliderMinTimestamp = history.length > 0
    ? Math.max(
        getPointTimeMs(history[0]) ?? 0,
        getDateTimeLocalTimestamp(from),
      )
    : null;
  const sliderMaxTimestamp = history.length > 0
    ? Math.min(
        getPointTimeMs(history[history.length - 1]) ?? 0,
        getDateTimeLocalTimestamp(to),
      )
    : null;
  const playbackPoint = history.length > 0
    ? getPlaybackPosition(history, playbackTimestamp, playbackDirection)
    : null;
  const selectedPosition = (isTimelineVisible ? playbackPoint : null) ?? selectedVehicle?.lastPosition ?? null;
  const selectedPositionTimestamp = getPointTimestamp(selectedPosition);
  const stationaryStartTimestamp = getStationaryStartTimestamp(
    history,
    playbackPoint ?? null,
  );
  const selectedPositionReachedTimestamp = getAddressReachedTimestamp(
    history,
    selectedPosition,
  );
  const timelineProgress = sliderMinTimestamp != null
    && sliderMaxTimestamp != null
    && playbackTimestamp != null
    && sliderMaxTimestamp > sliderMinTimestamp
    ? ((playbackTimestamp - sliderMinTimestamp) / (sliderMaxTimestamp - sliderMinTimestamp)) * 100
    : 0;
  const playbackPointTime = playbackPoint?.deviceTime ?? playbackPoint?.serverTime ?? null;
  const companyDistanceLabel = formatDistanceKm(companyRouteSummary?.distanceKm);
  const companyDurationLabel = formatDurationMinutes(companyRouteSummary?.durationMinutes);
  const effectivePositionReachedTimestamp = stationaryStartTimestamp ?? selectedPositionReachedTimestamp;
  const selectedPositionReachedLabel = effectivePositionReachedTimestamp != null
    ? formatDateTime(new Date(effectivePositionReachedTimestamp).toISOString())
    : null;

  useEffect(() => {
    if (!isTimelineVisible || !isPlaybackRunning || sliderMinTimestamp == null || sliderMaxTimestamp == null) {
      if (playbackFrameRef.current != null) {
        window.cancelAnimationFrame(playbackFrameRef.current);
        playbackFrameRef.current = null;
      }
      playbackLastTickRef.current = null;
      return;
    }

    const tick = (frameTime: number) => {
      if (playbackLastTickRef.current == null) {
        playbackLastTickRef.current = frameTime;
      }

      const deltaMs = Math.min(120, frameTime - playbackLastTickRef.current);
      playbackLastTickRef.current = frameTime;

      let shouldStop = false;

      setPlaybackTimestamp((current) => {
        const currentTimestamp = current
          ?? (playbackDirection === "backward" ? sliderMaxTimestamp : sliderMinTimestamp);
        let nextTimestamp = currentTimestamp + (
          playbackDirection === "backward"
            ? -deltaMs * playbackSpeed
            : deltaMs * playbackSpeed
        );

        if (skipStopsDuringPlayback) {
          const resumedTimestamp = findIgnitionResumeTimestamp(history, nextTimestamp, playbackDirection);
          if (resumedTimestamp == null) {
            shouldStop = true;
            return playbackDirection === "backward" ? sliderMinTimestamp : sliderMaxTimestamp;
          }
          nextTimestamp = resumedTimestamp;
        }

        if (nextTimestamp <= sliderMinTimestamp) {
          shouldStop = true;
          return sliderMinTimestamp;
        }

        if (nextTimestamp >= sliderMaxTimestamp) {
          shouldStop = true;
          return sliderMaxTimestamp;
        }

        return nextTimestamp;
      });

      if (shouldStop) {
        setIsPlaybackRunning(false);
        playbackLastTickRef.current = null;
        playbackFrameRef.current = null;
        return;
      }

      playbackFrameRef.current = window.requestAnimationFrame(tick);
    };

    playbackFrameRef.current = window.requestAnimationFrame(tick);

    return () => {
      if (playbackFrameRef.current != null) {
        window.cancelAnimationFrame(playbackFrameRef.current);
        playbackFrameRef.current = null;
      }
      playbackLastTickRef.current = null;
    };
  }, [
    isPlaybackRunning,
    isTimelineVisible,
    playbackDirection,
    playbackSpeed,
    history,
    skipStopsDuringPlayback,
    sliderMaxTimestamp,
    sliderMinTimestamp,
  ]);

  useEffect(() => {
    if (!selectedVehicle) {
      return;
    }

    if (historyMinInput) {
      setFrom((current) => clampDateTimeLocalValue(current, historyMinInput, historyMaxInput));
    }

    if (historyMaxInput) {
      setTo((current) => clampDateTimeLocalValue(current, historyMinInput, historyMaxInput));
    }
  }, [historyMaxInput, historyMinInput, selectedVehicle]);

  useEffect(() => {
    if (!from || !to) {
      return;
    }

    const fromMs = getDateTimeLocalTimestamp(from);
    const toMs = getDateTimeLocalTimestamp(to);
    if (Number.isNaN(fromMs) || Number.isNaN(toMs)) {
      return;
    }
  }, [from, to]);

  useEffect(() => {
    if (sliderMinTimestamp == null || sliderMaxTimestamp == null) {
      return;
    }

    setPlaybackTimestamp((current) => {
      if (current == null) {
        return sliderMinTimestamp;
      }

      return Math.min(Math.max(current, sliderMinTimestamp), sliderMaxTimestamp);
    });
  }, [sliderMaxTimestamp, sliderMinTimestamp]);

  useEffect(() => {
    if (!token || !selectedPosition) {
      setSelectedPositionAddress(null);
      setSelectedPositionAddressLoading(false);
      selectedPositionAddressKeyRef.current = null;
      return;
    }

    const nextKey = `${selectedPosition.lat.toFixed(5)}:${selectedPosition.lon.toFixed(5)}`;
    if (selectedPositionAddressKeyRef.current === nextKey) {
      return;
    }

    let cancelled = false;
    const timeoutId = window.setTimeout(() => {
      if (cancelled) {
        return;
      }

      selectedPositionAddressKeyRef.current = nextKey;
      setSelectedPositionAddressLoading(false);

      void reverseGeocode(token, selectedPosition.lat, selectedPosition.lon)
        .then((response) => {
          if (cancelled) {
            return;
          }

          setSelectedPositionAddress((current) =>
            current === response.item.label ? current : response.item.label,
          );
        })
        .catch(() => {
          if (cancelled) {
            return;
          }
          selectedPositionAddressKeyRef.current = null;
        })
        .finally(() => {
          if (cancelled) {
            return;
          }
          setSelectedPositionAddressLoading(false);
        });
    }, isPlaybackRunning ? 400 : 120);

    return () => {
      cancelled = true;
      window.clearTimeout(timeoutId);
    };
  }, [isPlaybackRunning, selectedPosition, token]);

  useEffect(() => {
    if (!token || !selectedPosition || !companySettings) {
      setCompanyRouteSummary(null);
      companyRouteKeyRef.current = null;
      return;
    }

    const nextKey = [
      selectedPosition.lat.toFixed(4),
      selectedPosition.lon.toFixed(4),
      companySettings.lat.toFixed(4),
      companySettings.lon.toFixed(4),
    ].join(":");

    if (companyRouteKeyRef.current === nextKey) {
      return;
    }

    let cancelled = false;
    companyRouteKeyRef.current = nextKey;

    void fetchCompanyRoute(token, selectedPosition.lat, selectedPosition.lon)
      .then((response) => {
        if (cancelled) {
          return;
        }

        setCompanyRouteSummary(response.item);
      })
      .catch(() => {
        if (cancelled) {
          return;
        }

        companyRouteKeyRef.current = null;
        setCompanyRouteSummary(null);
      });

    return () => {
      cancelled = true;
    };
  }, [companySettings, selectedPosition, token]);

  useEffect(() => {
    if (isEditVehicleFormOpen) {
      return;
    }

    const sourceVehicle = vehicles.find((vehicle) => vehicle.id === selectedVehicleId) ?? null;
    if (!sourceVehicle) {
      setEditVehicleName("");
      setEditVehiclePlateNumber("");
      setEditVehicleColorKey(DEFAULT_VEHICLE_COLOR_KEY);
      setEditVehicleKind("passenger");
      setEditDeviceImei("");
      setEditDevicePhoneNumber("");
      return;
    }

    setEditVehicleName(sourceVehicle.name);
    setEditVehiclePlateNumber(sourceVehicle.plateNumber ?? "");
    setEditVehicleColorKey(sourceVehicle.colorKey ?? DEFAULT_VEHICLE_COLOR_KEY);
    setEditVehicleKind(sourceVehicle.vehicleKind ?? "passenger");
    setEditAssignedDeviceId(sourceVehicle.deviceId ?? "");
    setEditDeviceImei(sourceVehicle.imei ?? "");
    setEditDevicePhoneNumber(sourceVehicle.phoneNumber ?? "");
  }, [isEditVehicleFormOpen, selectedVehicleId, vehicles]);

  const reloadAdminData = async (currentToken: string) => {
    const [{ items: nextVehicles }, usersResponse, devicesResponse, alertsResponse, recentAlertsResponse, companySettingsResponse] = await Promise.all([
      fetchVehicles(currentToken),
      userRole === "admin" ? fetchUsers(currentToken) : Promise.resolve({ items: [] }),
      userRole === "admin" ? fetchDevices(currentToken) : Promise.resolve({ items: [] }),
      fetchActiveAlerts(currentToken),
      fetchRecentAlerts(currentToken),
      fetchCompanySettings(currentToken),
    ]);

    setVehicles(nextVehicles);
    setSelectedVehicleId((current) =>
      current && nextVehicles.some((vehicle) => vehicle.id === current) ? current : null,
    );
    setSystemUsers(usersResponse.items);
    setSystemDevices(devicesResponse.items);
    setActiveAlerts(alertsResponse.items);
    setRecentAlerts(recentAlertsResponse.items);
    setCompanySettings(companySettingsResponse.item);
    setCompanyAddressInput(companySettingsResponse.item?.addressInput ?? "");
  };

  const onLogout = () => {
    clearSession();
    router.replace("/login");
  };

  const onSaveCompanySettings = async (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    if (!token) {
      return;
    }

    setActionError(null);
    setCompanySettingsMessage(null);

    try {
      const response = await updateCompanySettings(token, {
        address: companyAddressInput.trim(),
      });
      setCompanySettings(response.item);
      setCompanyAddressInput(response.item?.addressInput ?? "");
      companyRouteKeyRef.current = null;
      setCompanySettingsMessage("Adres firmy zapisany.");
    } catch (saveError) {
      setActionError(saveError instanceof Error ? saveError.message : "Nie udało się zapisać adresu firmy");
    }
  };

  const openVehicleEditor = (vehicle: VehicleSummary) => {
    setIsSystemSettingsOpen(false);
    setIsVehicleFormOpen(false);
    setIsDeviceFormOpen(false);
    setSelectedVehicleId(vehicle.id);
    setEditVehicleName(vehicle.name);
    setEditVehiclePlateNumber(vehicle.plateNumber ?? "");
    setEditVehicleColorKey(vehicle.colorKey ?? DEFAULT_VEHICLE_COLOR_KEY);
    setEditVehicleKind(vehicle.vehicleKind ?? "passenger");
    setEditAssignedDeviceId(vehicle.deviceId ?? "");
    setEditDeviceImei(vehicle.imei ?? "");
    setEditDevicePhoneNumber(vehicle.phoneNumber ?? "");
    setIsEditVehicleFormOpen(true);
  };

  const onCreateVehicle = async (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    if (!token) {
      return;
    }

    setActionError(null);
    setAdminMessage(null);

    try {
      await createVehicle(token, {
        name: vehicleName.trim(),
        plateNumber: vehiclePlateNumber.trim() || undefined,
        colorKey: vehicleColorKey,
        vehicleKind,
      });
      setVehicleName("");
      setVehiclePlateNumber("");
      setVehicleColorKey(DEFAULT_VEHICLE_COLOR_KEY);
      setVehicleKind("passenger");
      setIsVehicleFormOpen(false);
      await reloadAdminData(token);
      setAdminMessage("Pojazd dodany.");
    } catch (createError) {
      setActionError(createError instanceof Error ? createError.message : "Nie udało się dodać pojazdu");
    }
  };

  const onCreateDevice = async (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    if (!token) {
      return;
    }

    setActionError(null);
    setAdminMessage(null);

    try {
      await createDevice(token, {
        imei: deviceImei.trim(),
        phoneNumber: normalizePhoneNumber(devicePhoneNumber.trim()) ?? undefined,
        vehicleId: deviceVehicleId || undefined,
      });
      setDeviceImei("");
      setDevicePhoneNumber("");
      setDeviceVehicleId("");
      setIsDeviceFormOpen(false);
      await reloadAdminData(token);
      setAdminMessage("Urządzenie dodane.");
    } catch (createError) {
      setActionError(createError instanceof Error ? createError.message : "Nie udało się dodać urządzenia");
    }
  };

  const onCreateSystemUser = async (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    if (!token) {
      return;
    }

    setActionError(null);
    setAdminMessage(null);

    try {
      await createUser(token, {
        email: newUserEmail.trim(),
        firstName: newUserFirstName.trim(),
        lastName: newUserLastName.trim(),
        password: newUserPassword,
        role: newUserRole,
        vehicleIds: newUserVehicleIds,
      });
      setNewUserEmail("");
      setNewUserFirstName("");
      setNewUserLastName("");
      setNewUserPassword("");
      setNewUserRole("user");
      setNewUserVehicleIds([]);
      await reloadAdminData(token);
      setAdminMessage("Użytkownik dodany.");
    } catch (createError) {
      setActionError(createError instanceof Error ? createError.message : "Nie udało się dodać użytkownika");
    }
  };

  const onUpdateSystemUser = async (
    userId: string,
    firstName: string,
    lastName: string,
    role: "admin" | "user",
    vehicleIds: string[],
    password?: string,
  ) => {
    if (!token) {
      return;
    }

    setActionError(null);
    setAdminMessage(null);

    try {
      const response = await updateUser(token, userId, { firstName, lastName, password, role, vehicleIds });
      setSystemUsers((current) =>
        current.map((user) => (user.id === userId ? response.item : user)),
      );
      if (currentUserId === userId) {
        setCurrentUserFirstName(response.item.firstName);
        setCurrentUserLastName(response.item.lastName);
        saveSession({
          token,
          user: {
            id: userId,
            email: response.item.email,
            firstName: response.item.firstName,
            lastName: response.item.lastName,
            role,
          },
        });
      }
      setSavedUserId(userId);
      setAdminMessage("Uprawnienia użytkownika zapisane.");
    } catch (updateError) {
      setActionError(updateError instanceof Error ? updateError.message : "Nie udało się zapisać użytkownika");
    }
  };

  const onDeleteSystemUser = async (userId: string, email: string) => {
    if (!token) {
      return;
    }

    const confirmed = window.confirm(`Usunąć użytkownika ${email}?`);
    if (!confirmed) {
      return;
    }

    setActionError(null);
    setAdminMessage(null);
    setSavedUserId(null);

    try {
      await deleteUser(token, userId);
      await reloadAdminData(token);
      setAdminMessage("Użytkownik usunięty.");
    } catch (deleteError) {
      setActionError(deleteError instanceof Error ? deleteError.message : "Nie udało się usunąć użytkownika");
    }
  };

  const onUpdateVehicle = async (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    if (!token || !selectedVehicle) {
      return;
    }

    setActionError(null);
    setAdminMessage(null);
    setVehicleSuccessMessage(null);

    try {
      await updateVehicle(token, selectedVehicle.id, {
        name: editVehicleName.trim(),
        plateNumber: editVehiclePlateNumber.trim() || null,
        colorKey: editVehicleColorKey,
        vehicleKind: editVehicleKind,
      });

      const normalizedPhoneNumber = normalizePhoneNumber(editDevicePhoneNumber);
      const trimmedImei = editDeviceImei.trim();

      if (editAssignedDeviceId) {
        if (!trimmedImei) {
          throw new Error("IMEI nie może być puste dla przypisanego urządzenia");
        }

        if (selectedVehicle.deviceId && selectedVehicle.deviceId !== editAssignedDeviceId) {
          await detachDevice(token, selectedVehicle.deviceId);
        }

        await assignDeviceToVehicle(token, editAssignedDeviceId, selectedVehicle.id, {
          imei: trimmedImei,
          phoneNumber: normalizedPhoneNumber,
        });
      } else if (selectedVehicle.deviceId) {
        if (trimmedImei) {
          await updateDevice(token, selectedVehicle.deviceId, {
            imei: trimmedImei,
            phoneNumber: normalizedPhoneNumber,
            vehicleId: selectedVehicle.id,
          });
        } else {
          await detachDevice(token, selectedVehicle.deviceId);
        }
      } else if (trimmedImei) {
        await createDevice(token, {
          imei: trimmedImei,
          phoneNumber: normalizedPhoneNumber ?? undefined,
          vehicleId: selectedVehicle.id,
        });
      }

      await reloadAdminData(token);
      setIsEditVehicleFormOpen(false);
      setVehicleSuccessMessage("Pojazd zaktualizowany.");
    } catch (updateError) {
      setActionError(updateError instanceof Error ? updateError.message : "Nie udało się zapisać zmian");
    }
  };

  const onAssignSystemDevice = async (deviceId: string) => {
    if (!token) {
      return;
    }

    setActionError(null);
    setAdminMessage(null);

    try {
      const nextVehicleId = deviceVehicleAssignments[deviceId] || null;
      await assignDeviceToVehicle(token, deviceId, nextVehicleId);
      await reloadAdminData(token);
      setAdminMessage("Powiązanie IMEI zapisane.");
    } catch (assignError) {
      setActionError(assignError instanceof Error ? assignError.message : "Nie udało się zapisać powiązania IMEI");
    }
  };

  const onDeleteSystemDevice = async (deviceId: string, imei: string) => {
    if (!token) {
      return;
    }

    const confirmed = window.confirm(`Usunąć numer IMEI ${imei}?`);
    if (!confirmed) {
      return;
    }

    setActionError(null);
    setAdminMessage(null);

    try {
      await deleteDevice(token, deviceId);
      await reloadAdminData(token);
      setAdminMessage("IMEI usunięty.");
    } catch (deleteError) {
      setActionError(deleteError instanceof Error ? deleteError.message : "Nie udało się usunąć IMEI");
    }
  };

  const onDeleteVehicle = async () => {
    if (!token || !selectedVehicle) {
      return;
    }

    const confirmed = window.confirm(`Usunąć pojazd ${selectedVehicle.name}?`);
    if (!confirmed) {
      return;
    }

    setActionError(null);
    setAdminMessage(null);

    try {
      const removedVehicleId = selectedVehicle.id;
      await deleteVehicle(token, selectedVehicle.id);
      setVehicles((current) => current.filter((vehicle) => vehicle.id !== removedVehicleId));
      setSelectedVehicleId(null);
      setHistory([]);
      setPlaybackTimestamp(null);
      setAdminMessage("Pojazd usunięty.");
    } catch (deleteError) {
      setActionError(deleteError instanceof Error ? deleteError.message : "Nie udało się usunąć pojazdu");
    }
  };

  const onAcknowledgeAlert = async (alertId: string) => {
    if (!token) {
      return;
    }

    setActionError(null);
    setAdminMessage(null);

    try {
      await acknowledgeAlert(token, alertId);
      setActiveAlerts((current) => current.filter((alert) => alert.id !== alertId));
      setAdminMessage("Informacja oznaczona jako odczytana.");
    } catch (ackError) {
      setActionError(ackError instanceof Error ? ackError.message : "Nie udało się potwierdzić informacji");
    }
  };

  const onToggleTimeline = async () => {
    if (!token || !selectedVehicleId) {
      return;
    }

    setActionError(null);

    const fromMs = getDateTimeLocalTimestamp(from);
    const toMs = getDateTimeLocalTimestamp(to);

    if (Number.isNaN(fromMs) || Number.isNaN(toMs)) {
      setActionError("Ustaw poprawną datę i godzinę zakresu historii.");
      return;
    }

    if (fromMs > toMs) {
      setActionError("Data 'Od' nie może być późniejsza niż 'Do'.");
      return;
    }

    if (toMs - fromMs > MAX_HISTORY_RANGE_MS) {
      setActionError("Zakres historii może obejmować maksymalnie 48 godzin.");
      return;
    }

    try {
      const response = await fetchVehicleHistory(
        token,
        selectedVehicleId,
        toIsoFromDateTimeLocalValue(from),
        toIsoFromDateTimeLocalValue(to),
      );
      const nextHistory = sortHistoryPoints(response.items);
      setHistory(nextHistory);
      setPlaybackDirection("forward");
      setIsPlaybackRunning(nextHistory.length > 1);
      setLoadError(null);
      setIsTimelineVisible(nextHistory.length > 0);
      setPlaybackTimestamp(getTimelineStartTimestamp(nextHistory, from));
      if (nextHistory.length === 0) {
        setActionError("Brak historii w wybranym zakresie.");
      } else if (nextHistory.length === 1) {
        setActionError("W wybranym zakresie jest tylko jeden punkt historii.");
      }
    } catch (historyError) {
      setLoadError(getFriendlyLoadErrorMessage(historyError, "Nie udało się wczytać historii pojazdu."));
      setIsTimelineVisible(false);
      setIsPlaybackRunning(false);
    }
  };

  const startPlayback = (direction: "forward" | "backward") => {
    if (sliderMinTimestamp == null || sliderMaxTimestamp == null) {
      return;
    }

    setPlaybackDirection(direction);
    setPlaybackTimestamp((current) => {
      let nextTimestamp = current;
      if (nextTimestamp == null) {
        nextTimestamp = direction === "backward" ? sliderMaxTimestamp : sliderMinTimestamp;
      } else if (direction === "forward" && nextTimestamp >= sliderMaxTimestamp) {
        nextTimestamp = sliderMinTimestamp;
      } else if (direction === "backward" && nextTimestamp <= sliderMinTimestamp) {
        nextTimestamp = sliderMaxTimestamp;
      }

      if (skipStopsDuringPlayback && nextTimestamp != null) {
        const resumedTimestamp = findIgnitionResumeTimestamp(history, nextTimestamp, direction);
        if (resumedTimestamp != null) {
          return resumedTimestamp;
        }
      }
      return nextTimestamp;
    });
    setIsPlaybackRunning(true);
  };

  const pausePlayback = () => {
    setIsPlaybackRunning(false);
  };

  const stopTimelinePlayback = () => {
    setIsPlaybackRunning(false);
    setIsTimelineVisible(false);
    setHistory([]);
    setPlaybackTimestamp(null);
    setPlaybackDirection("forward");
  };

  if (!token) {
    return null;
  }

  const overlayRoot = typeof document !== "undefined" ? document.body : null;

  return (
    <main className="brand-shell h-[100dvh] overflow-hidden p-3 md:min-h-screen md:h-auto md:overflow-visible md:p-4">
      <div className="brand-map-background">
        <DynamicMap
          vehicles={animatedDisplayVehicles}
          activeVehicleId={selectedVehicleId}
          focusVehicleKey={selectedVehicleId ? `${selectedVehicleId}:${vehicleFocusNonce}` : null}
          isBottomPanelExpanded={activeMobileSection !== null}
          closePopupKey={isSelectedVehicleMenuOpen ? "vehicle-menu-open" : "vehicle-menu-closed"}
          history={history}
          playbackTimestamp={playbackTimestamp}
          playbackDirection={playbackDirection}
          showHistoryPath={isTimelineVisible}
          overviewKey={dailyOverviewKey}
          tileMode={mapTileMode}
          popupAddress={selectedPositionAddress}
          companyDistanceKm={companyRouteSummary?.distanceKm}
          companyDurationMinutes={companyRouteSummary?.durationMinutes}
          onTileModeChange={setMapTileMode}
          onVehicleSelect={handleVehicleSelection}
        />
      </div>
      {isSystemSettingsOpen && overlayRoot ? createPortal((
        <div
          className="fixed inset-0 z-[920] flex items-start justify-center overflow-y-auto bg-slate-950/48 px-3 py-4 backdrop-blur-sm md:items-center md:py-6"
          onClick={() => setIsSystemSettingsOpen(false)}
        >
          <div
            className="panel relative my-auto w-full max-w-5xl overflow-hidden rounded-[2rem] p-4 shadow-panel md:p-5"
            onClick={(event) => event.stopPropagation()}
          >
            <button
              type="button"
              onClick={() => setIsSystemSettingsOpen(false)}
              className="absolute right-4 top-4 flex h-9 w-9 items-center justify-center rounded-full border border-slate-200 text-lg font-semibold text-ink"
              aria-label="Zamknij"
            >
              ×
            </button>
            <div className="pr-12">
              <p className="text-xs uppercase tracking-[0.3em] text-sky">Admin</p>
              <h3 className="mt-2 text-2xl font-bold text-ink">Ustawienia systemu</h3>
            </div>
            <div className="visible-scrollbar mt-5 max-h-[calc(100dvh-8.5rem)] overflow-y-auto pr-1 md:max-h-[calc(100dvh-12rem)]">
              <div className="flex flex-wrap gap-2">
                {[
                  { key: "users", label: "Użytkownicy" },
                  { key: "vehicles", label: "Samochody" },
                  { key: "devices", label: "Numery IMEI" },
                  { key: "company", label: "Adres firmy" },
                ].map((tab) => (
                  <button
                    key={tab.key}
                    type="button"
                    onClick={() => setSystemSettingsTab(tab.key as "users" | "vehicles" | "devices" | "company")}
                    className={`rounded-full px-4 py-2 text-sm font-semibold transition ${
                      systemSettingsTab === tab.key
                        ? "bg-slate-900 text-white"
                        : "border border-slate-200 bg-white text-ink"
                    }`}
                  >
                    {tab.label}
                  </button>
                ))}
              </div>
              {systemSettingsTab === "users" ? (
                <div className="mt-5 grid gap-4 xl:grid-cols-[360px_minmax(0,1fr)]">
                <form onSubmit={onCreateSystemUser} className="rounded-[1.5rem] border border-slate-200 bg-white/75 p-4">
                  <div className="text-sm font-semibold text-ink">Dodaj użytkownika</div>
                  <div className="mt-3 space-y-2.5">
                    <input
                      type="email"
                      placeholder="Email"
                      value={newUserEmail}
                      onChange={(event) => setNewUserEmail(event.target.value)}
                      className="h-10 w-full rounded-2xl border border-slate-200 bg-white px-3.5 text-sm"
                      required
                    />
                    <div className="grid gap-2 sm:grid-cols-2">
                      <input
                        type="text"
                        placeholder="Imię"
                        value={newUserFirstName}
                        onChange={(event) => setNewUserFirstName(event.target.value)}
                        className="h-10 w-full rounded-2xl border border-slate-200 bg-white px-3.5 text-sm"
                        required
                      />
                      <input
                        type="text"
                        placeholder="Nazwisko"
                        value={newUserLastName}
                        onChange={(event) => setNewUserLastName(event.target.value)}
                        className="h-10 w-full rounded-2xl border border-slate-200 bg-white px-3.5 text-sm"
                        required
                      />
                    </div>
                    <input
                      type="password"
                      placeholder="Hasło"
                      value={newUserPassword}
                      onChange={(event) => setNewUserPassword(event.target.value)}
                      className="h-10 w-full rounded-2xl border border-slate-200 bg-white px-3.5 text-sm"
                      minLength={8}
                      required
                    />
                    <select
                      value={newUserRole}
                      onChange={(event) => setNewUserRole(event.target.value as "admin" | "user")}
                      className="h-10 w-full rounded-2xl border border-slate-200 bg-white px-3.5 text-sm"
                    >
                      <option value="user">User</option>
                      <option value="admin">Admin</option>
                    </select>
                  </div>
                  <div className="mt-3 text-[11px] font-semibold uppercase tracking-[0.2em] text-steel">
                    Dostęp do pojazdów
                  </div>
                  <div className="mt-2 flex max-h-[280px] flex-wrap gap-2 overflow-y-auto pr-1">
                    {vehicles.map((vehicle) => {
                      const isActive = newUserVehicleIds.includes(vehicle.id);
                      return (
                        <button
                          key={vehicle.id}
                          type="button"
                          onClick={() =>
                            setNewUserVehicleIds((current) =>
                              current.includes(vehicle.id)
                                ? current.filter((currentId) => currentId !== vehicle.id)
                                : [...current, vehicle.id],
                            )
                          }
                          className={`rounded-full border px-3 py-1 text-xs font-medium transition ${
                            isActive
                              ? "border-slate-900 bg-slate-900 text-white"
                              : "border-slate-200 bg-white text-ink"
                          }`}
                        >
                          {vehicle.name}
                        </button>
                      );
                    })}
                  </div>
                  <button
                    type="submit"
                    className="mt-4 w-full rounded-2xl bg-ink px-4 py-2.5 text-sm font-semibold text-white"
                  >
                    Dodaj użytkownika
                  </button>
                </form>

                <div className="rounded-[1.5rem] border border-slate-200 bg-white/75 p-4">
                  <div className="flex items-center justify-between gap-3">
                    <div className="text-sm font-semibold text-ink">Użytkownicy i uprawnienia</div>
                    <div className="rounded-full bg-slate-900 px-3 py-1 text-xs font-semibold text-white">
                      {systemUsers.length}
                    </div>
                  </div>
                  <div className="mt-4 h-[348px] overflow-y-auto px-1 pt-3">
                    <div className="grid gap-3 md:grid-cols-2">
                      {systemUsers.map((user) => (
                        <UserAccessCard
                          key={user.id}
                          currentUserId={currentUserId ?? ""}
                          user={user}
                          vehicles={vehicles}
                          isSaved={savedUserId === user.id}
                          onSave={onUpdateSystemUser}
                          onDelete={onDeleteSystemUser}
                        />
                      ))}
                    </div>
                  </div>
                </div>
                </div>
              ) : null}

              {systemSettingsTab === "vehicles" ? (
                <div className="mt-5 grid gap-4 xl:grid-cols-[360px_minmax(0,1fr)]">
                <form onSubmit={onCreateVehicle} className="rounded-[1.5rem] border border-slate-200 bg-white/75 p-4">
                  <div className="text-sm font-semibold text-ink">Dodaj samochód</div>
                  <div className="mt-3 space-y-2.5">
                    <input
                      type="text"
                      placeholder="Nazwa pojazdu"
                      value={vehicleName}
                      onChange={(event) => setVehicleName(event.target.value)}
                      className="h-10 w-full rounded-2xl border border-slate-200 bg-white px-3.5 text-sm"
                      required
                    />
                    <input
                      type="text"
                      placeholder="Nr rej."
                      value={vehiclePlateNumber}
                      onChange={(event) => setVehiclePlateNumber(event.target.value)}
                      className="h-10 w-full rounded-2xl border border-slate-200 bg-white px-3.5 text-sm"
                    />
                    <div className="grid grid-cols-2 gap-2">
                      <button
                        type="button"
                        onClick={() => setVehicleKind("passenger")}
                        className={`h-10 rounded-2xl border text-sm font-semibold transition ${
                          vehicleKind === "passenger"
                            ? "border-slate-900 bg-slate-900 text-white"
                            : "border-slate-200 bg-white text-ink"
                        }`}
                      >
                        Osobowe
                      </button>
                      <button
                        type="button"
                        onClick={() => setVehicleKind("delivery")}
                        className={`h-10 rounded-2xl border text-sm font-semibold transition ${
                          vehicleKind === "delivery"
                            ? "border-slate-900 bg-slate-900 text-white"
                            : "border-slate-200 bg-white text-ink"
                        }`}
                      >
                        Dostawcze
                      </button>
                    </div>
                    <div className="flex flex-wrap gap-2">
                      {VEHICLE_COLOR_OPTIONS.map((option) => (
                        <button
                          key={option.key}
                          type="button"
                          onClick={() => setVehicleColorKey(option.key)}
                          className={`h-7 w-7 rounded-full border-2 transition ${
                            vehicleColorKey === option.key ? "scale-110 border-slate-950 shadow-md" : "border-white/80 shadow-sm"
                          }`}
                          style={{ backgroundColor: option.hex }}
                          aria-label={option.label}
                          title={option.label}
                        />
                      ))}
                    </div>
                  </div>
                  <button
                    type="submit"
                    className="mt-4 w-full rounded-2xl bg-ink px-4 py-2.5 text-sm font-semibold text-white"
                  >
                    Dodaj samochód
                  </button>
                </form>

                <div className="rounded-[1.5rem] border border-slate-200 bg-white/75 p-4">
                  <div className="flex items-center justify-between gap-3">
                    <div className="text-sm font-semibold text-ink">Samochody w systemie</div>
                    <div className="rounded-full bg-slate-900 px-3 py-1 text-xs font-semibold text-white">
                      {vehicles.length}
                    </div>
                  </div>
                  <div className="visible-scrollbar mt-4 h-[348px] overflow-y-scroll pr-2 pl-1 pt-2">
                    <div className="grid gap-3 md:grid-cols-2">
                      {vehicles.map((vehicle) => (
                        <div key={vehicle.id} className="rounded-[1.4rem] border border-slate-200 bg-white/80 p-4">
                          <div className="flex items-start justify-between gap-3">
                            <div className="min-w-0">
                              <div
                                className="truncate text-sm font-semibold"
                                style={{ color: getVehicleColorHex(vehicle.colorKey) }}
                              >
                                {vehicle.name}
                              </div>
                              <div className="mt-1 text-xs text-steel">
                                {vehicle.vehicleKind === "delivery" ? "Dostawcze" : "Osobowe"}
                                {vehicle.plateNumber ? ` | ${vehicle.plateNumber}` : ""}
                              </div>
                            </div>
                            <div
                              className={`shrink-0 rounded-full px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.14em] ${
                                vehicle.status === "online"
                                  ? "bg-mint/15 text-mint shadow-[0_0_14px_rgba(74,222,128,0.35)]"
                                  : "bg-coral/15 text-coral shadow-[0_0_14px_rgba(251,113,133,0.35)]"
                              }`}
                            >
                              {vehicle.status === "online" ? "Online" : "Offline"}
                            </div>
                          </div>
                          <div className="mt-3 text-xs text-steel">
                            {vehicle.imei ? `IMEI: ${vehicle.imei}` : "Brak przypisanego IMEI"}
                          </div>
                          <button
                            type="button"
                            onClick={() => openVehicleEditor(vehicle)}
                            className="mt-3 rounded-full border border-slate-300 px-3 py-1.5 text-[11px] font-semibold text-ink"
                          >
                            Edytuj
                          </button>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
                </div>
              ) : null}

              {systemSettingsTab === "devices" ? (
                <div className="mt-5 grid gap-4 xl:grid-cols-[360px_minmax(0,1fr)]">
                <form onSubmit={onCreateDevice} className="rounded-[1.5rem] border border-slate-200 bg-white/75 p-4">
                  <div className="text-sm font-semibold text-ink">Dodaj numer IMEI</div>
                  <div className="mt-3 space-y-2.5">
                    <input
                      type="text"
                      inputMode="numeric"
                      pattern="\d{14,17}"
                      placeholder="IMEI"
                      value={deviceImei}
                      onChange={(event) => setDeviceImei(event.target.value)}
                      className="h-10 w-full rounded-2xl border border-slate-200 bg-white px-3.5 text-sm"
                      required
                    />
                    <input
                      type="text"
                      placeholder="Telefon"
                      value={devicePhoneNumber}
                      onChange={(event) => setDevicePhoneNumber(event.target.value)}
                      className="h-10 w-full rounded-2xl border border-slate-200 bg-white px-3.5 text-sm"
                    />
                    <select
                      value={deviceVehicleId}
                      onChange={(event) => setDeviceVehicleId(event.target.value)}
                      className="h-10 w-full rounded-2xl border border-slate-200 bg-white px-3.5 text-sm"
                    >
                      <option value="">Tylko do bazy, bez podpinania</option>
                      {vehicles.map((vehicle) => (
                        <option key={vehicle.id} value={vehicle.id}>
                          {getVehicleOptionLabel(vehicle)}
                        </option>
                      ))}
                    </select>
                  </div>
                  <button
                    type="submit"
                    className="mt-4 w-full rounded-2xl bg-sky px-4 py-2.5 text-sm font-semibold text-white"
                  >
                    Dodaj IMEI
                  </button>
                </form>

                <div className="rounded-[1.5rem] border border-slate-200 bg-white/75 p-4">
                  <div className="flex items-center justify-between gap-3">
                    <div className="text-sm font-semibold text-ink">Numery IMEI w bazie</div>
                    <div className="rounded-full bg-slate-900 px-3 py-1 text-xs font-semibold text-white">
                      {systemDevices.length}
                    </div>
                  </div>
                  <div className="mt-4 max-h-[230px] overflow-y-auto pr-1">
                    <div className="grid gap-3 md:grid-cols-2">
                      {systemDevices.map((device) => {
                        const assignedVehicle = vehicles.find((vehicle) => vehicle.id === device.vehicle_id);
                        const isLinked = Boolean(assignedVehicle);

                        return (
                          <div key={device.id} className="relative rounded-[1.4rem] border border-slate-200 bg-white/80 p-4">
                            <button
                              type="button"
                              onClick={() => void onDeleteSystemDevice(device.id, device.imei)}
                              className="absolute right-2 top-2 z-10 flex h-5 w-5 items-center justify-center rounded-full bg-coral text-[13px] font-bold leading-none text-white shadow-md transition hover:scale-105"
                              aria-label={`Usuń IMEI ${device.imei}`}
                              title="Usuń IMEI"
                            >
                              ×
                            </button>
                            <div className="flex items-start justify-between gap-3">
                              <div className="min-w-0">
                                <div className="text-sm font-semibold text-ink">{device.imei}</div>
                                <div className="mt-1 text-xs text-steel">
                                  {device.phone_number ?? "Bez numeru"}
                                </div>
                              </div>
                              <div
                                className={`mt-0.5 flex shrink-0 items-center gap-1.5 rounded-full px-2 py-1 text-[11px] font-medium ${
                                  isLinked ? "bg-mint/10 text-mint" : "bg-slate-100 text-steel"
                                }`}
                                title={isLinked ? "Podłączony" : "Niepodłączony"}
                              >
                                <svg viewBox="0 0 24 24" className="h-3.5 w-3.5" fill="currentColor" aria-hidden="true">
                                  {isLinked ? (
                                    <path d="M10.59,13.41C11.37,14.19 12.63,14.19 13.41,13.41L18.59,8.24C19.37,7.46 19.37,6.19 18.59,5.41C17.81,4.63 16.54,4.63 15.76,5.41L12.35,8.83L10.94,7.41L14.35,4C15.91,2.44 18.44,2.44 20,4C21.56,5.56 21.56,8.09 20,9.65L14.83,14.83C13.27,16.39 10.74,16.39 9.18,14.83L9.17,14.82M13.06,16.59L9.65,20C8.09,21.56 5.56,21.56 4,20C2.44,18.44 2.44,15.91 4,14.35L9.17,9.17C10.73,7.61 13.26,7.61 14.82,9.17L14.83,9.18L13.41,10.59L13.4,10.58C12.62,9.8 11.35,9.8 10.57,10.58L5.41,15.76C4.63,16.54 4.63,17.81 5.41,18.59C6.19,19.37 7.46,19.37 8.24,18.59L11.65,15.17L13.06,16.59Z" />
                                  ) : (
                                    <>
                                      <path d="M10.59,13.41C11.37,14.19 12.63,14.19 13.41,13.41L18.59,8.24C19.37,7.46 19.37,6.19 18.59,5.41C17.81,4.63 16.54,4.63 15.76,5.41L12.35,8.83L10.94,7.41L14.35,4C15.91,2.44 18.44,2.44 20,4C21.56,5.56 21.56,8.09 20,9.65L14.83,14.83C13.27,16.39 10.74,16.39 9.18,14.83L9.17,14.82M13.06,16.59L9.65,20C8.09,21.56 5.56,21.56 4,20C2.44,18.44 2.44,15.91 4,14.35L9.17,9.17C10.73,7.61 13.26,7.61 14.82,9.17L14.83,9.18L13.41,10.59L13.4,10.58C12.62,9.8 11.35,9.8 10.57,10.58L5.41,15.76C4.63,16.54 4.63,17.81 5.41,18.59C6.19,19.37 7.46,19.37 8.24,18.59L11.65,15.17L13.06,16.59Z" />
                                      <path d="M3.27 2L2 3.27L8.73 10L10.14 8.59L3.27 2M20.73 22L22 20.73L15.19 13.92L13.78 15.33L20.73 22Z" />
                                    </>
                                  )}
                                </svg>
                                {isLinked ? <span>{assignedVehicle?.name}</span> : null}
                              </div>
                            </div>
                            <select
                              value={deviceVehicleAssignments[device.id] ?? ""}
                              onChange={(event) =>
                                setDeviceVehicleAssignments((current) => ({
                                  ...current,
                                  [device.id]: event.target.value,
                                }))
                              }
                              className="mt-3 h-9 w-full rounded-2xl border border-slate-200 bg-white px-3 text-sm"
                            >
                              <option value="">Tylko w bazie, bez podpinania</option>
                              {vehicles.map((vehicle) => (
                                <option key={vehicle.id} value={vehicle.id}>
                                  {getVehicleOptionLabel(vehicle)}
                                </option>
                              ))}
                            </select>
                            <button
                              type="button"
                              onClick={() => void onAssignSystemDevice(device.id)}
                              className="mt-3 rounded-full border border-slate-300 px-3 py-1.5 text-[11px] font-semibold text-ink"
                            >
                              Zapisz powiązanie
                            </button>
                          </div>
                        );
                      })}
                    </div>
                  </div>
                </div>
                </div>
              ) : null}

              {systemSettingsTab === "company" ? (
                <div className="mt-5">
                  <form onSubmit={onSaveCompanySettings} className="rounded-[1.5rem] border border-slate-200 bg-white/75 p-4">
                    <div className="text-sm font-semibold text-ink">Adres firmy</div>
                    <div className="mt-3 grid gap-2 md:grid-cols-[minmax(0,1fr)_auto]">
                      <input
                        type="text"
                        value={companyAddressInput}
                        onChange={(event) => setCompanyAddressInput(event.target.value)}
                        placeholder="Wpisz adres firmy"
                        className="h-10 w-full rounded-2xl border border-slate-200 bg-white px-3.5 text-sm text-ink"
                      />
                      <button
                        type="submit"
                        className="rounded-2xl bg-slate-900 px-4 py-2.5 text-sm font-semibold text-white"
                      >
                        Zapisz adres firmy
                      </button>
                    </div>
                    <div className="mt-3 min-h-[16px] text-[11px] leading-tight">
                      {companySettingsMessage ? (
                        <span className="font-semibold text-mint">{companySettingsMessage}</span>
                      ) : companySettings?.addressLabel ? (
                        <span className="text-steel">{companySettings.addressLabel}</span>
                      ) : null}
                    </div>
                  </form>
                </div>
              ) : null}
            </div>
          </div>
        </div>
      ), overlayRoot) : null}

      {isVehicleFormOpen && overlayRoot ? createPortal((
        <div
          className="fixed inset-0 z-[900] flex items-center justify-center bg-slate-950/45 px-3 backdrop-blur-sm"
          onClick={() => setIsVehicleFormOpen(false)}
        >
          <div
            className="panel relative w-full max-w-lg rounded-[2rem] p-5 shadow-panel"
            onClick={(event) => event.stopPropagation()}
          >
            <button
              type="button"
              onClick={() => setIsVehicleFormOpen(false)}
              className="absolute right-4 top-4 flex h-9 w-9 items-center justify-center rounded-full border border-slate-200 text-lg font-semibold text-ink"
              aria-label="Zamknij"
            >
              ×
            </button>
            <div className="pr-12">
              <p className="text-xs uppercase tracking-[0.3em] text-sky">Nowy pojazd</p>
              <h3 className="mt-2 text-2xl font-bold text-ink">Dodaj pojazd</h3>
            </div>
            <form onSubmit={onCreateVehicle} className="mt-5 space-y-3">
              <input
                type="text"
                placeholder="Nazwa pojazdu"
                value={vehicleName}
                onChange={(event) => setVehicleName(event.target.value)}
                className="h-11 w-full rounded-2xl border border-slate-200 bg-white px-4 text-sm"
                required
              />
              <input
                type="text"
                placeholder="Nr rej."
                value={vehiclePlateNumber}
                onChange={(event) => setVehiclePlateNumber(event.target.value)}
                className="h-11 w-full rounded-2xl border border-slate-200 bg-white px-4 text-sm"
              />
              <div>
                <div className="mb-2 text-xs font-semibold uppercase tracking-[0.2em] text-steel">
                  Typ pojazdu
                </div>
                <div className="grid grid-cols-2 gap-2">
                  <button
                    type="button"
                    onClick={() => setVehicleKind("passenger")}
                    className={`h-10 rounded-2xl border text-sm font-semibold transition ${
                      vehicleKind === "passenger"
                        ? "border-slate-900 bg-slate-900 text-white"
                        : "border-slate-200 bg-white text-ink"
                    }`}
                  >
                    Osobowe
                  </button>
                  <button
                    type="button"
                    onClick={() => setVehicleKind("delivery")}
                    className={`h-10 rounded-2xl border text-sm font-semibold transition ${
                      vehicleKind === "delivery"
                        ? "border-slate-900 bg-slate-900 text-white"
                        : "border-slate-200 bg-white text-ink"
                    }`}
                  >
                    Dostawcze
                  </button>
                </div>
              </div>
              <div>
                <div className="mb-3 text-xs font-semibold uppercase tracking-[0.2em] text-steel">
                  Kolor pojazdu
                </div>
                <div className="flex flex-wrap gap-2">
                  {VEHICLE_COLOR_OPTIONS.map((option) => (
                    <button
                      key={option.key}
                      type="button"
                      onClick={() => setVehicleColorKey(option.key)}
                      className={`h-7 w-7 rounded-full border-2 transition ${
                        vehicleColorKey === option.key ? "scale-110 border-slate-950 shadow-md" : "border-white/80 shadow-sm"
                      }`}
                      style={{ backgroundColor: option.hex }}
                      aria-label={option.label}
                      title={option.label}
                    />
                  ))}
                </div>
              </div>
              <button
                type="submit"
                className="w-full rounded-2xl bg-ink px-4 py-3 text-sm font-semibold text-white"
              >
                Dodaj pojazd
              </button>
            </form>
          </div>
        </div>
      ), overlayRoot) : null}

      {isDeviceFormOpen && overlayRoot ? createPortal((
        <div
          className="fixed inset-0 z-[900] flex items-center justify-center bg-slate-950/45 px-3 backdrop-blur-sm"
          onClick={() => setIsDeviceFormOpen(false)}
        >
          <div
            className="panel relative w-full max-w-lg rounded-[2rem] p-5 shadow-panel"
            onClick={(event) => event.stopPropagation()}
          >
            <button
              type="button"
              onClick={() => setIsDeviceFormOpen(false)}
              className="absolute right-4 top-4 flex h-9 w-9 items-center justify-center rounded-full border border-slate-200 text-lg font-semibold text-ink"
              aria-label="Zamknij"
            >
              ×
            </button>
            <div className="pr-12">
              <p className="text-xs uppercase tracking-[0.3em] text-sky">Nowe urządzenie</p>
              <h3 className="mt-2 text-2xl font-bold text-ink">Dodaj IMEI</h3>
            </div>
            <form onSubmit={onCreateDevice} className="mt-5 space-y-3">
              <input
                type="text"
                inputMode="numeric"
                pattern="\d{14,17}"
                placeholder="IMEI"
                value={deviceImei}
                onChange={(event) => setDeviceImei(event.target.value)}
                className="h-11 w-full rounded-2xl border border-slate-200 bg-white px-4 text-sm"
                required
              />
              <input
                type="text"
                placeholder="Telefon"
                value={devicePhoneNumber}
                onChange={(event) => setDevicePhoneNumber(event.target.value)}
                className="h-11 w-full rounded-2xl border border-slate-200 bg-white px-4 text-sm"
              />
              <select
                value={deviceVehicleId}
                onChange={(event) => setDeviceVehicleId(event.target.value)}
                className="h-11 w-full rounded-2xl border border-slate-200 bg-white px-4 text-sm"
              >
                <option value="">Tylko do bazy, bez podpinania</option>
                {vehicles.map((vehicle) => (
                  <option key={vehicle.id} value={vehicle.id}>
                    {getVehicleOptionLabel(vehicle)}
                  </option>
                ))}
              </select>
              <button
                type="submit"
                className="w-full rounded-2xl bg-sky px-4 py-3 text-sm font-semibold text-white"
              >
                Dodaj IMEI
              </button>
            </form>
          </div>
        </div>
      ), overlayRoot) : null}

      {isEditVehicleFormOpen && selectedVehicle && overlayRoot ? createPortal((
        <div
          className="fixed inset-0 z-[960] flex items-center justify-center bg-slate-950/38 px-3 py-6 backdrop-blur-[3px]"
          onClick={() => setIsEditVehicleFormOpen(false)}
        >
          <div
            className="panel relative w-full max-w-[540px] rounded-[1.75rem] p-4 shadow-panel"
            onClick={(event) => event.stopPropagation()}
          >
            <button
              type="button"
              onClick={() => setIsEditVehicleFormOpen(false)}
              className="absolute right-4 top-4 flex h-9 w-9 items-center justify-center rounded-full border border-slate-200 text-lg font-semibold text-ink"
              aria-label="Zamknij"
            >
              ×
            </button>
            <div className="pr-12">
              <p className="text-[10px] uppercase tracking-[0.28em] text-sky">Edycja pojazdu</p>
              <h3 className="mt-1 text-lg font-bold text-ink">{selectedVehicle.name}</h3>
            </div>
            <form onSubmit={onUpdateVehicle} className="mt-3 space-y-2.5">
              <div className="space-y-1.5">
                <div className="text-[10px] font-semibold uppercase tracking-[0.18em] text-steel">
                  IMEI
                </div>
                <input
                  list="vehicle-device-suggestions"
                  type="text"
                  inputMode="numeric"
                  pattern="\d{14,17}"
                  placeholder="Wybierz z listy lub wpisz ręcznie"
                  value={editDeviceImei}
                  onChange={(event) => {
                    const nextImei = event.target.value;
                    setEditDeviceImei(nextImei);

                    const matchedDevice = getDeviceByImei(nextImei);
                    if (!matchedDevice) {
                      setEditAssignedDeviceId("");
                      return;
                    }

                    setEditAssignedDeviceId(matchedDevice.id);
                    setEditDevicePhoneNumber((current) =>
                      current.trim() ? current : (matchedDevice.phone_number ?? ""),
                    );
                  }}
                  className="h-9 w-full rounded-2xl border border-slate-200 bg-white px-3.5 text-sm"
                />
                <datalist id="vehicle-device-suggestions">
                  {systemDevices.map((device) => (
                    <option
                      key={device.id}
                      value={device.imei}
                      label={`${device.imei} · ${device.phone_number ?? "bez numeru"}`}
                    >
                      {device.imei} · {device.phone_number ?? "bez numeru"}
                    </option>
                  ))}
                </datalist>
                {editAssignedDeviceId ? (
                  <div className="text-[11px] text-steel">
                    Wybrane z bazy: {editDeviceImei}
                    {getDeviceById(editAssignedDeviceId)?.phone_number
                      ? ` · ${getDeviceById(editAssignedDeviceId)?.phone_number}`
                      : ""}
                  </div>
                ) : (
                  <div className="text-[11px] text-steel">
                    Ręczny wpis bez wyboru z bazy
                  </div>
                )}
              </div>
              <div className="grid gap-2 sm:grid-cols-2">
                <input
                  type="text"
                  placeholder="Nazwa pojazdu"
                  value={editVehicleName}
                  onChange={(event) => setEditVehicleName(event.target.value)}
                  className="h-9 w-full rounded-2xl border border-slate-200 bg-white px-3.5 text-sm"
                  required
                />
                <input
                  type="text"
                  placeholder="Nr rej."
                  value={editVehiclePlateNumber}
                  onChange={(event) => setEditVehiclePlateNumber(event.target.value)}
                  className="h-9 w-full rounded-2xl border border-slate-200 bg-white px-3.5 text-sm"
                />
                <input
                  type="text"
                  placeholder="Telefon"
                  value={editDevicePhoneNumber}
                  onChange={(event) => setEditDevicePhoneNumber(event.target.value)}
                  className="h-9 w-full rounded-2xl border border-slate-200 bg-white px-3.5 text-sm"
                />
              </div>
              <div className="grid grid-cols-2 gap-2">
                <button
                  type="button"
                  onClick={() => setEditVehicleKind("passenger")}
                  className={`h-9 rounded-2xl border text-sm font-semibold transition ${
                    editVehicleKind === "passenger"
                      ? "border-slate-900 bg-slate-900 text-white"
                      : "border-slate-200 bg-white text-ink"
                  }`}
                >
                  Osobowe
                </button>
                <button
                  type="button"
                  onClick={() => setEditVehicleKind("delivery")}
                  className={`h-9 rounded-2xl border text-sm font-semibold transition ${
                    editVehicleKind === "delivery"
                      ? "border-slate-900 bg-slate-900 text-white"
                      : "border-slate-200 bg-white text-ink"
                  }`}
                >
                  Dostawcze
                </button>
              </div>
              <div className="flex items-center gap-3 rounded-2xl border border-slate-200 bg-slate-50 px-3 py-2">
                <div className="text-[10px] font-semibold uppercase tracking-[0.22em] text-steel">
                  Podgląd
                </div>
                <div className="flex h-10 w-10 items-center justify-center rounded-2xl bg-white shadow-sm">
                  <svg viewBox="0 0 88 172" className="h-7 w-4" aria-hidden="true">
                    <g fill="none" fillRule="evenodd">
                      <path d="M18 9c7-6 45-6 52 0 9 9 12 27 13 76 1 48-4 71-13 79-7 6-45 6-52 0C9 156 4 133 5 85 6 36 9 18 18 9Z" fill={shiftHex(previewVehicleColor, -36)} />
                      <path d="M22 14c6-5 38-5 44 0 8 8 10 24 11 71 1 44-3 65-11 72-6 5-38 5-44 0-8-7-12-28-11-72 1-47 3-63 11-71Z" fill={shiftHex(previewVehicleColor, 8)} />
                      <path d="M27 19h34c8 0 14 6 16 19l2 12H9l2-12c2-13 8-19 16-19Z" fill="#102F45" />
                      <path d="M9 122h70l-2 13c-2 13-8 19-16 19H27c-8 0-14-6-16-19l-2-13Z" fill="#102F45" />
                      <path d="M13 45h11v37H13zM13 85h11v37H13zM64 45h11v37H64zM64 85h11v37H64z" fill="#0C2433" />
                      <path d="M18 9c7-6 45-6 52 0" stroke="#2F2F2F" strokeWidth="5" strokeLinecap="round" />
                      <path d="M5 84c0-46 4-67 13-75M83 84c0-46-4-67-13-75" stroke="#2F2F2F" strokeWidth="5" strokeLinecap="round" />
                      <path d="M18 164c7 6 45 6 52 0" stroke="#2F2F2F" strokeWidth="5" strokeLinecap="round" />
                      <path d="M6 40H1M87 40h-5" stroke="#2F2F2F" strokeWidth="5" strokeLinecap="round" />
                      <path d="M26 25h36c7 0 12 5 13 15l1 6H12l1-6c1-10 6-15 13-15Z" fill="#0C2433" />
                      <path d="M13 128h62l-1 6c-1 10-6 15-13 15H27c-7 0-12-5-13-15l-1-6Z" fill="#0C2433" />
                    </g>
                  </svg>
                </div>
              </div>
              <div className="flex flex-wrap gap-1.5">
                {VEHICLE_COLOR_OPTIONS.map((option) => (
                  <button
                    key={option.key}
                    type="button"
                    onClick={() => setEditVehicleColorKey(option.key)}
                    className={`h-5 w-5 rounded-full border-2 transition ${
                      editVehicleColorKey === option.key ? "scale-110 border-slate-950 shadow-md" : "border-white/80 shadow-sm"
                    }`}
                    style={{ backgroundColor: option.hex }}
                    aria-label={option.label}
                    title={option.label}
                  />
                ))}
              </div>
              <div className="grid gap-2 sm:grid-cols-[1fr_auto]">
                <button
                  type="submit"
                  className="rounded-2xl bg-ink px-4 py-2 text-sm font-semibold text-white"
                >
                  Zapisz zmiany
                </button>
                <button
                  type="button"
                  onClick={onDeleteVehicle}
                  className="rounded-2xl bg-coral px-4 py-2 text-sm font-semibold text-white"
                >
                  Usuń auto
                </button>
              </div>
            </form>
          </div>
        </div>
      ), overlayRoot) : null}

      <div className="brand-shell__content pointer-events-none grid min-h-[calc(100vh-1.5rem)] gap-3 md:grid-cols-[320px_minmax(0,1fr)] md:items-start md:grid-rows-[auto] xl:grid-cols-[320px_minmax(0,1fr)_360px]">
        <aside className="pointer-events-none mx-3 mt-3 flex w-auto max-h-[calc(100dvh-24px)] max-w-none flex-col gap-3 overflow-y-auto pr-0 md:ml-[20px] md:mr-0 md:mt-4 md:w-auto md:max-h-none md:max-w-none md:self-start md:overflow-visible md:pr-0 md:gap-5">
          <div className={`neo-panel dashboard-header-panel pointer-events-auto flex min-h-[76px] flex-col rounded-[0.7rem] px-4 pt-3 transition-all duration-200 ${isHeaderPanelOpen ? "w-full max-w-none self-stretch pb-[10px] md:w-fit md:min-w-[560px] md:max-w-[620px]" : "w-[138px] max-w-[138px] self-start pb-3 md:w-[128px] md:min-w-[128px] md:max-w-[128px]"}`}>
            <div className={`flex items-start ${isHeaderPanelOpen ? "justify-between gap-4" : "justify-between gap-3"}`}>
              <div className="w-[106px] shrink-0 md:w-[97px]">
                <img
                  src="/VISAU-LOGO.png"
                  alt="VISAU"
                  className="block h-auto w-[106px] md:w-[97px]"
                />
                <div className="mt-1 flex w-[106px] justify-between whitespace-nowrap text-[7.9px] font-medium uppercase leading-none text-sky md:w-[97px] md:text-[7.6px]">
                  {"AUTOTRACKING".split("").map((letter, index) => (
                    <span key={`${letter}-${index}`}>{letter}</span>
                  ))}
                </div>
              </div>
              {!isHeaderPanelOpen ? (
                <button
                  type="button"
                  onClick={() => setIsHeaderPanelOpen(true)}
                  className="inline-flex h-7 w-7 shrink-0 self-start items-center justify-center rounded-full border border-mint/35 bg-slate-950/80 text-white shadow-[0_0_10px_rgba(74,222,128,0.14)]"
                  aria-label="Rozwiń górne menu"
                  title="Rozwiń górne menu"
                >
                  <svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <path d="m9 6 6 6-6 6" />
                  </svg>
                </button>
              ) : null}
              {isHeaderPanelOpen ? (
                <div className="ml-auto mr-2 flex min-w-0 items-center gap-2 self-start text-right">
                  <div className="min-w-0 truncate text-[12px] font-semibold text-white">
                    {currentUserPrimaryName}
                  </div>
                  {userRole === "admin" ? (
                    <button
                      type="button"
                      onClick={() => {
                        setSystemSettingsTab("users");
                        setIsSystemSettingsOpen(true);
                      }}
                      className="flex h-9 w-9 items-center justify-center rounded-full border border-cyan-300/20 bg-white/5 text-cyan-100 shadow-sm"
                      aria-label="Ustawienia"
                      title="Ustawienia"
                    >
                      <svg viewBox="0 0 24 24" className="h-5 w-5" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
                        <path d="M12 8.75A3.25 3.25 0 1 0 12 15.25A3.25 3.25 0 0 0 12 8.75Z" />
                        <path d="M19.4 15A1 1 0 0 0 19.6 16.1L19.7 16.2A1.2 1.2 0 0 1 19.7 17.9L17.9 19.7A1.2 1.2 0 0 1 16.2 19.7L16.1 19.6A1 1 0 0 0 15 19.4A1 1 0 0 0 14.4 20.3V20.7A1.3 1.3 0 0 1 13.1 22H10.9A1.3 1.3 0 0 1 9.6 20.7V20.5A1 1 0 0 0 8.95 19.55A1 1 0 0 0 7.9 19.75L7.6 19.9A1.2 1.2 0 0 1 6.1 19.65L4.3 17.9A1.2 1.2 0 0 1 4.3 16.2L4.4 16.1A1 1 0 0 0 4.6 15A1 1 0 0 0 3.7 14.4H3.3A1.3 1.3 0 0 1 2 13.1V10.9A1.3 1.3 0 0 1 3.3 9.6H3.5A1 1 0 0 0 4.45 8.95A1 1 0 0 0 4.25 7.9L4.1 7.6A1.2 1.2 0 0 1 4.35 6.1L6.1 4.3A1.2 1.2 0 0 1 7.8 4.3L7.9 4.4A1 1 0 0 0 9 4.6A1 1 0 0 0 9.6 3.7V3.3A1.3 1.3 0 0 1 10.9 2H13.1A1.3 1.3 0 0 1 14.4 3.3V3.5A1 1 0 0 0 15.05 4.45A1 1 0 0 0 16.1 4.25L16.4 4.1A1.2 1.2 0 0 1 17.9 4.35L19.7 6.1A1.2 1.2 0 0 1 19.7 7.8L19.6 7.9A1 1 0 0 0 19.4 9A1 1 0 0 0 20.3 9.6H20.7A1.3 1.3 0 0 1 22 10.9V13.1A1.3 1.3 0 0 1 20.7 14.4H20.5A1 1 0 0 0 19.55 15.05Z" />
                      </svg>
                    </button>
                  ) : null}
                  <button
                    onClick={onLogout}
                    className="flex h-9 w-9 items-center justify-center rounded-full border border-[#7858D0]/40 bg-white/5 text-[#b795ff] shadow-sm"
                    aria-label="Wyloguj"
                    title="Wyloguj"
                  >
                    <svg viewBox="0 0 24 24" className="h-5 w-5 fill-current" aria-hidden="true">
                      <path d="M14.08 15.59L16.67 13H7V11H16.67L14.08 8.41L15.5 7L20.5 12L15.5 17L14.08 15.59M4 19H12V21H4A2 2 0 0 1 2 19V5A2 2 0 0 1 4 3H12V5H4V19Z" />
                    </svg>
                  </button>
                  <button
                    type="button"
                    onClick={() => setIsHeaderPanelOpen(false)}
                    className="flex h-9 w-9 items-center justify-center rounded-full border border-mint/35 bg-slate-950/80 text-white shadow-[0_0_10px_rgba(74,222,128,0.14)]"
                    aria-label="Zwiń górne menu"
                    title="Zwiń górne menu"
                  >
                    <svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                      <path d="m15 6-6 6 6 6" />
                    </svg>
                  </button>
                </div>
              ) : null}
            </div>
            {isHeaderPanelOpen ? (
              <div className="mt-2 text-[10px] text-slate-200 md:mt-3 md:text-[11px]">
                <div className="flex w-full items-center justify-between gap-3 text-[8px] md:flex-nowrap md:gap-x-3 md:gap-y-1 md:text-[11px] md:whitespace-nowrap">
                  <span className="shrink-0 uppercase tracking-[0.12em] text-mint">
                    Pojazdów online: <span className="font-semibold text-mint">{onlineVehiclesCount}</span>
                  </span>
                  <span className="hidden text-slate-500 md:inline">|</span>
                  <button
                    type="button"
                    onClick={toggleMovingVehiclesPanel}
                    className="inline-flex shrink-0 items-center gap-1.5 uppercase tracking-[0.12em] text-mint transition hover:text-white"
                    aria-expanded={isMovingVehiclesOpen}
                    aria-label="Pokaż auta w ruchu"
                  >
                    <span>
                      W ruchu: <span className="font-semibold text-mint">{movingVehiclesCount}</span>
                    </span>
                    <svg
                      viewBox="0 0 24 24"
                      className={`h-3.5 w-3.5 text-slate-300 transition-transform ${isMovingVehiclesOpen ? "rotate-180" : ""}`}
                      fill="currentColor"
                      aria-hidden="true"
                    >
                      <path d="M7 10l5 5 5-5H7Z" />
                    </svg>
                  </button>
                  <span className="hidden text-slate-500 md:inline">|</span>
                  <button
                    type="button"
                    onClick={toggleCompanyVehiclesPanel}
                    className="inline-flex shrink-0 items-center gap-1.5 font-bold uppercase tracking-[0.12em] text-slate-200 underline underline-offset-4 transition hover:text-white"
                    aria-expanded={isCompanyVehiclesOpen}
                    aria-label="Pokaż auta w firmie"
                  >
                    <span>
                      @ P20: <span className="font-semibold text-mint">{vehiclesAtCompanyCount}</span>
                    </span>
                    <svg
                      viewBox="0 0 24 24"
                      className={`h-3.5 w-3.5 text-slate-300 transition-transform ${isCompanyVehiclesOpen ? "rotate-180" : ""}`}
                      fill="currentColor"
                      aria-hidden="true"
                    >
                      <path d="M7 10l5 5 5-5H7Z" />
                    </svg>
                  </button>
                  <span className="inline-flex shrink-0 items-center rounded-[5px] bg-mint px-2.5 py-[3px] text-[7px] font-semibold uppercase tracking-[0.12em] text-white md:text-[8px]">
                    Online
                  </span>
                </div>
                {isMovingVehiclesOpen ? (
                  <div className="mt-2 flex w-full justify-end">
                    <div className="max-w-full overflow-x-auto">
                      <div className="flex min-w-max items-center justify-end gap-x-3 text-right text-[11px] uppercase tracking-[0.12em] text-slate-300">
                        {movingVehicles.length > 0 ? movingVehicles.map((vehicle) => (
                          <button
                            key={`moving-${vehicle.id}`}
                            type="button"
                            onClick={() => handleVehicleSelection(vehicle.id)}
                            className="truncate text-mint transition hover:text-white"
                          >
                            {vehicle.name}
                          </button>
                        )) : (
                          <span className="text-slate-500">Brak</span>
                        )}
                      </div>
                    </div>
                  </div>
                ) : null}
                {isCompanyVehiclesOpen ? (
                  <div className="mt-2 flex w-full justify-end">
                    <div className="max-w-full overflow-x-auto">
                      <div className="flex min-w-max items-center justify-end gap-x-3 text-right text-[11px] uppercase tracking-[0.12em] text-slate-300">
                      {vehiclesAtCompany.length > 0 ? vehiclesAtCompany.map((vehicle) => (
                        <button
                          key={`company-${vehicle.id}`}
                          type="button"
                          onClick={() => handleVehicleSelection(vehicle.id)}
                          className="truncate text-mint transition hover:text-white"
                        >
                          {vehicle.name}
                        </button>
                      )) : (
                        <span className="text-slate-500">Brak</span>
                      )}
                      </div>
                    </div>
                  </div>
                ) : null}
              </div>
            ) : null}
          </div>

          <div
            className={`neo-panel pointer-events-auto overflow-hidden rounded-[0.7rem] shadow-panel transition-all duration-200 ${
              isInfoPanelOpen ? "w-full p-4" : "h-9 w-9 p-0 md:h-12 md:w-12"
            } ${hasInfoAttention ? "border-coral/80 shadow-[0_0_0_1px_rgba(251,113,133,0.25),0_0_18px_rgba(251,113,133,0.25),0_0_42px_rgba(251,113,133,0.16),0_18px_40px_rgba(2,8,23,0.46)]" : ""}`}
          >
            <button
              type="button"
              onClick={() => setIsInfoPanelOpen((current) => !current)}
              className={`${isInfoPanelOpen ? "neo-panel__titlebar w-full text-left" : "flex h-full w-full items-center justify-center"}`}
              aria-label={isInfoPanelOpen ? "Zwiń informacje" : "Rozwiń informacje"}
              title={isInfoPanelOpen ? "Zwiń informacje" : "Rozwiń informacje"}
            >
              {isInfoPanelOpen ? (
                <>
                  <span className="neo-panel__titlegroup">
                    <span
                      className={`neo-panel__icon ${hasInfoAttention ? "bg-coral/15 text-coral shadow-[inset_0_0_0_1px_rgba(251,113,133,0.35),0_0_18px_rgba(251,113,133,0.24)]" : ""}`}
                      aria-hidden="true"
                    >
                      <svg viewBox="0 0 24 24" className="h-4 w-4" fill="currentColor" aria-hidden="true">
                        <path d="M11,9H13V7H11M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M11,17H13V11H11V17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" />
                      </svg>
                    </span>
                    <span className={`neo-panel__title ${hasInfoAttention ? "text-coral" : ""}`}>Informacje</span>
                  </span>
                  <span className="neo-panel__toggle" aria-hidden="true">
                    <svg
                      viewBox="0 0 24 24"
                      className="h-4 w-4"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    >
                      <path d="m15 6-6 6 6 6" />
                    </svg>
                  </span>
                </>
              ) : (
                <span
                  className={`flex h-9 w-9 items-center justify-center md:h-12 md:w-12 ${
                    hasInfoAttention ? "text-coral" : "text-mint"
                  }`}
                  aria-hidden="true"
                >
                  <svg viewBox="0 0 24 24" className="h-6 w-6 md:h-[1.35rem] md:w-[1.35rem]" fill="currentColor" aria-hidden="true">
                    <path d="M11,9H13V7H11M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M11,17H13V11H11V17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" />
                  </svg>
                </span>
              )}
            </button>

            {isInfoPanelOpen ? (
              <div className="neo-panel__body space-y-3">
                {offlineAlertVehicles.length > 0 || activeAlerts.length > 0 || recentAlerts.length > 0 ? (
                  <div className="space-y-3">
                    {offlineAlertVehicles.length > 0 ? (
                      <div className="neo-subcard rounded-[1.4rem] px-4 py-3">
                        <div className="flex items-center justify-between gap-3">
                          <div className="text-sm font-medium text-white">Pojazdy Offline</div>
                          <span className="min-w-[2.9rem] rounded-full bg-coral/15 px-3 py-1 text-center text-xs font-semibold uppercase text-coral">
                            {offlineAlertVehicles.length}
                          </span>
                        </div>
                        <div className="mt-2 space-y-1.5">
                          {offlineAlertVehicles.map((vehicle) => (
                            <div key={`offline-${vehicle.id}`} className="neo-subcard rounded-xl px-3 py-2 text-[12px] text-white">
                              <span className="font-semibold">{vehicle.name}</span>
                              {vehicle.lastSeen ? (
                                <>
                                  <span className="text-slate-400"> · </span>
                                  <span className="text-slate-300">{formatDateTime(vehicle.lastSeen)}</span>
                                </>
                              ) : null}
                            </div>
                          ))}
                        </div>
                      </div>
                    ) : null}
                    {activeAlerts.length > 0 ? (
                      <div className="space-y-2">
                        {activeAlerts.map((alert) => (
                          <div
                            key={alert.id}
                            className="neo-subcard neo-outline-amber rounded-2xl px-3 py-3"
                          >
                            <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-amber">
                              Alert prędkości
                            </div>
                            <div className="mt-1 text-sm font-semibold text-white">
                              {alert.vehicleName} przekroczył 140 km/h
                            </div>
                            <div className="mt-1 text-xs text-slate-300">
                              {Math.round(alert.speed)} km/h · {formatDateTime(alert.triggeredAt)}
                            </div>
                            <button
                              type="button"
                              onClick={() => onAcknowledgeAlert(alert.id)}
                              className="mt-2 rounded-full border border-cyan-300/25 bg-white/5 px-3 py-1.5 text-[11px] font-semibold text-white"
                            >
                              Odczytane
                            </button>
                          </div>
                        ))}
                      </div>
                    ) : null}
                    {recentAlerts.length > 0 ? (
                      <div className="neo-subcard rounded-[1.4rem] px-4 py-3">
                        <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-cyan-200">
                          Przekroczenie 140 km/h
                        </div>
                        <div className={`mt-2 space-y-1.5 ${recentAlerts.length > 5 ? "visible-scrollbar max-h-[158px] overflow-y-auto pr-1" : ""}`}>
                          {recentAlerts.map((alert) => (
                            <div key={`recent-${alert.id}`} className="neo-subcard rounded-xl px-3 py-2 text-[12px] text-white">
                              <span className="font-semibold">{alert.vehicleName}</span>
                              <span className="text-slate-400"> · </span>
                              <span>{Math.round(alert.speed)} km/h</span>
                              <span className="text-slate-400"> · </span>
                              <span className="text-slate-300">{formatDateTime(alert.triggeredAt)}</span>
                            </div>
                          ))}
                        </div>
                      </div>
                    ) : null}
                  </div>
                ) : null}
              </div>
            ) : null}
          </div>
        </aside>

        <section className="pointer-events-none relative min-h-[44vh] overflow-hidden rounded-[0.7rem] md:min-h-0" />

        <aside
          className={`neo-panel pointer-events-auto fixed inset-x-3 bottom-3 ${isSelectedVehicleMenuOpen ? "z-[820]" : "z-[500]"} rounded-[0.7rem] shadow-panel md:static md:inset-auto md:block ${
            isDetailsPanelOpen
              ? "max-h-[56vh] overflow-visible p-4 md:max-h-none md:overflow-visible"
              : "overflow-hidden p-3 md:self-start"
          }`}
        >
          <div className="mx-auto max-w-3xl">
            <div className="neo-panel__titlebar">
              <span className="min-w-0">
                <div className="flex items-center gap-2">
                    <div ref={selectedVehicleMenuRef} className="relative">
                      <button
                        type="button"
                        onClick={() => setIsSelectedVehicleMenuOpen((current) => !current)}
                        className="neo-field flex h-9 min-w-[80px] max-w-[92px] items-center gap-2 rounded-full px-3 text-left md:h-8 md:min-w-[128px] md:max-w-[172px]"
                        aria-label="Wybierz pojazd"
                        aria-expanded={isSelectedVehicleMenuOpen}
                      >
                        {selectedVehicle ? (
                          <VehicleStatusTruckIcon status={selectedVehicle.status} className="h-3.5 w-3.5 shrink-0" />
                        ) : null}
                        <span className="min-w-0 flex-1 truncate text-[12px] font-semibold text-white">
                          {selectedVehicle?.name ?? "Wszystkie"}
                        </span>
                        <svg
                          viewBox="0 0 24 24"
                          className={`h-4 w-4 shrink-0 text-cyan-200 transition-transform ${isSelectedVehicleMenuOpen ? "rotate-180" : ""}`}
                          fill="none"
                          stroke="currentColor"
                          strokeWidth="2"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          aria-hidden="true"
                        >
                          <path d="m6 9 6 6 6-6" />
                        </svg>
                      </button>
                      {isSelectedVehicleMenuOpen ? (
                        <div className="absolute bottom-[calc(100%+8px)] left-0 z-[40] isolate w-[200px] max-w-[76vw] rounded-2xl border border-cyan-300/25 bg-[#121b2a] p-2 shadow-[0_18px_40px_rgba(2,8,23,0.72)] md:bottom-auto md:top-[calc(100%+8px)] md:w-[172px]">
                          <div className="max-h-[260px] space-y-1 overflow-y-auto md:max-h-none md:overflow-visible">
                            {vehicles.map((vehicle) => (
                              <button
                                key={vehicle.id}
                                type="button"
                                onClick={() => handleVehicleSelection(vehicle.id)}
                                className={`flex w-full items-center gap-2 rounded-xl px-3 py-2 text-left transition ${
                                  vehicle.id === selectedVehicleId ? "bg-cyan-300/10" : "hover:bg-white/5"
                                }`}
                              >
                                <VehicleStatusTruckIcon status={vehicle.status} className="h-3.5 w-3.5 shrink-0" />
                                <span className="truncate text-[12px] font-semibold text-white">
                                  {vehicle.name}
                                </span>
                              </button>
                            ))}
                          </div>
                        </div>
                      ) : null}
                    </div>
                    <button
                      type="button"
                      onClick={handleShowAllVehicles}
                      className="neo-field flex h-9 items-center rounded-full px-3 text-[11px] font-semibold uppercase tracking-[0.14em] text-cyan-100 md:h-8"
                    >
                      All
                    </button>
                  </div>
              </span>
              <span className="flex items-center gap-2">
                {userRole === "admin" && selectedVehicle ? (
                  <button
                    type="button"
                    onClick={() => openVehicleEditor(selectedVehicle)}
                    className="hidden h-8 w-8 items-center justify-center rounded-full border border-cyan-300/20 bg-white/5 text-cyan-100 shadow-sm md:flex"
                    aria-label="Edytuj pojazd"
                    title="Edytuj pojazd"
                  >
                    <svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
                      <path d="M12 8.75A3.25 3.25 0 1 0 12 15.25A3.25 3.25 0 1 0 12 8.75Z" />
                      <path d="M19.4 15A1 1 0 0 0 19.6 16.1L19.7 16.2A1.2 1.2 0 0 1 19.7 17.9L17.9 19.7A1.2 1.2 0 0 1 16.2 19.7L16.1 19.6A1 1 0 0 0 15 19.4A1 1 0 0 0 14.4 20.3V20.7A1.3 1.3 0 0 1 13.1 22H10.9A1.3 1.3 0 0 1 9.6 20.7V20.5A1 1 0 0 0 8.95 19.55A1 1 0 0 0 7.9 19.75L7.6 19.9A1.2 1.2 0 0 1 6.1 19.65L4.3 17.9A1.2 1.2 0 0 1 4.3 16.2L4.4 16.1A1 1 0 0 0 4.6 15A1 1 0 0 0 3.7 14.4H3.3A1.3 1.3 0 0 1 2 13.1V10.9A1.3 1.3 0 0 1 3.3 9.6H3.5A1 1 0 0 0 4.45 8.95A1 1 0 0 0 4.25 7.9L4.1 7.6A1.2 1.2 0 0 1 4.35 6.1L6.1 4.3A1.2 1.2 0 0 1 7.8 4.3L7.9 4.4A1 1 0 0 0 9 4.6A1 1 0 0 0 9.6 3.7V3.3A1.3 1.3 0 0 1 10.9 2H13.1A1.3 1.3 0 0 1 14.4 3.3V3.5A1 1 0 0 0 15.05 4.45A1 1 0 0 0 16.1 4.25L16.4 4.1A1.2 1.2 0 0 1 17.9 4.35L19.7 6.1A1.2 1.2 0 0 1 19.7 7.8L19.6 7.9A1 1 0 0 0 19.4 9A1 1 0 0 0 20.3 9.6H20.7A1.3 1.3 0 0 1 22 10.9V13.1A1.3 1.3 0 0 1 20.7 14.4H20.5A1 1 0 0 0 19.55 15.05Z" />
                    </svg>
                  </button>
                ) : null}
                <button
                  type="button"
                  onClick={() => setIsDetailsPanelOpen((current) => !current)}
                  className="neo-panel__toggle"
                  aria-label={isDetailsPanelOpen ? "Zwiń szczegóły pojazdu" : "Rozwiń szczegóły pojazdu"}
                  title={isDetailsPanelOpen ? "Zwiń szczegóły pojazdu" : "Rozwiń szczegóły pojazdu"}
                >
                  <svg
                    viewBox="0 0 24 24"
                    className={`h-4 w-4 transition-transform ${isDetailsPanelOpen ? "rotate-180" : ""}`}
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  >
                    <path d="m6 9 6 6 6-6" />
                  </svg>
                </button>
                {userRole === "admin" && selectedVehicle ? (
                  <button
                    type="button"
                    onClick={() => openVehicleEditor(selectedVehicle)}
                    className="flex h-8 w-8 items-center justify-center rounded-full border border-cyan-300/20 bg-white/5 text-cyan-100 shadow-sm md:hidden"
                    aria-label="Edytuj pojazd"
                    title="Edytuj pojazd"
                  >
                    <svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
                      <path d="M12 8.75A3.25 3.25 0 1 0 12 15.25A3.25 3.25 0 1 0 12 8.75Z" />
                      <path d="M19.4 15A1 1 0 0 0 19.6 16.1L19.7 16.2A1.2 1.2 0 0 1 19.7 17.9L17.9 19.7A1.2 1.2 0 0 1 16.2 19.7L16.1 19.6A1 1 0 0 0 15 19.4A1 1 0 0 0 14.4 20.3V20.7A1.3 1.3 0 0 1 13.1 22H10.9A1.3 1.3 0 0 1 9.6 20.7V20.5A1 1 0 0 0 8.95 19.55A1 1 0 0 0 7.9 19.75L7.6 19.9A1.2 1.2 0 0 1 6.1 19.65L4.3 17.9A1.2 1.2 0 0 1 4.3 16.2L4.4 16.1A1 1 0 0 0 4.6 15A1 1 0 0 0 3.7 14.4H3.3A1.3 1.3 0 0 1 2 13.1V10.9A1.3 1.3 0 0 1 3.3 9.6H3.5A1 1 0 0 0 4.45 8.95A1 1 0 0 0 4.25 7.9L4.1 7.6A1.2 1.2 0 0 1 4.35 6.1L6.1 4.3A1.2 1.2 0 0 1 7.8 4.3L7.9 4.4A1 1 0 0 0 9 4.6A1 1 0 0 0 9.6 3.7V3.3A1.3 1.3 0 0 1 10.9 2H13.1A1.3 1.3 0 0 1 14.4 3.3V3.5A1 1 0 0 0 15.05 4.45A1 1 0 0 0 16.1 4.25L16.4 4.1A1.2 1.2 0 0 1 17.9 4.35L19.7 6.1A1.2 1.2 0 0 1 19.7 7.8L19.6 7.9A1 1 0 0 0 19.4 9A1 1 0 0 0 20.3 9.6H20.7A1.3 1.3 0 0 1 22 10.9V13.1A1.3 1.3 0 0 1 20.7 14.4H20.5A1 1 0 0 0 19.55 15.05Z" />
                    </svg>
                  </button>
                ) : null}
              </span>
            </div>
            {isDetailsPanelOpen ? (
              <div className="max-h-[calc(56vh-64px)] space-y-4 overflow-y-auto pr-1 md:max-h-none md:overflow-visible md:pr-0">
              {selectedVehicle ? (
              <>
                <div className="flex flex-col gap-3 md:hidden">
                  {activeMobileSection === "live" && selectedPosition ? (
                    <div className="neo-subcard overflow-hidden rounded-2xl">
                      <div className="px-4 pb-4 pt-3 text-left">
                        <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-cyan-200">Live</div>
                      <div className="text-[12px] font-normal text-white" style={{ fontFamily: "Verdana, Geneva, sans-serif" }}>
                          {selectedPositionAddress ?? ""}
                        </div>
                        {selectedPositionReachedLabel ? (
                          <div className="mt-0.5 text-[11px] text-white">
                            Od: {selectedPositionReachedLabel}
                          </div>
                        ) : null}
                        {companySettings ? (
                          <div className="mt-1 text-[10px] text-slate-300" style={{ fontFamily: "Verdana, Geneva, sans-serif" }}>
                            <div className="whitespace-nowrap">
                              {selectedDeviceState?.ignition === true || selectedPosition?.ignition === true ? (
                                <>
                                  Na P20 - {companyDurationLabel}, dojazd{" "}
                                  <span className="text-[#9be7b0]">{formatArrivalTime(companyRouteSummary?.durationMinutes)}</span>, {companyDistanceLabel}
                                </>
                              ) : (
                                <>Na P20 - {companyDistanceLabel}</>
                              )}
                            </div>
                          </div>
                        ) : null}
                        <div className="mt-2 text-xs font-semibold uppercase tracking-[0.2em] text-cyan-200">Prędkość:</div>
                        <div className="mt-0.5 text-[13px] font-normal text-white" style={{ fontFamily: "Verdana, Geneva, sans-serif" }}>
                          {formatSpeedKmh(selectedPosition.speed)} | {getHeadingLabel(selectedPosition.heading)}
                        </div>
                      </div>
                    </div>
                  ) : null}

                  {activeMobileSection === "history" ? (
                    <div className="neo-subcard overflow-hidden rounded-2xl">
                      <div className="px-4 pb-4 pt-3">
                        <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-cyan-200">Historia</div>
                        <div className="flex items-center gap-2">
                          <label className="flex min-w-0 flex-1 items-center gap-2">
                            <span className="text-[12px] font-semibold text-white">Od</span>
                            <input
                              type="datetime-local"
                              value={from}
                              min={historyMinInput}
                              max={historyMaxInput}
                              onChange={(event) => {
                                const nextValue = clampDateTimeLocalValue(event.target.value, historyMinInput, historyMaxInput);
                                setFrom(nextValue);
                              }}
                              className="neo-field h-9 min-w-0 flex-1 rounded-2xl px-3 text-[11px] text-white"
                            />
                          </label>
                          <label className="flex min-w-0 flex-1 items-center gap-2">
                            <span className="text-[12px] font-semibold text-white">Do</span>
                            <input
                              type="datetime-local"
                              value={to}
                              min={historyMinInput}
                              max={historyMaxInput}
                              onChange={(event) => {
                                const nextValue = clampDateTimeLocalValue(event.target.value, historyMinInput, historyMaxInput);
                                setTo(nextValue);
                              }}
                              className="neo-field h-9 min-w-0 flex-1 rounded-2xl px-3 text-[11px] text-white"
                            />
                          </label>
                          <button
                            type="button"
                            onClick={onToggleTimeline}
                            className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-mint text-white shadow-[0_0_18px_rgba(74,222,128,0.4)]"
                            aria-label="Pokaż historię"
                            title="Pokaż historię"
                          >
                            <svg viewBox="0 0 24 24" className="h-3.5 w-3.5 fill-current" aria-hidden="true">
                              <path d="M8 5.14v14l11-7-11-7Z" />
                            </svg>
                          </button>
                        </div>
                        {isTimelineVisible ? (
                          <div className="mt-3 space-y-3">
                            <div className="px-1">
                              <TimelineScrubber
                                min={sliderMinTimestamp ?? 0}
                                max={sliderMaxTimestamp ?? 0}
                                value={playbackTimestamp ?? sliderMinTimestamp ?? 0}
                                onChange={(nextTimestamp) => {
                                  pausePlayback();
                                  setPlaybackDirection((playbackTimestamp ?? nextTimestamp) <= nextTimestamp ? "forward" : "backward");
                                  setPlaybackTimestamp(nextTimestamp);
                                }}
                                color={getVehicleColorHex(selectedVehicle?.colorKey)}
                              />
                            </div>
                            <div className="flex flex-wrap items-center gap-2">
                              <button type="button" onClick={() => startPlayback("backward")} className="flex h-7 min-w-7 items-center justify-center rounded-md bg-mint/15 px-2 text-mint shadow-[0_0_16px_rgba(74,222,128,0.22)] transition hover:bg-mint/22" aria-label="Przewiń do tyłu" title="Przewiń do tyłu">
                                <svg viewBox="0 0 24 24" className="h-4 w-4 fill-current" aria-hidden="true"><path d="M11 18V6L2.5 12 11 18Zm10 0V6l-8.5 6L21 18Z" /></svg>
                              </button>
                              <button type="button" onClick={() => startPlayback("forward")} className="flex h-7 min-w-7 items-center justify-center rounded-md bg-mint/15 px-2 text-mint shadow-[0_0_16px_rgba(74,222,128,0.22)] transition hover:bg-mint/22" aria-label="Odtwórz" title="Odtwórz">
                                <svg viewBox="0 0 24 24" className="h-4 w-4 fill-current" aria-hidden="true"><path d="M8 5.14v14l11-7-11-7Z" /></svg>
                              </button>
                              <button type="button" onClick={stopTimelinePlayback} className="flex h-7 min-w-[58px] items-center justify-center rounded-md bg-coral/15 px-3 text-[11px] font-semibold uppercase tracking-[0.14em] text-coral shadow-[0_0_16px_rgba(251,113,133,0.18)] transition hover:bg-coral/22" aria-label="Zatrzymaj podgląd historii" title="Zatrzymaj podgląd historii">Stop</button>
                              <button type="button" onClick={pausePlayback} className="flex h-7 min-w-7 items-center justify-center rounded-md bg-mint/15 px-2 text-mint shadow-[0_0_16px_rgba(74,222,128,0.22)] transition hover:bg-mint/22" aria-label="Pauza" title="Pauza">
                                <svg viewBox="0 0 24 24" className="h-4 w-4 fill-current" aria-hidden="true"><path d="M14 19h4V5h-4v14ZM6 19h4V5H6v14Z" /></svg>
                              </button>
                              <button type="button" onClick={() => startPlayback("forward")} className="flex h-7 min-w-7 items-center justify-center rounded-md bg-mint/15 px-2 text-mint shadow-[0_0_16px_rgba(74,222,128,0.22)] transition hover:bg-mint/22" aria-label="Przewiń do przodu" title="Przewiń do przodu">
                                <svg viewBox="0 0 24 24" className="h-4 w-4 fill-current" aria-hidden="true"><path d="M13 18V6l8.5 6-8.5 6ZM3 18V6l8.5 6L3 18Z" /></svg>
                              </button>
                              <select value={playbackSpeed} onChange={(event) => setPlaybackSpeed(Number(event.target.value) as 2 | 5 | 10 | 50)} className="h-7 rounded-md border border-mint/30 bg-slate-900/60 px-2 text-[11px] text-mint" aria-label="Prędkość playbacku">
                                <option value={2}>2x</option>
                                <option value={5}>5x</option>
                                <option value={10}>10x</option>
                                <option value={50}>50x</option>
                              </select>
                            </div>
                            <div className="flex items-center gap-2 text-[11px] text-slate-300">
                              <span
                                className="inline-flex text-mint"
                                style={{ transform: `rotate(${playbackPoint?.heading ?? 0}deg)` }}
                                aria-hidden="true"
                              >
                                <svg viewBox="0 0 24 24" className="h-3.5 w-3.5 fill-current">
                                  <path d="M12 2 19 21l-7-4-7 4L12 2Z" />
                                </svg>
                              </span>
                              <span>{playbackPointTime ? `Czas jazdy: ${formatDateTime(playbackPointTime)}` : "Czas jazdy: Brak"}</span>
                            </div>
                            {playbackPoint ? (
                              <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-[11px] text-slate-200" style={{ fontFamily: "Verdana, Geneva, sans-serif" }}>
                                <div><span className="font-bold">Zapłon:</span> <span className={`${playbackPoint.ignition === true ? "uppercase tracking-[0.12em]" : ""}`}>{playbackPoint.ignition === true ? "W DRODZE" : "OFF"}</span></div>
                                <div><span className="font-bold">GPS:</span> <span>{playbackPoint.satelliteCount ?? "Brak"}</span></div>
                                <div><span className="font-bold">Prędkość:</span> <span>{playbackPoint.speed != null ? formatSpeedKmh(playbackPoint.speed) : "Brak"}</span></div>
                              </div>
                            ) : null}
                          </div>
                        ) : null}
                      </div>
                    </div>
                  ) : null}

                  {activeMobileSection === "gps" ? (
                    <div className="neo-subcard overflow-hidden rounded-2xl">
                      <div className="grid gap-x-4 gap-y-2 px-4 pb-4 pt-3 text-sm text-white sm:grid-cols-2" style={{ fontFamily: "Verdana, Geneva, sans-serif" }}>
                        <div className="sm:col-span-2 text-[11px] font-semibold uppercase tracking-[0.16em] text-cyan-200">GPS</div>
                        <div><span className="font-bold">Status:</span> <span className={`font-normal ${selectedVehicle.status === "online" ? "text-mint" : selectedVehicle.status === "offline" ? "text-coral" : "text-amber"}`}>{selectedVehicle.status}</span></div>
                        <div><span className="font-bold">Battery:</span> <span className="font-normal">{selectedDeviceState?.battery != null ? `${selectedDeviceState.battery}%` : "Brak"}</span></div>
                        <div><span className="font-bold">GSM:</span> <span className="font-normal">{selectedDeviceState?.gsmSignal ?? "Brak"}</span></div>
                        <div><span className="font-bold">Satellite:</span> <span className="font-normal">{selectedDeviceState?.satelliteCount ?? "Brak"}</span></div>
                        <div><span className="font-bold">Fortification:</span> <span className="font-normal">{formatToggle(selectedDeviceState?.defense)}</span></div>
                        <div><span className="font-bold">ACC:</span> <span className={`font-normal ${selectedDeviceState?.ignition === true ? "uppercase tracking-[0.12em]" : ""}`}>{selectedDeviceState?.ignition === true ? "W drodze" : "OFF"}</span></div>
                        <div><span className="font-bold">SOC:</span> <span className="font-normal">{formatToggle(selectedDeviceState?.charging, "Charging", "Idle")}</span></div>
                        <div><span className="font-bold">Position time:</span> <span className="font-normal">{formatDateTime(selectedDeviceState?.deviceTime ?? selectedPosition?.deviceTime)}</span></div>
                        <div><span className="font-bold">Position Type:</span> <span className="font-normal">{selectedDeviceState?.positionType ?? selectedPosition?.positionType ?? "Brak"}</span></div>
                        <div><span className="font-bold">GPS is valid:</span> <span className="font-normal">{formatToggle(selectedDeviceState?.gpsValid, "Valid", "Invalid")}</span></div>
                      </div>
                    </div>
                  ) : null}

                  <div className="mt-auto flex flex-wrap items-center gap-x-4 gap-y-1 border-t border-mint/15 px-1 pt-2">
                    <button
                      type="button"
                      onClick={() => toggleMobileSection("live")}
                      className="flex items-center gap-1 text-[11px] font-semibold uppercase tracking-[0.16em] text-cyan-200"
                    >
                      <span className="inline-block h-2 w-2 rounded-full bg-mint shadow-[0_0_8px_rgba(74,222,128,0.75)]" />
                      <span>Live</span>
                      <svg viewBox="0 0 24 24" className={`h-3 w-3 transition-transform ${isMobileLiveOpen ? "rotate-180" : ""}`} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                        <path d="m6 9 6 6 6-6" />
                      </svg>
                    </button>
                    <button
                      type="button"
                      onClick={() => toggleMobileSection("history")}
                      className="flex items-center gap-1 text-[11px] font-semibold uppercase tracking-[0.16em] text-cyan-200"
                    >
                      <span>Historia</span>
                      <svg viewBox="0 0 24 24" className={`h-3 w-3 transition-transform ${isMobileHistoryOpen ? "rotate-180" : ""}`} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                        <path d="m6 9 6 6 6-6" />
                      </svg>
                    </button>
                    <button
                      type="button"
                      onClick={() => toggleMobileSection("gps")}
                      className="flex items-center gap-1 text-[11px] font-semibold uppercase tracking-[0.16em] text-cyan-200"
                    >
                      <span>GPS</span>
                      <svg viewBox="0 0 24 24" className={`h-3 w-3 transition-transform ${isMobileGpsOpen ? "rotate-180" : ""}`} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                        <path d="m6 9 6 6 6-6" />
                      </svg>
                    </button>
                  </div>
                </div>

                <div className="hidden space-y-[30px] md:block">
                {selectedPosition ? (
              <div>
                <div className="neo-subcard rounded-2xl px-4 py-4 text-left">
                  <div className="flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.2em] text-cyan-200">
                    <span className="inline-block h-2.5 w-2.5 rounded-full bg-mint shadow-[0_0_10px_rgba(74,222,128,0.75)]" />
                    <span>Pozycja live</span>
                  </div>
                  <div className="mt-1 text-[12px] font-normal text-white" style={{ fontFamily: "Verdana, Geneva, sans-serif" }}>
                    {selectedPositionAddress ?? ""}
                  </div>
                  {selectedPositionReachedLabel ? (
                    <div className="mt-0.5 text-[11px] text-white">
                      Od: {selectedPositionReachedLabel}
                    </div>
                  ) : null}
                  {companySettings ? (
                    <div className="mt-1 text-[10px] text-slate-300" style={{ fontFamily: "Verdana, Geneva, sans-serif" }}>
                      <div className="whitespace-nowrap">
                        {selectedDeviceState?.ignition === true || selectedPosition?.ignition === true ? (
                          <>
                            Na P20 - {companyDurationLabel}, dojazd{" "}
                            <span className="text-[#9be7b0]">{formatArrivalTime(companyRouteSummary?.durationMinutes)}</span>, {companyDistanceLabel}
                          </>
                        ) : (
                          <>Na P20 - {companyDistanceLabel}</>
                        )}
                      </div>
                    </div>
                  ) : null}
                  <div className="mt-2 text-xs font-semibold uppercase tracking-[0.2em] text-cyan-200">Prędkość:</div>
                  <div className="mt-0.5 text-[13px] font-normal text-white" style={{ fontFamily: "Verdana, Geneva, sans-serif" }}>
                    {formatSpeedKmh(selectedPosition.speed)} | {getHeadingLabel(selectedPosition.heading)}
                  </div>
                </div>
              </div>
                ) : null}

                <div className="neo-subcard rounded-2xl px-4 py-3">
              <div className="mb-2 text-sm font-semibold text-white">Historia pojazdu</div>
              <div className="grid items-end gap-3 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto]">
                <DesktopDateTimeField
                  label="Od"
                  value={from}
                  min={historyMinInput}
                  max={historyMaxInput}
                  isOpen={openDesktopHistoryPicker === "from"}
                  focusTarget={openDesktopHistoryPicker === "from" ? desktopHistoryFocusTarget : null}
                  onToggle={() => {
                    setDesktopHistoryFocusTarget(null);
                    setOpenDesktopHistoryPicker((current) => current === "from" ? null : "from");
                  }}
                  onClose={() => {
                    setDesktopHistoryFocusTarget(null);
                    setOpenDesktopHistoryPicker((current) => current === "from" ? null : current);
                  }}
                  onChange={(nextValue) => {
                    setFrom(nextValue);
                  }}
                  onTimeTabForward={() => {
                    setDesktopHistoryFocusTarget("date");
                    setOpenDesktopHistoryPicker("to");
                  }}
                />
                <DesktopDateTimeField
                  label="Do"
                  value={to}
                  min={historyMinInput}
                  max={historyMaxInput}
                  isOpen={openDesktopHistoryPicker === "to"}
                  focusTarget={openDesktopHistoryPicker === "to" ? desktopHistoryFocusTarget : null}
                  onToggle={() => {
                    setDesktopHistoryFocusTarget(null);
                    setOpenDesktopHistoryPicker((current) => current === "to" ? null : "to");
                  }}
                  onClose={() => {
                    setDesktopHistoryFocusTarget(null);
                    setOpenDesktopHistoryPicker((current) => current === "to" ? null : current);
                  }}
                  onChange={(nextValue) => {
                    setTo(nextValue);
                  }}
                />
                <button
                  type="button"
                  onClick={() => {
                    void onToggleTimeline();
                  }}
                  className="mb-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-mint text-white shadow-[0_0_18px_rgba(74,222,128,0.4)]"
                  aria-label="Pokaż timeline"
                  title="Pokaż timeline"
                >
                  <svg viewBox="0 0 24 24" className="h-[18px] w-[18px] fill-current" aria-hidden="true">
                    <path d="M8 5.14v14l11-7-11-7Z" />
                  </svg>
                </button>
              </div>
              {history.length > 0 && isTimelineVisible ? (
                <div
                  className="mt-2 space-y-2"
                  onPointerDown={(event) => event.stopPropagation()}
                  onMouseDown={(event) => event.stopPropagation()}
                  onTouchStart={(event) => event.stopPropagation()}
                >
                  <div className="flex items-center gap-2 text-[11px] text-slate-300">
                    <span
                      className="inline-flex text-mint"
                      style={{ transform: `rotate(${playbackPoint?.heading ?? 0}deg)` }}
                      aria-hidden="true"
                    >
                      <svg viewBox="0 0 24 24" className="h-3.5 w-3.5 fill-current">
                        <path d="M12 2 19 21l-7-4-7 4L12 2Z" />
                      </svg>
                    </span>
                    <span>{playbackPointTime ? `Czas jazdy: ${formatDateTime(playbackPointTime)}` : "Czas jazdy: Brak"}</span>
                  </div>
                  <TimelineScrubber
                    min={sliderMinTimestamp ?? 0}
                    max={sliderMaxTimestamp ?? 0}
                    value={playbackTimestamp ?? sliderMinTimestamp ?? 0}
                    color={getVehicleColorHex(selectedVehicle?.colorKey)}
                    onChange={(nextTimestamp) => {
                      setIsPlaybackRunning(false);
                      setPlaybackDirection((playbackTimestamp ?? nextTimestamp) <= nextTimestamp ? "forward" : "backward");
                      setPlaybackTimestamp(nextTimestamp);
                    }}
                  />
                  <div className="flex items-center gap-2">
                    <button
                      type="button"
                      onClick={() => startPlayback("backward")}
                      className="flex h-7 min-w-7 items-center justify-center rounded-md bg-mint/15 px-2 text-mint shadow-[0_0_16px_rgba(74,222,128,0.22)] transition hover:bg-mint/22"
                      aria-label="Odtwarzaj wstecz"
                      title="Odtwarzaj wstecz"
                    >
                      <svg viewBox="0 0 24 24" className="h-4 w-4 fill-current" aria-hidden="true">
                        <path d="M11 18V6l-8.5 6L11 18Zm10 0V6l-8.5 6L21 18Z" />
                      </svg>
                    </button>
                    <button
                      type="button"
                      onClick={() => startPlayback("forward")}
                      className="flex h-7 min-w-7 items-center justify-center rounded-md bg-mint/15 px-2 text-mint shadow-[0_0_16px_rgba(74,222,128,0.22)] transition hover:bg-mint/22"
                      aria-label="Odtwarzaj"
                      title="Odtwarzaj"
                    >
                      <svg viewBox="0 0 24 24" className="h-4 w-4 fill-current" aria-hidden="true">
                        <path d="M8 5.14v14l11-7-11-7Z" />
                      </svg>
                    </button>
                    <button
                      type="button"
                      onClick={stopTimelinePlayback}
                      className="flex h-7 min-w-[58px] items-center justify-center rounded-md bg-coral/15 px-3 text-[11px] font-semibold uppercase tracking-[0.14em] text-coral shadow-[0_0_16px_rgba(251,113,133,0.18)] transition hover:bg-coral/22"
                      aria-label="Zatrzymaj podgląd historii"
                      title="Zatrzymaj podgląd historii"
                    >
                      Stop
                    </button>
                    <button
                      type="button"
                      onClick={pausePlayback}
                      className="flex h-7 min-w-7 items-center justify-center rounded-md bg-mint/15 px-2 text-mint shadow-[0_0_16px_rgba(74,222,128,0.22)] transition hover:bg-mint/22"
                      aria-label="Pauza"
                      title="Pauza"
                    >
                      <svg viewBox="0 0 24 24" className="h-4 w-4 fill-current" aria-hidden="true">
                        <path d="M14 19h4V5h-4v14ZM6 19h4V5H6v14Z" />
                      </svg>
                    </button>
                    <button
                      type="button"
                      onClick={() => startPlayback("forward")}
                      className="flex h-7 min-w-7 items-center justify-center rounded-md bg-mint/15 px-2 text-mint shadow-[0_0_16px_rgba(74,222,128,0.22)] transition hover:bg-mint/22"
                      aria-label="Przewiń do przodu"
                      title="Przewiń do przodu"
                    >
                      <svg viewBox="0 0 24 24" className="h-4 w-4 fill-current" aria-hidden="true">
                        <path d="M13 18V6l8.5 6-8.5 6ZM3 18V6l8.5 6L3 18Z" />
                      </svg>
                    </button>
                    <select
                      value={playbackSpeed}
                      onChange={(event) => setPlaybackSpeed(Number(event.target.value) as 2 | 5 | 10 | 50)}
                      className="h-7 rounded-md border border-mint/30 bg-slate-900/60 px-2 text-[11px] text-mint"
                      aria-label="Prędkość playbacku"
                    >
                      <option value={2}>2x</option>
                      <option value={5}>5x</option>
                      <option value={10}>10x</option>
                      <option value={50}>50x</option>
                    </select>
                    <button
                      type="button"
                      onClick={() => setSkipStopsDuringPlayback((current) => !current)}
                      className={`h-7 rounded-md border px-2 text-[11px] transition ${
                        skipStopsDuringPlayback
                          ? "border-mint/40 bg-mint/15 text-mint shadow-[0_0_16px_rgba(74,222,128,0.22)]"
                          : "border-slate-500/30 bg-slate-900/60 text-slate-300"
                      }`}
                      aria-pressed={skipStopsDuringPlayback}
                      title="Pomiń postoje podczas odtwarzania"
                    >
                      Pomiń postoje
                    </button>
                  </div>
                  {playbackPoint ? (
                    <div
                      className="flex flex-wrap items-center gap-x-4 gap-y-1 text-[11px] text-slate-200"
                      style={{ fontFamily: "Verdana, Geneva, sans-serif" }}
                    >
                      <div>
                        <span className="font-bold">Zapłon:</span>{" "}
                        <span className={`${playbackPoint.ignition === true ? "uppercase tracking-[0.12em]" : ""}`}>
                          {playbackPoint.ignition === true ? "W DRODZE" : "OFF"}
                        </span>
                      </div>
                      <div>
                        <span className="font-bold">GPS:</span>{" "}
                        <span>{playbackPoint.satelliteCount ?? "Brak"}</span>
                      </div>
                      <div>
                        <span className="font-bold">Prędkość:</span>{" "}
                        <span>{playbackPoint.speed != null ? formatSpeedKmh(playbackPoint.speed) : "Brak"}</span>
                      </div>
                    </div>
                  ) : null}
                </div>
              ) : null}
                </div>

                <div className="neo-subcard rounded-2xl px-4 py-4">
                  <div className="grid gap-x-4 gap-y-2 text-sm text-white sm:grid-cols-2" style={{ fontFamily: "Verdana, Geneva, sans-serif" }}>
                    <div>
                      <span className="font-bold">Status:</span>{" "}
                      <span
                        className={`font-normal ${
                          selectedVehicle.status === "online"
                            ? "text-mint"
                            : selectedVehicle.status === "offline"
                              ? "text-coral"
                              : "text-amber"
                        }`}
                      >
                        {selectedVehicle.status}
                      </span>
                    </div>
                    <div><span className="font-bold">Battery:</span> <span className="font-normal">{selectedDeviceState?.battery != null ? `${selectedDeviceState.battery}%` : "Brak"}</span></div>
                    <div><span className="font-bold">GSM:</span> <span className="font-normal">{selectedDeviceState?.gsmSignal ?? "Brak"}</span></div>
                    <div><span className="font-bold">Satellite:</span> <span className="font-normal">{selectedDeviceState?.satelliteCount ?? "Brak"}</span></div>
                    <div><span className="font-bold">Fortification:</span> <span className="font-normal">{formatToggle(selectedDeviceState?.defense)}</span></div>
                    <div>
                      <span className="font-bold">ACC:</span>{" "}
                      <span className={`font-normal ${selectedDeviceState?.ignition === true ? "uppercase tracking-[0.12em]" : ""}`}>
                        {selectedDeviceState?.ignition === true ? "W drodze" : "OFF"}
                      </span>
                    </div>
                    <div><span className="font-bold">SOC:</span> <span className="font-normal">{formatToggle(selectedDeviceState?.charging, "Charging", "Idle")}</span></div>
                    <div><span className="font-bold">Position time:</span> <span className="font-normal">{formatDateTime(selectedDeviceState?.deviceTime ?? selectedPosition?.deviceTime)}</span></div>
                    <div><span className="font-bold">Position Type:</span> <span className="font-normal">{selectedDeviceState?.positionType ?? selectedPosition?.positionType ?? "Brak"}</span></div>
                    <div><span className="font-bold">GPS is valid:</span> <span className="font-normal">{formatToggle(selectedDeviceState?.gpsValid, "Valid", "Invalid")}</span></div>
                  </div>
                </div>
                </div>
              </>
            ) : (
              <div className="neo-subcard flex min-h-[240px] items-center justify-center rounded-2xl px-6 py-8 text-lg font-semibold text-slate-300">
                <div className="text-center">
                  <div>{`Hej ${currentUserFirstName || "operatorze"},`}</div>
                  <div className="mt-1">Wybierz pojazd</div>
                </div>
              </div>
            )}

            {selectedVehicle && vehicleSuccessMessage ? (
              <div className="rounded-2xl bg-mint/10 px-4 py-3 text-sm font-semibold text-mint">
                {vehicleSuccessMessage}
              </div>
            ) : null}
            {selectedVehicle && adminMessage ? (
              <div className="neo-subcard rounded-2xl px-4 py-3 text-sm text-white">{adminMessage}</div>
            ) : null}
            {selectedVehicle && loadError ? <div className="rounded-2xl bg-coral/10 px-4 py-3 text-sm text-coral">{loadError}</div> : null}
            {selectedVehicle && actionError ? <div className="rounded-2xl bg-coral/10 px-4 py-3 text-sm text-coral">{actionError}</div> : null}
              </div>
            ) : null}
          </div>
        </aside>
      </div>
    </main>
  );
}