"use client";

import { useEffect, useMemo, useState, type ComponentType } from "react";

import { getVehicleColorHex, type HistoryPoint, type PositionSnapshot, type VehicleSummary } from "@tracker/shared";

import type { CompanySettingsSummary, CompanyRouteSummary } from "../../../lib/api";
import { SignalCellular3Icon } from "./signal-cellular-3-icon";

export type InspectionAlertState = "ok" | "missing" | "due_soon" | "overdue";

export type ServiceNotice = {
  key: string;
  label: string;
  state: InspectionAlertState;
  editable: boolean;
};

type DesktopDateTimeFieldComponentProps = {
  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;
};

type TimelineScrubberComponentProps = {
  min: number;
  max: number;
  value: number;
  color: string;
  drivingRanges: Array<{ start: number; end: number }>;
  overspeedRanges: Array<{ start: number; end: number }>;
  maxSpeedPoint: { timestamp: number; speed: number } | null;
  active: boolean;
  onChange: (nextValue: number) => void;
};

type VehicleDetailsPanelProps = {
  selectedVehicle: VehicleSummary | null;
  currentUserFirstName: string | null;
  canManageVehicleInspection: boolean;
  onOpenVehicleEditor: () => void;
  selectedPosition: PositionSnapshot | null;
  selectedDeviceState: VehicleSummary["deviceState"] | null;
  selectedServiceNotices: ServiceNotice[];
  selectedPositionAddressLoading: boolean;
  selectedPositionAddress: string | null;
  selectedPositionReachedLabel: string | null;
  companySettings: CompanySettingsSummary;
  companyRouteSummary: CompanyRouteSummary | null;
  companyDurationLabel: string;
  companyDistanceLabel: string;
  formatArrivalTime: (value?: number | null) => string;
  formatSpeedKmh: (speed?: number | null) => string;
  getHeadingLabel: (heading?: number | null) => string;
  formatMileageKm: (value?: number | null) => string;
  formatToggle: (value?: boolean | null, onLabel?: string, offLabel?: string) => string;
  formatDateTime: (value?: string | null) => string;
  history: HistoryPoint[];
  isTimelineVisible: boolean;
  isTimelineActivated: boolean;
  shouldShowNoDrivingHistoryMessage: boolean;
  from: string;
  to: string;
  historyMinInput: string;
  historyMaxInput: string;
  openDesktopHistoryPicker: "from" | "to" | null;
  desktopHistoryFocusTarget: "date" | "time" | null;
  onToggleDesktopFrom: () => void;
  onCloseDesktopFrom: () => void;
  onChangeFrom: (nextValue: string) => void;
  onFromTimeTabForward: () => void;
  onToggleDesktopTo: () => void;
  onCloseDesktopTo: () => void;
  onChangeTo: (nextValue: string) => void;
  onOpenRecentTripsList: () => void;
  onToggleTimeline: () => void | Promise<void>;
  onActivateTimeline: (nextTimestamp: number) => void;
  sliderMinTimestamp: number | null;
  sliderMaxTimestamp: number | null;
  playbackTimestamp: number | null;
  playbackPoint: PositionSnapshot | null;
  playbackPointTime: string | null;
  playbackDirection: "forward" | "backward";
  setPlaybackDirection: (direction: "forward" | "backward") => void;
  setPlaybackTimestamp: (value: number) => void;
  startPlayback: (direction: "forward" | "backward") => void;
  stopTimelinePlayback: () => void;
  pausePlayback: () => void;
  skipAndContinuePlayback: (direction: "forward" | "backward") => void;
  playbackSpeed: 2 | 5 | 10 | 50;
  setPlaybackSpeed: (value: 2 | 5 | 10 | 50) => void;
  skipStopsDuringPlayback: boolean;
  toggleSkipStopsDuringPlayback: () => void;
  isPlaybackDriving: boolean;
  activeMobileSection: "live" | "history" | "gps" | null;
  toggleMobileSection: (section: "live" | "history" | "gps") => void;
  isMobileLiveOpen: boolean;
  isMobileHistoryOpen: boolean;
  isMobileGpsOpen: boolean;
  DesktopDateTimeField: ComponentType<DesktopDateTimeFieldComponentProps>;
  TimelineScrubber: ComponentType<TimelineScrubberComponentProps>;
};

