// Loop — Daily Summary, Relationship, Activity log
// Exports (window): SummaryScreen, PeopleScreen, RelationshipScreen, ActivityScreen

const { useState: sState } = React;

// ─── Daily Summary ───────────────────────────────────────────────
function SummaryStat({ T, value, label, color }) {
  return (
    <div style={{ flex: 1 }}>
      <div style={{ fontFamily: T.fontSerif, fontSize: 36, lineHeight: '36px', color: color || T.text, letterSpacing: -0.7, fontWeight: 400 }}>{value}</div>
      <div style={{ fontFamily: T.fontSans, fontSize: 12, color: T.textSub, marginTop: 6, letterSpacing: 0.3 }}>{label}</div>
    </div>
  );
}

function BarRow({ T, label, value, max, color }) {
  return (
    <div style={{ marginBottom: 14 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
        <span style={{ fontFamily: T.fontSans, fontSize: 14, color: T.text }}>{label}</span>
        <span style={{ fontFamily: T.fontSans, fontSize: 14, color: T.textSub, fontWeight: 540 }}>{value}</span>
      </div>
      <div style={{ height: 6, background: T.hairline, borderRadius: 6, overflow: 'hidden' }}>
        <div style={{ height: '100%', width: `${(value / max) * 100}%`, background: color || T.accent, borderRadius: 6 }}/>
      </div>
    </div>
  );
}

function SummaryScreen({ T }) {
  const s = window.LoopData.SUMMARY;
  return (
    <ScreenScroll T={T}>
      <div style={{ padding: '8px 20px 0' }}>
        <div style={{ fontFamily: T.fontSans, fontSize: 13, fontWeight: 540, color: T.textSub, letterSpacing: 1.2, textTransform: 'uppercase', marginBottom: 6 }}>
          Daily Summary
        </div>
        <div style={{ fontFamily: T.fontSerif, fontSize: 30, lineHeight: 1.1, color: T.text, letterSpacing: -0.6, fontWeight: 400, marginBottom: 2 }}>
          Your day feels lighter.
        </div>
        <div style={{ fontFamily: T.fontSans, fontSize: 14, color: T.textSub, marginBottom: 24 }}>{s.date}</div>

        {/* hero panel */}
        <div style={{
          borderRadius: T.radius, padding: '22px 20px 24px',
          background: T.dark
            ? `linear-gradient(160deg, ${T.bgElev} 0%, #0F1115 100%)`
            : `linear-gradient(160deg, #FFFFFF 0%, #F2EFE6 100%)`,
          border: `0.5px solid ${T.cardEdge}`,
          boxShadow: T.cardShadow,
          marginBottom: 18,
        }}>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 4 }}>
            <span style={{ fontFamily: T.fontSerif, fontSize: 72, lineHeight: '72px', color: T.cleared, letterSpacing: -1.8, fontWeight: 400 }}>{s.cleared}</span>
            <span style={{ fontFamily: T.fontSans, fontSize: 15, color: T.textSub }}>loops cleared</span>
          </div>
          <div style={{ fontFamily: T.fontSerif, fontSize: 17, lineHeight: 1.45, color: T.text, marginTop: 14, maxWidth: 300 }}>
            {s.highlight}
          </div>
        </div>

        {/* stats grid */}
        <div style={{
          background: T.card, borderRadius: T.radius, border: `0.5px solid ${T.cardEdge}`,
          padding: '18px 18px 14px', marginBottom: 18, boxShadow: T.cardShadow,
        }}>
          <div style={{ display: 'flex', gap: 6, marginBottom: 18 }}>
            <SummaryStat T={T} value={s.replies} label="replies sent" />
            <SummaryStat T={T} value={s.followups} label="follow-ups" />
            <SummaryStat T={T} value={s.pending} label="pending" color={T.pending} />
          </div>
          <Hairline T={T} style={{ marginBottom: 14 }} />
          <BarRow T={T} label="Replies"    value={s.replies}   max={15} color={T.accent} />
          <BarRow T={T} label="Thank-yous" value={4}           max={15} color={T.cleared} />
          <BarRow T={T} label="Scheduling" value={s.followups} max={15} color="#9C7BC9" />
          <BarRow T={T} label="Approvals"  value={3}           max={15} color={T.textSub} />
        </div>

        {/* time saved */}
        <div style={{
          padding: '18px 20px', borderRadius: T.radius, marginBottom: 18,
          background: T.dark ? 'rgba(62,142,111,0.12)' : 'rgba(62,142,111,0.08)',
          border: `0.5px solid ${T.dark ? 'rgba(62,142,111,0.25)' : 'rgba(62,142,111,0.18)'}`,
        }}>
          <div style={{ fontFamily: T.fontSans, fontSize: 11, fontWeight: 580, color: T.cleared, letterSpacing: 1.4, textTransform: 'uppercase', marginBottom: 6 }}>
            Estimated time saved
          </div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
            <span style={{ fontFamily: T.fontSerif, fontSize: 42, color: T.text, letterSpacing: -1, fontWeight: 400 }}>{s.minutesSaved}</span>
            <span style={{ fontFamily: T.fontSans, fontSize: 15, color: T.textSub }}>minutes</span>
          </div>
          <div style={{ fontFamily: T.fontSans, fontSize: 13, color: T.textSub, marginTop: 8, lineHeight: 1.4 }}>
            vs. composing each reply from scratch.
          </div>
        </div>

        {/* relationships maintained */}
        <div style={{ fontFamily: T.fontSans, fontSize: 12, fontWeight: 580, color: T.textSub, letterSpacing: 1.4, textTransform: 'uppercase', marginBottom: 10 }}>
          Relationships you touched
        </div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 30 }}>
          {window.LoopData.PEOPLE.slice(0, s.relationships).map(p => (
            <div key={p.id} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 12px 6px 6px', borderRadius: 999, background: T.card, border: `0.5px solid ${T.cardEdge}` }}>
              <Avatar p={p} size={24} dark={T.dark} />
              <span style={{ fontFamily: T.fontSans, fontSize: 13, color: T.text }}>{p.name.split(' ')[0]}</span>
            </div>
          ))}
        </div>
      </div>
    </ScreenScroll>
  );
}

