function ChannelBadge({ channel }) {
  const colors = {
    WhatsApp: '#2bb741',
    Email: '#e5a22a',
    SMS: '#00a4b7',
  };

  return (
    <span
      style={{
        display: 'inline-flex',
        alignItems: 'center',
        borderRadius: 999,
        padding: '0.22rem 0.6rem',
        background: `${colors[channel] || '#003150'}16`,
        color: colors[channel] || '#003150',
        fontSize: '0.8rem',
        fontWeight: 700,
      }}
    >
      {channel}
    </span>
  );
}

export function ChatConversationList({
  contacts,
  activeContactId,
  onSelectContact,
  isMobile = false,
}) {
  return (
    <aside
      style={{
        background: '#fff',
        border: '1px solid var(--color-border)',
        borderRadius: '28px',
        padding: '1rem',
        display: 'grid',
        gap: '0.85rem',
      }}
    >
      <div>
        <strong style={{ display: 'block', fontSize: '1.08rem' }}>Conversas ativas</strong>
        <span style={{ color: 'var(--color-text-soft)' }}>
          WhatsApp, SMS e email em uma fila visual.
        </span>
      </div>

      <div
        style={{
          display: 'grid',
          gap: '0.75rem',
          gridTemplateColumns: isMobile ? '1fr' : '1fr',
        }}
      >
        {contacts.map((contact) => {
          const isActive = contact.id === activeContactId;

          return (
            <button
              key={contact.id}
              type="button"
              onClick={() => onSelectContact(contact.id)}
              style={{
                border: '1px solid',
                borderColor: isActive ? 'rgba(0, 164, 183, 0.26)' : 'var(--color-border)',
                background: isActive ? 'rgba(0, 164, 183, 0.08)' : '#fff',
                borderRadius: '20px',
                padding: '1rem',
                textAlign: 'left',
                display: 'grid',
                gap: '0.6rem',
              }}
            >
              <div style={{ display: 'flex', justifyContent: 'space-between', gap: '1rem' }}>
                <strong>{contact.name}</strong>
                <span style={{ fontSize: '0.82rem', color: 'var(--color-text-soft)' }}>
                  {contact.time}
                </span>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', gap: '0.75rem' }}>
                <ChannelBadge channel={contact.channel} />
                {contact.unread ? (
                  <span
                    style={{
                      minWidth: 24,
                      borderRadius: 999,
                      padding: '0.15rem 0.45rem',
                      background: 'var(--color-secondary)',
                      color: '#fff',
                      fontSize: '0.78rem',
                      fontWeight: 700,
                      textAlign: 'center',
                    }}
                  >
                    {contact.unread}
                  </span>
                ) : null}
              </div>
              <span style={{ color: 'var(--color-text-soft)' }}>{contact.preview}</span>
            </button>
          );
        })}
      </div>
    </aside>
  );
}