function ServiceNotices({
  notices,
  isEditable,
  onEdit,
}: {
  notices: ServiceNotice[];
  isEditable: boolean;
  onEdit: () => void;
}) {
  return (
    <>
      {notices.map((notice) => (
        <div
          key={notice.key}
          className={`mb-2 inline-flex max-w-[calc(100%-26px)] rounded-xl border border-coral/45 bg-coral/10 px-3 py-2 text-[11px] font-bold uppercase tracking-[0.12em] text-coral shadow-[0_0_18px_rgba(251,113,133,0.18)] ${
            notice.editable && isEditable ? "transition hover:scale-[1.01] hover:border-coral/60 hover:bg-coral/20" : ""
          }`}
        >
          {notice.editable && isEditable ? (
            <button
              type="button"
              onClick={onEdit}
              className="w-full text-left"
            >
              {notice.label}
            </button>
          ) : (
            notice.label
          )}
        </div>
      ))}
    </>
  );
}

function LiveMetrics({
  vehicle,
  selectedPosition,
  selectedDeviceState,
  isHistorical,
  formatMileageKm,
  formatToggle,
  formatDateTime,
}: {
  vehicle: VehicleSummary;
  selectedPosition: PositionSnapshot;
  selectedDeviceState: VehicleSummary["deviceState"] | null;
  isHistorical: boolean;
  formatMileageKm: (value?: number | null) => string;
  formatToggle: (value?: boolean | null, onLabel?: string, offLabel?: string) => string;
  formatDateTime: (value?: string | null) => string;
}) {
  return (
    <>
      {!isHistorical ? (
        <div className="mt-0.5 text-[11px] text-slate-300" style={{ fontFamily: "Verdana, Geneva, sans-serif" }}>
          Szacowany obecny przebieg: <span className="font-semibold text-white">{formatMileageKm(vehicle.estimatedCurrentOdometer)}</span>
        </div>
      ) : null}
      <div className="mt-2 space-y-1 text-[11px] text-slate-300" style={{ fontFamily: "Verdana, Geneva, sans-serif" }}>
        <div>
          <span className="font-bold">Status:</span>{" "}
          <span className={isHistorical
            ? "text-sky"
            : vehicle.status === "online"
              ? "text-mint"
              : vehicle.status === "offline"
                ? "text-coral"
                : "text-amber"
          }
          >
            {isHistorical ? "historia" : vehicle.status}
          </span>
        </div>
        <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
          <span><span className="font-bold">Bateria</span> {selectedDeviceState?.battery != null ? `${selectedDeviceState.battery}%` : "Brak"}</span>
          <span className="inline-flex items-center gap-1"><span className="font-bold">GSM</span> <SignalCellular3Icon level={selectedDeviceState?.gsmSignal} /> <span>{selectedDeviceState?.gsmSignal ?? "Brak"}</span></span>
          <span><span className="font-bold">Satellite:</span> {selectedDeviceState?.satelliteCount ?? "Brak"}</span>
          <span><span className="font-bold">Uzbrojony:</span> {formatToggle(selectedDeviceState?.defense)}</span>
          <span><span className="font-bold">Zapłon:</span> {selectedDeviceState?.ignition === true ? "W drodze" : "OFF"}</span>
          <span><span className="font-bold">Zasilanie:</span> {formatToggle(selectedDeviceState?.charging, "Ładuję", "Idle")}</span>
          <span><span className="font-bold">Ostatni odczyt:</span> {formatDateTime(selectedDeviceState?.deviceTime ?? selectedPosition?.deviceTime)}</span>
          <span><span className="font-bold">Lokalizacja:</span> {selectedDeviceState?.positionType ?? selectedPosition?.positionType ?? "Brak"}</span>
          <span><span className="font-bold">Odczyt GPS:</span> {formatToggle(selectedDeviceState?.gpsValid, "OK", "Invalid")}</span>
        </div>
      </div>
    </>
  );
}