// ─── People list ─────────────────────────────────────────────────
function PeopleScreen({ T, openPerson }) {
  const ppl = window.LoopData.PEOPLE;
  const cadences = ['Weekly', 'Bi-weekly', 'Monthly', 'Daily', 'Weekly', 'Quarterly', 'Bi-weekly', 'Weekly'];
  const statuses = [['Clear', T.cleared], ['Reply due', T.pending], ['Clear', T.cleared], ['Clear', T.cleared], ['Follow-up', T.pending], ['Clear', T.cleared], ['Snoozed', T.textSub], ['Clear', T.cleared]];

  return (
    <ScreenScroll T={T}>
      <div style={{ padding: '8px 20px 0' }}>
        <div style={{ fontFamily: T.fontSans, fontSize: 13, fontWeight: 540, color: T.textSub, letterSpacing: 1.2, textTransform: 'uppercase', marginBottom: 6 }}>
          People
        </div>
        <div style={{ fontFamily: T.fontSerif, fontSize: 32, lineHeight: 1.1, color: T.text, letterSpacing: -0.7, fontWeight: 400, marginBottom: 4 }}>
          Relationship memory
        </div>
        <div style={{ fontFamily: T.fontSans, fontSize: 14, color: T.textSub, marginBottom: 22 }}>
          {ppl.length} active threads
        </div>

        <div style={{ background: T.card, borderRadius: T.radius, border: `0.5px solid ${T.cardEdge}`, boxShadow: T.cardShadow, overflow: 'hidden' }}>
          {ppl.map((p, i) => (
            <React.Fragment key={p.id}>
              <button onClick={() => openPerson(p.id)} style={{
                all: 'unset', cursor: 'pointer', display: 'flex', alignItems: 'center',
                width: '100%', boxSizing: 'border-box', padding: '12px 16px', gap: 14,
              }}>
                <Avatar p={p} size={40} dark={T.dark} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontFamily: T.fontSans, fontSize: 15, fontWeight: 560, color: T.text, marginBottom: 2 }}>{p.name}</div>
                  <div style={{ fontFamily: T.fontSans, fontSize: 12, color: T.textSub, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{p.org} · {cadences[i]}</div>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                  <span style={{ width: 6, height: 6, borderRadius: 6, background: statuses[i][1] }}/>
                  <span style={{ fontFamily: T.fontSans, fontSize: 12, color: T.textSub }}>{statuses[i][0]}</span>
                </div>
              </button>
              {i < ppl.length - 1 && <div style={{ height: 0.5, background: T.hairline, marginLeft: 70 }}/>}
            </React.Fragment>
          ))}
        </div>
      </div>
    </ScreenScroll>
  );
}

