// AXIS-6 — Today. The summary of your active systems. Shows the period widget
// (from onboarding), a representative widget per active system, and the weekly
// recap that gifts the next prebuilt system.
function TodayHome({ name, onboarded, personal, prebuilts, nextGift, onClaimGift, onBuildPersonal, onOpenSystem, onOpenChat }) {
  return (
    <div style={{ background: M.canvas, minHeight: '100%', padding: '4px 16px 24px' }}>
      <div style={{ marginBottom: 16 }}>
        <window.MEyebrow style={{ letterSpacing: '0.1em' }}>Thursday 23 April</window.MEyebrow>
        <div style={{ font: `500 30px/1.05 ${M.sans}`, letterSpacing: '-0.02em', color: M.ink, marginTop: 8 }}>
          Good morning, {name}.
        </div>
      </div>

      {/* Axis nudge → chat */}
      <DSCard padding={16} onClick={onOpenChat} style={{ marginBottom: 16 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
          <window.DSAxisAvatar size={20} radius={6} />
          <window.MEyebrow>Axis · a thought for today</window.MEyebrow>
        </div>
        <div style={{ font: `400 15px/1.5 ${M.sans}`, color: M.ink }}>
          {onboarded
            ? <>You're on day 14 — your fertile window. Sleep dipped 0.4h this week; want to look at what changed together?</>
            : <>Finish setting up or build your first system and I'll start surfacing patterns here.</>}
        </div>
      </DSCard>

      {/* Period widget — from onboarding */}
      {onboarded && (
        <div style={{ marginBottom: 14 }}>
          <window.MSectionTitle>Your cycle</window.MSectionTitle>
          <window.DSSystemWidget face="cycle" state="default" onTap={() => onOpenChat()} onOpen={() => onOpenChat()} onCta={() => onOpenChat()} />
        </div>
      )}

      {/* Personal system, or the prompt to build it */}
      {personal ? (
        <div style={{ marginBottom: 14 }}>
          <window.MSectionTitle>{personal.name}</window.MSectionTitle>
          <window.DSSystemWidget face={personal.face || 'experiment'} state="default"
            onTap={() => onOpenSystem('personal')} onOpen={() => onOpenSystem('personal')} onCta={() => onOpenSystem('personal')} />
        </div>
      ) : (
        <DSCard variant="accent" padding={16} style={{ marginBottom: 14 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
            <window.DSAxisAvatar size={20} radius={6} />
            <window.MEyebrow color={M.axisDark}>Your first system</window.MEyebrow>
          </div>
          <div style={{ font: `500 16px/1.35 ${M.sans}`, color: M.ink }}>Build your personal system</div>
          <div style={{ font: `400 13px/1.45 ${M.sans}`, color: M.inkSoft, marginTop: 4 }}>
            Tell Axis what you want to track and it builds a system tuned to you — it takes the first tab slot.
          </div>
          <div style={{ marginTop: 12 }}><DSButton onClick={onBuildPersonal}>Build with Axis</DSButton></div>
        </DSCard>
      )}

      {/* Activated prebuilt systems */}
      {prebuilts.map((p) => (
        <div key={p.id} style={{ marginBottom: 14 }}>
          <window.MSectionTitle>{p.name}</window.MSectionTitle>
          <window.DSSystemWidget face={p.face} state="default"
            onTap={() => onOpenSystem(p.id)} onOpen={() => onOpenSystem(p.id)} onCta={() => onOpenSystem(p.id)} />
        </div>
      ))}

      {/* Weekly recap — gifts the next prebuilt system */}
      {nextGift && personal && (
        <DSCard variant="accent" padding={16} style={{ marginBottom: 14 }}>
          <window.MEyebrow color={M.axisDark}>Week {nextGift.week} recap · a system for you</window.MEyebrow>
          <div style={{ font: `500 16px/1.35 ${M.sans}`, color: M.ink, marginTop: 6 }}>{nextGift.name}</div>
          <div style={{ font: `400 13px/1.45 ${M.sans}`, color: M.inkSoft, marginTop: 4 }}>{nextGift.blurb}</div>
          <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
            <DSButton onClick={() => onClaimGift(nextGift)}>Add to my system</DSButton>
            <DSButton variant="secondary" onClick={onOpenChat}>Tell me more</DSButton>
          </div>
        </DSCard>
      )}

      <div style={{ height: 6 }} />
      <window.DSMedicalDisclaimer />
    </div>
  );
}
window.TodayHome = TodayHome;