// CoParent — Settlement, Activity log, Co-parent profile

// ─── Settle balance (Pay Now) ────────────────────────────────────────────────
function SettleBalanceScreen({ t, base, onBack }) {
  const net = COPARENT_DATA.balance.owedToYou; // 177.50
  const [method, setMethod] = React.useState('venmo');
  const [includeUnsettled, setIncludeUnsettled] = React.useState(true);
  const [step, setStep] = React.useState(0);

  if (step === 1) return (
    <div style={{ flex: 1, overflowY: 'auto', padding: '0 0 24px' }}>
      <BackHeader title="" t={t} base={base} onBack={onBack} />
      <div style={{ padding: '40px 28px 0', textAlign: 'center' }}>
        <div style={{ width: 72, height: 72, borderRadius: 36, background: base.greenBg,
          display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '20px auto 24px' }}>
          <svg width="32" height="32" viewBox="0 0 32 32"><path d="M8 16l5 5 11-11" stroke={base.green} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" fill="none"/></svg>
        </div>
        <div style={{ fontSize: 26, fontWeight: 800, color: t.text, letterSpacing: -0.5 }}>Request sent</div>
        <div style={{ fontSize: 32, fontWeight: 800, color: base.green, marginTop: 14, letterSpacing: -1 }}>${net.toFixed(2)}</div>
        <div style={{ fontSize: 14, color: t.subtext, marginTop: 14, lineHeight: 1.55 }}>
          Jordan will get a notification. Once they confirm, payment moves through {method === 'venmo' ? 'Venmo' : method === 'zelle' ? 'Zelle' : 'your linked bank'} and your balance resets to zero.
        </div>
      </div>
      <div style={{ padding: '32px 22px 0' }}>
        <PrimaryButton label="Done" base={base} onClick={onBack} />
      </div>
    </div>
  );

  return (
    <div style={{ flex: 1, overflowY: 'auto', padding: '0 0 24px' }}>
      <BackHeader title="Settle up" subtitle="Clear the balance with Jordan" t={t} base={base} onBack={onBack} />

      {/* Hero */}
      <div style={{ padding: '20px 22px 0' }}>
        <div style={{ padding: 22, borderRadius: 20, background: `linear-gradient(160deg, ${base.green} 0%, ${base.accent} 100%)`, color: '#fff' }}>
          <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: 1.2, textTransform: 'uppercase', opacity: 0.85 }}>Jordan owes you</div>
          <div style={{ fontSize: 44, fontWeight: 800, letterSpacing: -1.5, marginTop: 8 }}>${net.toFixed(2)}</div>
          <div style={{ fontSize: 13, opacity: 0.9, marginTop: 4 }}>3 pending expenses · 0 disputes</div>
        </div>
      </div>

      {/* What's included */}
      <div style={{ padding: '24px 22px 0' }}>
        <CalmSectionLabel label="What's included" t={t} action="Edit" />
        <div>
          <ListRow t={t} primary="3 approved expenses" secondary="After-school · Piano · Soccer cleats"
            right={<span style={{ fontSize: 14, fontWeight: 700, color: t.text }}>$210.00</span>} />
          <ListRow t={t} primary="You paid earlier" secondary="Reimbursable to you"
            right={<span style={{ fontSize: 14, fontWeight: 700, color: base.green }}>+$32.50</span>} />
          <ListRow t={t} last primary="Include unsettled this week"
            secondary="2 more expenses sitting at $48"
            right={<Toggle on={includeUnsettled} onChange={() => setIncludeUnsettled(v => !v)} t={t} base={base} />}
          />
        </div>
      </div>

      {/* Method */}
      <div style={{ padding: '24px 22px 0' }}>
        <CalmSectionLabel label="Receive via" t={t} />
        <div>
          {[
            { id: 'venmo', label: 'Venmo', sub: '@alex-morgan · instant' },
            { id: 'zelle', label: 'Zelle', sub: 'alex@morgan.example · same day' },
            { id: 'bank', label: 'Bank (Plaid)', sub: 'Direct deposit · 1–2 business days' },
          ].map((m, i, arr) => {
            const sel = m.id === method;
            return (
              <div key={m.id} onClick={() => setMethod(m.id)}
                style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '16px 0',
                  borderBottom: i < arr.length - 1 ? `1px solid ${t.divider}` : 'none', cursor: 'pointer' }}>
                <div style={{ width: 22, height: 22, borderRadius: 11,
                  border: `2px solid ${sel ? base.primary : t.divider}`,
                  display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  {sel && <div style={{ width: 10, height: 10, borderRadius: 5, background: base.primary }} />}
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 15, fontWeight: 600, color: t.text }}>{m.label}</div>
                  <div style={{ fontSize: 13, color: t.subtext, marginTop: 2 }}>{m.sub}</div>
                </div>
              </div>
            );
          })}
        </div>
      </div>

      <div style={{ padding: '32px 22px 0' }}>
        <PrimaryButton label={`Request $${net.toFixed(2)} from Jordan`} base={base} onClick={() => setStep(1)} />
        <div style={{ fontSize: 12, color: t.subtext, textAlign: 'center', marginTop: 12 }}>
          We log every settlement automatically. Both sides keep the receipt.
        </div>
      </div>
    </div>
  );
}

