// iPad Calls — full call log + empty zero-state, DIDComm voice/video.
// Mirrors the mobile calls screens but iPad-styled (wider rows, two-column
// suggested peers in the empty state).

const T_CALL_SUGGESTED = [
  { name: 'Rohan Sharma',   initials: 'RS', bg: '#F472B6', avatar: 'https://i.pravatar.cc/120?img=12', conn: 'internet', sub: 'Online now' },
  { name: 'Aishwarya Iyer', initials: 'AI', bg: '#EF4444', avatar: 'https://i.pravatar.cc/120?img=49', conn: 'ble',      sub: 'Nearby · BLE' },
  { name: 'Priya Nair',     initials: 'PN', bg: '#22D3EE', avatar: 'https://i.pravatar.cc/120?img=47', conn: 'mesh',     sub: 'On mesh' },
  { name: 'Arjun Mehta',    initials: 'AM', bg: '#6EE7B7', avatar: 'https://i.pravatar.cc/120?img=14', conn: 'mesh',     sub: 'On mesh' },
];

function TScreenCallsEmpty({ onCall, onShowHistory }) {
  return (
    <div style={{ height: '100%', overflowY: 'auto', background: M_BG, color: M_FG }}>
      <div style={{ maxWidth: 720, margin: '0 auto', padding: '36px 32px 60px' }}>
        {/* Header */}
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 }}>
          <div style={{ fontSize: 26, fontWeight: 700, fontFamily: 'Geist', letterSpacing: '-0.03em' }}>Calls</div>
          {onShowHistory && (
            <button onClick={onShowHistory} style={{ padding: '8px 13px', borderRadius: 9, background: M_SURFACE, border: '1px solid ' + M_BORDER_SOFT, color: M_FG_MUTED, fontSize: 12, fontFamily: 'inherit', cursor: 'pointer' }}>Preview history</button>
          )}
        </div>

        {/* Zero-state hero */}
        <div style={{ textAlign: 'center', padding: '40px 16px 36px' }}>
          <div style={{ position: 'relative', width: 150, height: 150, margin: '0 auto 26px', display: 'grid', placeItems: 'center' }}>
            {[0, 1, 2, 3].map(i => (
              <div key={i} style={{
                position: 'absolute', borderRadius: '50%',
                inset: i * 20,
                border: '1px solid rgba(110,231,183,' + (0.28 - i * 0.06) + ')',
              }}/>
            ))}
            <div style={{
              width: 76, height: 76, borderRadius: 22,
              background: 'linear-gradient(135deg, rgba(110,231,183,0.18), rgba(96,165,250,0.18))',
              border: '1px solid rgba(110,231,183,0.32)',
              display: 'grid', placeItems: 'center', color: M_ACCENT,
            }}>
              {MIc.calls({ s: 34 })}
            </div>
          </div>
          <div style={{ fontSize: 24, fontWeight: 700, fontFamily: 'Geist', letterSpacing: '-0.03em', marginBottom: 10 }}>No calls yet</div>
          <div style={{ fontSize: 14, color: M_FG_MUTED, lineHeight: 1.55, maxWidth: 380, margin: '0 auto 24px' }}>
            Start an end-to-end encrypted voice or video call over DIDComm — no phone number, no account, no servers in the middle.
          </div>
          <div style={{ display: 'inline-flex', gap: 10 }}>
            <button onClick={() => onCall && onCall(null, 'audio')} style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              padding: '11px 18px', borderRadius: 10,
              background: 'linear-gradient(135deg,#6EE7B7,#60A5FA)', border: 0, color: '#0B0C0F',
              fontSize: 13, fontWeight: 600, fontFamily: 'inherit', cursor: 'pointer',
            }}>{MIc.calls({ s: 16 })} New audio call</button>
            <button onClick={() => onCall && onCall(null, 'video')} style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              padding: '11px 18px', borderRadius: 10,
              background: M_SURFACE, border: '1px solid ' + M_BORDER_SOFT, color: M_FG,
              fontSize: 13, fontWeight: 600, fontFamily: 'inherit', cursor: 'pointer',
            }}>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="m23 7-7 5 7 5z"/><rect x="1" y="5" width="15" height="14" rx="2"/></svg>
              New video call
            </button>
          </div>
        </div>

        {/* Suggested peers */}
        <div style={{ fontSize: 11, fontWeight: 700, color: M_FG_DIM, letterSpacing: '0.14em', textTransform: 'uppercase', fontFamily: 'JetBrains Mono, monospace', padding: '0 4px 10px' }}>Suggested · from your mesh</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 10, marginBottom: 22 }}>
          {T_CALL_SUGGESTED.map(c => (
            <div key={c.name} style={{
              display: 'flex', alignItems: 'center', gap: 12,
              padding: '13px 15px', background: M_SURFACE,
              border: '1px solid ' + M_BORDER_SOFT, borderRadius: 12,
            }}>
              <MTile size={42} bg={c.bg} color="#fff" label={c.initials} img={c.avatar} radius={21}/>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 14, fontWeight: 500, color: M_FG, fontFamily: 'Geist', letterSpacing: '-0.01em', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{c.name}</div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 7, marginTop: 3 }}>
                  <span style={{ fontSize: 11, color: M_FG_DIM, fontFamily: 'JetBrains Mono, monospace' }}>{c.sub}</span>
                </div>
              </div>
              <div style={{ display: 'flex', gap: 6 }}>
                <button onClick={() => onCall && onCall(c, 'audio')} aria-label={'Call ' + c.name} style={{ width: 34, height: 34, borderRadius: 17, background: 'rgba(110,231,183,0.14)', border: 0, color: M_ACCENT, display: 'grid', placeItems: 'center', cursor: 'pointer' }}>{MIc.calls({ s: 15 })}</button>
                <button onClick={() => onCall && onCall(c, 'video')} aria-label={'Video ' + c.name} style={{ width: 34, height: 34, borderRadius: 17, background: 'rgba(96,165,250,0.14)', border: 0, color: M_ACCENT_B, display: 'grid', placeItems: 'center', cursor: 'pointer' }}>
                  <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="m23 7-7 5 7 5z"/><rect x="1" y="5" width="15" height="14" rx="2"/></svg>
                </button>
              </div>
            </div>
          ))}
        </div>

        {/* Privacy footer */}
        <div style={{
          padding: '12px 15px',
          background: 'rgba(110,231,183,0.05)', border: '1px solid rgba(110,231,183,0.14)',
          borderRadius: 11, display: 'flex', alignItems: 'center', gap: 10,
        }}>
          <span style={{ color: M_ACCENT, display: 'grid', placeItems: 'center' }}>{MIc.shield({ s: 14 })}</span>
          <div style={{ flex: 1, fontSize: 12, color: M_FG_MUTED, lineHeight: 1.45 }}>
            Calls are end-to-end encrypted via DIDComm WebRTC. Ajna never sees who you talk to, or when.
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { TScreenCallsEmpty, T_CALL_SUGGESTED });