// ─── Relationship detail ────────────────────────────────────────
function RelationshipScreen({ T, person, onBack }) {
  const notes = window.LoopData.RELATIONSHIP_NOTES.sarah; // demo data
  return (
    <div style={{ position: 'absolute', inset: 0, background: T.bg, display: 'flex', flexDirection: 'column' }}>
      <BackHeader T={T} title="People" onBack={onBack} />
      <div style={{ flex: 1, overflow: 'auto', padding: '0 20px 110px' }}>
        {/* hero */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 20, paddingTop: 4 }}>
          <Avatar p={person} size={72} dark={T.dark} />
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: T.fontSerif, fontSize: 26, color: T.text, letterSpacing: -0.5, lineHeight: 1.1, fontWeight: 400 }}>{person.name}</div>
            <div style={{ fontFamily: T.fontSans, fontSize: 14, color: T.textSub, marginTop: 4 }}>{person.org}</div>
          </div>
        </div>

        {/* cadence row */}
        <div style={{
          background: T.card, borderRadius: T.radius, border: `0.5px solid ${T.cardEdge}`,
          padding: '14px 16px', marginBottom: 16, display: 'flex', gap: 14,
          boxShadow: T.cardShadow,
        }}>
          {[['Cadence', notes.cadence], ['Last touch', notes.lastTouch], ['Tone', notes.tone]].map(([k, v]) => (
            <div key={k} style={{ flex: 1 }}>
              <div style={{ fontFamily: T.fontSans, fontSize: 11, color: T.textMuted, letterSpacing: 1.2, textTransform: 'uppercase', marginBottom: 4 }}>{k}</div>
              <div style={{ fontFamily: T.fontSans, fontSize: 14, color: T.text, fontWeight: 540 }}>{v}</div>
            </div>
          ))}
        </div>

        {/* AI insight */}
        <div style={{
          padding: '16px 18px', borderRadius: T.radius, marginBottom: 16,
          background: T.dark ? 'rgba(63,110,224,0.08)' : T.accentSoft,
          border: `0.5px solid ${T.dark ? 'rgba(63,110,224,0.18)' : 'rgba(63,110,224,0.14)'}`,
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
            <ShimmerDot T={T}/>
            <span style={{ fontFamily: T.fontSans, fontSize: 11, fontWeight: 580, color: T.accent, letterSpacing: 1.3, textTransform: 'uppercase' }}>Insight</span>
          </div>
          <div style={{ fontFamily: T.fontSerif, fontSize: 16, lineHeight: 1.45, color: T.text }}>
            {notes.insights}
          </div>
        </div>

        {/* promises */}
        <div style={{ fontFamily: T.fontSans, fontSize: 12, fontWeight: 580, color: T.textSub, letterSpacing: 1.3, textTransform: 'uppercase', marginBottom: 10 }}>
          Open promises
        </div>
        <div style={{ background: T.card, borderRadius: T.radius, border: `0.5px solid ${T.cardEdge}`, padding: '12px 16px', marginBottom: 18, boxShadow: T.cardShadow }}>
          {notes.promises.map((p, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '6px 0' }}>
              <span style={{ width: 6, height: 6, borderRadius: 6, background: T.pending }}/>
              <span style={{ fontFamily: T.fontSans, fontSize: 15, color: T.text, flex: 1 }}>{p}</span>
              <span style={{ fontFamily: T.fontSans, fontSize: 12, color: T.textMuted }}>Friday</span>
            </div>
          ))}
        </div>

        {/* recent */}
        <div style={{ fontFamily: T.fontSans, fontSize: 12, fontWeight: 580, color: T.textSub, letterSpacing: 1.3, textTransform: 'uppercase', marginBottom: 10 }}>
          Recent
        </div>
        <div style={{ background: T.card, borderRadius: T.radius, border: `0.5px solid ${T.cardEdge}`, overflow: 'hidden', boxShadow: T.cardShadow }}>
          {notes.recent.map((r, i) => (
            <React.Fragment key={i}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '14px 16px' }}>
                <KindGlyph kind={r.kind} color={T.accent} size={14}/>
                <div style={{ flex: 1, fontFamily: T.fontSans, fontSize: 14, color: T.text }}>{r.text}</div>
                <div style={{ fontFamily: T.fontSans, fontSize: 12, color: T.textMuted }}>{r.when}</div>
              </div>
              {i < notes.recent.length - 1 && <div style={{ height: 0.5, background: T.hairline, marginLeft: 44 }}/>}
            </React.Fragment>
          ))}
        </div>
      </div>
    </div>
  );
}

