// Serving — your Planning Center Services schedule: assignments, accept/decline.
(function () {
  const { Icon } = window;
  const { Screen, RoundBtn, art } = window.NLUI;
  const D = window.NLData;

  function StatusPill({ status }) {
    if (status === 'confirmed') return (
      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, fontFamily: 'var(--nl-font-sans)',
        fontWeight: 700, fontSize: 11, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--nl-leaf-800)', whiteSpace: 'nowrap' }}>
        <Icon name="check" size={14} strokeWidth={2.4} /> Confirmed</span>
    );
    if (status === 'declined') return (
      <span style={{ fontFamily: 'var(--nl-font-sans)', fontWeight: 700, fontSize: 11, letterSpacing: '0.06em',
        textTransform: 'uppercase', color: 'var(--nl-ink-400)', whiteSpace: 'nowrap' }}>Declined</span>
    );
    return (
      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, fontFamily: 'var(--nl-font-sans)',
        fontWeight: 700, fontSize: 11, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--nl-clay-700)', whiteSpace: 'nowrap' }}>
        <Icon name="clock" size={13} /> Needs response</span>
    );
  }

  function AssignmentCard({ a, onAccept, onDecline }) {
    const t = art(a.theme);
    const declined = a.status === 'declined';
    return (
      <div style={{ background: 'var(--nl-white)', border: '1px solid var(--nl-border)', borderRadius: 16,
        padding: 16, boxShadow: 'var(--nl-shadow-sm)', opacity: declined ? 0.6 : 1 }}>
        <div style={{ display: 'flex', gap: 14 }}>
          <div style={{ width: 52, height: 56, borderRadius: 10, flexShrink: 0, background: t.bg, color: t.fg,
            display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
            <span style={{ fontFamily: 'var(--nl-font-sans)', fontSize: 9.5, fontWeight: 700, letterSpacing: '0.1em', opacity: 0.85 }}>{a.mo}</span>
            <span style={{ fontFamily: 'var(--nl-font-serif)', fontSize: 24, fontWeight: 600, lineHeight: 1 }}>{a.day}</span>
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
              <span style={{ fontFamily: 'var(--nl-font-sans)', fontWeight: 700, fontSize: 11, letterSpacing: '0.08em',
                textTransform: 'uppercase', color: 'var(--nl-leaf-700)', whiteSpace: 'nowrap' }}>{a.team}</span>
              <StatusPill status={a.status} />
            </div>
            <div style={{ fontFamily: 'var(--nl-font-serif)', fontWeight: 600, fontSize: 18, color: 'var(--nl-navy-900)', margin: '3px 0 6px' }}>
              {a.position || 'Serving'}
            </div>
            {a.time && (
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontFamily: 'var(--nl-font-sans)', fontSize: 12.5, color: 'var(--nl-ink-500)' }}>
                <Icon name="clock" size={13} /> {a.time}
              </div>
            )}
            {a.plan && (
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontFamily: 'var(--nl-font-sans)', fontSize: 12.5, color: 'var(--nl-ink-500)', marginTop: 3 }}>
                <Icon name="note" size={13} /> {a.plan}
              </div>
            )}
          </div>
        </div>
        {a.status === 'unconfirmed' && (
          <div style={{ display: 'flex', gap: 10, marginTop: 14 }}>
            <button onClick={onAccept} className="nl-btn nl-btn--accent nl-btn--sm" style={{ flex: 1 }}>
              <Icon name="check" size={16} strokeWidth={2.2} /> Accept
            </button>
            <button onClick={onDecline} className="nl-btn nl-btn--outline nl-btn--sm" style={{ flex: 1 }}>Decline</button>
          </div>
        )}
        {a.needBy && a.status === 'unconfirmed' && (
          <div style={{ fontFamily: 'var(--nl-font-sans)', fontSize: 12, color: 'var(--nl-clay-700)', fontWeight: 600, marginTop: 10, textAlign: 'center' }}>{a.needBy}</div>
        )}
      </div>
    );
  }

  function Serving({ nav, store }) {
    const list = D.serving || [];
    const needs = list.filter(a => a.status === 'unconfirmed');
    const upcoming = list.filter(a => a.status !== 'unconfirmed');
    const ccUrl = D.config.churchCenterUrl ? `${D.config.churchCenterUrl}/me` : null;

    return (
      <Screen header={{ variant: 'detail', title: 'Serving', onBack: () => nav.pop() }}>
        <div style={{ padding: '0 20px 16px' }}>
          <h1 style={{ fontFamily: 'var(--nl-font-serif)', fontWeight: 600, fontSize: 28, color: 'var(--nl-navy-900)', margin: 0 }}>Your schedule</h1>
          <div style={{ display: 'flex', alignItems: 'center', gap: 7, marginTop: 6, fontFamily: 'var(--nl-font-sans)', fontSize: 12.5, color: 'var(--nl-ink-500)' }}>
            <Icon name="users" size={15} style={{ color: 'var(--nl-leaf-700)' }} /> Synced from Planning Center Services
          </div>
        </div>

        {D.servingUnavailable && (
          <div style={{ margin: '0 20px 20px', background: 'var(--nl-wheat-100)', border: '1px solid var(--nl-wheat-300)',
            borderRadius: 12, padding: 16 }}>
            <p style={{ fontFamily: 'var(--nl-font-sans)', fontSize: 13.5, lineHeight: 1.5, color: 'var(--nl-ink-700)', margin: 0 }}>
              We couldn’t load your serving schedule right now.
            </p>
            {ccUrl && (
              <a href={ccUrl} target="_blank" rel="noopener" className="nl-btn nl-btn--outline nl-btn--sm" style={{ marginTop: 12, textDecoration: 'none' }}>
                Open my schedule in Church Center
              </a>
            )}
          </div>
        )}

        {!D.servingUnavailable && list.length === 0 && (
          <div style={{ textAlign: 'center', padding: '40px 30px' }}>
            <Icon name="users" size={40} style={{ color: 'var(--nl-ink-300)', margin: '0 auto 12px' }} />
            <p className="nl-body" style={{ color: 'var(--nl-ink-500)' }}>
              No upcoming serving assignments. Want to join a team? Talk to any team leader on Sunday — there’s a place for you.
            </p>
          </div>
        )}

        {needs.length > 0 && (
          <div style={{ padding: '0 20px 22px' }}>
            <div className="nl-eyebrow" style={{ color: 'var(--nl-clay-700)', marginBottom: 12 }}>Needs your response · {needs.length}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              {needs.map(a => (
                <AssignmentCard key={a.id} a={a}
                  onAccept={() => store.setServing(a.id, 'confirmed')}
                  onDecline={() => store.setServing(a.id, 'declined')} />
              ))}
            </div>
          </div>
        )}

        {upcoming.length > 0 && (
          <div style={{ padding: '0 20px 22px' }}>
            <div className="nl-eyebrow" style={{ marginBottom: 12 }}>Upcoming</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              {upcoming.map(a => (
                <AssignmentCard key={a.id} a={a}
                  onAccept={() => store.setServing(a.id, 'confirmed')}
                  onDecline={() => store.setServing(a.id, 'declined')} />
              ))}
            </div>
          </div>
        )}

        {ccUrl && !D.servingUnavailable && (
          <div style={{ padding: '0 20px' }}>
            <a href={`${ccUrl}/blockouts`} target="_blank" rel="noopener" className="nl-btn nl-btn--outline"
              style={{ width: '100%', boxSizing: 'border-box', textDecoration: 'none' }}>
              <Icon name="calendar" size={18} /> Add a blockout date
            </a>
            <p style={{ fontFamily: 'var(--nl-font-sans)', fontSize: 12, color: 'var(--nl-ink-400)', textAlign: 'center', lineHeight: 1.5, marginTop: 12 }}>
              Blockout dates tell your team leaders when you’re unavailable to serve.
            </p>
          </div>
        )}
      </Screen>
    );
  }

  window.NLServing = { Serving };
})();