import { useState, useEffect, useCallback } from 'react'
import {
  X, ChevronLeft, ChevronRight,
  Inbox, MessageSquare, Send, Package,
  CheckCheck, Filter, Zap, CheckCircle, ArrowRight,
  ShieldAlert,
} from 'lucide-react'

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

const PAGES: Page[] = [
  {
    id: 'overview',
    icon: <Inbox size={28} />,
    gradient: 'from-amber-500 to-orange-600',
    title: 'Inbox Interno',
    subtitle: 'Comunicação entre setores operacionais',
    content: (
      <div className="space-y-4">
        <p className="text-[14px] text-slate-300 leading-relaxed">
          O <strong className="text-white">Inbox Interno</strong> é o canal de comunicação entre os setores que processam pedidos — cotação, separação, embalagem, auditoria, expedição e mais.
        </p>
        <div className="bg-slate-900 border border-amber-500/20 rounded-xl p-3 space-y-2">
          <p className="text-[11px] font-bold text-amber-400 uppercase tracking-widest mb-2">Exemplos de uso</p>
          {[
            { emoji: '📦', msg: 'Pedido #1042 separado. Aguardando auditoria.', from: 'Separação → Auditoria' },
            { emoji: '🧾', msg: 'NF do pedido #1098 com divergência de valor. Preciso checar.', from: 'Fiscal → Cotação' },
            { emoji: '🚚', msg: 'Transportadora atrasou. Pedidos #1110 e #1111 postergados.', from: 'Expedição → Geral' },
          ].map((ex, i) => (
            <div key={i} className="flex gap-2.5 bg-slate-950/50 rounded-lg px-2.5 py-2">
              <span className="text-base leading-none flex-shrink-0">{ex.emoji}</span>
              <div>
                <p className="text-[11px] text-white leading-snug">"{ex.msg}"</p>
                <p className="text-[10px] text-slate-600 mt-0.5">{ex.from}</p>
              </div>
            </div>
          ))}
        </div>
        <div className="flex items-start gap-2 bg-amber-500/10 border border-amber-500/20 rounded-xl px-3 py-2.5">
          <Zap size={13} className="text-amber-400 flex-shrink-0 mt-0.5" />
          <p className="text-[12px] text-amber-200">
            Tudo gira em torno de <strong>pedidos</strong>. Mensagens podem ser vinculadas a um número de pedido para rastreio.
          </p>
        </div>
      </div>
    ),
  },
  {
    id: 'setores',
    icon: <Filter size={28} />,
    gradient: 'from-slate-600 to-slate-800',
    title: 'Setores',
    subtitle: 'Navegação e badges na sidebar',
    content: (
      <div className="space-y-4">
        <p className="text-[14px] text-slate-300 leading-relaxed">
          A sidebar esquerda lista todos os setores operacionais. Clique em um setor para ver suas mensagens — o setor ativo fica destacado em âmbar.
        </p>
        <div className="bg-slate-900 border border-white/10 rounded-xl overflow-hidden">
          <div className="px-3 py-2 border-b border-white/5">
            <p className="text-[10px] text-slate-500 font-bold uppercase tracking-widest">Setores disponíveis</p>
          </div>
          <div className="divide-y divide-white/5">
            {[
              { emoji: '💬', label: 'Geral',      desc: 'Avisos sem setor específico' },
              { emoji: '📋', label: 'Cotação',    desc: 'Pedidos e cotações de produtos' },
              { emoji: '📦', label: 'Separação',  desc: 'Processo de separação de itens' },
              { emoji: '🚚', label: 'Expedição',  desc: 'Despacho e entrega de pedidos', badge: true },
            ].map(s => (
              <div key={s.label} className="flex items-center gap-2.5 px-3 py-2">
                <span className="text-base leading-none">{s.emoji}</span>
                <div className="flex-1 min-w-0">
                  <p className="text-[12px] text-white font-medium">{s.label}</p>
                  <p className="text-[10px] text-slate-500">{s.desc}</p>
                </div>
                {s.badge && (
                  <span className="bg-rose-500 text-white text-[10px] font-black px-1.5 py-0.5 rounded-full">3</span>
                )}
              </div>
            ))}
          </div>
        </div>
        <div className="flex items-start gap-2 bg-rose-500/10 border border-rose-500/20 rounded-xl px-3 py-2.5">
          <ArrowRight size={13} className="text-rose-400 flex-shrink-0 mt-0.5" />
          <p className="text-[12px] text-rose-200">
            O badge vermelho indica mensagens não lidas naquele setor — some ao marcar como lidas.
          </p>
        </div>
      </div>
    ),
  },
  {
    id: 'mensagens',
    icon: <MessageSquare size={28} />,
    gradient: 'from-blue-600 to-blue-800',
    title: 'Mensagens',
    subtitle: 'Leitura, filtros e marcação',
    content: (
      <div className="space-y-4">
        <p className="text-[14px] text-slate-300 leading-relaxed">
          Mensagens não lidas ficam destacadas com um ponto âmbar. Lidas aparecem com opacidade reduzida.
        </p>
        <div className="bg-slate-900 border border-white/10 rounded-xl overflow-hidden divide-y divide-white/5">
          <div className="flex gap-3 px-3 py-2.5 bg-amber-500/5">
            <div className="w-2 h-2 rounded-full bg-amber-400 mt-1.5 shrink-0" />
            <div className="flex-1 min-w-0">
              <div className="flex items-baseline gap-2 mb-0.5">
                <span className="text-[12px] font-bold text-white">Ana Silva</span>
                <span className="text-[10px] text-slate-500 flex items-center gap-0.5"><Package size={9} /> #1042</span>
                <span className="ml-auto text-[10px] text-slate-600">2min</span>
              </div>
              <p className="text-[11px] text-slate-300">Pedido separado, aguardando auditoria.</p>
            </div>
          </div>
          <div className="flex gap-3 px-3 py-2.5 opacity-50">
            <div className="w-2 h-2 rounded-full bg-slate-700 mt-1.5 shrink-0" />
            <div className="flex-1 min-w-0">
              <div className="flex items-baseline gap-2 mb-0.5">
                <span className="text-[12px] font-bold text-white">Carlos</span>
                <span className="ml-auto text-[10px] text-slate-600">10min</span>
              </div>
              <p className="text-[11px] text-slate-300">Embalagem finalizada.</p>
            </div>
          </div>
        </div>
        <div className="space-y-2">
          {[
            { icon: '✅', tip: 'Clique no ✓ para marcar uma mensagem como lida individualmente' },
            { icon: '☑️', tip: '"Marcar todas lidas" limpa todas as não lidas do setor ativo de uma vez' },
            { icon: '🔍', tip: '"Só não lidas" filtra e exibe apenas mensagens pendentes de leitura' },
          ].map((t, i) => (
            <div key={i} className="flex items-start gap-2.5">
              <span className="text-[14px] mt-0.5 flex-shrink-0">{t.icon}</span>
              <p className="text-[12px] text-slate-300">{t.tip}</p>
            </div>
          ))}
        </div>
      </div>
    ),
  },
  {
    id: 'enviar',
    icon: <Send size={28} />,
    gradient: 'from-emerald-600 to-teal-700',
    title: 'Enviar Mensagem',
    subtitle: 'Compose e atalhos',
    content: (
      <div className="space-y-4">
        <p className="text-[14px] text-slate-300 leading-relaxed">
          O painel de envio fica fixo no rodapé. A mensagem vai para o <strong className="text-white">setor selecionado</strong> na sidebar.
        </p>
        <div className="bg-slate-950/50 border border-white/10 rounded-xl p-3 space-y-2">
          <div className="flex gap-2">
            <div className="w-32 bg-slate-900 border border-white/10 rounded-lg px-2.5 py-1.5 text-[11px] text-slate-500">
              Pedido # (opcional)
            </div>
            <p className="text-[10px] text-slate-600 self-center">Ctrl+Enter para enviar</p>
          </div>
          <div className="flex gap-2">
            <div className="flex-1 bg-slate-900 border border-white/10 rounded-xl px-3 py-2 text-[11px] text-slate-500 min-h-[40px]">
              Mensagem para Cotação...
            </div>
            <button className="self-end px-3 py-1.5 bg-amber-500 text-black font-bold rounded-xl text-[11px] flex items-center gap-1">
              <Send size={11} /> Enviar
            </button>
          </div>
        </div>
        <div className="space-y-2">
          {[
            { label: 'Pedido #',      desc: 'Vincule a mensagem a um pedido específico para rastreio' },
            { label: 'Ctrl+Enter',    desc: 'Atalho para enviar sem tirar as mãos do teclado' },
            { label: 'Setor destino', desc: 'Mude o setor na sidebar antes de escrever' },
          ].map(item => (
            <div key={item.label} className="flex items-start gap-3">
              <CheckCircle size={13} className="text-emerald-400 flex-shrink-0 mt-0.5" />
              <div>
                <span className="text-[12px] font-semibold text-emerald-300">{item.label} — </span>
                <span className="text-[12px] text-slate-400">{item.desc}</span>
              </div>
            </div>
          ))}
        </div>
        <div className="flex items-start gap-2 bg-emerald-500/10 border border-emerald-500/20 rounded-xl px-3 py-2.5">
          <CheckCheck size={13} className="text-emerald-400 flex-shrink-0 mt-0.5" />
          <p className="text-[12px] text-emerald-200">
            Após enviar, a lista recarrega automaticamente para refletir a nova mensagem.
          </p>
        </div>
      </div>
    ),
  },
  {
    id: 'diferenca',
    icon: <ShieldAlert size={28} />,
    gradient: 'from-violet-600 to-indigo-700',
    title: 'Inbox Interno vs WhatsApp Inbox',
    subtitle: 'Quando usar cada um?',
    content: (
      <div className="space-y-3">
        <p className="text-[13px] text-slate-300 leading-relaxed">
          Existem <strong className="text-white">duas inboxes</strong> diferentes no sistema. Cada uma tem um propósito distinto:
        </p>

        {/* Inbox Interno — este */}
        <div className="bg-amber-500/10 border border-amber-500/25 rounded-xl p-3 space-y-1.5">
          <p className="text-[12px] font-bold text-amber-300 flex items-center gap-1.5">
            <Inbox size={13} /> Inbox Interno (você está aqui)
          </p>
          <p className="text-[11px] text-slate-400 leading-snug">
            Para comunicação sobre o <strong className="text-white">fluxo de pedidos</strong> entre setores. Usado por gestores e operadores.
          </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-200/80 bg-amber-500/5 rounded-lg px-2.5 py-1.5 leading-snug">{ex}</p>
            ))}
          </div>
        </div>

        {/* WhatsApp Inbox */}
        <div className="bg-[#00a884]/10 border border-[#00a884]/25 rounded-xl p-3 space-y-1.5">
          <p className="text-[12px] font-bold text-[#25d366] flex items-center gap-1.5">
            <MessageSquare size={13} /> WhatsApp Inbox → menu lateral
          </p>
          <p className="text-[11px] text-slate-400 leading-snug">
            Para <strong className="text-white">atendimento ao cliente via WhatsApp</strong> e comunicação da equipe de atendentes.
          </p>
          <div className="space-y-1 mt-1">
            {[
              '🤖 "IA escalou cliente que quer falar com humano"',
              '💬 "DM para colega: você atendeu o protocolo #884?"',
              '📣 "Aviso do gerente para toda equipe de atendimento"',
            ].map((ex, i) => (
              <p key={i} className="text-[11px] text-[#25d366]/80 bg-[#00a884]/5 rounded-lg px-2.5 py-1.5 leading-snug">{ex}</p>
            ))}
          </div>
        </div>

        <p className="text-[11px] text-slate-500 text-center">
          Regra rápida: pedido → Inbox Interno · cliente/atendente → WhatsApp Inbox
        </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-amber-400'
              : 'w-2 h-2 bg-slate-700 hover:bg-slate-500'
          }`}
        />
      ))}
    </div>
  )
}

export default function InboxInternoHelpModal({ 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/60 backdrop-blur-sm p-4"
      onClick={e => { if (e.target === e.currentTarget) onClose() }}
    >
      <div
        className="bg-slate-900 border border-white/10 rounded-2xl shadow-2xl w-full max-w-md overflow-hidden flex flex-col"
        style={{ maxHeight: '90vh' }}
      >
        <div className={`bg-gradient-to-br ${current.gradient} 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-black/20 hover:bg-black/40 text-white transition"
          >
            <X size={14} />
          </button>
          <div className="flex items-start gap-4">
            <div className="w-12 h-12 rounded-2xl bg-black/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/60 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/70 text-[12px] mt-0.5">{current.subtitle}</p>
            </div>
          </div>
        </div>

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

        <div className="flex-shrink-0 flex items-center justify-between px-6 py-4 border-t border-white/10 bg-slate-950/60">
          <button
            onClick={prev}
            disabled={page === 0}
            className="flex items-center gap-1.5 px-4 py-2 rounded-xl text-[12px] font-medium text-slate-400 hover:bg-white/5 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-amber-500 hover:bg-amber-400 text-black font-bold 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-amber-500 hover:bg-amber-400 text-black font-bold transition"
            >
              <CheckCircle size={14} />
              Entendido
            </button>
          )}
        </div>
      </div>
    </div>
  )
}
