// screen-plan.jsx — Mesocycle view: 4 weeks, days, completion

function ScreenPlan({ user, onRegoal }) {
  const plan = MOCK.PLANS[user];
  const profile = MOCK.PROFILES[user];

  const weeks = plan.current_mesocycle.weeks;
  const week = weeks[plan.mesocycle_week - 1];

  // days till re-goal
  const today = new Date(window.TODAY + 'T00:00:00');
  const nextRegoal = new Date(plan.next_re_goal_date);
  const daysToRegoal = Math.round((nextRegoal - today) / 86400000);

  return (
    <div className="scr">
      <div style={{ padding: '24px 22px 8px' }}>
        <Eyebrow>Week {plan.mesocycle_week} of 4 · {week.label.toLowerCase()}</Eyebrow>
        <div className="h-display" style={{ marginTop: 4 }}>
          The <em>{GOAL_LABELS[plan.primary_goal] || plan.primary_goal}</em> block.
        </div>
        <div className="t-body" style={{ marginTop: 6 }}>
          {profile.schedule.days_per_week} sessions a week · {profile.environment.primary.replace('_', ' ')} · {profile.schedule.session_minutes}min target.
        </div>
      </div>

      {/* Week sessions */}
      <div style={{ padding: '24px 16px 8px' }}>
        <div className="h-section" style={{ marginBottom: 12 }}>This week</div>
        <Card flush>
          {week.sessions.map((s, i) => (
            <PlannedSessionRow key={i} session={s} last={i === week.sessions.length - 1} />
          ))}
        </Card>
      </div>

      {/* Next re-goal */}
      <div style={{ padding: '24px 16px 120px' }}>
        <Card dark>
          <div className="row between" style={{ marginBottom: 14 }}>
            <Eyebrow style={{ color: 'rgba(239,233,218,0.55)' }}>Next re-goal</Eyebrow>
            <div className="t-mono" style={{ fontSize: 10, color: 'rgba(239,233,218,0.55)', letterSpacing: '0.14em' }}>
              {nextRegoal.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }).toUpperCase()}
            </div>
          </div>
          <div style={{
            fontSize: 28, lineHeight: 1.05, fontWeight: 500,
            color: 'var(--bg)', letterSpacing: '-0.03em',
            marginBottom: 14,
          }}>
            <em style={{ color: 'rgba(239,233,218,0.65)', fontWeight: 400 }}>{daysToRegoal} days</em> until we rebuild.
          </div>
          <div className="t-body" style={{ color: 'rgba(239,233,218,0.72)', marginBottom: 22 }}>
            Finish the block, hit the retest, then we'll pick the next four weeks together.
          </div>
          <button onClick={onRegoal}
            style={{
              appearance: 'none', cursor: 'pointer',
              background: 'transparent', color: 'var(--bg)',
              border: 0, borderTop: '0.5px solid rgba(239,233,218,0.4)', borderBottom: '0.5px solid rgba(239,233,218,0.4)',
              padding: '12px 0',
              fontFamily: 'var(--sans)', fontWeight: 500, fontSize: 12,
              letterSpacing: '0.16em', textTransform: 'uppercase',
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              width: '100%',
            }}>
            <span>Re-goal early</span>
            <Icon name="arrow" size={14} stroke={2} />
          </button>
        </Card>
      </div>
    </div>
  );
}

function PlannedSessionRow({ session, last }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 14,
      padding: '14px 18px',
      borderBottom: last ? '0' : '0.5px solid var(--line-2)',
    }}>
      <div style={{
        width: 38, textAlign: 'center',
        fontFamily: 'var(--sans)', fontSize: 13, fontWeight: 500, color: 'var(--ink-2)',
        letterSpacing: '0.02em',
      }}>{session.day}</div>
      <div style={{ width: 1, alignSelf: 'stretch', background: 'var(--line-2)' }} />
      <div className="grow col gap-2" style={{ minWidth: 0 }}>
        <div style={{ fontSize: 17, fontWeight: 500, letterSpacing: '-0.015em', color: 'var(--ink)' }}>{session.label}</div>
        <div className="t-small">{session.estimated_minutes} min</div>
      </div>
      {session.completed ? (
        <div style={{
          width: 22, height: 22, borderRadius: 999,
          background: 'var(--green)', color: '#FBF9F4',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <Icon name="check" size={13} stroke={2.6} />
        </div>
      ) : (
        <div style={{
          width: 22, height: 22, borderRadius: 999,
          border: '0.5px solid var(--line)',
        }} />
      )}
    </div>
  );
}

Object.assign(window, { ScreenPlan });