/* Day Trip Planner — standalone entry point */
const { WelcomeScreen, InputScreen, LoadingScreen, ItineraryScreen, StopDetailScreen,
        RerollScreen, PhoneFrame } = window;
const { DEFAULT_STOPS, ALT_STOPS, tripTotals } = window;

const DEFAULT_FORM = {
  location: 'Roseville, CA', detected: true, hours: 6,
  interests: ['Hiking', 'Dining', 'Breweries', 'Scenic Drives'],
  filtersOpen: false, budget: '$$', vehicle: 'Car', party: 'Couple',
};

function DayTripApp({ layout = 'device', initialScreen = 'welcome' }) {
  const [screen, setScreen] = React.useState(initialScreen);
  const [form, setForm] = React.useState({ ...DEFAULT_FORM });
  const [stops, setStops] = React.useState(DEFAULT_STOPS);
  const [activeId, setActiveId] = React.useState(DEFAULT_STOPS[0].id);
  const [prev, setPrev] = React.useState('itinerary');
  const [saved, setSaved] = React.useState(false);
  const [keeps, setKeeps] = React.useState([true, true, true, true]);
  const timer = React.useRef(null);

  React.useEffect(() => () => clearTimeout(timer.current), []);

  const totals = tripTotals(stops, form.hours);
  const activeStop = stops.find((s) => s.id === activeId) || stops[0];
  const activeIdx = stops.findIndex((s) => s.id === activeId);

  const goLoading = (after) => {
    setScreen('loading');
    clearTimeout(timer.current);
    timer.current = setTimeout(after, 2750);
  };

  const generate = () => goLoading(() => { setStops(DEFAULT_STOPS); setScreen('itinerary'); });

  const regenerate = () => {
    const usedIds = new Set(stops.map((s) => s.id));
    const pool = ALT_STOPS.filter((a) => !usedIds.has(a.id));
    let pi = 0;
    const next = stops.map((s, i) => {
      if (keeps[i]) return s;
      let pick = pool[pi++ % pool.length] || s;
      return { ...pick, drive: s.drive };
    });
    goLoading(() => { setStops(next); setKeeps([true, true, true, true]); setScreen('itinerary'); });
  };

  const swapStop = (id) => {
    const usedIds = new Set(stops.map((s) => s.id));
    const alt = ALT_STOPS.find((a) => !usedIds.has(a.id));
    if (!alt) { setScreen('itinerary'); return; }
    setStops(stops.map((s) => (s.id === id ? { ...alt, drive: s.drive } : s)));
    setActiveId(alt.id);
    setScreen('itinerary');
  };

  const removeStop = (id) => {
    if (stops.length <= 2) { setScreen('itinerary'); return; }
    setStops(stops.filter((s) => s.id !== id));
    setScreen('itinerary');
  };

  const openStop = (id) => { setActiveId(id); setPrev(screen); setScreen('stop'); };

  let view;
  if (screen === 'welcome') view = <WelcomeScreen onStart={() => setScreen('input')} />;
  else if (screen === 'input') view = <InputScreen form={form} setForm={setForm} onGenerate={generate} />;
  else if (screen === 'loading') view = <LoadingScreen form={form} />;
  else if (screen === 'itinerary') view = (
    <ItineraryScreen stops={stops} totals={totals} location={form.location} hours={form.hours}
      saved={saved} onOpenStop={openStop} onReroll={() => { setKeeps(stops.map(() => true)); setScreen('reroll'); }}
      onSave={() => setSaved(true)} />);
  else if (screen === 'stop') view = (
    <StopDetailScreen stop={activeStop} num={activeIdx + 1} total={stops.length}
      onBack={() => setScreen(prev)} onSwap={() => swapStop(activeStop.id)}
      onRemove={() => removeStop(activeStop.id)} onMaps={() => {}} />);
  else if (screen === 'reroll') view = (
    <RerollScreen stops={stops} keeps={keeps}
      onToggle={(i, v) => setKeeps(keeps.map((k, j) => (j === i ? v : k)))}
      onAdjust={() => setScreen('input')} onRegenerate={regenerate} />);

  return <PhoneFrame>{view}</PhoneFrame>;
}

// Apply default design tokens (accent color, radius, font) to CSS variables
const TWEAK_DEFAULTS = {
  accent: '#EE7A4E',
  radius: 20,
  displayFont: 'Bricolage Grotesque',
};

const FONT_STACKS = {
  'Bricolage Grotesque': "'Bricolage Grotesque', 'Hanken Grotesque', system-ui, sans-serif",
  'Space Grotesk': "'Space Grotesk', 'Hanken Grotesque', system-ui, sans-serif",
  'Hanken Grotesque': "'Hanken Grotesque', system-ui, sans-serif",
};

(function applyTweaks(t) {
  const r = document.documentElement;
  r.style.setProperty('--accent', t.accent);
  r.style.setProperty('--r', t.radius + 'px');
  r.style.setProperty('--font-display', FONT_STACKS[t.displayFont] || FONT_STACKS['Bricolage Grotesque']);
})(TWEAK_DEFAULTS);

ReactDOM.createRoot(document.getElementById('root')).render(
  <DayTripApp layout="device" initialScreen="welcome" />
);