// ─── Activity log / audit trail ──────────────────────────────────────────────
function ActivityLogScreen({ t, base, onBack }) {
  const [filter, setFilter] = React.useState('all');
  const [sheet, setSheet] = React.useState(null);

  const activity = [
    { id: 'a1', actor: 'You', kind: 'expense', verb: 'submitted', target: 'After-school program ($240)', date: 'Today · 9:14 AM', hash: '4F8X' },
    { id: 'a2', actor: 'Jordan', kind: 'swap', verb: 'requested', target: 'May 10 weekend swap', date: 'Today · 10:42 AM', hash: '7C2P' },
    { id: 'a3', actor: 'Jordan', kind: 'message', verb: 'sent', target: 'Re: Liam reading group', date: 'Yesterday · 7:14 PM', hash: 'B92K' },
    { id: 'a4', actor: 'You', kind: 'pickup', verb: 'completed', target: 'Pickup at school · with Emma & Liam', date: 'Yesterday · 3:18 PM', hash: 'L4N1' },
    { id: 'a5', actor: 'Jordan', kind: 'expense', verb: 'approved', target: "Soccer cleats — $65", date: 'May 10 · 6:30 PM', hash: 'R9XY' },
    { id: 'a6', actor: 'You', kind: 'doc', verb: 'uploaded', target: "Liam's pediatrician notes", date: 'May 8 · 11:00 AM', hash: 'D2K3' },
    { id: 'a7', actor: 'Jordan', kind: 'expense', verb: 'submitted', target: 'After-school program ($240)', date: 'May 6 · 4:22 PM', hash: 'M1FB' },
  ];

  const filters = [
    { id: 'all', label: 'All' },
    { id: 'expense', label: 'Expenses' },
    { id: 'swap', label: 'Schedule' },
    { id: 'pickup', label: 'Handoffs' },
    { id: 'message', label: 'Messages' },
    { id: 'doc', label: 'Documents' },
  ];
  const visible = filter === 'all' ? activity : activity.filter(a => a.kind === filter);
  const actorTint = (n) => n === 'You' ? base.accent : base.primary;

  return (
    <div style={{ flex: 1, overflowY: 'auto', padding: '0 0 24px' }}>
      <BackHeader title="Activity log" subtitle="Verified · tamper-proof"
        t={t} base={base} onBack={onBack} />

      {/* Hero card */}
      <div style={{ padding: '20px 22px 0' }}>
        <div style={{ padding: 18, background: t.bgSecondary, borderRadius: 14 }}>
          <div style={{ fontSize: 12, fontWeight: 700, color: t.subtext, letterSpacing: 1.2, textTransform: 'uppercase' }}>Trust ledger</div>
          <div style={{ fontSize: 16, fontWeight: 700, color: t.text, marginTop: 8, lineHeight: 1.35 }}>
            Every action gets a hash. Nothing is silently edited or deleted.
          </div>
        </div>
      </div>

      {/* Filters */}
      <div style={{ padding: '20px 22px 0', display: 'flex', gap: 8, flexWrap: 'wrap' }}>
        {filters.map(f => (
          <div key={f.id} onClick={() => setFilter(f.id)} style={{
            padding: '6px 13px', borderRadius: 14, fontSize: 12, fontWeight: 600,
            background: filter === f.id ? t.text : t.bgSecondary,
            color: filter === f.id ? t.bg : t.subtext, cursor: 'pointer' }}>{f.label}</div>
        ))}
      </div>

      {/* Timeline */}
      <div style={{ padding: '20px 22px 0', position: 'relative' }}>
        <div style={{ position: 'absolute', left: 30, top: 28, bottom: 0, width: 1, background: t.divider }} />
        {visible.map((a, i) => (
          <div key={a.id} onClick={() => setSheet(a)}
            style={{ position: 'relative', display: 'flex', gap: 16, paddingBottom: 20, cursor: 'pointer' }}>
            <div style={{ width: 24, height: 24, borderRadius: 12, background: actorTint(a.actor),
              color: '#fff', fontSize: 11, fontWeight: 800,
              display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
              zIndex: 1, boxShadow: `0 0 0 4px ${t.bg}` }}>{a.actor[0]}</div>
            <div style={{ flex: 1, minWidth: 0, paddingTop: 1 }}>
              <div style={{ fontSize: 14, color: t.text, lineHeight: 1.4 }}>
                <b>{a.actor}</b> <span style={{ color: t.subtext }}>{a.verb}</span> {a.target}
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 4 }}>
                <div style={{ fontSize: 12, color: t.subtext }}>{a.date}</div>
                <div style={{ fontSize: 10, padding: '1px 7px', borderRadius: 4,
                  background: t.bgSecondary, color: t.subtext, fontFamily: 'monospace', letterSpacing: 0.5 }}>#{a.hash}</div>
              </div>
            </div>
          </div>
        ))}
      </div>

      <div style={{ padding: '24px 22px 0' }}>
        <SecondaryButton label="Export this log" t={t} onClick={() => {}} />
      </div>

      {sheet && (
        <CalmBottomSheet t={t} onClose={() => setSheet(null)}>
          <div style={{ fontSize: 13, color: t.subtext, marginBottom: 8 }}>{sheet.date}</div>
          <div style={{ fontSize: 22, fontWeight: 800, color: t.text, marginBottom: 4, letterSpacing: -0.3 }}>
            {sheet.actor} {sheet.verb} {sheet.target}
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 18 }}>
            <div style={{ padding: 12, background: t.bgSecondary, borderRadius: 10,
              fontSize: 12, color: t.subtext, fontFamily: 'monospace', lineHeight: 1.6 }}>
              <div>Event hash <span style={{ color: t.text, fontWeight: 700 }}>#{sheet.hash}</span></div>
              <div>Signed by <span style={{ color: t.text, fontWeight: 700 }}>{sheet.actor === 'You' ? 'alex@morgan.example' : 'jordan@example.com'}</span></div>
              <div>Verified · stored in chain {sheet.hash.slice(-2)}{sheet.hash.slice(0,2)}</div>
            </div>
          </div>
          <div style={{ marginTop: 22 }}>
            <PrimaryButton label="Open record" base={base} onClick={() => setSheet(null)} />
          </div>
        </CalmBottomSheet>
      )}
    </div>
  );
}