function LiveStatusSection({
  vehicle,
  selectedPosition,
  selectedDeviceState,
  isHistorical,
  selectedServiceNotices,
  canManageVehicleInspection,
  onOpenVehicleEditor,
  selectedPositionAddressLoading,
  selectedPositionAddress,
  selectedPositionReachedLabel,
  companySettings,
  companyRouteSummary,
  companyDurationLabel,
  companyDistanceLabel,
  formatArrivalTime,
  formatSpeedKmh,
  getHeadingLabel,
  formatMileageKm,
  formatToggle,
  formatDateTime,
  mobile = false,
}: {
  vehicle: VehicleSummary;
  selectedPosition: PositionSnapshot;
  selectedDeviceState: VehicleSummary["deviceState"] | null;
  isHistorical: boolean;
  selectedServiceNotices: ServiceNotice[];
  canManageVehicleInspection: boolean;
  onOpenVehicleEditor: () => void;
  selectedPositionAddressLoading: boolean;
  selectedPositionAddress: string | null;
  selectedPositionReachedLabel: string | null;
  companySettings: CompanySettingsSummary;
  companyRouteSummary: CompanyRouteSummary | null;
  companyDurationLabel: string;
  companyDistanceLabel: string;
  formatArrivalTime: (value?: number | null) => string;
  formatSpeedKmh: (speed?: number | null) => string;
  getHeadingLabel: (heading?: number | null) => string;
  formatMileageKm: (value?: number | null) => string;
  formatToggle: (value?: boolean | null, onLabel?: string, offLabel?: string) => string;
  formatDateTime: (value?: string | null) => string;
  mobile?: boolean;
}) {
  return (
    <div className={`${mobile ? "neo-subcard overflow-hidden rounded-2xl" : "neo-subcard relative rounded-2xl px-4 py-4 text-left"}`}>
      {mobile ? null : (
        <div className="absolute -top-3 left-4 rounded-full bg-[#162131] px-2 py-0.5 text-[11px] font-semibold uppercase tracking-[0.16em] text-mint">STATUS</div>
      )}
      <div className={mobile ? "px-4 pb-4 pt-5 text-left" : ""}>
        {!isHistorical ? (
          <ServiceNotices notices={selectedServiceNotices} isEditable={canManageVehicleInspection} onEdit={onOpenVehicleEditor} />
        ) : null}
        <div className={`flex items-start justify-between gap-3 ${mobile ? "" : "pt-2"}`}>
          <span className={`${mobile ? "mb-1 text-[11px] font-semibold uppercase tracking-[0.16em] text-sky" : "text-[11px] font-semibold uppercase tracking-[0.16em] text-sky"}`}>{isHistorical ? "POZYCJA HISTORYCZNA" : "POZYCJA LIVE"}</span>
          {!mobile ? (
            <span className={`mt-0.5 inline-block h-2.5 w-2.5 rounded-full ${isHistorical ? "bg-sky shadow-[0_0_10px_rgba(79,156,249,0.65)]" : "bg-mint shadow-[0_0_10px_rgba(74,222,128,0.75)]"}`} />
          ) : null}
        </div>
        <div className="text-[12px] font-normal text-white" style={{ fontFamily: "Verdana, Geneva, sans-serif" }}>
          {selectedPositionAddressLoading ? "Ładowanie adresu..." : (selectedPositionAddress ?? "Brak adresu")}
        </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-sky">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>
        <LiveMetrics
          vehicle={vehicle}
          selectedPosition={selectedPosition}
          selectedDeviceState={selectedDeviceState}
          isHistorical={isHistorical}
          formatMileageKm={formatMileageKm}
          formatToggle={formatToggle}
          formatDateTime={formatDateTime}
        />
      </div>
    </div>
  );
}

function GpsSection({
  selectedPosition,
  selectedDeviceState,
  formatToggle,
  formatDateTime,
}: {
  selectedPosition: PositionSnapshot;
  selectedDeviceState: VehicleSummary["deviceState"] | null;
  formatToggle: (value?: boolean | null, onLabel?: string, offLabel?: string) => string;
  formatDateTime: (value?: string | null) => string;
}) {
  return (
    <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">Bateria</span> <span className="font-normal">{selectedDeviceState?.battery != null ? `${selectedDeviceState.battery}%` : "Brak"}</span></div>
        <div className="inline-flex items-center gap-1"><span className="font-bold">GSM</span> <SignalCellular3Icon level={selectedDeviceState?.gsmSignal} /> <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">Uzbrojony:</span> <span className="font-normal">{formatToggle(selectedDeviceState?.defense)}</span></div>
        <div><span className="font-bold">Zapłon:</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">Zasilanie:</span> <span className="font-normal">{formatToggle(selectedDeviceState?.charging, "Ładuję", "Idle")}</span></div>
        <div><span className="font-bold">Ostatni odczyt:</span> <span className="font-normal">{formatDateTime(selectedDeviceState?.deviceTime ?? selectedPosition?.deviceTime)}</span></div>
        <div><span className="font-bold">Lokalizacja:</span> <span className="font-normal">{selectedDeviceState?.positionType ?? selectedPosition?.positionType ?? "Brak"}</span></div>
        <div><span className="font-bold">Odczyt GPS:</span> <span className="font-normal">{formatToggle(selectedDeviceState?.gpsValid, "OK", "Invalid")}</span></div>
      </div>
    </div>
  );
}

