// Dashboard screen — "morning briefing + hub" (May refresh).
// Hero greets you and synthesises the day; below = at-a-glance vitals,
// the AI agent's take, today's focus, and shortcuts into each pillar.
const Dashboard = ({ onNav, onWindDown, showMascot = true, onLogout }) => {
  const m = window.MOCK.todayMetrics;
  const recs = window.MOCK.recommendations;
  const I = window.Icons;
  const toast = window.useToast();
  const displayName = window.USER_DATA?.name || 'Dreamer';
  const currentDay = window.TODAY_SLEEP_SCORE.ResultData;
  const currentDayInput = window.TODAY_SLEEP_SCORE.Sleep;

  const sparks = useMemo(() => ({
    eff: [85, 88, 84, 90, 87, 89, 91],
    hr: [56, 54, 55, 53, 52, 53, 52],
    hrv: [55, 60, 58, 64, 62, 66, 68],
    rr: [13.2, 13.5, 13.8, 13.4, 13.5, 13.7, 13.6],
  }), []);
  
  console.log(currentDay.Actions);
  
  // tone -> soft palette tint for icon backgrounds
  const tint = (tone) => ({
    violet: 'rgba(184,169,255,0.15)',
    mint: 'rgba(143,227,184,0.15)',
    amber: 'rgba(252,211,77,0.15)',
    cyan: 'rgba(122,216,224,0.15)',
  }[tone] || 'rgba(122,216,224,0.15)');

  return (
    <div className="col" style={{ gap: 22 }}>

      {/* Hero — greeting + day synthesis + focus + CTAs */}
      <div className="dash-hero">
        {showMascot && <Mascot score={m.sleepScore} size={150} mood={m.sleepScore >= 75 ? 'love' : 'sleep'} />}
        <div className="dash-hero-text">
          <h1>Good morning, {displayName} ✦</h1>
          <p className="synth">{currentDay.Today.Title}</p>
          <p className="focus">{currentDay.Today.Desc}</p>
          {/*<div className="dash-hero-cta">*/}
          {/*  /!*<button className="btn primary" onClick={() => onNav('agent')}><I.Sparkle size={13} /> Chat with AI Agent</button>*!/*/}
          {/*  /!*<button className="btn ghost" onClick={onWindDown}><I.Moon size={13} /> Start wind-down</button>*!/*/}
          {/*</div>*/}
        </div>
      </div>

      {/* Today at a glance — key vitals */}
      <div className="group-label"><h2>Today at a glance</h2></div>
      <div className="grid grid-4">
        <StatCard label="Sleep Efficiency" value={currentDayInput.Sleep.SleepEfficiencyPercent || 'NA'} unit="%" tag="Good" tagTone="good" spark={window.Sparks.SleepEffectiveness} color="var(--primary)" />
        <StatCard label="Resting HR" value={currentDayInput.RestingHeartRate.Average || 'NA'} unit=" bpm" tag="Excellent" tagTone="good" spark={window.Sparks.RestingHR} color="var(--accent-cyan)" />
        <StatCard label="HRV" value={currentDayInput.Hrv.Average || 'NA'} unit=" ms" tag="Good" tagTone="good" spark={window.Sparks.HRV} color="var(--accent-mint)" />
        <StatCard label="Respiratory Rate" value={currentDayInput.Recovery.RespiratoryRate.Average || 'NA'} unit=" rpm" tag="Good" tagTone="good" spark={window.Sparks.Respiratory} color="var(--accent-pink)" />
      </div>

      {/* AI insight (promoted) + today's focus */}
      <div className="grid">
        {/*<div className="card dash-insight">*/}
        {/*  <div className="row" style={{ gap: 10, marginBottom: 12 }}>*/}
        {/*    <div className="dash-insight-avatar">✨</div>*/}
        {/*    <div>*/}
        {/*      <h3 style={{ margin: 0, fontSize: 15 }}>AI Agent Insight</h3>*/}
        {/*      <div className="muted" style={{ fontSize: 12 }}>Wellness Agent · just now</div>*/}
        {/*    </div>*/}
        {/*  </div>*/}
        {/*  <p style={{ fontSize: 14, lineHeight: 1.6, color: 'var(--text-2)', margin: 0 }}>*/}
        {/*    Your <b style={{ color: 'var(--text)' }}>deep sleep</b> improved 18% this week — great recovery. HRV is slightly below baseline, so keep intensity light today and your streak keeps climbing.*/}
        {/*  </p>*/}
        {/*  <button className="btn primary" style={{ marginTop: 16 }} onClick={() => onNav('agent')}>*/}
        {/*    <I.Sparkle size={13} /> Chat with AI Agent*/}
        {/*  </button>*/}
        {/*</div>*/}

        <div className="card">
          <div className="card-head">
            <h3>Today's focus</h3>
            {/*<button className="btn ghost sm" onClick={() => onNav('mind')}>View all <I.ArrowRight size={12} /></button>*/}
          </div>
          <div className="col" style={{ gap: 8 }}>
            {currentDay.Actions.slice(0, 4).map(r => (
              <div key={r.Title} className="dash-rec"
                // onClick={() => { if (r.id === 'r1') onWindDown(); else toast.push(`${r.title} added to your day`); }}
              >
                <div className="ic" style={{ background: 'rgba(184, 169, 255, 0.15)' }}>{r.Emoji}</div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div className="t">{r.Title}</div>
                  <div className="s">{r.Desc}</div>
                </div>
                {/*<I.ChevronRight size={14} className="muted" />*/}
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Jump back in — shortcuts */}
      {/*<div className="group-label"><h2>Jump back in</h2></div>*/}
      {/*<div className="grid grid-3">*/}
      {/*  <div className="card" style={{ cursor: 'pointer' }} onClick={onWindDown}>*/}
      {/*    <div className="dash-qa">*/}
      {/*      <div className="ic" style={{ background: 'rgba(184,169,255,0.15)' }}>*/}
      {/*        <I.Moon size={16} style={{ color: 'var(--primary)' }} />*/}
      {/*      </div>*/}
      {/*      <div>*/}
      {/*        <div style={{ fontWeight: 600 }}>Start tonight's wind-down</div>*/}
      {/*        <div style={{ fontSize: 12, color: 'var(--text-3)' }}>5-step routine · 22 min</div>*/}
      {/*      </div>*/}
      {/*    </div>*/}
      {/*  </div>*/}
      {/*  <div className="card" style={{ cursor: 'pointer' }} onClick={() => onNav('agent')}>*/}
      {/*    <div className="dash-qa">*/}
      {/*      <div className="ic" style={{ background: 'rgba(122,216,224,0.15)' }}>*/}
      {/*        <I.Bot size={16} style={{ color: 'var(--accent-cyan)' }} />*/}
      {/*      </div>*/}
      {/*      <div>*/}
      {/*        <div style={{ fontWeight: 600 }}>Mood check-in</div>*/}
      {/*        <div style={{ fontSize: 12, color: 'var(--text-3)' }}>Takes 30 seconds</div>*/}
      {/*      </div>*/}
      {/*    </div>*/}
      {/*  </div>*/}
      {/*  <div className="card" style={{ cursor: 'pointer' }} onClick={() => onNav('rewards')}>*/}
      {/*    <div className="dash-qa">*/}
      {/*      <div className="ic" style={{ background: 'rgba(252,211,77,0.15)' }}>*/}
      {/*        <I.Gift size={16} style={{ color: 'var(--accent-amber)' }} />*/}
      {/*      </div>*/}
      {/*      <div>*/}
      {/*        <div style={{ fontWeight: 600 }}>Claim 45 SLEEP</div>*/}
      {/*        <div style={{ fontSize: 12, color: 'var(--text-3)' }}>3 rewards ready</div>*/}
      {/*      </div>*/}
      {/*    </div>*/}
      {/*  </div>*/}
      {/*</div>*/}

      {/* Logout — mobile only (on desktop it lives in the sidebar). */}
      <button className="dash-logout-mobile" onClick={onLogout}>
        <I.Power size={15} /> Logout
      </button>
    </div>
  );
};

window.Dashboard = Dashboard;