src/components/WeeklySummary.js

import './WeeklySummary.css';

function WeeklySummary({
  summary,
  recommendation,
  weekKey,
  isCurrentWeek,
  weeksOfData,
  maxRoutes,
  hasPrevWeek,
  hasNextWeek,
  onPrevWeek,
  onNextWeek,
}) {
  const hasSessions = summary.session_count > 0;

  return (
    <div className="weekly-summary card">
      <div className="week-nav">
        <button className="week-nav-btn" disabled={!hasPrevWeek} onClick={onPrevWeek} aria-label="Previous week">
          &lsaquo;
        </button>
        <h2>
          {isCurrentWeek ? 'This Week' : 'Week'} <span className="week-label">{weekKey}</span>
        </h2>
        <button className="week-nav-btn" disabled={!hasNextWeek} onClick={onNextWeek} aria-label="Next week">
          &rsaquo;
        </button>
      </div>

      {hasSessions ? (
        <>
          <div className="stats-grid">
            <div className="stat-card">
              <span className="stat-value">{summary.total_routes}</span>
              <span className="stat-label">routes</span>
            </div>
            <div className="stat-card">
              <span className="stat-value">{summary.total_training_load.toFixed(0)}</span>
              <span className="stat-label">training load</span>
            </div>
            <div className="stat-card">
              <span className="stat-value">{summary.session_count}</span>
              <span className="stat-label">sessions</span>
            </div>
            <div className="stat-card">
              <span className="stat-value">{summary.avg_rpe.toFixed(1)}</span>
              <span className="stat-label">avg RPE</span>
            </div>
          </div>

          {maxRoutes && (
            <div className="max-routes-block">
              <h3>
                Single Session Cap <span className="rec-method">(30-day max +10%)</span>
              </h3>
              <div className="rec-row">
                <span className="rec-label">Max routes (30d)</span>
                <span className="rec-value">{maxRoutes.max_routes}</span>
              </div>
              <div className="rec-row">
                <span className="rec-label">Next-session guide</span>
                <span className="rec-value threshold-value">{maxRoutes.threshold_routes} routes</span>
              </div>
            </div>
          )}

          <div className="recommendation">
            <h3>
              Next Week Target <span className="rec-method">(ACWR, {weeksOfData || 1}w avg)</span>
            </h3>
            <div className="rec-row">
              <span className="rec-label">Routes</span>
              <span className="rec-value">
                {recommendation.min_routes} - {recommendation.max_routes}
              </span>
            </div>
            <div className="rec-row">
              <span className="rec-label">Training Load</span>
              <span className="rec-value">
                {recommendation.min_load} - {recommendation.max_load}
              </span>
            </div>
          </div>
        </>
      ) : (
        <p className="empty-message">No sessions logged for this week yet. Add one to see your stats.</p>
      )}
    </div>
  );
}

export default WeeklySummary;