// Wave 5d — WhatsApp Inbox

const WA_CONVERSAS = [
  { id: 1, n: 'Ana Carolina Silva', t: '31 98877-6654', msg: 'Perfeito, pode confirmar pra mim?', hora: '11:42', nao: 2, online: true, avatar: '#a78bfa', fav: true, tag: 'VIP' },
  { id: 2, n: 'Padaria Pão Dourado', t: '31 3344-5566', msg: 'Bom dia! Vcs entregam colomba no domingo?', hora: '11:18', nao: 1, online: false, avatar: '#fcd34d', fav: false, tag: 'Cliente' },
  { id: 3, n: 'Bruno Oliveira Lopes', t: '31 99112-3344', msg: 'Dá pra fazer o pedido pelo link?', hora: '10:55', nao: 3, online: true, avatar: '#60a5fa', fav: false, tag: 'Lead' },
  { id: 4, n: 'Carolina Mendes', t: '31 98823-1177', msg: 'Obrigada! 🙏 Adorei o atendimento.', hora: '10:14', nao: 0, online: false, avatar: '#f472b6', fav: true, tag: 'VIP' },
  { id: 5, n: 'Restaurante Xapuri', t: '31 3232-8899', msg: 'Podem passar ali amanhã 9h?', hora: '09:47', nao: 0, online: false, avatar: '#34d399', fav: false, tag: 'Cliente' },
  { id: 6, n: 'Diego Ferreira', t: '31 99555-6677', msg: 'Tá rolando desconto pra aniversariante?', hora: 'Ontem', nao: 0, online: false, avatar: '#fb923c', fav: false, tag: 'Lead' },
  { id: 7, n: 'Eduardo Santos', t: '31 99778-1122', msg: 'Vocês fazem entrega no centro?', hora: 'Ontem', nao: 0, online: false, avatar: '#c4b5fd', fav: false, tag: 'Lead' },
  { id: 8, n: 'Fernanda Costa', t: '31 98811-9988', msg: 'Bom dia, gostaria de fazer uma encomenda', hora: '2 dias', nao: 0, online: false, avatar: '#f9a8d4', fav: false, tag: 'Lead' },
  { id: 9, n: 'Grupo Três Marias', t: '31 3190-4477', msg: 'Contrato renovado, anexo em pdf. Abraço!', hora: '2 dias', nao: 0, online: false, avatar: '#93c5fd', fav: false, tag: 'Cliente' },
  { id: 10, n: 'Heloísa Martins', t: '31 98844-6677', msg: 'Amei! Posso indicar pro meu restaurante?', hora: '3 dias', nao: 0, online: false, avatar: '#fca5a5', fav: true, tag: 'Parceiro' },
];

const WA_CHAT = [
  { tipo: 'divider', t: 'HOJE' },
  { de: 'cliente', h: '11:02', t: 'Oi, bom dia! Queria saber se ainda têm o kit brunch completo pra entrega de sábado.' },
  { de: 'eu', h: '11:04', t: 'Bom dia, Ana! Temos sim ✨ Quer com as 4 pessoas ou só 2?' },
  { de: 'cliente', h: '11:05', t: 'Pra 4 pessoas.' },
  { de: 'eu', h: '11:06', t: 'Boa escolha! Inclui pães artesanais, geléia da casa, frios premium, suco natural e um bolo pequeno. Valor: R$ 149.', tpl: true },
  { de: 'cliente', h: '11:08', t: 'Dá pra colocar também a colomba de chocolate?' },
  { de: 'eu', h: '11:10', t: 'Consigo sim, acréscimo de R$ 48. Fecha em R$ 197 com entrega gratuita acima de R$ 150 🎁' },
  { de: 'cliente', h: '11:40', t: 'Perfeito, pode confirmar pra mim?', audio: true, dur: '0:24' },
  { de: 'cliente', h: '11:42', t: '' },
];