// ─── Activity log ─────────────────────────────────────────────────
const STATE_LABELS = {
  pending:  { label: 'Awaiting you', color: '#C58A3D' },
  sent:     { label: 'Sent',         color: '#3E8E6F' },
  snoozed:  { label: 'Snoozed',      color: '#6B7280' },
  edited:   { label: 'Edited & sent', color: '#3E8E6F' },
  system:   { label: 'Scan',         color: '#6B7280' },
};

function ActivityScreen({ T }) {
  return (
    <ScreenScroll T={T}>
      <div style={{ padding: '8px 20px 0' }}>
        <div style={{ fontFamily: T.fontSans, fontSize: 13, fontWeight: 540, color: T.textSub, letterSpacing: 1.2, textTransform: 'uppercase', marginBottom: 6 }}>
          Activity
        </div>
        <div style={{ fontFamily: T.fontSerif, fontSize: 32, lineHeight: 1.1, color: T.text, letterSpacing: -0.7, fontWeight: 400, marginBottom: 4 }}>
          Everything Loop did.
        </div>
        <div style={{ fontFamily: T.fontSans, fontSize: 14, color: T.textSub, marginBottom: 22 }}>
          Full transparency. Nothing sent without you.
        </div>

        <div style={{ position: 'relative', paddingLeft: 18 }}>
          <div style={{ position: 'absolute', left: 4, top: 4, bottom: 30, width: 1, background: T.hairline }}/>
          {window.LoopData.ACTIVITY.map((a, i) => {
            const meta = STATE_LABELS[a.state];
            return (
              <div key={a.id} style={{ position: 'relative', marginBottom: 16 }}>
                <div style={{
                  position: 'absolute', left: -18, top: 18, width: 9, height: 9, borderRadius: 9,
                  background: meta.color, border: `2px solid ${T.bg}`,
                }}/>
                <div style={{
                  background: T.card, borderRadius: T.radiusSm, border: `0.5px solid ${T.cardEdge}`,
                  padding: '12px 14px', boxShadow: T.cardShadow,
                }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
                    <span style={{ fontFamily: T.fontSans, fontSize: 12, color: T.textMuted }}>{a.when}</span>
                    <span style={{ flex: 1 }}/>
                    <Pill color={meta.color} soft={`${meta.color}1A`}>{meta.label}</Pill>
                  </div>
                  <div style={{ fontFamily: T.fontSans, fontSize: 15, color: T.text, fontWeight: 540, marginBottom: 2 }}>{a.what}</div>
                  <div style={{ fontFamily: T.fontSans, fontSize: 13, color: T.textSub, lineHeight: 1.4 }}>{a.detail}</div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </ScreenScroll>
  );
}

window.SummaryScreen = SummaryScreen;
window.PeopleScreen = PeopleScreen;
window.RelationshipScreen = RelationshipScreen;
window.ActivityScreen = ActivityScreen;