// Original "Pulse Inbox" mockup — combines a conversation list, an open thread,
// and a kanban-style queue. Animated typing + bubble reveal.

const inboxConversations = [
  { name: 'Marina Costa',     msg: 'Oi! Vocês têm o plano em estoque?', time: '14:32', unread: 2, color: '#fde2e4', initial: 'M', online: true },
  { name: 'Rodrigo Almeida',  msg: 'Perfeito, fechado então 👍',          time: '14:28', unread: 0, color: '#dcc4fa', initial: 'R' },
  { name: 'Carla Mendes',     msg: 'Pode me mandar a proposta?',          time: '14:11', unread: 1, color: '#cdeac0', initial: 'C', online: true },
  { name: 'Equipe Comercial', msg: 'João: enviou um arquivo',             time: '13:58', unread: 0, color: '#ffe9b8', initial: 'E' },
  { name: 'Lucas Pereira',    msg: 'Boa tarde, gostaria de informações…', time: '13:42', unread: 0, color: '#bee3f8', initial: 'L' },
];

const thread = [
  { from: 'in',  text: 'Oi! Tudo bem? Vi o anúncio de vocês no Instagram 😊', time: '14:30' },
  { from: 'out', text: 'Olá Marina! Tudo ótimo. Posso te ajudar com algo específico?', time: '14:31', agent: 'Júlia' },
  { from: 'in',  text: 'Vocês têm o plano Premium em estoque?', time: '14:32' },
];

const kanban = {
  Novos:        [{ name: 'Marina Costa',  tag: 'Site',      pulse: true  }, { name: 'Pedro Lima',    tag: 'Indicação' }],
  'Em atendimento': [{ name: 'Carla Mendes', tag: 'WhatsApp' }, { name: 'Rafael Souza', tag: 'Anúncio' }, { name: 'Júlia Reis', tag: 'Site' }],
  'Aguardando':  [{ name: 'Bruno Dias',   tag: 'Indicação' }],
  Fechados:      [{ name: 'Rodrigo A.',   tag: 'Anúncio', won: true }, { name: 'Letícia M.', tag: 'Site', won: true }],
};