// ─── Co-parent profile (Jordan card) ─────────────────────────────────────────
function CoParentProfileScreen({ t, base, onBack }) {
  return (
    <div style={{ flex: 1, overflowY: 'auto', padding: '0 0 24px' }}>
      <BackHeader title="Jordan" subtitle="Co-parent · since Jan 2024" t={t} base={base} onBack={onBack} />

      {/* Identity hero */}
      <div style={{ padding: '20px 22px 0', display: 'flex', alignItems: 'center', gap: 16 }}>
        <CalmAvatar name="Jordan" color={base.primary} size={64} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 20, fontWeight: 800, color: t.text, letterSpacing: -0.3 }}>Jordan Morgan</div>
          <div style={{ fontSize: 13, color: t.subtext, marginTop: 2 }}>jordan@example.com</div>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          {[
            { glyph: '☏', tint: base.primary },
            { glyph: '✉', tint: base.accent },
          ].map(b => (
            <div key={b.glyph} style={{ width: 38, height: 38, borderRadius: 19,
              background: b.tint + '22', color: b.tint, fontSize: 16, fontWeight: 800,
              display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }}>{b.glyph}</div>
          ))}
        </div>
      </div>

      {/* Quick stats */}
      <div style={{ padding: '24px 22px 0', display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10 }}>
        {[
          { l: 'Custody', v: '40%' },
          { l: 'Handoffs', v: '96' },
          { l: 'Response', v: '~4h' },
        ].map(s => (
          <div key={s.l} style={{ padding: 14, background: t.bgSecondary, borderRadius: 12 }}>
            <div style={{ fontSize: 10, color: t.subtext, fontWeight: 700, letterSpacing: 0.5, textTransform: 'uppercase' }}>{s.l}</div>
            <div style={{ fontSize: 20, fontWeight: 800, color: t.text, marginTop: 4, letterSpacing: -0.3 }}>{s.v}</div>
          </div>
        ))}
      </div>

      {/* What Jordan shares with you */}
      <div style={{ padding: '24px 22px 0' }}>
        <CalmSectionLabel label="Shared with you" t={t} />
        <div>
          <ListRow t={t} primary="Calendar"
            right={<span style={{ fontSize: 12, fontWeight: 700, color: base.green }}>Real-time</span>} />
          <ListRow t={t} primary="Expenses & receipts"
            right={<span style={{ fontSize: 12, fontWeight: 700, color: base.green }}>Real-time</span>} />
          <ListRow t={t} primary="Journal entries"
            right={<span style={{ fontSize: 12, fontWeight: 700, color: base.green }}>Real-time</span>} />
          <ListRow t={t} primary="Health log"
            right={<span style={{ fontSize: 12, fontWeight: 700, color: base.green }}>Real-time</span>} />
          <ListRow t={t} last primary="Location during handoff"
            right={<span style={{ fontSize: 12, fontWeight: 700, color: t.subtext }}>Off</span>} />
        </div>
      </div>

      {/* Boundaries */}
      <div style={{ padding: '24px 22px 0' }}>
        <CalmSectionLabel label="Boundaries" t={t} />
        <div>
          <ListRow t={t} primary="Quiet hours"
            secondary="10 PM – 7 AM · non-urgent notifications muted"
            right={<Toggle on={true} onChange={() => {}} t={t} base={base} />} />
          <ListRow t={t} primary="Tone check before sending"
            secondary="Both directions"
            right={<Toggle on={true} onChange={() => {}} t={t} base={base} />} />
          <ListRow t={t} last primary="Mediation auto-suggest"
            secondary="After 3 back-and-forths on a topic"
            right={<Toggle on={false} onChange={() => {}} t={t} base={base} />} />
        </div>
      </div>

      {/* Health */}
      <div style={{ padding: '24px 22px 0' }}>
        <div style={{ padding: 16, background: t.bgSecondary, borderRadius: 14 }}>
          <div style={{ fontSize: 12, fontWeight: 700, color: t.subtext, letterSpacing: 1.2, textTransform: 'uppercase' }}>Relationship health</div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 8 }}>
            <div style={{ fontSize: 28, fontWeight: 800, color: base.green, letterSpacing: -0.5 }}>Good</div>
            <div style={{ fontSize: 13, color: t.subtext }}>· based on 30-day signals</div>
          </div>
          <div style={{ fontSize: 13, color: t.subtext, marginTop: 8, lineHeight: 1.5 }}>
            Quick response times, low dispute count, expenses settle within a week.
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { SettleBalanceScreen, ActivityLogScreen, CoParentProfileScreen });