// CoParent — Home Concepts (CALM REDESIGN)
// Principle: ONE focal moment. Everything else whispers or hides.
// No emoji clutter, no chip rows, no horizontal scrolls, no dense lists.

// ─── Helpers ──────────────────────────────────────────────────────────────────
function CalmStatusBadge({ t, base }) {
  // Tiny, single-line context badge at top
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}>
      <div style={{ width: 6, height: 6, borderRadius: 3, background: base.accent }} />
      <span style={{ fontSize: 12, fontWeight: 600, color: t.subtext, letterSpacing: 0.2 }}>Your day · with Emma & Liam</span>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// CONCEPT 1: "ONE THING" — single focal moment, everything else collapsed
// ═══════════════════════════════════════════════════════════════════════════
function HomeOneThing({ t, base }) {
  const ctx = TODAY_CONTEXT;
  const [sheet, setSheet] = React.useState(null);
  const next = ctx.moments.find(m => !m.done);
  const urgentCount = ctx.inbox.filter(i => i.urgent).length;

  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column',
      padding: '12px 22px 20px', position: 'relative' }}>

      {/* Tiny context */}
      <div style={{ paddingTop: 6, paddingBottom: 28 }}>
        <CalmStatusBadge t={t} base={base} />
      </div>

      {/* THE ONE THING — massive, centered */}
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center',
        paddingBottom: 40 }}>
        <div style={{ fontSize: 13, fontWeight: 600, color: t.subtext,
          letterSpacing: 1.5, textTransform: 'uppercase', marginBottom: 14 }}>Up next</div>
        <div style={{ fontSize: 44, fontWeight: 800, color: t.text, letterSpacing: -1.5,
          lineHeight: 1.05, marginBottom: 14 }}>
          Pickup<br/>at school
        </div>
        <div style={{ fontSize: 17, color: t.subtext, fontWeight: 500, lineHeight: 1.5 }}>
          {next.time} · in 2 hours
        </div>
      </div>

      {/* Whispers — minimal, single-line */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 1, borderRadius: 18,
        background: t.bgSecondary, overflow: 'hidden' }}>
        <div onClick={() => setSheet('inbox')} style={{ display: 'flex', alignItems: 'center',
          padding: '16px 18px', cursor: 'pointer' }}>
          <div style={{ flex: 1, fontSize: 15, color: t.text }}>
            {urgentCount > 0 && <span style={{ color: base.amber, fontWeight: 700 }}>{urgentCount} </span>}
            {urgentCount > 0 ? 'request from Jordan' : 'No new messages'}
          </div>
          <span style={{ fontSize: 18, color: t.subtext, fontWeight: 400 }}>›</span>
        </div>
        <div style={{ height: 1, background: t.divider }} />
        <div onClick={() => setSheet('schedule')} style={{ display: 'flex', alignItems: 'center',
          padding: '16px 18px', cursor: 'pointer' }}>
          <div style={{ flex: 1, fontSize: 15, color: t.text }}>3 more today</div>
          <span style={{ fontSize: 13, color: t.subtext, marginRight: 6 }}>Soccer · Dinner · Bedtime</span>
          <span style={{ fontSize: 18, color: t.subtext, fontWeight: 400 }}>›</span>
        </div>
      </div>

      {sheet && <CalmSheet t={t} base={base} kind={sheet} onClose={() => setSheet(null)} />}
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// CONCEPT 2: "QUIET LIST" — clean today list, no decoration
// ═══════════════════════════════════════════════════════════════════════════
function HomeQuietList({ t, base }) {
  const ctx = TODAY_CONTEXT;
  const [sheet, setSheet] = React.useState(null);
  const upcoming = ctx.moments.filter(m => !m.done);
  const urgent = ctx.inbox.find(i => i.urgent);

  return (
    <div style={{ flex: 1, overflowY: 'auto', padding: '12px 22px 24px',
      display: 'flex', flexDirection: 'column', gap: 28, position: 'relative' }}>

      {/* Header */}
      <div>
        <div style={{ fontSize: 28, fontWeight: 800, color: t.text, letterSpacing: -0.6 }}>Today</div>
        <div style={{ marginTop: 6 }}><CalmStatusBadge t={t} base={base} /></div>
      </div>

      {/* Single urgent banner — only if there's something */}
      {urgent && (
        <div onClick={() => setSheet(urgent)} style={{ padding: '14px 18px',
          background: base.amberBg, borderRadius: 14, cursor: 'pointer',
          display: 'flex', alignItems: 'center', gap: 14 }}>
          <div style={{ width: 6, alignSelf: 'stretch', borderRadius: 3, background: base.amber, flexShrink: 0 }} />
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 12, fontWeight: 700, color: base.amber, letterSpacing: 0.5 }}>JORDAN ASKED</div>
            <div style={{ fontSize: 15, fontWeight: 600, color: t.text, marginTop: 2 }}>{urgent.title}</div>
          </div>
          <span style={{ fontSize: 18, color: base.amber }}>›</span>
        </div>
      )}

      {/* Schedule list — minimal */}
      <div>
        <div style={{ fontSize: 12, fontWeight: 600, color: t.subtext, letterSpacing: 1.2,
          textTransform: 'uppercase', marginBottom: 14, paddingLeft: 2 }}>Coming up</div>
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          {upcoming.map((m, i) => (
            <div key={m.id} style={{ display: 'flex', alignItems: 'center', gap: 18,
              padding: '16px 0', borderBottom: i < upcoming.length - 1 ? `1px solid ${t.divider}` : 'none' }}>
              <div style={{ width: 64, fontSize: 13, fontWeight: 700, color: m.highlight ? base.primary : t.subtext }}>{m.time}</div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 16, fontWeight: m.highlight ? 700 : 500, color: t.text }}>{m.label}</div>
                {m.kid !== 'both' && <div style={{ fontSize: 13, color: t.subtext, marginTop: 2 }}>{m.kid}</div>}
              </div>
              {m.highlight && <div style={{ width: 8, height: 8, borderRadius: 4, background: base.primary }} />}
            </div>
          ))}
        </div>
      </div>

      {/* Footer whispers */}
      <div style={{ marginTop: 'auto', display: 'flex', justifyContent: 'space-between',
        paddingTop: 12, borderTop: `1px solid ${t.divider}` }}>
        <div onClick={() => setSheet('inbox')} style={{ fontSize: 13, color: t.subtext, cursor: 'pointer' }}>
          {ctx.inbox.length} updates
        </div>
        <div style={{ fontSize: 13, color: t.subtext }}>Tomorrow · Jordan</div>
      </div>

      {sheet && <CalmSheet t={t} base={base} kind={sheet} onClose={() => setSheet(null)} />}
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// CONCEPT 3: "BREATHING ROOM" — split: massive top half, list below
// ═══════════════════════════════════════════════════════════════════════════
function HomeBreathing({ t, base }) {
  const ctx = TODAY_CONTEXT;
  const [sheet, setSheet] = React.useState(null);
  const next = ctx.moments.find(m => !m.done);
  const urgent = ctx.inbox.find(i => i.urgent);

  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', position: 'relative' }}>

      {/* Top half — soft tinted, contemplative */}
      <div style={{ background: `linear-gradient(180deg, ${base.accent}10 0%, transparent 100%)`,
        padding: '14px 22px 32px' }}>
        <CalmStatusBadge t={t} base={base} />
        <div style={{ marginTop: 32 }}>
          <div style={{ fontSize: 13, fontWeight: 600, color: t.subtext, letterSpacing: 1.2,
            textTransform: 'uppercase', marginBottom: 8 }}>Next</div>
          <div style={{ fontSize: 30, fontWeight: 800, color: t.text, letterSpacing: -0.8,
            lineHeight: 1.15 }}>{next.label}</div>
          <div style={{ fontSize: 15, color: t.subtext, fontWeight: 500, marginTop: 8 }}>
            {next.time} · with Emma & Liam
          </div>
        </div>
      </div>

      {/* Quiet list of priorities */}
      <div style={{ flex: 1, padding: '8px 22px 24px', overflowY: 'auto' }}>
        {urgent && (
          <div onClick={() => setSheet(urgent)} style={{ padding: '16px 0',
            borderBottom: `1px solid ${t.divider}`, cursor: 'pointer',
            display: 'flex', alignItems: 'center', gap: 14 }}>
            <div style={{ width: 8, height: 8, borderRadius: 4, background: base.amber, flexShrink: 0 }} />
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 15, fontWeight: 600, color: t.text }}>{urgent.title}</div>
              <div style={{ fontSize: 13, color: t.subtext, marginTop: 2 }}>From Jordan · {urgent.time}</div>
            </div>
            <span style={{ fontSize: 18, color: t.subtext }}>›</span>
          </div>
        )}
        <div onClick={() => setSheet('schedule')} style={{ padding: '16px 0',
          borderBottom: `1px solid ${t.divider}`, cursor: 'pointer',
          display: 'flex', alignItems: 'center' }}>
          <div style={{ flex: 1, fontSize: 15, color: t.text }}>{ctx.moments.filter(m => !m.done).length - 1} more today</div>
          <span style={{ fontSize: 18, color: t.subtext }}>›</span>
        </div>
        <div onClick={() => setSheet('inbox')} style={{ padding: '16px 0', cursor: 'pointer',
          display: 'flex', alignItems: 'center' }}>
          <div style={{ flex: 1, fontSize: 15, color: t.text }}>{ctx.inbox.length - 1} other updates</div>
          <span style={{ fontSize: 18, color: t.subtext }}>›</span>
        </div>
      </div>

      {sheet && <CalmSheet t={t} base={base} kind={sheet} onClose={() => setSheet(null)} />}
    </div>
  );
}