function InboxMockup() {
  const [showTyping, setShowTyping] = React.useState(false);
  const [reply, setReply]           = React.useState(null);

  React.useEffect(() => {
    const t1 = setTimeout(() => setShowTyping(true),  1400);
    const t2 = setTimeout(() => { setShowTyping(false); setReply({ text: 'Sim, temos! Posso reservar para você agora mesmo. Qual a melhor forma de pagamento?', time: '14:33', agent: 'Júlia' }); }, 3600);
    return () => { clearTimeout(t1); clearTimeout(t2); };
  }, []);

  return (
    <div className="relative w-full">
      {/* Outer browser-ish frame */}
      <div className="relative rounded-2xl bg-white shadow-glowLg ring-1 ring-black/5 overflow-hidden">
        {/* Top bar */}
        <div className="flex items-center gap-2 px-4 py-3 border-b border-ink-100 bg-white">
          <span className="w-2.5 h-2.5 rounded-full bg-rose-300" />
          <span className="w-2.5 h-2.5 rounded-full bg-amber-300" />
          <span className="w-2.5 h-2.5 rounded-full bg-emerald-300" />
          <div className="ml-3 flex-1 flex items-center gap-2">
            <div className="hidden sm:flex items-center gap-2 text-[11px] text-ink-500 px-2.5 py-1 rounded-md bg-ink-100/60">
              <span className="w-1.5 h-1.5 rounded-full bg-emerald-500" />
              app.talkpulse.com.br
            </div>
          </div>
          <div className="text-[11px] text-ink-300">v2.4</div>
        </div>

        {/* Body: 3 columns */}
        <div className="grid grid-cols-12 min-h-[460px]">
          {/* Left rail — conversations */}
          <aside className="col-span-12 md:col-span-4 border-r border-ink-100 bg-brand-50/40">
            <div className="px-4 pt-4 pb-3 flex items-center justify-between">
              <div className="font-semibold text-sm text-ink-900">Conversas</div>
              <span className="text-[10px] font-semibold text-brand-600 bg-brand-100 rounded-full px-2 py-0.5">5 abertas</span>
            </div>
            <div className="px-3 pb-2">
              <div className="flex items-center gap-2 bg-white rounded-lg px-2.5 py-1.5 ring-1 ring-ink-100">
                <SearchIcon size={14} stroke="#9b9bb3" />
                <span className="text-[11px] text-ink-300">Buscar contato…</span>
              </div>
            </div>
            <ul className="px-2 pb-2 space-y-1">
              {inboxConversations.map((c, i) => (
                <li key={i} className={`flex items-center gap-3 p-2 rounded-lg cursor-default ${i === 0 ? 'bg-white ring-1 ring-brand-200 shadow-sm' : 'hover:bg-white/60'}`}>
                  <div className="relative">
                    <div className="w-9 h-9 rounded-full grid place-items-center text-[13px] font-semibold text-ink-900" style={{ background: c.color }}>{c.initial}</div>
                    {c.online && <span className="absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 rounded-full bg-emerald-500 ring-2 ring-white" />}
                  </div>
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center justify-between">
                      <span className="text-[12.5px] font-semibold text-ink-900 truncate">{c.name}</span>
                      <span className="text-[10px] text-ink-300 ml-2 shrink-0">{c.time}</span>
                    </div>
                    <div className="flex items-center justify-between gap-2">
                      <span className="text-[11.5px] text-ink-500 truncate">{c.msg}</span>
                      {c.unread > 0 && <span className="text-[10px] font-bold text-white bg-brand-500 rounded-full px-1.5 py-0.5 leading-none">{c.unread}</span>}
                    </div>
                  </div>
                </li>
              ))}
            </ul>
          </aside>

          {/* Middle — open thread */}
          <section className="col-span-12 md:col-span-5 flex flex-col bg-[#f3efe7]/40 relative">
            {/* Thread header */}
            <div className="flex items-center gap-3 px-4 py-3 bg-white border-b border-ink-100">
              <div className="w-9 h-9 rounded-full grid place-items-center text-[13px] font-semibold text-ink-900" style={{ background: '#fde2e4' }}>M</div>
              <div className="flex-1">
                <div className="text-[13px] font-semibold text-ink-900 leading-tight">Marina Costa</div>
                <div className="text-[11px] text-ink-500 flex items-center gap-1.5"><span className="w-1.5 h-1.5 rounded-full bg-emerald-500" /> online · +55 11 9 9876-5432</div>
              </div>
              <div className="hidden sm:flex items-center gap-1.5">
                <span className="text-[10px] font-semibold text-brand-700 bg-brand-100 rounded-full px-2 py-0.5">Lead quente</span>
                <span className="text-[10px] font-semibold text-emerald-700 bg-emerald-100 rounded-full px-2 py-0.5">VIP</span>
              </div>
              <button className="p-1.5 rounded-md hover:bg-ink-100/60"><MoreIcon size={16} stroke="#4a4a6a" /></button>
            </div>

            {/* Bubbles */}
            <div className="flex-1 px-4 py-4 space-y-2.5 overflow-hidden">
              <div className="text-center text-[10px] text-ink-300">Hoje</div>

              {thread.map((m, i) => (
                m.from === 'in' ? (
                  <div key={i} className="flex">
                    <div className="relative bubble-in max-w-[78%] bg-white rounded-2xl rounded-bl-sm px-3 py-2 shadow-sm">
                      <p className="text-[12.5px] text-ink-900 leading-snug">{m.text}</p>
                      <div className="text-[9.5px] text-ink-300 mt-1 text-right">{m.time}</div>
                    </div>
                  </div>
                ) : (
                  <div key={i} className="flex justify-end">
                    <div className="relative bubble-out max-w-[78%] bg-[#dcf8c6] rounded-2xl rounded-br-sm px-3 py-2 shadow-sm">
                      <div className="text-[10px] font-semibold text-emerald-700 mb-0.5">{m.agent}</div>
                      <p className="text-[12.5px] text-ink-900 leading-snug">{m.text}</p>
                      <div className="text-[9.5px] text-ink-500 mt-1 text-right flex items-center justify-end gap-1">{m.time}<CheckIcon size={10} stroke="#3b82f6" /></div>
                    </div>
                  </div>
                )
              ))}

              {showTyping && (
                <div className="flex">
                  <div className="bubble-in relative bg-white rounded-2xl rounded-bl-sm px-3 py-2 shadow-sm">
                    <div className="typing"><span /><span /><span /></div>
                  </div>
                </div>
              )}

              {reply && (
                <div className="flex justify-end">
                  <div className="relative bubble-out max-w-[78%] bg-[#dcf8c6] rounded-2xl rounded-br-sm px-3 py-2 shadow-sm" style={{ animation: 'fadeUp .4s ease both' }}>
                    <div className="text-[10px] font-semibold text-emerald-700 mb-0.5 flex items-center gap-1">
                      <SparkleIcon size={10} stroke="#9d35f0" />
                      {reply.agent} · resposta sugerida pela IA
                    </div>
                    <p className="text-[12.5px] text-ink-900 leading-snug">{reply.text}</p>
                    <div className="text-[9.5px] text-ink-500 mt-1 text-right flex items-center justify-end gap-1">{reply.time}<CheckIcon size={10} stroke="#3b82f6" /></div>
                  </div>
                </div>
              )}
            </div>

            {/* Composer */}
            <div className="px-3 py-2.5 bg-white border-t border-ink-100 flex items-center gap-2">
              <button className="p-1.5 rounded-md hover:bg-ink-100/60"><SmileIcon size={16} stroke="#4a4a6a" /></button>
              <button className="p-1.5 rounded-md hover:bg-ink-100/60"><PaperclipIcon size={16} stroke="#4a4a6a" /></button>
              <div className="flex-1 text-[12px] text-ink-300 bg-ink-100/60 rounded-full px-3 py-1.5">Digitar mensagem…</div>
              <button className="w-8 h-8 rounded-full grid place-items-center bg-brand-gradient text-white shadow-md"><SendIcon size={14} /></button>
            </div>
          </section>

          {/* Right — kanban */}
          <aside className="col-span-12 md:col-span-3 border-l border-ink-100 bg-white">
            <div className="px-3 pt-4 pb-2 flex items-center justify-between">
              <div className="text-sm font-semibold text-ink-900">Funil</div>
              <button className="text-[10px] text-ink-500 flex items-center gap-1"><FilterIcon size={12} stroke="#4a4a6a" />Filtrar</button>
            </div>
            <div className="px-3 pb-3 space-y-3">
              {Object.entries(kanban).map(([col, cards]) => (
                <div key={col}>
                  <div className="flex items-center justify-between mb-1.5">
                    <span className="text-[10.5px] font-semibold uppercase tracking-wide text-ink-500">{col}</span>
                    <span className="text-[10px] text-ink-300">{cards.length}</span>
                  </div>
                  <div className="space-y-1.5">
                    {cards.map((card, i) => (
                      <div key={i} className={`relative rounded-lg p-2 ring-1 ${card.won ? 'bg-emerald-50 ring-emerald-200' : card.pulse ? 'bg-brand-50 ring-brand-200' : 'bg-ink-100/40 ring-ink-100'}`}>
                        {card.pulse && <span className="absolute -top-1 -right-1 w-2.5 h-2.5 rounded-full bg-brand-500 ring-2 ring-white" />}
                        <div className="text-[11.5px] font-semibold text-ink-900 truncate">{card.name}</div>
                        <div className="text-[10px] text-ink-500 mt-0.5 flex items-center gap-1">
                          <span className={`w-1.5 h-1.5 rounded-full ${card.won ? 'bg-emerald-500' : 'bg-brand-400'}`} />
                          {card.tag}
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              ))}
            </div>
          </aside>
        </div>

        {/* Bottom status strip */}
        <div className="flex items-center justify-between px-4 py-2 border-t border-ink-100 bg-white">
          <div className="flex items-center gap-3 text-[10.5px] text-ink-500">
            <span className="flex items-center gap-1"><span className="w-1.5 h-1.5 rounded-full bg-emerald-500" />4 atendentes online</span>
            <span className="hidden sm:inline-flex items-center gap-1"><ClockIcon size={11} stroke="#4a4a6a" />TMA 1m 42s</span>
          </div>
          <div className="text-[10.5px] text-ink-500 flex items-center gap-1"><TrendingUp size={11} stroke="#9d35f0" /> +28% conversão / 7d</div>
        </div>
      </div>

      {/* Floating chips */}
      <div className="hidden md:flex absolute -left-6 top-10 bg-white rounded-xl shadow-glow ring-1 ring-black/5 px-3 py-2 items-center gap-2">
        <div className="w-7 h-7 rounded-lg bg-brand-gradient text-white grid place-items-center"><BotIcon size={14} stroke="#fff" /></div>
        <div>
          <div className="text-[10px] text-ink-500 leading-none">Bot Pulse</div>
          <div className="text-[11.5px] font-semibold text-ink-900 leading-tight">62 leads qualificados hoje</div>
        </div>
      </div>
      <div className="hidden md:flex absolute -right-4 bottom-12 bg-white rounded-xl shadow-glow ring-1 ring-black/5 px-3 py-2 items-center gap-2">
        <div className="w-7 h-7 rounded-lg bg-emerald-100 text-emerald-700 grid place-items-center"><CheckIcon size={14} stroke="#059669" /></div>
        <div>
          <div className="text-[10px] text-ink-500 leading-none">SLA</div>
          <div className="text-[11.5px] font-semibold text-ink-900 leading-tight">98,4% no prazo</div>
        </div>
      </div>

      <style>{`
        @keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
      `}</style>
    </div>
  );
}

window.InboxMockup = InboxMockup;