function HistorySection({
  selectedVehicle,
  history,
  isTimelineVisible,
  isTimelineActivated,
  shouldShowNoDrivingHistoryMessage,
  from,
  to,
  historyMinInput,
  historyMaxInput,
  openDesktopHistoryPicker,
  desktopHistoryFocusTarget,
  onToggleDesktopFrom,
  onCloseDesktopFrom,
  onChangeFrom,
  onFromTimeTabForward,
  onToggleDesktopTo,
  onCloseDesktopTo,
  onChangeTo,
  onOpenRecentTripsList,
  onToggleTimeline,
  onActivateTimeline,
  sliderMinTimestamp,
  sliderMaxTimestamp,
  playbackTimestamp,
  playbackPoint,
  playbackPointTime,
  playbackDirection,
  setPlaybackDirection,
  setPlaybackTimestamp,
  startPlayback,
  stopTimelinePlayback,
  pausePlayback,
  skipAndContinuePlayback,
  playbackSpeed,
  setPlaybackSpeed,
  skipStopsDuringPlayback,
  toggleSkipStopsDuringPlayback,
  isPlaybackDriving,
  formatDateTime,
  formatSpeedKmh,
  mobile = false,
  DesktopDateTimeField,
  TimelineScrubber,
}: {
  selectedVehicle: VehicleSummary;
  history: HistoryPoint[];
  isTimelineVisible: boolean;
  isTimelineActivated: boolean;
  shouldShowNoDrivingHistoryMessage: boolean;
  from: string;
  to: string;
  historyMinInput: string;
  historyMaxInput: string;
  openDesktopHistoryPicker: "from" | "to" | null;
  desktopHistoryFocusTarget: "date" | "time" | null;
  onToggleDesktopFrom: () => void;
  onCloseDesktopFrom: () => void;
  onChangeFrom: (nextValue: string) => void;
  onFromTimeTabForward: () => void;
  onToggleDesktopTo: () => void;
  onCloseDesktopTo: () => void;
  onChangeTo: (nextValue: string) => void;
  onOpenRecentTripsList: () => void;
  onToggleTimeline: () => void | Promise<void>;
  onActivateTimeline: (nextTimestamp: number) => void;
  sliderMinTimestamp: number | null;
  sliderMaxTimestamp: number | null;
  playbackTimestamp: number | null;
  playbackPoint: PositionSnapshot | null;
  playbackPointTime: string | null;
  playbackDirection: "forward" | "backward";
  setPlaybackDirection: (direction: "forward" | "backward") => void;
  setPlaybackTimestamp: (value: number) => void;
  startPlayback: (direction: "forward" | "backward") => void;
  stopTimelinePlayback: () => void;
  pausePlayback: () => void;
  skipAndContinuePlayback: (direction: "forward" | "backward") => void;
  playbackSpeed: 2 | 5 | 10 | 50;
  setPlaybackSpeed: (value: 2 | 5 | 10 | 50) => void;
  skipStopsDuringPlayback: boolean;
  toggleSkipStopsDuringPlayback: () => void;
  isPlaybackDriving: boolean;
  formatDateTime: (value?: string | null) => string;
  formatSpeedKmh: (speed?: number | null) => string;
  mobile?: boolean;
  DesktopDateTimeField: ComponentType<DesktopDateTimeFieldComponentProps>;
  TimelineScrubber: ComponentType<TimelineScrubberComponentProps>;
}) {
  const [isMobileDateRangePickerOpen, setIsMobileDateRangePickerOpen] = useState(false);

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

    setIsMobileDateRangePickerOpen(false);
  }, [mobile, selectedVehicle.id]);

  const drivingRanges = useMemo(() => {
    const stampedPoints = history
      .map((point) => ({
        point,
        timestamp: new Date(point.deviceTime ?? point.serverTime).getTime(),
      }))
      .filter((entry) => Number.isFinite(entry.timestamp))
      .sort((left, right) => left.timestamp - right.timestamp);
    const ranges: Array<{ start: number; end: number }> = [];

    for (let index = 0; index < stampedPoints.length - 1; index += 1) {
      const current = stampedPoints[index];
      const next = stampedPoints[index + 1];
      const isDriving = current.point.ignition === true || (current.point.speed ?? 0) > 0;

      if (!isDriving || next.timestamp <= current.timestamp) {
        continue;
      }

      const previousRange = ranges[ranges.length - 1];
      if (previousRange?.end === current.timestamp) {
        previousRange.end = next.timestamp;
      } else {
        ranges.push({ start: current.timestamp, end: next.timestamp });
      }
    }

    return ranges;
  }, [history]);

  const overspeedRanges = useMemo(() => {
    const stampedPoints = history
      .map((point) => ({
        point,
        timestamp: new Date(point.deviceTime ?? point.serverTime).getTime(),
      }))
      .filter((entry) => Number.isFinite(entry.timestamp))
      .sort((left, right) => left.timestamp - right.timestamp);
    const ranges: Array<{ start: number; end: number }> = [];

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

      if ((current.point.speed ?? 0) <= 140 || next.timestamp <= current.timestamp) {
        continue;
      }

      const previousRange = ranges[ranges.length - 1];
      if (previousRange?.end === current.timestamp) {
        previousRange.end = next.timestamp;
      } else {
        ranges.push({ start: current.timestamp, end: next.timestamp });
      }
    }

    return ranges;
  }, [history]);

  const maxSpeedPoint = useMemo(() => {
    let result: { timestamp: number; speed: number } | null = null;

    for (const point of history) {
      const timestamp = new Date(point.deviceTime ?? point.serverTime).getTime();
      const speed = point.speed ?? 0;

      if (!Number.isFinite(timestamp) || !Number.isFinite(speed) || speed <= 140) {
        continue;
      }

      if (!result || speed > result.speed || (speed === result.speed && timestamp < result.timestamp)) {
        result = { timestamp, speed };
      }
    }

    return result;
  }, [history]);

  const mobileHistoryActions = (
    <div className="flex shrink-0 items-center gap-2">
      <button
        type="button"
        onClick={() => setIsMobileDateRangePickerOpen((current) => !current)}
        className={`flex h-7 w-7 items-center justify-center rounded-full border transition ${
          isMobileDateRangePickerOpen
            ? "border-cyan-300/45 bg-cyan-300/12 text-cyan-100"
            : "border-cyan-300/25 bg-white/5 text-cyan-100"
        }`}
        aria-label="Wybierz zakres dat historii"
        title="Wybierz zakres dat historii"
      >
        <svg viewBox="0 0 24 24" className="h-3.5 w-3.5" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
          <path d="M8 2v3" />
          <path d="M16 2v3" />
          <rect x="3" y="5" width="18" height="16" rx="3" />
          <path d="M3 10h18" />
        </svg>
      </button>
      <button
        type="button"
        onClick={onOpenRecentTripsList}
        className="flex h-7 shrink-0 items-center justify-center rounded-full border border-cyan-300/25 bg-white/5 px-2 text-[9px] font-semibold uppercase tracking-[0.14em] text-cyan-100"
        aria-label="Pokaż listę kursów"
        title="Pokaż listę kursów"
      >
        LISTA
      </button>
    </div>
  );

  const wrapperClass = mobile
    ? "neo-subcard overflow-hidden rounded-2xl"
    : "relative mt-4 neo-subcard rounded-2xl px-4 py-3";

  return (
    <div className={wrapperClass}>
      {mobile ? null : (
        <>
          <div className="absolute -top-3 left-4 rounded-full bg-[#162131] px-2 py-0.5 text-[11px] font-semibold uppercase tracking-[0.16em] text-mint">HISTORIA POJAZDU</div>
          <div className="mb-2 pt-2" />
        </>
      )}
      <div className={mobile ? `px-4 pb-4 ${isTimelineVisible ? "pt-[6px]" : "pt-3"}` : ""}>
        {mobile && !isTimelineVisible ? (
          <div className="flex items-center justify-between gap-3">
            <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-mint">HISTORIA POJAZDU</div>
            {mobileHistoryActions}
          </div>
        ) : null}

        {(!mobile || isMobileDateRangePickerOpen) ? (
          <div className={`grid items-end gap-3 ${mobile ? "mt-2" : "md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto]"}`}>
            {mobile ? (
              <>
              <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) => onChangeFrom(event.target.value)}
                  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) => onChangeTo(event.target.value)}
                  className="neo-field h-9 min-w-0 flex-1 rounded-2xl px-3 text-[11px] text-white"
                />
              </label>
              </>
            ) : (
              <>
                <DesktopDateTimeField
                  label="Od"
                  value={from}
                  min={historyMinInput}
                  max={historyMaxInput}
                  isOpen={openDesktopHistoryPicker === "from"}
                  focusTarget={openDesktopHistoryPicker === "from" ? desktopHistoryFocusTarget : null}
                  onToggle={onToggleDesktopFrom}
                  onClose={onCloseDesktopFrom}
                  onChange={onChangeFrom}
                  onTimeTabForward={onFromTimeTabForward}
                />
                <DesktopDateTimeField
                  label="Do"
                  value={to}
                  min={historyMinInput}
                  max={historyMaxInput}
                  isOpen={openDesktopHistoryPicker === "to"}
                  focusTarget={openDesktopHistoryPicker === "to" ? desktopHistoryFocusTarget : null}
                  onToggle={onToggleDesktopTo}
                  onClose={onCloseDesktopTo}
                  onChange={onChangeTo}
                />
              </>
            )}

            {mobile ? null : (
              <div className="flex shrink-0 flex-col items-center gap-1 pt-2">
                <button
                  type="button"
                  onClick={onOpenRecentTripsList}
                  className="flex h-6 shrink-0 items-center justify-center rounded-full border border-cyan-300/25 bg-white/5 px-2 text-[9px] font-semibold uppercase tracking-[0.14em] text-cyan-100"
                  aria-label="Pokaż listę kursów"
                  title="Pokaż listę kursów"
                >
                  LISTA
                </button>
                <button
                  type="button"
                  onClick={() => {
                    void 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ż 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>
            )}
          </div>
        ) : null}

        {isTimelineVisible ? (
          <div
            className={mobile ? "space-y-2" : "mt-2 space-y-2"}
            onPointerDown={(event) => event.stopPropagation()}
            onMouseDown={(event) => event.stopPropagation()}
            onTouchStart={(event) => event.stopPropagation()}
          >
            <div className="flex items-center justify-between gap-2">
              <div className="flex min-w-0 items-center gap-2 text-[11px] text-slate-300">
                <span
                  className="inline-flex shrink-0 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 className="truncate">{playbackPointTime ? `Czas jazdy: ${formatDateTime(playbackPointTime)}` : "Czas jazdy: Brak"}</span>
              </div>
              {mobile ? mobileHistoryActions : null}
            </div>

            <div className="pb-3">
              <TimelineScrubber
                min={sliderMinTimestamp ?? 0}
                max={sliderMaxTimestamp ?? 0}
                value={playbackTimestamp ?? sliderMinTimestamp ?? 0}
                color={getVehicleColorHex(selectedVehicle.colorKey)}
                drivingRanges={drivingRanges}
                overspeedRanges={overspeedRanges}
                maxSpeedPoint={maxSpeedPoint}
                active={isTimelineActivated}
                onChange={(nextTimestamp) => {
                  onActivateTimeline(nextTimestamp);
                }}
              />
            </div>

            {shouldShowNoDrivingHistoryMessage ? (
              <div className="rounded-2xl border border-slate-500/25 bg-slate-950/35 px-3 py-3 text-center text-[12px] font-semibold text-slate-200">
                Auto w tym czasie nie jeździło
              </div>
            ) : (
              <>
                <div className={`flex flex-wrap items-center ${mobile ? "gap-1" : "gap-2"} ${!isTimelineActivated ? "pointer-events-none opacity-45" : ""}`}>
                  <button type="button" onClick={() => skipAndContinuePlayback("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 w-7 items-center justify-center rounded-md bg-coral/15 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"
                  >
                    <svg viewBox="0 0 24 24" className="h-3.5 w-3.5 fill-current" aria-hidden="true">
                      <path d="M6 6h12v12H6z" />
                    </svg>
                  </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={() => skipAndContinuePlayback("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 text-[11px] text-mint ${mobile ? "px-1" : "px-2"}`} 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>
                  {playbackPoint ? (
                    <>
                      <span className={`${mobile ? "text-[9px]" : "text-[10px]"} whitespace-nowrap text-slate-200`}><span className="font-bold">GPS:</span> {playbackPoint.satelliteCount ?? "Brak"}</span>
                      <span className={`${mobile ? "text-[9px]" : "text-[10px]"} whitespace-nowrap text-slate-200`}>{playbackPoint.speed != null ? formatSpeedKmh(playbackPoint.speed) : "Brak"}</span>
                    </>
                  ) : null}
                  {!mobile ? (
                    <button
                      type="button"
                      onClick={toggleSkipStopsDuringPlayback}
                      className={`h-7 rounded-md border px-2 text-[9px] 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>
                  ) : null}
                </div>
              </>
            )}
          </div>
        ) : null}
      </div>
    </div>
  );
}

export function VehicleDetailsPanel({
  selectedVehicle,
  currentUserFirstName,
  canManageVehicleInspection,
  onOpenVehicleEditor,
  selectedPosition,
  selectedDeviceState,
  selectedServiceNotices,
  selectedPositionAddressLoading,
  selectedPositionAddress,
  selectedPositionReachedLabel,
  companySettings,
  companyRouteSummary,
  companyDurationLabel,
  companyDistanceLabel,
  formatArrivalTime,
  formatSpeedKmh,
  getHeadingLabel,
  formatMileageKm,
  formatToggle,
  formatDateTime,
  history,
  isTimelineVisible,
  isTimelineActivated,
  shouldShowNoDrivingHistoryMessage,
  from,
  to,
  historyMinInput,
  historyMaxInput,
  openDesktopHistoryPicker,
  desktopHistoryFocusTarget,
  onToggleDesktopFrom,
  onCloseDesktopFrom,
  onChangeFrom,
  onFromTimeTabForward,
  onToggleDesktopTo,
  onCloseDesktopTo,
  onChangeTo,
  onOpenRecentTripsList,
  onToggleTimeline,
  onActivateTimeline,
  sliderMinTimestamp,
  sliderMaxTimestamp,
  playbackTimestamp,
  playbackPoint,
  playbackPointTime,
  playbackDirection,
  setPlaybackDirection,
  setPlaybackTimestamp,
  startPlayback,
  stopTimelinePlayback,
  pausePlayback,
  skipAndContinuePlayback,
  playbackSpeed,
  setPlaybackSpeed,
  skipStopsDuringPlayback,
  toggleSkipStopsDuringPlayback,
  isPlaybackDriving,
  activeMobileSection,
  toggleMobileSection,
  isMobileLiveOpen,
  isMobileHistoryOpen,
  isMobileGpsOpen,
  DesktopDateTimeField,
  TimelineScrubber,
}: VehicleDetailsPanelProps) {
  const isHistoricalStatus = isTimelineVisible && isTimelineActivated && playbackPoint != null && selectedPosition != null;
  const statusDeviceState = useMemo<VehicleSummary["deviceState"] | null>(() => {
    if (!isHistoricalStatus || !selectedPosition) {
      return selectedDeviceState;
    }

    return {
      deviceTime: selectedPosition.deviceTime ?? selectedPosition.serverTime,
      battery: selectedPosition.battery ?? null,
      gsmSignal: selectedPosition.gsmSignal ?? null,
      ignition: selectedPosition.ignition ?? null,
      charging: selectedPosition.charging ?? null,
      defense: selectedPosition.defense ?? null,
      gpsValid: selectedPosition.gpsValid ?? null,
      satelliteCount: selectedPosition.satelliteCount ?? null,
      positionType: selectedPosition.positionType ?? null,
    };
  }, [isHistoricalStatus, selectedDeviceState, selectedPosition]);

  if (!selectedVehicle) {
    return (
      <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>
    );
  }

  return (
    <>
      <div className="flex flex-col gap-3 md:hidden">
        {activeMobileSection === "live" && selectedPosition ? (
          <LiveStatusSection
            vehicle={selectedVehicle}
            selectedPosition={selectedPosition}
            selectedDeviceState={statusDeviceState}
            isHistorical={isHistoricalStatus}
            selectedServiceNotices={selectedServiceNotices}
            canManageVehicleInspection={canManageVehicleInspection}
            onOpenVehicleEditor={onOpenVehicleEditor}
            selectedPositionAddressLoading={selectedPositionAddressLoading}
            selectedPositionAddress={selectedPositionAddress}
            selectedPositionReachedLabel={selectedPositionReachedLabel}
            companySettings={companySettings}
            companyRouteSummary={companyRouteSummary}
            companyDurationLabel={companyDurationLabel}
            companyDistanceLabel={companyDistanceLabel}
            formatArrivalTime={formatArrivalTime}
            formatSpeedKmh={formatSpeedKmh}
            getHeadingLabel={getHeadingLabel}
            formatMileageKm={formatMileageKm}
            formatToggle={formatToggle}
            formatDateTime={formatDateTime}
            mobile
          />
        ) : null}

        {activeMobileSection === "history" ? (
          <HistorySection
            selectedVehicle={selectedVehicle}
            history={history}
            isTimelineVisible={isTimelineVisible}
            isTimelineActivated={isTimelineActivated}
            shouldShowNoDrivingHistoryMessage={shouldShowNoDrivingHistoryMessage}
            from={from}
            to={to}
            historyMinInput={historyMinInput}
            historyMaxInput={historyMaxInput}
            openDesktopHistoryPicker={openDesktopHistoryPicker}
            desktopHistoryFocusTarget={desktopHistoryFocusTarget}
            onToggleDesktopFrom={onToggleDesktopFrom}
            onCloseDesktopFrom={onCloseDesktopFrom}
            onChangeFrom={onChangeFrom}
            onFromTimeTabForward={onFromTimeTabForward}
            onToggleDesktopTo={onToggleDesktopTo}
            onCloseDesktopTo={onCloseDesktopTo}
            onChangeTo={onChangeTo}
            onOpenRecentTripsList={onOpenRecentTripsList}
            onToggleTimeline={onToggleTimeline}
            onActivateTimeline={onActivateTimeline}
            sliderMinTimestamp={sliderMinTimestamp}
            sliderMaxTimestamp={sliderMaxTimestamp}
            playbackTimestamp={playbackTimestamp}
            playbackPoint={playbackPoint}
            playbackPointTime={playbackPointTime}
            playbackDirection={playbackDirection}
            setPlaybackDirection={setPlaybackDirection}
            setPlaybackTimestamp={setPlaybackTimestamp}
            startPlayback={startPlayback}
            stopTimelinePlayback={stopTimelinePlayback}
            pausePlayback={pausePlayback}
            skipAndContinuePlayback={skipAndContinuePlayback}
            playbackSpeed={playbackSpeed}
            setPlaybackSpeed={setPlaybackSpeed}
            skipStopsDuringPlayback={skipStopsDuringPlayback}
            toggleSkipStopsDuringPlayback={toggleSkipStopsDuringPlayback}
            isPlaybackDriving={isPlaybackDriving}
            formatDateTime={formatDateTime}
            formatSpeedKmh={formatSpeedKmh}
            DesktopDateTimeField={DesktopDateTimeField}
            TimelineScrubber={TimelineScrubber}
            mobile
          />
        ) : null}

        {activeMobileSection === "gps" && selectedPosition ? (
          <GpsSection
            selectedPosition={selectedPosition}
            selectedDeviceState={statusDeviceState}
            formatToggle={formatToggle}
            formatDateTime={formatDateTime}
          />
        ) : 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">
          {activeMobileSection !== "history" ? (
            <button
              type="button"
              onClick={() => toggleMobileSection("live")}
              className="relative -top-[30px] 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>
          ) : null}
          <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 ? (
          <LiveStatusSection
            vehicle={selectedVehicle}
            selectedPosition={selectedPosition}
            selectedDeviceState={statusDeviceState}
            isHistorical={isHistoricalStatus}
            selectedServiceNotices={selectedServiceNotices}
            canManageVehicleInspection={canManageVehicleInspection}
            onOpenVehicleEditor={onOpenVehicleEditor}
            selectedPositionAddressLoading={selectedPositionAddressLoading}
            selectedPositionAddress={selectedPositionAddress}
            selectedPositionReachedLabel={selectedPositionReachedLabel}
            companySettings={companySettings}
            companyRouteSummary={companyRouteSummary}
            companyDurationLabel={companyDurationLabel}
            companyDistanceLabel={companyDistanceLabel}
            formatArrivalTime={formatArrivalTime}
            formatSpeedKmh={formatSpeedKmh}
            getHeadingLabel={getHeadingLabel}
            formatMileageKm={formatMileageKm}
            formatToggle={formatToggle}
            formatDateTime={formatDateTime}
          />
        ) : null}

        <HistorySection
          selectedVehicle={selectedVehicle}
          history={history}
          isTimelineVisible={isTimelineVisible}
          isTimelineActivated={isTimelineActivated}
          shouldShowNoDrivingHistoryMessage={shouldShowNoDrivingHistoryMessage}
          from={from}
          to={to}
          historyMinInput={historyMinInput}
          historyMaxInput={historyMaxInput}
          openDesktopHistoryPicker={openDesktopHistoryPicker}
          desktopHistoryFocusTarget={desktopHistoryFocusTarget}
          onToggleDesktopFrom={onToggleDesktopFrom}
          onCloseDesktopFrom={onCloseDesktopFrom}
          onChangeFrom={onChangeFrom}
          onFromTimeTabForward={onFromTimeTabForward}
          onToggleDesktopTo={onToggleDesktopTo}
          onCloseDesktopTo={onCloseDesktopTo}
          onChangeTo={onChangeTo}
          onOpenRecentTripsList={onOpenRecentTripsList}
          onToggleTimeline={onToggleTimeline}
          onActivateTimeline={onActivateTimeline}
          sliderMinTimestamp={sliderMinTimestamp}
          sliderMaxTimestamp={sliderMaxTimestamp}
          playbackTimestamp={playbackTimestamp}
          playbackPoint={playbackPoint}
          playbackPointTime={playbackPointTime}
          playbackDirection={playbackDirection}
          setPlaybackDirection={setPlaybackDirection}
          setPlaybackTimestamp={setPlaybackTimestamp}
          startPlayback={startPlayback}
          stopTimelinePlayback={stopTimelinePlayback}
          pausePlayback={pausePlayback}
          skipAndContinuePlayback={skipAndContinuePlayback}
          playbackSpeed={playbackSpeed}
          setPlaybackSpeed={setPlaybackSpeed}
          skipStopsDuringPlayback={skipStopsDuringPlayback}
          toggleSkipStopsDuringPlayback={toggleSkipStopsDuringPlayback}
          isPlaybackDriving={isPlaybackDriving}
          formatDateTime={formatDateTime}
          formatSpeedKmh={formatSpeedKmh}
          DesktopDateTimeField={DesktopDateTimeField}
          TimelineScrubber={TimelineScrubber}
        />
      </div>
    </>
  );
}