// today/GoalDetail.jsx — Goal detail screen.
// Hero ring + auto-recalculated %, milestones list (checkboxes), per-milestone
// tasks panel under the current milestone, recent activity strip.

function GoalDetail({ dark = false }) {
  return (
    <FrameScreen dark={dark}>
      <InlineNav back="Today" title="Goal"/>

      <div style={{ padding: '4px 20px 0' }}>
        <div className="eyebrow" style={{ color: 'var(--io-activity)' }}>Goal · Half-marathon</div>
        <div className="t1" style={{ marginTop: 6, letterSpacing: -0.5 }}>Half-marathon · May</div>
        <div className="bd" style={{ color: 'var(--io-label-secondary)', marginTop: 6, lineHeight: 1.4 }}>
          Run 21.1 km by May 24 with weekly long-run progression. % recalculates from your baseline 6 km long run.
        </div>
      </div>

      {/* hero ring */}
      <div style={{ padding: '20px 16px 0' }}>
        <div className="card padded" style={{ padding: '20px 18px', display: 'flex', alignItems: 'center', gap: 18 }}>
          <RingChart percent={62} size={130} stroke={12} color="var(--io-activity)" dark={dark}
            label="on track" sublabel="13.1km longest"/>
          <div style={{ flex: 1 }}>
            <div className="row" style={{ gap: 10 }}>
              <div>
                <div className="cp" style={{ color: 'var(--io-label-secondary)', textTransform: 'uppercase', letterSpacing: 0.6, fontWeight: 600 }}>Started</div>
                <div className="ca" style={{ fontWeight: 500, marginTop: 4 }} data-num>Jan 8</div>
              </div>
              <div style={{ marginLeft: 'auto', textAlign: 'right' }}>
                <div className="cp" style={{ color: 'var(--io-label-secondary)', textTransform: 'uppercase', letterSpacing: 0.6, fontWeight: 600 }}>Target</div>
                <div className="ca" style={{ fontWeight: 500, marginTop: 4 }} data-num>May 24</div>
              </div>
            </div>
            <div style={{ marginTop: 12, paddingTop: 12, borderTop: '0.5px solid var(--io-separator)' }}>
              <div className="cp" style={{ color: 'var(--io-label-secondary)' }}>From baseline 6 km long-run</div>
              <div className="row" style={{ gap: 6, marginTop: 4 }}>
                <TrendChip dir="up" value="+1.4 km this week"/>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Milestones */}
      <SectionHead label="Milestones"/>
      <div style={{ padding: '0 16px' }}>
        <div className="card" style={{ padding: 4 }}>
          <MilestoneRow done title="6 km baseline run"    taskCount={3} dueDate="Jan 14"/>
          <MilestoneRow done title="Weekly mileage ≥ 20 km" taskCount={4} dueDate="Feb 4"/>
          <MilestoneRow done title="Long run ≥ 10 km"     taskCount={5} dueDate="Feb 26"/>
          <MilestoneRow      title="Long run · 18 km"      taskCount={6} dueDate="Saturday"/>
          <MilestoneRow      title="Long run · 21 km"      taskCount={5} dueDate="Apr 28"/>
          <MilestoneRow      title="Race day · 21.1 km"    taskCount={2} dueDate="May 24"/>
        </div>
      </div>

      {/* Current milestone tasks */}
      <div style={{ padding: '18px 20px 6px' }}>
        <div className="cp" style={{ color: 'var(--io-activity)', textTransform: 'uppercase', letterSpacing: 0.7, fontWeight: 600 }}>Current milestone</div>
        <div className="hd" style={{ marginTop: 2 }}>Long run · 18 km on Saturday</div>
      </div>
      <div style={{ padding: '0 16px' }}>
        <TodoRow done title="Mon · 5 km easy"/>
        <TodoRow done title="Tue · rest"/>
        <TodoRow done title="Wed · 8 km tempo"/>
        <TodoRow      title="Thu · 6 km easy" due="Today"/>
        <TodoRow      title="Fri · rest"/>
        <TodoRow      title="Sat · 18 km long run" due="Sat"/>
      </div>

      <SectionHead label="Activity"/>
      <div style={{ padding: '0 16px' }}>
        <div className="card padded" style={{ padding: 16 }}>
          <div className="between">
            <div className="cp" style={{ color: 'var(--io-label-secondary)' }}>Past 7 days · km per day</div>
            <div className="ca" data-num style={{ fontWeight: 500 }}>34.4 km</div>
          </div>
          <BarChart data={[
            { day: 'Mon', hours: 5 },
            { day: 'Tue', hours: 0.5 },
            { day: 'Wed', hours: 8 },
            { day: 'Thu', hours: 0.5 },
            { day: 'Fri', hours: 0.5 },
            { day: 'Sat', hours: 13.1 },
            { day: 'Sun', hours: 6.8 },
          ]} goal={10} max={16} height={100} accent="var(--io-activity)"/>
        </div>
      </div>

      <div className="scroll-pad"/>
      <TabBar active="today"/>
    </FrameScreen>
  );
}
window.GoalDetail = GoalDetail;