// home/Today.jsx — the post-onboarding home base. One vertical scroll that
// opens as a calm morning briefing and becomes the launcher as you scroll.
//
//   1. Hero (fills first viewport): eyebrow · narrative · signature metric ·
//      one thin stat row. greetingGradient, full-bleed.
//   2. Today's Arc — today-only timeline (the only calendar surface here).
//   3. Module shelf — 2-col tiles, each a chip + label + one live datum.
//   + 5-tab bar pinned (Today active). ✛ opens the Create sheet.

function Today({
  dark = false,
  tint = 'blue',
  heroMetric = 'bedtime',   // bedtime | focus
  view = 'top',             // top | shelf — 'shelf' shows the on-scroll (collapsed-hero) state
  interactive = false,      // when true, ✛ toggles the Create sheet in-frame
  palette,                  // hero gradient palette (array rep or name)
  timeOfDay = 'Auto',       // Auto | Dawn | Morning | Afternoon | Evening | Night
  onCreate,
}) {
  const [sheetOpen, setSheetOpen] = React.useState(false);
  const handleCreate = interactive ? () => setSheetOpen(true) : onCreate;
  const collapsed = view === 'shelf';
  const grad = gradientFor(palette, timeOfDay);
  const greeting = greetingForTod(timeOfDay, 'Lukas');

  const arcItems = [
    { kind: 'past', time: '7:15',  suffix: 'AM', title: 'Morning shift',        location: 'Riverside · Office',   feed: 'work' },
    { kind: 'past', time: '9:00',  suffix: 'AM', title: 'Daylight walk',         location: 'Hyde Park',            feed: 'personal' },
    { kind: 'next', time: '10:30', suffix: 'AM', title: 'Standup',               location: 'Engineering · room G', feed: 'work' },
    { kind: 'next', time: '1:00',  suffix: 'PM', title: 'Lunch with Maya',       location: 'Honey & Co',           feed: 'family' },
    { kind: 'next', time: '2:30',  suffix: 'PM', title: 'COMP3010 · Algorithms', location: 'Roberts G06',          feed: 'uni' },
    { kind: 'next', time: '5:00',  suffix: 'PM', title: 'Climbing session',      location: 'The Castle',           feed: 'gym' },
    { kind: 'next', time: '10:00', suffix: 'PM', title: '🌙 Wind down',          location: 'Bedtime 10:30 PM',     feed: 'bedtime' },
  ];

  const heroProps = heroMetric === 'focus'
    ? {
        metricLabel: 'Focus left today',
        metric: '3', metricUnit: 'things', showMoon: false,
        metricSub: 'Algorithms lecture · Maya at 1 · finish thesis §4.2.',
      }
    : {
        metricLabel: "Tonight's bedtime",
        metric: '10:30', metricUnit: 'PM', showMoon: true,
        metricSub: 'Worked back from tomorrow — wake 6:15, an 8-hour night.',
      };

  return (
    <FrameScreen dark={dark}>
      {collapsed ? (
        <TodayCollapsedNav metric={heroProps.metric} metricUnit={heroProps.metricUnit}
          metricLabel={heroProps.metricLabel} grad={grad}/>
      ) : (
        <TodayHero
          name="Lukas"
          date="Sun · Mar 16"
          greeting={greeting}
          narrative="Three things matter today."
          grad={grad}
          {...heroProps}
          stats={[
            { l: 'Next up',    v: '10:30 AM', s: 'Standup · 22m' },
            { l: 'Last night', v: '6h 12m',   s: '−1.8h vs avg' },
            { l: 'Debt · 14d', v: '4.5h',     s: 'Recover tonight' },
          ]}
        />
      )}

      {/* Today's arc — trimmed in the collapsed/launcher view so the shelf shows */}
      <TSection title="Today's arc" see="Calendar"/>
      <TArc items={collapsed ? arcItems.slice(1, 4) : arcItems} nowLabel="10:14" nowAfter={collapsed ? 0 : undefined}/>

      {/* Module shelf — the launcher */}
      <TSection title="Your day at a glance"/>
      <div className="shelf">
        <ModuleTile icon="check"      chip="var(--io-indigo)"   label="Tasks"    datumValue="4"     datumRest="due today"/>
        <ModuleTile icon="target"     chip="var(--io-pink)"     label="Goals"    datumValue="62%"   datumRest="on track"/>
        <ModuleTile icon="moon"       chip="var(--io-sleep)"    label="Sleep"    datumValue="6h 12m" datumRest="last night"/>
        <ModuleTile icon="brain"      chip="var(--io-indigo)"   label="Cognition" datumValue="78"   datumRest="/ 100"/>
        <ModuleTile icon="activity"   chip="var(--io-activity)" label="Activity" datumValue="8,432" datumRest="steps"/>
        <ModuleTile icon="sparkles"   chip="var(--io-yellow)"   label="Insights" datumValue="1"     datumRest="new"/>
      </div>

      <div className="scroll-pad"/>
      <TabBar5 active="today" tint={tint} onCreate={handleCreate}/>

      {interactive && sheetOpen && (
        <CreateSheetPanel dark={dark} onClose={() => setSheetOpen(false)}/>
      )}
    </FrameScreen>
  );
}
window.Today = Today;

