/* @component-map
 * App — Main container, handles phase switching and layout
 * Header — Top header with title and pills
 * PhasePanel — Displays a single phase's content (day grid, workout box, principles)
 * WorkoutBox — Shows selected day's workout with exercise rows
 * ExerciseGuide — Expandable form guide with cues, mistakes, video tabs
 * ProgressTracker — 60-day dot grid and stats
 * @end-component-map */

import { useCollection } from '@deplixo/sdk';
import { Header } from './components/Header.jsx';
import { PhasePanel } from './components/PhasePanel.jsx';
import { useState } from 'react';
import { ProgressTracker } from './components/ProgressTracker.jsx';

function App() {
  const [activePhase, setActivePhase] = useState(1);
  const { items: progressItems, add, remove, loading } = useCollection('progress', { personal: true });

  const doneMap = {};
  progressItems.forEach(item => { doneMap[item.value.day] = item.id; });

  const toggleDay = async (day) => {
    if (doneMap[day]) {
      await remove(doneMap[day]);
    } else {
      await add({ day });
    }
  };

  const doneCount = progressItems.length;

  return (
    <div>
      <Header />
      <div className="main">
        <div className="note-box">
          <strong>How to use:</strong> Click a phase tab then a day to load the workout. Click any exercise or the <strong>Form</strong> button to expand the guide — then hit <strong>Video</strong> to watch it embedded right here.
        </div>
        <div className="slabel">Select Phase</div>
        <div className="ptabs">
          {[1, 2, 3].map(p => (
            <button
              key={p}
              className={`ptab${activePhase === p ? ` a${p}` : ''}`}
              onClick={() => setActivePhase(p)}
            >
              {p === 1 ? 'Days 1-20' : p === 2 ? 'Days 21-40' : 'Days 41-60'}
              <span className="tn">{p === 1 ? 'Activation' : p === 2 ? 'Accumulation' : 'Expression'}</span>
            </button>
          ))}
        </div>
        {[1, 2, 3].map(p => (
          <PhasePanel key={p} phase={p} visible={activePhase === p} />
        ))}
        <div className="spacer" />
        <ProgressTracker
          doneMap={doneMap}
          doneCount={doneCount}
          toggleDay={toggleDay}
          loading={loading}
        />
      </div>
    </div>
  );
}

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