// tow-app.jsx — router, tweaks, accent provider

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "offerCount": 4,
  "cardStyle": "detailed",
  "defaultRadius": 5,
  "statusStage": "assigned",
  "accent": "#182057"
}/*EDITMODE-END*/;

const STAGE_OPTIONS = window.STATUS_FLOW.concat(['cancelled']).map(s => ({ value: s, label: window.STATUS_META[s].label }));

function App() {
  const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
  const [screen, setScreen] = React.useState('hero');
  const [selectedTow, setSelectedTow] = React.useState(null);
  const [via, setVia] = React.useState(null);
  const [pending, setPending] = React.useState(null); // { tow, via } for confirm sheet

  const accent = t.accent;
  const go = React.useCallback((s) => setScreen(s), []);

  // statusStage tweak is the source of truth for the tracking screen.
  // When the user scrubs it via the panel, jump to tracking so the change is visible.
  const firstRun = React.useRef(true);
  React.useEffect(() => {
    if (firstRun.current) { firstRun.current = false; return; }
    setScreen('tracking');
  }, [t.statusStage]);

  function pick(tow, opts) { setPending({ tow, via: opts?.via || null }); }
  function confirmPick() {
    setSelectedTow(pending.tow);
    setVia(pending.via);
    setPending(null);
    setTweak('statusStage', 'assigned');
    setScreen('tracking');
  }

  const trackTow = selectedTow || window.TOWS[0];

  let view;
  if (screen === 'hero') view = <window.Hero go={go}/>;
  else if (screen === 'form') view = <window.RequestForm go={go}/>;
  else if (screen === 'searching') view = <window.Searching go={go} count={t.offerCount}/>;
  else if (screen === 'results') view = <window.Results go={go} count={t.offerCount} cardStyle={t.cardStyle} defaultRadius={t.defaultRadius} onPick={pick}/>;
  else view = <window.Tracking go={go} tow={trackTow} via={via} stage={t.statusStage} setStage={(s) => setTweak('statusStage', s)}/>;

  return (
    <window.AccentCtx.Provider value={{ accent }}>
      <window.Phone>
        {view}
        {pending && (
          <window.ConfirmSheet
            tow={pending.tow} via={pending.via} accent={accent}
            onClose={() => setPending(null)} onConfirm={confirmPick}
          />
        )}
      </window.Phone>

      <window.TweaksPanel title="Tweaks">
        <window.TweakSection label="Поиск">
          <window.TweakSlider label="Входящих офферов" min={1} max={6} step={1} value={t.offerCount} onChange={v => setTweak('offerCount', v)}/>
          <window.TweakRadio label="Радиус по умолчанию" value={t.defaultRadius}
            options={[{ value: 3, label: '3 км' }, { value: 5, label: '5 км' }, { value: 10, label: '10 км' }, { value: 20, label: '20 км' }]}
            onChange={v => setTweak('defaultRadius', v)}/>
        </window.TweakSection>
        <window.TweakSection label="Карточки эвакуаторов">
          <window.TweakRadio label="Стиль" value={t.cardStyle}
            options={[{ value: 'detailed', label: 'Детальный' }, { value: 'compact', label: 'Компакт' }, { value: 'photo', label: 'С фото' }]}
            onChange={v => setTweak('cardStyle', v)}/>
        </window.TweakSection>
        <window.TweakSection label="Демо статуса">
          <window.TweakSelect label="Стадия заявки" value={t.statusStage} options={STAGE_OPTIONS} onChange={v => setTweak('statusStage', v)}/>
        </window.TweakSection>
      </window.TweaksPanel>
    </window.AccentCtx.Provider>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);