GdzieWjade/src/components/GuideBanner.tsx

import { useEffect, useMemo, useRef, useState } from 'react';
import type { LatLon } from '../lib/geo';
import { barrierPositions, buildPath, guideState, maneuvers, pointAt, type GuideState } from '../lib/guide';
import { CueTracker, VoicePlayer, type Utt } from '../lib/voice';
import { useI18n, type Key } from '../lib/i18n';
import { HARD_FLAGS, type RouteResult } from '../lib/route';
import { Icon } from './ui';

interface Props {
  result: RouteResult;
  onStop: () => void;
  onPos: (p: LatLon | null) => void;
  onReroute: (from: LatLon) => void;
}

const SIM_STEP_M = 6;

/** Live guidance: watches GPS (or a simulated walk), shows the next turn and upcoming barriers on top. */
export function GuideBanner({ result, onStop, onPos, onReroute }: Props) {
  const { t, lang } = useI18n();
  const path = useMemo(() => buildPath(result.coords), [result]);
  const mans = useMemo(() => maneuvers(result, path), [result, path]);
  const barriers = useMemo(() => barrierPositions(path, result.barriers, HARD_FLAGS), [path, result]);

  const [pos, setPos] = useState<LatLon | null>(null);
  const [sim, setSim] = useState(false);
  const [voice, setVoice] = useState<'off' | 'all' | 'warn'>('off');
  const [err, setErr] = useState<'denied' | 'none' | 'insecure' | null>(null);
  const simAlong = useRef(0);

  // ---- position source ----
  useEffect(() => {
    if (sim) {
      setErr(null);
      simAlong.current = 0;
      setPos(pointAt(path, 0));
      const id = window.setInterval(() => {
        simAlong.current = Math.min(path.total, simAlong.current + SIM_STEP_M);
        setPos(pointAt(path, simAlong.current));
      }, 1000);
      return () => window.clearInterval(id);
    }
    if (!('geolocation' in navigator)) { setErr('none'); return; }
    if (!window.isSecureContext) { setErr('insecure'); return; } // browsers hand out location on HTTPS only
    setErr(null);
    const id = navigator.geolocation.watchPosition(
      (p) => { setErr(null); setPos([p.coords.latitude, p.coords.longitude]); },
      (e) => { if (e.code !== 3) setErr(e.code === 1 ? 'denied' : 'none'); }, // a timeout just means "no fix yet": keep waiting
      { enableHighAccuracy: true, maximumAge: 1000, timeout: 15_000 },
    );
    return () => navigator.geolocation.clearWatch(id);
  }, [sim, path]);

  useEffect(() => { onPos(pos); }, [pos, onPos]);
  useEffect(() => () => onPos(null), [onPos]);

  // ---- keep the screen on while guiding ----
  useEffect(() => {
    let lock: { release: () => Promise<void> } | null = null;
    const wl = (navigator as unknown as { wakeLock?: { request: (t: 'screen') => Promise<{ release: () => Promise<void> }> } }).wakeLock;
    void wl?.request('screen').then((l) => { lock = l; }).catch(() => undefined);
    return () => { void lock?.release().catch(() => undefined); };
  }, []);

  const st = pos ? guideState(path, mans, barriers, pos) : null;
  const round5 = (d: number) => Math.max(5, Math.round(d / 5) * 5);

  let headline = t('guide.waiting');
  if (st) {
    if (st.arrived) headline = t('guide.arrived');
    else if (st.offRoute) headline = t('guide.off');
    else if (st.next) {
      const m = st.next.maneuver;
      headline = t('guide.next', { d: round5(st.next.distance), action: t(`turn.${m.turn}` as Key), name: m.name ? ` — ${m.name}` : '' });
    } else headline = t('guide.straight', { d: round5(st.remaining) });
  }
  const barrierLine = st && !st.arrived && !st.offRoute && st.barrier
    ? t('guide.barrier', { d: round5(st.barrier.distance), what: t(`flag.${st.barrier.b.flag}` as Key) })
    : null;

  // ---- speech: events only (turn within 25 m, barrier within 60 m, off-route, arrival), never overlapping ----
  const latest = useRef<GuideState | null>(null);
  latest.current = st;
  const player = useRef<VoicePlayer | null>(null);
  const tracker = useRef<CueTracker | null>(null);
  useEffect(() => {
    if (voice === 'off' || !('speechSynthesis' in window)) { player.current?.stop(); player.current = null; tracker.current = null; return; }
    const synth = window.speechSynthesis;
    const make = (text: string): Utt => {
      const u = new SpeechSynthesisUtterance(text);
      u.lang = lang === 'pl' ? 'pl-PL' : 'en-GB';
      return u as unknown as Utt;
    };
    player.current = new VoicePlayer({ speak: (u) => synth.speak(u as unknown as SpeechSynthesisUtterance), cancel: () => synth.cancel() }, make);
    tracker.current = new CueTracker(
      {
        turn: (d, turn) => t('voice.turn', { d, turn }),
        barrier: (d, what) => t('voice.barrier', { d, what }),
        off: t('voice.off'),
        arrived: t('voice.arrived'),
      },
      { turn: (x) => t(`turn.${x}` as Key).toLocaleLowerCase(lang), flag: (f) => t(`flag.${f}` as Key).toLocaleLowerCase(lang) },
      (at) => (latest.current?.along ?? 0) < at - 3,
    );
    player.current.say({ id: 'on', kind: 'info', text: t(voice === 'all' ? 'voice.onAll' : 'voice.onWarn'), priority: 1 });
    return () => { player.current?.stop(); player.current = null; };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [voice, lang]);
  useEffect(() => {
    if (!st || !player.current || !tracker.current) return;
    for (const cue of tracker.current.update(st)) {
      if (voice === 'warn' && cue.kind === 'turn') continue; // warnings-only mode: no turn prompts
      player.current.say(cue);
    }
  }, [st, voice]);

  const etaMin = st ? Math.max(1, Math.round(result.durationMin * (st.remaining / Math.max(1, path.total)))) : null;

  return (
    <section className="kbb-guide" aria-label={t('guide.active')}>
      <div className="kbb-guide__main">
        <p className="kbb-guide__headline" role="status" aria-live="polite">
          <Icon name={st?.arrived ? 'check_circle' : st?.offRoute ? 'error' : 'directions_walk'} size={4} className="margin-right-1" />
          {headline}
        </p>
        {barrierLine && <p className="kbb-guide__barrier" role="alert"><Icon name="warning" size={3} className="margin-right-05" />{barrierLine}</p>}
        {st && !st.arrived && (
          <p className="kbb-guide__meta">{t('guide.remaining', { km: (st.remaining / 1000).toFixed(2), min: etaMin ?? 0 })}</p>
        )}
        {err && <p className="kbb-guide__meta" role="alert">{t(err === 'denied' ? 'guide.denied' : err === 'insecure' ? 'loc.insecure' : 'guide.noGps')}</p>}
        {sim && <p className="kbb-guide__meta">{t('guide.simOn')}</p>}
      </div>
      <div className="kbb-guide__actions">
        {st?.offRoute && pos && (
          <button type="button" className="usa-button usa-button--accent-cool margin-0" onClick={() => onReroute(pos)}>{t('guide.reroute')}</button>
        )}
        <div className="kbb-guide__voice">
          <label className="usa-sr-only" htmlFor="guide-voice">{t('guide.voice')}</label>
          <select id="guide-voice" className="usa-select kbb-guide__select" value={voice} onChange={(e) => setVoice(e.target.value as 'off' | 'all' | 'warn')}>
            <option value="off">{t('guide.voice.off')}</option>
            <option value="all">{t('guide.voice.all')}</option>
            <option value="warn">{t('guide.voice.warn')}</option>
          </select>
        </div>
        <button type="button" className="usa-button usa-button--outline usa-button--inverse margin-0" aria-pressed={sim} onClick={() => setSim((v) => !v)}>{t('guide.demo')}</button>
        <button type="button" className="usa-button usa-button--secondary margin-0" onClick={onStop}>{t('guide.stop')}</button>
      </div>
    </section>
  );
}