import { useState, useEffect, useCallback } from 'react'
import {
  X, ChevronLeft, ChevronRight,
  Inbox, Users, MessageSquare, Megaphone,
  Bot, AlertTriangle, HelpCircle, MessageCircle,
  Zap, CheckCircle, ArrowRight, ShieldAlert, Package,
} from 'lucide-react'

interface Page {
  id: string
  icon: React.ReactNode
  color: string
  title: string
  subtitle: string
  content: React.ReactNode
}

const PAGES: Page[] = [
  {
    id: 'overview',
    icon: <Inbox size={28} />,
    color: 'from-[#00a884] to-[#008f72]',
    title: 'Inbox Interna',
    subtitle: 'Central de comunicação da equipe',
    content: (
      <div className="space-y-4">
        <p className="text-[14px] text-[#3b4a50] leading-relaxed">
          O <strong>Inbox Interna</strong> centraliza toda a comunicação operacional da equipe em um único lugar — sem precisar sair do sistema.
        </p>
        <div className="grid grid-cols-2 gap-3">
          {[
            { icon: <Inbox size={16} />, label: 'Inbox', desc: 'Escalações e pedidos de ajuda da IA', color: 'bg-cyan-50 text-cyan-700 border-cyan-100' },
            { icon: <Users size={16} />, label: 'Equipe', desc: 'Mensagens diretas entre colaboradores', color: 'bg-green-50 text-green-700 border-green-100' },
            { icon: <MessageSquare size={16} />, label: 'Grupos', desc: 'Chat por setor operacional', color: 'bg-indigo-50 text-indigo-700 border-indigo-100' },
            { icon: <Megaphone size={16} />, label: 'Avisos', desc: 'Comunicados para toda a equipe', color: 'bg-amber-50 text-amber-700 border-amber-100' },
          ].map(item => (
            <div key={item.label} className={`flex flex-col gap-1.5 p-3 rounded-xl border ${item.color}`}>
              <div className="flex items-center gap-2 font-semibold text-[13px]">
                {item.icon}
                {item.label}
              </div>
              <p className="text-[11px] opacity-80 leading-snug">{item.desc}</p>
            </div>
          ))}
        </div>
        <div className="flex items-start gap-2 bg-[#f0fdf4] border border-green-100 rounded-xl px-3 py-2.5">
          <Zap size={14} className="text-green-600 flex-shrink-0 mt-0.5" />
          <p className="text-[12px] text-green-800">
            Tudo em tempo real — mensagens chegam instantaneamente sem precisar recarregar a página.
          </p>
        </div>
      </div>
    ),
  },
  {
    id: 'inbox',
    icon: <Bot size={28} />,
    color: 'from-cyan-500 to-cyan-700',
    title: 'Aba Inbox',
    subtitle: 'Escalações e pedidos da IA',
    content: (
      <div className="space-y-4">
        <p className="text-[14px] text-[#3b4a50] leading-relaxed">
          O Inbox reúne situações que precisam de atenção humana — geradas automaticamente pela IA ou pelos próprios colaboradores.
        </p>
        <div className="space-y-2.5">
          {[
            {
              icon: <AlertTriangle size={15} className="text-amber-500" />,
              type: 'Escalação',
              desc: 'Cliente pediu para falar com um humano no WhatsApp. A IA pausa e aguarda você responder.',
              bg: 'bg-amber-50 border-amber-100',
            },
            {
              icon: <Bot size={15} className="text-cyan-500" />,
              type: 'Human API',
              desc: 'A IA não soube responder e pediu ajuda. Você responde aqui e ela continua a conversa com o cliente.',
              bg: 'bg-cyan-50 border-cyan-100',
            },
            {
              icon: <HelpCircle size={15} className="text-orange-500" />,
              type: 'Pedido de Ajuda',
              desc: 'Um colaborador abriu uma dúvida interna sobre um procedimento ou pedido.',
              bg: 'bg-orange-50 border-orange-100',
            },
            {
              icon: <MessageCircle size={15} className="text-slate-500" />,
              type: 'Mensagem / Sistema',
              desc: 'Anotações de contexto sobre protocolos e avisos automáticos do sistema.',
              bg: 'bg-slate-50 border-slate-100',
            },
          ].map(item => (
            <div key={item.type} className={`flex gap-3 p-3 rounded-xl border ${item.bg}`}>
              <div className="mt-0.5 flex-shrink-0">{item.icon}</div>
              <div>
                <p className="text-[12px] font-semibold text-[#111b21]">{item.type}</p>
                <p className="text-[11px] text-[#54656f] leading-snug mt-0.5">{item.desc}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    ),
  },
  {
    id: 'equipe',
    icon: <Users size={28} />,
    color: 'from-[#25d366] to-[#128c7e]',
    title: 'Aba Equipe',
    subtitle: 'Mensagens diretas entre colaboradores',
    content: (
      <div className="space-y-4">
        <p className="text-[14px] text-[#3b4a50] leading-relaxed">
          Converse diretamente com qualquer colega — como um WhatsApp interno. As mensagens chegam em tempo real com badge de não lidas.
        </p>
        <div className="space-y-3">
          <div className="bg-[#f0f2f5] rounded-2xl p-3 space-y-2">
            <div className="flex items-end gap-2">
              <div className="w-6 h-6 rounded-full bg-indigo-400 flex items-center justify-center text-white text-[10px] font-bold flex-shrink-0">M</div>
              <div className="bg-white rounded-2xl rounded-bl-sm px-3 py-1.5 text-[12px] text-[#111b21] shadow-sm max-w-[75%]">
                Monique, o pedido #456 está separado?
              </div>
            </div>
            <div className="flex items-end justify-end gap-2">
              <div className="bg-[#d9fdd3] rounded-2xl rounded-br-sm px-3 py-1.5 text-[12px] text-[#111b21] shadow-sm max-w-[75%]">
                Sim! Já encaminhei para embalagem 👍
              </div>
              <div className="w-6 h-6 rounded-full bg-[#00a884] flex items-center justify-center text-white text-[10px] font-bold flex-shrink-0">V</div>
            </div>
          </div>
          <div className="space-y-2">
            {[
              'Clique em um colaborador na coluna esquerda para abrir o chat',
              'Badge verde mostra quantas mensagens não foram lidas',
              'Indicador de presença: verde = online, amarelo = ocupado',
            ].map((tip, i) => (
              <div key={i} className="flex items-start gap-2">
                <CheckCircle size={13} className="text-[#00a884] flex-shrink-0 mt-0.5" />
                <p className="text-[12px] text-[#3b4a50]">{tip}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    ),
  },
  {
    id: 'grupos',
    icon: <MessageSquare size={28} />,
    color: 'from-indigo-500 to-indigo-700',
    title: 'Aba Grupos',
    subtitle: 'Canal de comunicação por setor',
    content: (
      <div className="space-y-4">
        <p className="text-[14px] text-[#3b4a50] leading-relaxed">
          Cada setor operacional tem um grupo dedicado — criado automaticamente. É o canal do turno: dúvidas, alinhamentos e avisos do setor.
        </p>
        <div className="bg-indigo-50 border border-indigo-100 rounded-xl p-3 space-y-2">
          <p className="text-[11px] font-semibold text-indigo-700 uppercase tracking-wide">Grupos criados automaticamente</p>
          <div className="grid grid-cols-3 gap-1.5">
            {['Cotação', 'Separação', 'Embalagem', 'Auditoria', 'Fiscal', 'Expedição'].map((s, i) => {
              const colors = ['#6366f1','#f59e0b','#10b981','#ef4444','#8b5cf6','#3b82f6']
              return (
                <div key={s} className="flex items-center gap-1.5 bg-white rounded-lg px-2 py-1.5 border border-indigo-100">
                  <div className="w-5 h-5 rounded-full flex items-center justify-center text-white text-[9px] font-bold flex-shrink-0"
                    style={{ backgroundColor: colors[i] }}>
                    {s[0]}
                  </div>
                  <span className="text-[11px] text-[#111b21] font-medium truncate">{s}</span>
                </div>
              )
            })}
          </div>
        </div>
        <div className="flex items-start gap-2 bg-slate-50 border border-slate-100 rounded-xl px-3 py-2.5">
          <ArrowRight size={13} className="text-indigo-500 flex-shrink-0 mt-0.5" />
          <p className="text-[12px] text-[#3b4a50]">
            Você só vê os grupos dos setores em que está cadastrado. Owners e managers veem todos.
          </p>
        </div>
      </div>
    ),
  },
  {
    id: 'avisos',
    icon: <Megaphone size={28} />,
    color: 'from-amber-500 to-orange-600',
    title: 'Aba Avisos',
    subtitle: 'Comunicados para toda a equipe',
    content: (
      <div className="space-y-4">
        <p className="text-[14px] text-[#3b4a50] leading-relaxed">
          Avisos chegam para <strong>todos os colaboradores</strong> do sistema ao mesmo tempo — ideal para comunicados urgentes e alinhamentos gerais.
        </p>
        <div className="space-y-2.5">
          <div className="bg-amber-50 border border-amber-200 rounded-xl p-3">
            <div className="flex items-center gap-2 mb-1">
              <div className="w-6 h-6 rounded-full bg-amber-200 flex items-center justify-center text-amber-700 text-[10px] font-bold">G</div>
              <span className="text-[11px] font-semibold text-amber-700">Gerente · agora</span>
            </div>
            <p className="text-[13px] text-[#111b21]">Sistema entra em manutenção em 10 minutos. Finalizem os pedidos em andamento.</p>
          </div>
          <div className="space-y-2">
            {[
              { label: 'Quem pode enviar', desc: 'Apenas Owner e Manager', icon: '🔒' },
              { label: 'Quem recebe', desc: 'Todos os colaboradores conectados', icon: '📡' },
              { label: 'Confirmação', desc: 'Sistema pede confirmação antes de enviar', icon: '✅' },
            ].map(item => (
              <div key={item.label} className="flex items-center gap-3 bg-white border border-[#e9edef] rounded-xl px-3 py-2">
                <span className="text-[16px]">{item.icon}</span>
                <div>
                  <p className="text-[12px] font-semibold text-[#111b21]">{item.label}</p>
                  <p className="text-[11px] text-[#8696a0]">{item.desc}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    ),
  },
  {
    id: 'diferenca',
    icon: <ShieldAlert size={28} />,
    color: 'from-violet-500 to-indigo-600',
    title: 'Inbox Interna vs Inbox Interno',
    subtitle: 'Quando usar cada um?',
    content: (
      <div className="space-y-3">
        <p className="text-[13px] text-[#3b4a50] leading-relaxed">
          Existem <strong>duas inboxes</strong> diferentes no sistema. Cada uma tem um propósito distinto:
        </p>

        {/* Esta — WhatsApp Inbox */}
        <div className="bg-[#f0fdf4] border border-[#00a884]/30 rounded-xl p-3 space-y-1.5">
          <p className="text-[12px] font-bold text-[#00a884] flex items-center gap-1.5">
            <MessageSquare size={13} /> Inbox Interna (você está aqui)
          </p>
          <p className="text-[11px] text-[#3b4a50] leading-snug">
            Para <strong>atendimento ao cliente via WhatsApp</strong> e comunicação entre atendentes.
          </p>
          <div className="space-y-1 mt-1">
            {[
              '🤖 "IA escalou — cliente quer falar com um humano"',
              '💬 "Ei, você pode assumir o protocolo #884?"',
              '📣 "Gerente: turno da tarde começa às 14h hoje"',
            ].map((ex, i) => (
              <p key={i} className="text-[11px] text-[#00a884] bg-[#00a884]/5 rounded-lg px-2.5 py-1.5 leading-snug">{ex}</p>
            ))}
          </div>
        </div>

        {/* Inbox Interno — operacional */}
        <div className="bg-amber-50 border border-amber-200 rounded-xl p-3 space-y-1.5">
          <p className="text-[12px] font-bold text-amber-700 flex items-center gap-1.5">
            <Package size={13} /> Inbox Interno → menu lateral
          </p>
          <p className="text-[11px] text-[#3b4a50] leading-snug">
            Para comunicação sobre o <strong>fluxo de pedidos</strong> entre setores operacionais.
          </p>
          <div className="space-y-1 mt-1">
            {[
              '📦 "Pedido #1055 com item faltando — verificar estoque"',
              '🧾 "NF do pedido #1098 com divergência de CFOP"',
              '🚚 "Carga do turno pronta para expedição"',
            ].map((ex, i) => (
              <p key={i} className="text-[11px] text-amber-700 bg-amber-500/5 rounded-lg px-2.5 py-1.5 leading-snug">{ex}</p>
            ))}
          </div>
        </div>

        <p className="text-[11px] text-[#8696a0] text-center">
          Regra rápida: cliente/atendente → aqui · pedido/setor → Inbox Interno
        </p>
      </div>
    ),
  },
]

function ProgressDots({ total, current, onGo }: { total: number; current: number; onGo: (i: number) => void }) {
  return (
    <div className="flex items-center gap-1.5">
      {Array.from({ length: total }).map((_, i) => (
        <button
          key={i}
          onClick={() => onGo(i)}
          className={`rounded-full transition-all duration-200 ${
            i === current
              ? 'w-5 h-2 bg-[#00a884]'
              : 'w-2 h-2 bg-[#d1d7db] hover:bg-[#8696a0]'
          }`}
        />
      ))}
    </div>
  )
}

export default function InboxHelpModal({ onClose }: { onClose: () => void }) {
  const [page, setPage] = useState(0)
  const total = PAGES.length
  const current = PAGES[page]

  const next = useCallback(() => setPage(p => Math.min(p + 1, total - 1)), [total])
  const prev = useCallback(() => setPage(p => Math.max(p - 1, 0)), [])

  useEffect(() => {
    const handler = (e: KeyboardEvent) => {
      if (e.key === 'Escape') onClose()
      if (e.key === 'ArrowRight') next()
      if (e.key === 'ArrowLeft') prev()
    }
    window.addEventListener('keydown', handler)
    return () => window.removeEventListener('keydown', handler)
  }, [onClose, next, prev])

  return (
    <div
      className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/40 backdrop-blur-sm p-4"
      onClick={e => { if (e.target === e.currentTarget) onClose() }}
    >
      <div className="bg-white rounded-2xl shadow-2xl w-full max-w-md overflow-hidden flex flex-col"
        style={{ maxHeight: '90vh' }}>

        {/* Header com gradiente */}
        <div className={`bg-gradient-to-br ${current.color} px-6 pt-6 pb-5 relative flex-shrink-0`}>
          <button
            onClick={onClose}
            className="absolute top-4 right-4 p-1.5 rounded-full bg-white/20 hover:bg-white/30 text-white transition"
          >
            <X size={14} />
          </button>
          <div className="flex items-start gap-4">
            <div className="w-12 h-12 rounded-2xl bg-white/20 flex items-center justify-center text-white flex-shrink-0">
              {current.icon}
            </div>
            <div className="flex-1 min-w-0 pt-0.5">
              <p className="text-white/70 text-[11px] font-medium uppercase tracking-widest">
                {page + 1} de {total}
              </p>
              <h2 className="text-white text-[18px] font-bold leading-tight mt-0.5">
                {current.title}
              </h2>
              <p className="text-white/80 text-[12px] mt-0.5">{current.subtitle}</p>
            </div>
          </div>
        </div>

        {/* Corpo */}
        <div className="flex-1 overflow-y-auto px-6 py-5 min-h-0">
          {current.content}
        </div>

        {/* Footer de navegação */}
        <div className="flex-shrink-0 flex items-center justify-between px-6 py-4 border-t border-[#e9edef] bg-[#f8f9fa]">
          <button
            onClick={prev}
            disabled={page === 0}
            className="flex items-center gap-1.5 px-4 py-2 rounded-xl text-[12px] font-medium text-[#54656f] hover:bg-[#e9edef] disabled:opacity-30 disabled:cursor-not-allowed transition"
          >
            <ChevronLeft size={15} />
            Anterior
          </button>

          <ProgressDots total={total} current={page} onGo={setPage} />

          {page < total - 1 ? (
            <button
              onClick={next}
              className="flex items-center gap-1.5 px-4 py-2 rounded-xl text-[12px] font-medium bg-[#00a884] hover:bg-[#008f72] text-white transition"
            >
              Próximo
              <ChevronRight size={15} />
            </button>
          ) : (
            <button
              onClick={onClose}
              className="flex items-center gap-1.5 px-4 py-2 rounded-xl text-[12px] font-medium bg-[#00a884] hover:bg-[#008f72] text-white transition"
            >
              <CheckCircle size={14} />
              Entendido
            </button>
          )}
        </div>
      </div>
    </div>
  )
}