// ─── Bottom sheet (one expander for everything) ───────────────────────────────
function CalmSheet({ t, base, kind, onClose }) {
  const ctx = TODAY_CONTEXT;
  const isItem = typeof kind === 'object';

  const renderContent = () => {
    if (kind === 'schedule') {
      const upcoming = ctx.moments.filter(m => !m.done);
      return (
        <>
          <div style={{ fontSize: 22, fontWeight: 800, color: t.text, marginBottom: 4, letterSpacing: -0.4 }}>Today</div>
          <div style={{ fontSize: 13, color: t.subtext, marginBottom: 22 }}>{upcoming.length} more moments</div>
          <div>
            {upcoming.map((m, i) => (
              <div key={m.id} style={{ display: 'flex', alignItems: 'center', gap: 18, padding: '14px 0',
                borderBottom: i < upcoming.length - 1 ? `1px solid ${t.divider}` : 'none' }}>
                <div style={{ width: 64, fontSize: 13, fontWeight: 700, color: m.highlight ? base.primary : t.subtext }}>{m.time}</div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 15, fontWeight: 600, color: t.text }}>{m.label}</div>
                  {m.kid !== 'both' && <div style={{ fontSize: 13, color: t.subtext, marginTop: 2 }}>{m.kid}</div>}
                </div>
              </div>
            ))}
          </div>
        </>
      );
    }
    if (kind === 'inbox') {
      return (
        <>
          <div style={{ fontSize: 22, fontWeight: 800, color: t.text, marginBottom: 4, letterSpacing: -0.4 }}>Updates</div>
          <div style={{ fontSize: 13, color: t.subtext, marginBottom: 22 }}>{ctx.inbox.length} from Jordan</div>
          <div>
            {ctx.inbox.map((it, i) => (
              <div key={it.id} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '14px 0',
                borderBottom: i < ctx.inbox.length - 1 ? `1px solid ${t.divider}` : 'none' }}>
                {it.urgent && <div style={{ width: 6, height: 6, borderRadius: 3, background: base.amber, flexShrink: 0 }} />}
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 15, fontWeight: 600, color: t.text }}>{it.title}</div>
                  <div style={{ fontSize: 13, color: t.subtext, marginTop: 2 }}>{it.time}</div>
                </div>
                <span style={{ fontSize: 16, color: t.subtext }}>›</span>
              </div>
            ))}
          </div>
        </>
      );
    }
    if (isItem) {
      const it = kind;
      const isRequest = it.type === 'request';
      return (
        <>
          <div style={{ fontSize: 13, color: t.subtext, marginBottom: 8 }}>From Jordan · {it.time}</div>
          <div style={{ fontSize: 22, fontWeight: 800, color: t.text, marginBottom: 14, letterSpacing: -0.3, lineHeight: 1.25 }}>{it.title}</div>
          <div style={{ fontSize: 15, color: t.subtext, lineHeight: 1.6, marginBottom: 24 }}>
            {isRequest
              ? "Jordan has a work trip on May 10. They're asking to swap the weekend so they can have May 17 instead."
              : it.preview}
          </div>
          {isRequest ? (
            <div style={{ display: 'flex', gap: 10 }}>
              <div onClick={onClose} style={{ flex: 1, padding: '15px', borderRadius: 14,
                background: t.bgSecondary, color: t.text, textAlign: 'center', fontSize: 15, fontWeight: 600, cursor: 'pointer' }}>Decline</div>
              <div onClick={onClose} style={{ flex: 1, padding: '15px', borderRadius: 14,
                background: base.primary, color: '#fff', textAlign: 'center', fontSize: 15, fontWeight: 700, cursor: 'pointer' }}>Approve</div>
            </div>
          ) : (
            <div onClick={onClose} style={{ padding: '15px', borderRadius: 14,
              background: base.primary, color: '#fff', textAlign: 'center', fontSize: 15, fontWeight: 700, cursor: 'pointer' }}>Got it</div>
          )}
        </>
      );
    }
  };

  return (
    <div onClick={onClose} style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.32)',
      zIndex: 50, display: 'flex', alignItems: 'flex-end' }}>
      <div onClick={e => e.stopPropagation()} style={{ width: '100%', background: t.cardBg,
        borderTopLeftRadius: 28, borderTopRightRadius: 28, padding: '14px 26px 32px',
        animation: 'slideUp 0.28s cubic-bezier(0.32, 0.72, 0, 1)' }}>
        <div style={{ width: 40, height: 4, borderRadius: 2, background: t.divider, margin: '0 auto 22px' }} />
        {renderContent()}
      </div>
      <style>{`@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }`}</style>
    </div>
  );
}

Object.assign(window, { HomeOneThing, HomeQuietList, HomeBreathing });