// app.jsx — root component for Trainer Mike

const SECTION_TO_ROUTE = {
  pre: 'pre-workout',
  warmup: 'section-warmup',
  main: 'main-sets',
  cool: 'section-cool',
  post: 'section-post',
};

function App() {
  const [tweaks, setTweak] = useTweaks(window.TWEAK_DEFAULTS);
  const theme = useTheme(tweaks.theme, tweaks.darkMode);

  const [route, setRoute] = React.useState({ name: 'home', params: {} });
  const [history, setHistory] = React.useState([]);
  const [menuOpen, setMenuOpen] = React.useState(false);
  const [feedbackCtx, setFeedbackCtx] = React.useState(null);
  const [notes, setNotes] = React.useState({ session: '', circuit: {}, exercise: {} });
  const [noteEditor, setNoteEditor] = React.useState(null); // {scope:'session'|'circuit'|'exercise', id, label}
  const setNote = (scope, id, value) => {
    setNotes(n => {
      if (scope === 'session') return { ...n, session: value };
      return { ...n, [scope]: { ...n[scope], [id]: value } };
    });
  };
  const [showWelcome, setShowWelcome] = React.useState(() => {
    try { return !localStorage.getItem('trainerMike.welcomed'); } catch(e) { return true; }
  });
  const [stubSheet, setStubSheet] = React.useState(null);
  const dismissWelcome = () => {
    setShowWelcome(false);
    try { localStorage.setItem('trainerMike.welcomed', '1'); } catch(e) {}
  };

  // workout state
  const [exercises, setExercises] = React.useState(EXERCISES);
  const [circuits, setCircuits] = React.useState(CIRCUITS);
  const [mainView, setMainView] = React.useState(window.TWEAK_DEFAULTS.defaultMainView || 'basic');
  React.useEffect(() => { setMainView(tweaks.defaultMainView || 'basic'); }, [tweaks.defaultMainView]);
  const [completedSections, setCompletedSections] = React.useState(new Set());

  // Global column prefs (persisted) — the Settings screen toggles these.
  const [columnPrefs, setColumnPrefs] = React.useState(() => loadColumnPrefs());
  const setColumnPref = (key, value) => {
    setColumnPrefs(prev => {
      const next = { ...prev, [key]: value };
      saveColumnPrefs(next);
      return next;
    });
  };
  const [preState, setPreState] = React.useState({
    flagged: false, mood: 4, energy: 7, notes: '',
  });
  const [toast, setToast] = React.useState(null);

  const navigate = (name, params = {}) => {
    setHistory(h => [...h, route]);
    setRoute({ name, params });
  };
  const back = () => {
    setHistory(h => {
      if (h.length === 0) { setRoute({ name: 'home', params: {} }); return []; }
      const prev = h[h.length - 1];
      setRoute(prev);
      return h.slice(0, -1);
    });
  };
  const goHome = () => { setHistory([]); setRoute({ name: 'home', params: {} }); };

  const handleNav = (target, params = {}) => {
    if (target === 'next-workout')    navigate('next-workout');
    else if (target === 'workout-history') navigate('workout-history');
    else if (target === 'health-history')  navigate('health-history');
    else if (target === 'goals')           navigate('goals');
    else if (target === 'assessments')     navigate('assessments');
    else if (target === 'section-pre')     navigate('pre-workout');
    else if (target === 'section-warmup')  navigate('section', { id: 'warmup' });
    else if (target === 'section-main')    navigate('main-sets');
    else if (target === 'main-sets-print') navigate('main-sets-print');
    else if (target === 'settings')        navigate('settings');
    else if (target === 'section-cool')    navigate('section', { id: 'cool' });
    else if (target === 'section-post')    navigate('section', { id: 'post' });
    else if (target.startsWith('exercise-')) {
      const exId = target.replace('exercise-', '');
      const ex = exercises.find(e => e.id === exId) || params.ex;
      navigate('exercise', { ex, section: params.section });
    }
    else if (target === 'home') goHome();
    else if (target === 'pay')  setStubSheet({ label: 'Payments' });
    else if (target === 'calendar') setStubSheet({ label: 'Schedule' });
    else if (target === 'add')  setStubSheet({ label: 'Add Workout' });
    else { setToast(`${target} — soon`); setTimeout(() => setToast(null), 1500); }
  };

  const completeSection = (id) => {
    setCompletedSections(s => new Set([...s, id]));
    setToast(`${FLOW_SECTIONS.find(s => s.id === id)?.name} complete`);
    setTimeout(() => setToast(null), 1600);
    back();
  };

  const updateSet = (exId, setIdx, patch) => {
    setExercises(prev => prev.map(e => {
      if (e.id !== exId) return e;
      const sets = e.sets.map((s, i) => i === setIdx ? { ...s, ...patch } : s);
      return { ...e, sets };
    }));
  };

  const handleSaveFeedback = (data) => {
    setFeedbackCtx(null);
    setToast(data.type === 'pain' ? 'Pain logged · workout adjusted' : 'Feedback saved');
    setTimeout(() => setToast(null), 1800);
  };

  // current exercise (kept fresh from state)
  const currentEx = route.name === 'exercise'
    ? exercises.find(e => e.id === route.params.ex?.id) || route.params.ex
    : null;

  const showBottomNav = ['home', 'next-workout', 'workout-history', 'health-history', 'goals', 'assessments'].includes(route.name);

  // Section accent map — each top-level section gets its color
  const sectionAccent = {
    'workout-history': theme.sectionColors.history,
    'health-history':  theme.sectionColors.health,
    'goals':           theme.sectionColors.goals,
    'assessments':     theme.sectionColors.assess,
  }[route.name];

  // body content
  let body;
  switch (route.name) {
    case 'home':
      body = <ClientMenuScreen theme={theme} cardStyle={tweaks.cardStyle} onNav={handleNav} onMenu={() => setMenuOpen(true)}/>; break;
    case 'next-workout':
      body = <NextWorkoutScreen theme={theme} cardStyle={tweaks.cardStyle} onNav={handleNav} onBack={back} completedSections={completedSections}/>; break;
    case 'pre-workout':
      body = <PreWorkoutScreen theme={theme} cardStyle={tweaks.cardStyle} onBack={back}
        onComplete={completeSection} state={preState} setState={setPreState}/>; break;
    case 'section':
      body = <SectionListScreen theme={theme} cardStyle={tweaks.cardStyle}
        sectionId={route.params.id} onBack={back}
        onNav={handleNav} onComplete={completeSection}/>; break;
    case 'main-sets':
      body = <MainSetsCircuitsScreen theme={theme} cardStyle={tweaks.cardStyle} onBack={back}
        onNav={handleNav} viewMode={mainView} setViewMode={setMainView}
        tableStyle={tweaks.tableStyle || 'classic'}
        setOrder={tweaks.setOrder || 'interleaved'}
        setSetOrder={(v) => setTweak('setOrder', v)}
        columnPrefs={columnPrefs}
        circuits={circuits}
        notes={notes}
        onEditNote={(scope, id, label) => setNoteEditor({ scope, id, label })}
        onUpdateSet={(exId, setIdx, patch) => {
          setCircuits(prev => prev.map(c => ({
            ...c,
            exercises: c.exercises.map(e => e.id !== exId ? e : ({
              ...e, sets: e.sets.map((s, i) => i === setIdx ? { ...s, ...patch } : s),
            })),
          })));
        }}
        onOpenFeedback={(ctx) => setFeedbackCtx(ctx)}
      />; break;
    case 'main-sets-print':
      body = <MainSetsPrintScreen theme={theme} onBack={back}
        circuits={circuits} notes={notes} columnPrefs={columnPrefs}/>; break;
    case 'settings':
      body = <SettingsScreen theme={theme} cardStyle={tweaks.cardStyle} onBack={back}
        columnPrefs={columnPrefs}
        onChangePref={setColumnPref}
        onToast={(msg) => { setToast(msg); setTimeout(() => setToast(null), 1400); }}
      />; break;
    case 'exercise':
      body = <ExerciseDetailScreen theme={theme} cardStyle={tweaks.cardStyle}
        exercise={currentEx} onBack={back}
        onUpdateSet={updateSet}
        weightUnit={columnPrefs.weightUnit || 'lb'}
        onOpenFeedback={(ctx) => setFeedbackCtx(ctx)}
        onMarkDone={() => { setToast(`${currentEx.name} marked done`); setTimeout(() => setToast(null), 1500); back(); }}
      />; break;
    case 'workout-history': body = <WorkoutHistoryScreen theme={theme} cardStyle={tweaks.cardStyle} onBack={back} accent={sectionAccent}/>; break;
    case 'health-history':  body = <HealthHistoryScreen  theme={theme} cardStyle={tweaks.cardStyle} onBack={back} accent={sectionAccent}/>; break;
    case 'goals':           body = <GoalsScreen          theme={theme} cardStyle={tweaks.cardStyle} onBack={back} accent={sectionAccent}/>; break;
    case 'assessments':     body = <AssessmentsScreen    theme={theme} cardStyle={tweaks.cardStyle} onBack={back} accent={sectionAccent}/>; break;
    default: body = null;
  }

  // Build font imports based on theme
  const fontHrefs = React.useMemo(() => {
    const families = ['Inter:wght@400;500;600;700', 'JetBrains+Mono:wght@400;500;600'];
    if (tweaks.theme === 'bold')    families.push('Instrument+Serif:ital@0;1');
    if (tweaks.theme === 'wellness')families.push('Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700');
    if (tweaks.theme === 'athletic')families.push('Space+Grotesk:wght@400;500;600;700');
    return families.map(f => `https://fonts.googleapis.com/css2?family=${f}&display=swap`);
  }, [tweaks.theme]);

  return (
    <div style={{
      minHeight: '100vh', display: 'flex', flexDirection: 'column',
      alignItems: 'center', justifyContent: 'center',
      background: theme.isDark ? '#0a0a0a' : '#E8E8EC',
      padding: '24px', boxSizing: 'border-box',
    }}>
      {fontHrefs.map(h => <link key={h} rel="stylesheet" href={h}/>)}

      <IOSDevice dark={theme.isDark} title={undefined}>
        <div data-screen-label={route.name} style={{
          minHeight: '100%', background: theme.bg, color: theme.text,
          fontFamily: theme.uiFamily, position: 'relative',
        }}>
          <WipWatermark status={statusFor(route.name)}/>
          <div style={{ position: 'relative', zIndex: 2 }}>{body}</div>
          {showBottomNav && <BottomNav theme={theme} navStyle={tweaks.navStyle}
            active={route.name === 'home' ? 'home' : null} onNav={handleNav}/>}
          <SideMenu theme={theme} open={menuOpen} onClose={() => setMenuOpen(false)} onNav={handleNav}/>
          <FeedbackModal theme={theme} cardStyle={tweaks.cardStyle}
            context={feedbackCtx} onClose={() => setFeedbackCtx(null)} onSave={handleSaveFeedback}/>
          {stubSheet && <StubSheet theme={theme} label={stubSheet.label} onClose={() => setStubSheet(null)}/>}
          {noteEditor && <NoteEditor theme={theme} editor={noteEditor} notes={notes}
            onSave={(v) => { setNote(noteEditor.scope, noteEditor.id, v); setNoteEditor(null); setToast('Note saved'); setTimeout(()=>setToast(null),1400); }}
            onClose={() => setNoteEditor(null)}/>}
          {showWelcome && <WelcomeOverlay theme={theme} onClose={dismissWelcome}/>}
          {toast && (
            <div style={{
              position: 'absolute', bottom: 110, left: '50%', transform: 'translateX(-50%)',
              padding: '10px 16px', borderRadius: 9999, zIndex: 200,
              background: theme.isDark ? 'rgba(0,0,0,0.85)' : 'rgba(26,20,16,0.92)',
              color: '#fff', fontFamily: theme.uiFamily, fontSize: 12, fontWeight: 500,
              boxShadow: '0 8px 24px rgba(0,0,0,0.3)',
              whiteSpace: 'nowrap',
            }}>{toast}</div>
          )}
        </div>
      </IOSDevice>

      {/* Tweaks panel */}
      <TweaksPanel title="Tweaks">
        <TweakSection title="Visual direction">
          <TweakRadio
            label="Theme"
            value={tweaks.theme}
            options={[
              { value: 'bold',     label: 'Bold' },
              { value: 'wellness', label: 'Wellness' },
              { value: 'athletic', label: 'Athletic' },
            ]}
            onChange={v => setTweak('theme', v)}
          />
          <TweakToggle label="Dark mode" value={tweaks.darkMode}
            onChange={v => setTweak('darkMode', v)}/>
        </TweakSection>
        <TweakSection title="Card style">
          <TweakSelect
            label="Style"
            value={tweaks.cardStyle}
            options={[
              { value: 'rounded-soft',  label: 'Rounded · soft shadow' },
              { value: 'rounded-flat',  label: 'Rounded · flat' },
              { value: 'sharp-flat',    label: 'Sharp · flat' },
              { value: 'sharp-shadow',  label: 'Sharp · shadow' },
            ]}
            onChange={v => setTweak('cardStyle', v)}
          />
        </TweakSection>
        <TweakSection title="Main Sets">
          <TweakRadio
            label="Default view"
            value={tweaks.defaultMainView || 'basic'}
            options={[
              { value: 'basic',    label: 'Basic' },
              { value: 'detailed', label: 'Detailed' },
            ]}
            onChange={v => setTweak('defaultMainView', v)}
          />
          <TweakRadio
            label="Set order"
            value={tweaks.setOrder || 'interleaved'}
            options={[
              { value: 'interleaved', label: 'Interleaved' },
              { value: 'by-exercise', label: 'By exercise' },
            ]}
            onChange={v => setTweak('setOrder', v)}
          />
          <TweakSelect
            label="Set table"
            value={tweaks.tableStyle || 'classic'}
            options={[
              { value: 'classic', label: 'Classic — all columns visible' },
              { value: 'swipe',   label: 'Swipe — pinned Set/Reps, scroll for more' },
              { value: 'flip',    label: 'Flip — front Wt/✓, back Tempo/RPE' },
              { value: 'expand',  label: 'Expand — tap row for Tempo/RPE' },
            ]}
            onChange={v => setTweak('tableStyle', v)}
          />
        </TweakSection>
        <TweakSection title="Bottom nav">
          <TweakRadio
            label="Style"
            value={tweaks.navStyle}
            options={[
              { value: 'icons', label: 'Tab bar' },
              { value: 'pill',  label: 'Floating pill' },
            ]}
            onChange={v => setTweak('navStyle', v)}
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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