const PageWhatsApp = ({ onNavigate }) => {
  const [sel, setSel] = React.useState(WA_CONVERSAS[0]);
  const [input, setInput] = React.useState('');
  const [filter, setFilter] = React.useState('todas');

  return (
    <AppShell current="whatsapp" onNavigate={onNavigate}>
      <PageContainer
        title="WhatsApp"
        subtitle="Inbox unificada · atendimentos, vendas e pós-venda num só lugar."
        maxWidth={1780}
        actions={<>
          <button className="btn btn-outline btn-sm"><Icon name="bar-chart" size={13}/> Relatórios</button>
          <button className="btn btn-primary btn-sm"><Icon name="send" size={13}/> Template</button>
        </>}
      >
        <div style={{ display: 'grid', gridTemplateColumns: '320px 1fr 300px', height: 760, gap: 0, border: '1px solid var(--line-2)', borderRadius: 14, overflow: 'hidden', background: 'var(--bg-1)' }} className="waGrid">
          <style>{`@media (max-width:1200px){.waGrid{grid-template-columns:280px 1fr !important} .waGrid>div:last-child{display:none !important}}`}</style>

          {/* Lista de conversas */}
          <div style={{ borderRight: '1px solid var(--line-1)', display: 'flex', flexDirection: 'column', background: 'var(--bg-1)' }}>
            <div style={{ padding: 14, borderBottom: '1px solid var(--line-1)', display: 'flex', alignItems: 'center', gap: 10 }}>
              <span style={{ width: 34, height: 34, borderRadius: '50%', background: 'linear-gradient(135deg, #25d366, #128c7e)', display: 'grid', placeItems: 'center', color: '#fff' }}><Icon name="whatsapp" size={16}/></span>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--text-0)' }}>Bighorse Delivery</div>
                <div style={{ fontSize: 10.5, color: '#86efac' }}>● Conectado · API oficial</div>
              </div>
            </div>
            <div style={{ padding: 10, borderBottom: '1px solid var(--line-1)' }}>
              <input placeholder="Buscar ou começar nova conversa…" style={{ width: '100%', padding: '7px 12px', background: 'var(--bg-2)', border: '1px solid var(--line-2)', borderRadius: 18, color: 'var(--text-1)', fontSize: 12.5 }}/>
              <div style={{ display: 'flex', gap: 4, marginTop: 8 }}>
                {[['todas', 'Todas'], ['nao-lidas', 'Não lidas'], ['favoritas', 'Favoritas']].map(([v, l]) => (
                  <button key={v} onClick={() => setFilter(v)} style={{
                    padding: '4px 10px', borderRadius: 12, fontSize: 11, fontWeight: 500,
                    background: filter === v ? 'var(--accent-soft-14)' : 'var(--bg-2)',
                    color: filter === v ? 'var(--accent-text)' : 'var(--text-3)',
                    border: '1px solid ' + (filter === v ? 'var(--accent-soft-30)' : 'var(--line-2)'),
                  }}>{l}</button>
                ))}
              </div>
            </div>
            <div style={{ flex: 1, overflowY: 'auto' }}>
              {WA_CONVERSAS.map(c => (
                <div key={c.id} onClick={() => setSel(c)} style={{
                  display: 'flex', gap: 12, padding: '12px 14px', cursor: 'pointer',
                  background: sel.id === c.id ? 'var(--accent-soft-08)' : 'transparent',
                  borderBottom: '1px solid var(--line-1)',
                }}>
                  <span style={{ position: 'relative', width: 46, height: 46, borderRadius: '50%', background: `linear-gradient(135deg, ${c.avatar}, var(--accent-2))`, display: 'grid', placeItems: 'center', fontSize: 13, fontWeight: 700, color: '#fff', flexShrink: 0 }}>
                    {c.n.split(' ').map(s => s[0]).slice(0, 2).join('')}
                    {c.online && <span style={{ position: 'absolute', bottom: 1, right: 1, width: 11, height: 11, borderRadius: '50%', background: '#25d366', border: '2px solid var(--bg-1)' }}/>}
                  </span>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 6 }}>
                      <span style={{ fontSize: 13.5, fontWeight: 600, color: 'var(--text-0)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{c.n}</span>
                      <span style={{ fontSize: 10.5, color: c.nao > 0 ? '#25d366' : 'var(--text-4)', flexShrink: 0 }}>{c.hora}</span>
                    </div>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 3 }}>
                      <span style={{ fontSize: 12, color: 'var(--text-3)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1, paddingRight: 6 }}>{c.msg}</span>
                      {c.nao > 0 && <span style={{ minWidth: 18, height: 18, padding: '0 6px', borderRadius: 10, background: '#25d366', color: '#fff', fontSize: 10, fontWeight: 700, display: 'grid', placeItems: 'center' }}>{c.nao}</span>}
                    </div>
                    <div style={{ display: 'flex', gap: 4, marginTop: 5 }}>
                      <span style={{ fontSize: 9.5, padding: '1px 6px', borderRadius: 3, background: 'var(--bg-3)', color: 'var(--text-4)', fontWeight: 600, textTransform: 'uppercase' }}>{c.tag}</span>
                      {c.fav && <span style={{ fontSize: 10, color: '#fcd34d' }}>★</span>}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Chat */}
          <div style={{ display: 'flex', flexDirection: 'column', background: 'linear-gradient(180deg, #0c0b1a, #0a091c)' }}>
            <div style={{ padding: '12px 18px', borderBottom: '1px solid var(--line-1)', background: 'var(--bg-1)', display: 'flex', alignItems: 'center', gap: 12 }}>
              <span style={{ width: 42, height: 42, borderRadius: '50%', background: `linear-gradient(135deg, ${sel.avatar}, var(--accent-2))`, display: 'grid', placeItems: 'center', fontSize: 12, fontWeight: 700, color: '#fff' }}>
                {sel.n.split(' ').map(s => s[0]).slice(0, 2).join('')}
              </span>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--text-0)' }}>{sel.n}</div>
                <div style={{ fontSize: 11, color: sel.online ? '#86efac' : 'var(--text-4)' }}>{sel.online ? 'online agora' : `visto por último ${sel.hora}`}</div>
              </div>
              <div style={{ display: 'flex', gap: 6 }}>
                <button className="btn btn-outline btn-sm"><Icon name="phone" size={12}/></button>
                <button className="btn btn-outline btn-sm"><Icon name="video" size={12}/></button>
                <button className="btn btn-outline btn-sm"><Icon name="search" size={12}/></button>
              </div>
            </div>

            <div style={{ flex: 1, overflowY: 'auto', padding: '20px 30px', backgroundImage: 'radial-gradient(var(--accent-soft-08) 1px, transparent 1px)', backgroundSize: '28px 28px' }}>
              {WA_CHAT.map((m, i) => {
                if (m.tipo === 'divider') return (
                  <div key={i} style={{ textAlign: 'center', margin: '10px 0 20px' }}>
                    <span style={{ fontSize: 10.5, padding: '4px 12px', borderRadius: 10, background: 'var(--bg-2)', color: 'var(--text-4)', fontWeight: 600, letterSpacing: '.05em' }}>{m.t}</span>
                  </div>
                );
                const mine = m.de === 'eu';
                return (
                  <div key={i} style={{ display: 'flex', justifyContent: mine ? 'flex-end' : 'flex-start', marginBottom: 6 }}>
                    <div style={{
                      maxWidth: '65%', padding: m.audio ? '10px 14px' : '8px 12px 6px', borderRadius: 10,
                      background: mine ? 'linear-gradient(135deg, #005c4b, #025c4a)' : 'var(--bg-2)',
                      color: '#e9e9ee', position: 'relative',
                      borderBottomRightRadius: mine ? 2 : 10, borderBottomLeftRadius: mine ? 10 : 2,
                      boxShadow: '0 1px 2px rgba(0,0,0,.3)',
                    }}>
                      {m.tpl && <div style={{ fontSize: 10, color: '#86efac', marginBottom: 4, textTransform: 'uppercase', letterSpacing: '.05em', fontWeight: 700 }}>📋 Template · kit_brunch</div>}
                      {m.audio ? (
                        <div style={{ display: 'flex', alignItems: 'center', gap: 10, minWidth: 200 }}>
                          <span style={{ width: 30, height: 30, borderRadius: '50%', background: '#25d366', display: 'grid', placeItems: 'center', color: '#fff' }}><Icon name="play" size={12}/></span>
                          <div style={{ flex: 1 }}>
                            <div style={{ height: 18, display: 'flex', alignItems: 'center', gap: 2 }}>
                              {Array.from({ length: 25 }).map((_, j) => (
                                <span key={j} style={{ width: 2, height: 4 + (j * 37 % 12), background: '#94e2d6', borderRadius: 1 }}/>
                              ))}
                            </div>
                          </div>
                          <span style={{ fontSize: 10, color: '#94e2d6', fontFamily: 'JetBrains Mono, monospace' }}>{m.dur}</span>
                        </div>
                      ) : (
                        <div style={{ fontSize: 13.5, lineHeight: 1.45 }}>{m.t}</div>
                      )}
                      <div style={{ fontSize: 10, color: '#94a3b8', textAlign: 'right', marginTop: 2, display: 'flex', alignItems: 'center', gap: 4, justifyContent: 'flex-end' }}>
                        {m.h} {mine && <Icon name="check" size={11} style={{ color: '#53bdeb' }}/>}
                      </div>
                    </div>
                  </div>
                );
              })}
              <div style={{ display: 'flex', gap: 6, color: 'var(--text-4)', fontSize: 11, marginTop: 8, paddingLeft: 4 }}>
                <span style={{ display: 'inline-flex', gap: 2 }}>
                  <span style={{ width: 5, height: 5, borderRadius: '50%', background: 'var(--text-3)', animation: 'blink 1.4s infinite' }}/>
                  <span style={{ width: 5, height: 5, borderRadius: '50%', background: 'var(--text-3)', animation: 'blink 1.4s infinite .2s' }}/>
                  <span style={{ width: 5, height: 5, borderRadius: '50%', background: 'var(--text-3)', animation: 'blink 1.4s infinite .4s' }}/>
                </span>
                digitando…
              </div>
              <style>{`@keyframes blink{0%,80%,100%{opacity:.3}40%{opacity:1}}`}</style>
            </div>

            <div style={{ padding: 12, background: 'var(--bg-1)', borderTop: '1px solid var(--line-1)', display: 'flex', alignItems: 'center', gap: 10 }}>
              <button style={{ color: 'var(--text-3)', width: 34, height: 34, borderRadius: 8, display: 'grid', placeItems: 'center' }}><Icon name="smile" size={17}/></button>
              <button style={{ color: 'var(--text-3)', width: 34, height: 34, borderRadius: 8, display: 'grid', placeItems: 'center' }}><Icon name="paperclip" size={17}/></button>
              <input value={input} onChange={e => setInput(e.target.value)} placeholder="Digite uma mensagem…" style={{ flex: 1, padding: '9px 14px', background: 'var(--bg-2)', border: '1px solid var(--line-2)', borderRadius: 20, color: 'var(--text-0)', fontSize: 13.5 }}/>
              <button style={{ width: 40, height: 40, borderRadius: '50%', background: 'linear-gradient(135deg, #25d366, #128c7e)', color: '#fff', display: 'grid', placeItems: 'center', boxShadow: '0 4px 12px rgba(37,211,102,.35)' }}>
                <Icon name={input ? 'send' : 'mic'} size={15}/>
              </button>
            </div>
          </div>

          {/* Perfil do contato */}
          <div style={{ background: 'var(--bg-1)', overflowY: 'auto' }}>
            <div style={{ padding: '26px 20px', textAlign: 'center', borderBottom: '1px solid var(--line-1)' }}>
              <span style={{ width: 88, height: 88, borderRadius: '50%', background: `linear-gradient(135deg, ${sel.avatar}, var(--accent-2))`, display: 'grid', placeItems: 'center', fontSize: 28, fontWeight: 700, color: '#fff', margin: '0 auto 12px' }}>
                {sel.n.split(' ').map(s => s[0]).slice(0, 2).join('')}
              </span>
              <h3 style={{ fontSize: 17, fontWeight: 700, color: 'var(--text-0)' }}>{sel.n}</h3>
              <div style={{ fontSize: 12, color: 'var(--text-3)', marginTop: 3 }}>+55 {sel.t}</div>
              {sel.fav && <span style={{ display: 'inline-block', marginTop: 8, fontSize: 10, padding: '3px 10px', borderRadius: 10, background: 'rgba(251,191,36,.18)', color: '#fcd34d', fontWeight: 700, letterSpacing: '.05em' }}>⭐ CLIENTE VIP</span>}
            </div>

            <div style={{ padding: 16, borderBottom: '1px solid var(--line-1)' }}>
              <h4 style={{ fontSize: 10.5, textTransform: 'uppercase', letterSpacing: '.08em', color: 'var(--text-4)', fontWeight: 700, marginBottom: 10 }}>Notas do contato</h4>
              <div style={{ fontSize: 12.5, color: 'var(--text-1)', lineHeight: 1.55, padding: 11, background: 'rgba(251,191,36,.08)', border: '1px solid rgba(251,191,36,.22)', borderRadius: 8 }}>
                Cliente há 2 anos. Prefere brunch aos sábados. Marido alérgico a frutos do mar. Sempre paga em Pix antecipado.
              </div>
            </div>

            <div style={{ padding: 16, borderBottom: '1px solid var(--line-1)' }}>
              <h4 style={{ fontSize: 10.5, textTransform: 'uppercase', letterSpacing: '.08em', color: 'var(--text-4)', fontWeight: 700, marginBottom: 10 }}>Resumo CRM</h4>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
                {[['LTV', 'R$ 8.420'], ['Pedidos', '34'], ['Ticket médio', 'R$ 247'], ['NPS', '10/10']].map(([l, v]) => (
                  <div key={l} style={{ padding: 10, background: 'var(--bg-2)', border: '1px solid var(--line-1)', borderRadius: 7 }}>
                    <div style={{ fontSize: 10, color: 'var(--text-4)' }}>{l}</div>
                    <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--text-0)', marginTop: 2 }}>{v}</div>
                  </div>
                ))}
              </div>
            </div>

            <div style={{ padding: 16, borderBottom: '1px solid var(--line-1)' }}>
              <h4 style={{ fontSize: 10.5, textTransform: 'uppercase', letterSpacing: '.08em', color: 'var(--text-4)', fontWeight: 700, marginBottom: 10 }}>Mídia, links e docs</h4>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 4 }}>
                {[0, 1, 2, 3, 4, 5].map(i => (
                  <div key={i} style={{ aspectRatio: '1/1', borderRadius: 6, background: `linear-gradient(135deg, hsl(${i * 55 + 220},40%,30%), hsl(${i * 55 + 280},40%,20%))` }}/>
                ))}
              </div>
            </div>

            <div style={{ padding: 16 }}>
              <button className="btn btn-outline btn-sm" style={{ width: '100%', marginBottom: 6 }}><Icon name="bell" size={12}/> Silenciar</button>
              <button className="btn btn-outline btn-sm" style={{ width: '100%', color: '#fca5a5' }}><Icon name="ban" size={12}/> Bloquear contato</button>
            </div>
          </div>
        </div>
      </PageContainer>
    </AppShell>
  );
};

Object.assign(window, { WA_CONVERSAS, WA_CHAT, PageWhatsApp });