'use client';

import { useCallback, useEffect, useRef, useState, type ChangeEvent } from 'react';
import type { PlaneState, StateSnapshot } from '@/lib/game/state';
import { PLANE_TYPES } from '@/lib/game/catalog';
import { formatCash, formatFuel, formatSimClock } from '@/lib/format';
import { TIME_SCALES, scaleToSlider, sliderToScale } from '@/lib/timeScale';
import type { HoverTarget } from './hoverTypes';

interface LeftPaneProps {
  state: StateSnapshot | null;
  loading: boolean;
  error: string | null;
  // The shell's single-poll refresh — called after a sim-control POST so the pane updates immediately.
  onRefresh: () => void;
  // ISS-002 (v0.15.0): report fleet-row hovers to the shell so the map can highlight the plane.
  onHover: (target: HoverTarget | null) => void;
}

// Discrete ladder slider (v0.9.2, values reworked in v0.14.0): position t ∈ [0,1] → nearest
// step of the ladder 1×/2×/5×/10×/25×/50×/100×/250×/500×/1000× — each of the 10 positions
// roughly doubles the speed.
const SCALE_SLIDER_STEP = 1 / (TIME_SCALES.length - 1); // one ladder step per keyboard-arrow step
const SCALE_COMMIT_DEBOUNCE_MS = 250;

// Flying planes show their current leg from the snapshot's dest fields (v0.12.0).
function planeLocation(p: PlaneState): string {
  if (p.status === 'flying' && p.destName) return `${p.locationName} → ${p.destName}`;
  return p.locationName;
}

// Cargo loadout "n/capacity pkgs" — expired packages still occupy their slot.
function loadoutFor(state: StateSnapshot, p: PlaneState): string {
  const used = state.packages.filter(
    (pkg) => pkg.planeId === p.id && (pkg.status === 'loaded' || pkg.status === 'expired'),
  ).length;
  const capacity = state.catalog.find((e) => e.model === p.model)?.capacity ?? PLANE_TYPES[p.model]?.capacity ?? 0;
  return `${used}/${capacity} pkgs`;
}

// ISS-001 — an optimistic slider value is cleared exactly when a rendered snapshot CONFIRMS it
// (server scale === pending), never earlier: clearing at commit time would snap the pointer back
// to the stale scale for one poll cycle, then jump forward again on the confirming snapshot.
export function pendingScaleConfirmed(pendingScale: number | null, serverTimeScale: number): boolean {
  return pendingScale !== null && serverTimeScale === pendingScale;
}

