// Loop — Home (Momentum). Hero + action queue preview + grace notes.
// Exports (window): HomeScreen

const { useState: hState } = React;

function HeroForMetaphor({ T, kind, cleared, total, minutes, peek }) {
  if (kind === 'ring')     return <RingHero T={T} cleared={cleared} total={total} minutes={minutes} />;
  if (kind === 'number')   return <NumberHero T={T} cleared={cleared} total={total} minutes={minutes} />;
  if (kind === 'gradient') return <GradientHero T={T} cleared={cleared} total={total} minutes={minutes} />;
  return <StackHero T={T} cleared={cleared} total={total} minutes={minutes} peek={peek} />;
}

function GreetingLine({ T }) {
  const hour = new Date().getHours();
  const g = hour < 5 ? 'Quiet hour' : hour < 12 ? 'Good morning' : hour < 18 ? 'Good afternoon' : 'Good evening';
  return (
    <div style={{ fontFamily: T.fontSans, fontSize: 13, fontWeight: 540, color: T.textSub, letterSpacing: 1.2, textTransform: 'uppercase', marginBottom: 8 }}>
      {g}
    </div>
  );
}

function QueuePeekCard({ T, c, person, onOpen }) {
  return (
    <button onClick={onOpen} style={{
      all: 'unset', cursor: 'pointer', display: 'block', width: '100%', boxSizing: 'border-box',
      background: T.card, borderRadius: T.radius, border: `0.5px solid ${T.cardEdge}`,
      boxShadow: T.cardShadow, padding: T.pad, marginBottom: 10,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 10 }}>
        <Avatar p={person} size={36} dark={T.dark} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontFamily: T.fontSans, fontSize: 15, fontWeight: 570, color: T.text, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{person.name}</div>
          <div style={{ fontFamily: T.fontSans, fontSize: 12, color: T.textMuted, marginTop: 1 }}>{c.received} · {c.channel}</div>
        </div>
        <Pill dark={T.dark} color={T.accent} soft={T.accentSoft}>
          <KindGlyph kind={c.kind} color={T.accent} size={11} />{c.kindLabel}
        </Pill>
      </div>
      <div style={{ fontFamily: T.fontSerif, fontSize: 16, lineHeight: 1.4, color: T.text, marginBottom: 10 }}>
        {c.preview}
      </div>
      <div style={{
        background: T.dark ? 'rgba(255,255,255,0.04)' : 'rgba(20,20,20,0.025)',
        borderRadius: 12, padding: '10px 12px',
        display: 'flex', alignItems: 'flex-start', gap: 8,
      }}>
        <ShimmerDot T={T} />
        <div style={{ fontFamily: T.fontSans, fontSize: 13, color: T.textSub, lineHeight: 1.45, flex: 1 }}>
          <span style={{ color: T.text, fontWeight: 540 }}>Suggested · </span>{c.suggested}
        </div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 12 }}>
        <span style={{ fontFamily: T.fontSans, fontSize: 12, color: T.textMuted }}>~{c.minutes} min</span>
        <span style={{ flex: 1 }}/>
        <span style={{ fontFamily: T.fontSans, fontSize: 13, color: T.accent, fontWeight: 540 }}>Open ›</span>
      </div>
    </button>
  );
}

function HomeScreen({ T, hero, goQueue, openItem, queue }) {
  const total = queue.length;
  const cleared = 0;
  const peek = queue.slice(0, 3);
  const next2 = queue.slice(0, 2);

  return (
    <ScreenScroll T={T}>
      <div style={{ padding: '8px 20px 0' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 6 }}>
          <GreetingLine T={T} />
          <div style={{
            width: 36, height: 36, borderRadius: 18, background: T.card,
            border: `0.5px solid ${T.cardEdge}`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontFamily: T.fontSans, fontWeight: 600, fontSize: 13, color: T.text,
          }}>EM</div>
        </div>
        <div style={{ fontFamily: T.fontSerif, fontSize: 34, lineHeight: 1.1, color: T.text, letterSpacing: -0.8, fontWeight: 400, marginBottom: 4 }}>
          Today's Momentum
        </div>
        <div style={{ fontFamily: T.fontSans, fontSize: 14, color: T.textSub }}>
          Tuesday, May 28
        </div>

        <div style={{ marginTop: 18 }}>
          <HeroForMetaphor T={T} kind={hero} cleared={cleared} total={total} minutes={18} peek={peek} />
        </div>

        <button onClick={goQueue} style={{
          all: 'unset', cursor: 'pointer', display: 'block', textAlign: 'center',
          width: '100%', boxSizing: 'border-box', marginTop: 14, marginBottom: 28,
          padding: '16px 20px', borderRadius: 18,
          background: T.accent, color: '#fff',
          fontFamily: T.fontSans, fontSize: 17, fontWeight: 590, letterSpacing: -0.2,
          boxShadow: `0 8px 22px ${T.accent}38`,
        }}>
          Start clearing
        </button>

        {/* Up Next */}
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 12 }}>
          <div style={{ fontFamily: T.fontSans, fontSize: 12, fontWeight: 580, color: T.textSub, letterSpacing: 1.4, textTransform: 'uppercase' }}>
            Up next
          </div>
          <button onClick={goQueue} style={{
            all: 'unset', cursor: 'pointer', fontFamily: T.fontSans, fontSize: 14, fontWeight: 540, color: T.accent,
          }}>See all {total}</button>
        </div>

        {next2.map(c => {
          const p = window.LoopData.PEOPLE.find(x => x.id === c.personId);
          return <QueuePeekCard key={c.id} T={T} c={c} person={p} onOpen={() => openItem(c.id)} />;
        })}

        {/* Grace note */}
        <div style={{
          marginTop: 18, padding: '18px 18px 16px',
          background: T.card, borderRadius: T.radius,
          border: `0.5px solid ${T.cardEdge}`,
        }}>
          <div style={{ fontFamily: T.fontSans, fontSize: 11, fontWeight: 580, color: T.accent, letterSpacing: 1.4, textTransform: 'uppercase', marginBottom: 8 }}>
            A note from Loop
          </div>
          <div style={{ fontFamily: T.fontSerif, fontSize: 18, lineHeight: 1.4, color: T.text }}>
            Yesterday you cleared 14 loops in 22 minutes. The Sarah thread can wait until you've had coffee.
          </div>
        </div>
      </div>
    </ScreenScroll>
  );
}

window.HomeScreen = HomeScreen;