// Compact on-scroll header: the big midnight hero has scrolled away; iOS
// collapses it to a light blur title bar. The bedtime number persists as a
// small pill so the signature metric never fully leaves Today.
function TodayCollapsedNav({ metric = '10:30', metricUnit = 'PM', metricLabel = "Tonight's bedtime", grad }) {
  const tone = grad ? { background: grad } : undefined;
  return (
    <div className="t-cnav">
      <div className="cn-row">
        <div className="cn-title">
          <div className="t1l">Today</div>
          <div className="t1d" data-num>Sun · Mar 16</div>
        </div>
        <div className="cn-actions">
          <div className="cn-pill" style={tone}>
            <span className="moon" aria-hidden="true"/>
            <span data-num>{metric}<span className="u"> {metricUnit}</span></span>
          </div>
          <div className="cn-btn"><Icon name="search" size={17} stroke={2.4}/></div>
          <div className="cn-btn avatar" style={tone}>L</div>
        </div>
      </div>
    </div>
  );
}
window.TodayCollapsedNav = TodayCollapsedNav;

// ── First-run / empty state ─────────────────────────────────────
function TodayEmpty({ dark = false, tint = 'blue', palette, timeOfDay = 'Auto', onCreate }) {
  const grad = gradientFor(palette, timeOfDay);
  const greeting = greetingForTod(timeOfDay, 'Lukas');
  return (
    <FrameScreen dark={dark}>
      <TodayHero
        name="Lukas"
        date="Sun · Mar 16"
        greeting={greeting}
        narrative="A clear page. Let's set the shape of your day."
        grad={grad}
        metricLabel="Tonight's bedtime"
        metric="—:—" metricUnit="" showMoon={true}
        metricSub="Three more nights of sleep data and we'll forecast this for you."
        empty
        stats={[
          { l: 'Next up',    v: 'Nothing yet', s: 'Add an event' },
          { l: 'Last night', v: 'No data',     s: 'Connecting…' },
          { l: 'Debt · 14d', v: '—',           s: 'Pending' },
        ]}
      />

      <TSection title="Today's arc"/>
      <div style={{ padding: '4px 20px 0' }}>
        <div style={{
          border: '1px dashed var(--io-separator-opaque)', borderRadius: 16,
          padding: '20px 18px', textAlign: 'center',
        }}>
          <div className="empty-tile-note">
            Nothing scheduled for today. Add an event below, or enjoy the free time.
          </div>
        </div>
      </div>

      <TSection title="Your day at a glance"/>
      <div className="shelf">
        <ModuleTile icon="check"    chip="var(--io-indigo)"   label="Tasks"    datumValue="None yet" empty/>
        <ModuleTile icon="target"   chip="var(--io-pink)"     label="Goals"    datumValue="Set one"  empty/>
        <ModuleTile icon="moon"     chip="var(--io-sleep)"    label="Sleep"    datumValue="Syncing"  empty/>
        <ModuleTile icon="sparkles" chip="var(--io-yellow)"   label="Insights" datumValue="Soon"     empty/>
      </div>

      <div className="scroll-pad"/>
      <TabBar5 active="today" tint={tint} onCreate={onCreate}/>
    </FrameScreen>
  );
}
window.TodayEmpty = TodayEmpty;