export default function LeftPane({ state, loading, error, onRefresh, onHover }: LeftPaneProps) {
  const [busy, setBusy] = useState(false);

  // POST /api/sim, then refetch the full snapshot immediately so the pane reflects the new
  // controls without waiting for the next poll tick. On failure keep the stale UI — the
  // running poll retries on its own and surfaces the error state. A commit that lands while
  // another POST is in flight is held in a single slot (last intent wins) and flushed by the
  // in-flight call, so every user intent reaches the server (the [1,1000] clamp stays as backstop).
  // The gate is a REF, not React state: closures never see a stale "busy" value, which used to
  // let a flush re-queue instead of send and silently drop a commit.
  const queuedRef = useRef<{ timeScale?: number; paused?: boolean } | null>(null);
  const busyRef = useRef(false);

  type SimControlsOutcome = 'sent' | 'queued' | 'failed';

  // 'sent': this body reached the server (a confirming snapshot follows via onRefresh).
  // 'queued': an in-flight call holds it — its flush will send it.
  // 'failed': the POST for this body never succeeded; callers drop optimistic values only then.
  const applySimControls = useCallback(
    async (body: { timeScale?: number; paused?: boolean }): Promise<SimControlsOutcome> => {
      if (busyRef.current) {
        queuedRef.current = body; // last intent wins — the in-flight call's flush sends it
        return 'queued';
      }
      busyRef.current = true;
      setBusy(true);
      let sentOwn = false;
      try {
        let current: { timeScale?: number; paused?: boolean } | null = body;
        while (current !== null) {
          const res = await fetch('/api/sim', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(current),
            cache: 'no-store',
          });
          if (!res.ok) throw new Error(`POST /api/sim → HTTP ${res.status}`);
          onRefresh();
          if (current === body) sentOwn = true; // object identity — queued bodies are fresh literals
          current = queuedRef.current; // pick up anything that arrived while we were in flight
          queuedRef.current = null;
        }
      } catch (err) {
        console.error('failed to apply sim controls', err);
        queuedRef.current = null; // don't replay a stale intent after a failed round-trip
      } finally {
        busyRef.current = false;
        setBusy(false);
      }
      return sentOwn ? 'sent' : 'failed';
    },
    [onRefresh],
  );

  const paused = state?.simState.paused ?? false;
  const timeScale = state?.simState.timeScale ?? 1;

  // Slider commit (v0.9.1): the displayed value follows the drag optimistically via
  // pendingScale; POST /api/sim fires after a 250 ms debounce, or immediately when the
  // user releases the slider (browsers fire a native 'change' on release). The server's
  // [1,1000] clamp stays as the backstop.
  const [pendingScale, setPendingScaleState] = useState<number | null>(null);
  const pendingRef = useRef<number | null>(null);
  const commitTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);

  const setPending = useCallback((s: number | null) => {
    pendingRef.current = s;
    setPendingScaleState(s);
  }, []);

  const commitNow = useCallback(() => {
    if (commitTimerRef.current !== null) {
      clearTimeout(commitTimerRef.current);
      commitTimerRef.current = null;
    }
    const s = pendingRef.current;
    if (s === null) return;
    // ISS-001: keep the chosen value on screen until a snapshot CONFIRMS it — clearing at
    // commit time would snap the slider back to the stale scale for one poll cycle, then jump
    // forward again when the confirming snapshot lands. 'queued' also keeps it (the in-flight
    // call flushes it); only a genuine failure drops it so the display falls back to truth.
    void applySimControls({ timeScale: s }).then((outcome) => {
      if (outcome === 'failed') setPending(null);
    });
  }, [applySimControls, setPending]);

  // Confirmation: once a rendered snapshot carries the pending scale AND no commit is in
  // flight, the optimistic value has been superseded by server truth — clear it (display is
  // unchanged either way). The busy guard matters: while a commit POST is still out, an OLD
  // snapshot that happens to match the pending value is coincidence, not confirmation (e.g. a
  // quick drag back to the previous scale must not be swallowed before its own commit fires).
  useEffect(() => {
    if (!busy && state && pendingScaleConfirmed(pendingScale, state.simState.timeScale)) setPending(null);
  }, [state, pendingScale, busy, setPending]);

  const onSliderInput = useCallback(
    (e: ChangeEvent<HTMLInputElement>) => {
      setPending(sliderToScale(Number(e.target.value)));
      if (commitTimerRef.current !== null) clearTimeout(commitTimerRef.current);
      commitTimerRef.current = setTimeout(commitNow, SCALE_COMMIT_DEBOUNCE_MS);
    },
    [commitNow, setPending],
  );

  const sliderRef = useRef<HTMLInputElement>(null);
  useEffect(() => {
    const el = sliderRef.current;
    if (!el) return;
    el.addEventListener('change', commitNow); // flush on pointer-up / keyboard release
    return () => el.removeEventListener('change', commitNow);
  }, [commitNow]);

  // Drop any pending debounce timer on unmount.
  useEffect(
    () => () => {
      if (commitTimerRef.current !== null) clearTimeout(commitTimerRef.current);
    },
    [],
  );

  const displayedScale = pendingScale ?? timeScale;

  return (
    <aside data-testid="left-pane" className="pane left-pane">
      <h2 className="pane-title">Assets</h2>
      {loading && !state ? (
        <p data-testid="left-loading" className="pane-muted">Loading…</p>
      ) : state ? (
        <>
          <section className="pane-section">
            <div className="stat-row">
              <span>Cash</span>
              <strong data-testid="wallet-cash">{formatCash(state.account.cash)}</strong>
            </div>
            <div className="stat-row">
              <span>Reputation</span>
              <strong data-testid="reputation">{state.account.reputation}</strong>
            </div>
          </section>

          <section className="pane-section">
            <h3 className="pane-heading">Fleet</h3>
            {state.planes.length === 0 ? (
              <p className="pane-muted">No planes.</p>
            ) : (
              <ul data-testid="fleet-list" className="fleet-list">
                {state.planes.map((p) => (
                  // ISS-002: hovering a fleet row highlights the plane on the map.
                  <li
                    key={p.id}
                    data-testid={`plane-${p.id}`}
                    className="plane-row"
                    onMouseEnter={() => onHover({ kind: 'plane', id: p.id })}
                    onMouseLeave={() => onHover(null)}
                  >
                    <div className="plane-main">
                      <span className="plane-model">{PLANE_TYPES[p.model]?.name ?? p.model}</span>
                      <span className={`plane-status status-${p.status}`}>{p.status}</span>
                    </div>
                    <div className="fuel-bar" aria-hidden="true">
                      <div style={{ width: `${Math.max(0, Math.min(100, (p.fuel / p.maxFuel) * 100))}%` }} />
                    </div>
                    <div className="plane-sub">
                      <span data-testid={`plane-fuel-${p.id}`}>{formatFuel(p.fuel, p.maxFuel)}</span>
                      <span data-testid={`plane-loadout-${p.id}`}>{loadoutFor(state, p)}</span>
                      <span className="plane-loc">{planeLocation(p)}</span>
                    </div>
                  </li>
                ))}
              </ul>
            )}
          </section>

          <section className="pane-section">
            <h3 className="pane-heading">Time</h3>
            <p data-testid="sim-clock" className="sim-clock">
              {formatSimClock(state.simState.clockMs)}
              {paused ? ' (paused)' : ''}
            </p>
            <div className="time-controls">
              <button
                type="button"
                data-testid="pause-toggle"
                disabled={busy}
                onClick={() => void applySimControls({ paused: !paused })}
              >
                {paused ? 'Resume' : 'Pause'}
              </button>
              <input
                ref={sliderRef}
                type="range"
                data-testid="time-scale-slider"
                aria-label="Time scale"
                min={0}
                max={1}
                step={SCALE_SLIDER_STEP}
                value={scaleToSlider(displayedScale)}
                onChange={onSliderInput}
              />
              <span data-testid="time-scale-value">{displayedScale}×</span>
            </div>
          </section>

          {error && (
            <p data-testid="left-error" className="pane-error">
              {error}
            </p>
          )}
        </>
      ) : null}
    </aside>
  );
}