import { useState, useEffect } from 'react';
import { createPortal } from 'react-dom';
import { RaffleService } from '../services/api';
import { Plus, Trophy, Trash2, Edit3, Save, BarChart3, Users, Zap, Tag, Timer, X, CheckCircle2, XCircle, Lightbulb, Layers, TrendingUp, Award, Target, BarChart2, BookOpen, ArrowLeft, Printer } from 'lucide-react';
import Modal from '../components/Modal';

export default function RafflesPage() {
  const [raffles, setRaffles] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [isDetailsOpen, setIsDetailsOpen] = useState(false);
  const [editingRaffle, setEditingRaffle] = useState<any>(null);
  const [selectedRaffle, setSelectedRaffle] = useState<any>(null);
  const [drawing, setDrawing] = useState(false);
  const [discountTiers, setDiscountTiers] = useState<Array<{ min_qty: number; discount_pct: number }>>([]);
  const [savingDiscounts, setSavingDiscounts] = useState(false);
  const [flashPromo, setFlashPromo] = useState<{ id: number; discount_pct: number; label: string; ends_at: string } | null>(null);
  const [flashForm, setFlashForm] = useState({ discount_pct: 15, duration_minutes: 30, label: 'Promoção Relâmpago' });
  const [activatingFlash, setActivatingFlash] = useState(false);
  const [flashNow, setFlashNow] = useState(Date.now());
  const [isRaffleTypesOpen, setIsRaffleTypesOpen] = useState(false);
  const [typeSuggestions, setTypeSuggestions] = useState<Record<string, string>>(() => {
    try { return JSON.parse(localStorage.getItem('raffle_type_suggestions') || '{}'); } catch { return {}; }
  });

  const [readingCard, setReadingCard] = useState<string | null>(null);

  const saveTypeSuggestion = (id: string, value: string) => {
    const updated = { ...typeSuggestions, [id]: value };
    setTypeSuggestions(updated);
    localStorage.setItem('raffle_type_suggestions', JSON.stringify(updated));
  };

  const RAFFLE_TYPES = [
    {
      id: 'tier_flash',
      icon: Zap,
      color: 'orange',
      gradient: 'from-orange-500/20 to-amber-500/10',
      border: 'border-orange-500/30',
      iconBg: 'bg-orange-500/20 text-orange-400',
      badge: 'RECOMENDADO',
      badgeColor: 'bg-orange-500/20 text-orange-400 border-orange-500/30',
      title: 'Sorteio Relâmpago por Faixa',
      subtitle: 'Prêmios proporcionais à quantidade comprada',
      description: 'Cada faixa de compra (nível = quantos números a pessoa comprou) concorre a um sorteio separado com prêmio proporcional. Quem comprou 1 número disputa R$20, quem comprou 3 disputa R$40, quem comprou 5 disputa R$75 — e assim por diante. Os sorteios disparam quando a faixa acumula receita suficiente ou em horário agendado.',
      tiers: [
        { qty: '1 nº', prize: 'R$ 20', ratio: '4x o valor investido' },
        { qty: '3 nºs', prize: 'R$ 40', ratio: '2,7x o valor investido' },
        { qty: '5 nºs', prize: 'R$ 75', ratio: '3x o valor investido' },
        { qty: '10 nºs', prize: 'R$150', ratio: '3x o valor investido' },
        { qty: '20 nºs', prize: 'R$300', ratio: '3x o valor investido' },
      ],
      pros: [
        'Incentiva quem comprou pouco a continuar participando',
        'Aumenta o valor médio de compra sem forçar desconto',
        'Cria múltiplos momentos de emoção por rifa',
        'Processo automático já existe — baixo esforço técnico',
        'Prêmio em crédito é juridicamente mais seguro que dinheiro',
      ],
      cons: [
        'Custos de prêmio se multiplicam — exige controle financeiro',
        'Pode confundir clientes sobre "em qual sorteio estou"',
        'Aviso no WhatsApp precisa ser claro e separado por faixa',
        'Sorteios frequentes podem tirar a emoção do prêmio principal',
      ],
    },
    {
      id: 'multiplier',
      icon: TrendingUp,
      color: 'cyan',
      gradient: 'from-cyan-500/20 to-blue-500/10',
      border: 'border-cyan-500/30',
      iconBg: 'bg-cyan-500/20 text-cyan-400',
      badge: 'SIMPLES',
      badgeColor: 'bg-cyan-500/20 text-cyan-400 border-cyan-500/30',
      title: 'Multiplicador de Sorte',
      subtitle: 'Mais chances no sorteio principal conforme compra',
      description: 'Um único sorteio principal, mas quem compra mais bilhetes entra mais vezes na lista de participantes. 1 número = 1 entrada, 3 números = 4 entradas, 5 números = 8 entradas. A mensagem é simples: "compre 5 e tenha 8x mais chances de ganhar!"',
      tiers: [
        { qty: '1 nº', prize: '1 entrada', ratio: '1x' },
        { qty: '3 nºs', prize: '4 entradas', ratio: '1,3x por número' },
        { qty: '5 nºs', prize: '8 entradas', ratio: '1,6x por número' },
        { qty: '10 nºs', prize: '20 entradas', ratio: '2x por número' },
        { qty: '20 nºs', prize: '50 entradas', ratio: '2,5x por número' },
      ],
      pros: [
        'Conceito simples: "mais números = mais chances"',
        'Um único sorteio — fácil de comunicar e gerenciar',
        'Sem custo extra de prêmios adicionais',
        '"5x mais chances!" é uma mensagem que converte bem',
      ],
      cons: [
        'O código matemático do sorteio (SHA256) precisa ser reescrito do zero',
        'Menos transparente — clientes podem questionar a imparcialidade',
        'Não recompensa quem comprou pouco (pode desmotivar)',
        'Quem compra 1 número sente desvantagem clara',
      ],
    },
    {
      id: 'scheduled_tiers',
      icon: Target,
      color: 'violet',
      gradient: 'from-violet-500/20 to-purple-500/10',
      border: 'border-violet-500/30',
      iconBg: 'bg-violet-500/20 text-violet-400',
      badge: 'AGENDADO',
      badgeColor: 'bg-violet-500/20 text-violet-400 border-violet-500/30',
      title: 'Sorteio Escalonado Agendado',
      subtitle: 'Datas e horários fixos por faixa de compra',
      description: 'Cada faixa de compra (nível de quantidade) tem seu próprio sorteio em data e hora anunciados com antecedência. "Quem comprou 1 número: segunda às 20h. Quem comprou 10 ou mais (VIP): sexta às 21h." Cria expectativa e motiva acompanhar as transmissões ao vivo.',
      tiers: [
        { qty: '1 nº', prize: 'Seg 20h', ratio: 'Sorteio Fiel' },
        { qty: '3 nºs', prize: 'Qua 20h', ratio: 'Sorteio Bronze' },
        { qty: '5 nºs', prize: 'Sex 20h', ratio: 'Sorteio Prata' },
        { qty: '10 nºs', prize: 'Sáb 20h', ratio: 'Sorteio Ouro' },
        { qty: '20 nºs', prize: 'Dom 21h', ratio: 'Sorteio VIP' },
      ],
      pros: [
        'Cria expectativa semanal recorrente',
        'Fácil de comunicar no WhatsApp com dia/hora fixos',
        'Clientes podem planejar quando acompanhar',
        'Sensação de "clube" com sorteios exclusivos por faixa',
      ],
      cons: [
        'Exige pontualidade — não pode atrasar nem cancelar',
        'Se poucos compraram naquela faixa, o sorteio parece vazio',
        'Gerenciar 5 datas diferentes por semana é trabalhoso',
        'Prêmio fixo pode parecer pouco atrativo em semanas de baixa venda',
      ],
    },
    {
      id: 'revenue_trigger',
      icon: BarChart2,
      color: 'emerald',
      gradient: 'from-emerald-500/20 to-green-500/10',
      border: 'border-emerald-500/30',
      iconBg: 'bg-emerald-500/20 text-emerald-400',
      badge: 'INTELIGENTE',
      badgeColor: 'bg-emerald-500/20 text-emerald-400 border-emerald-500/30',
      title: 'Gatilho por Meta de Arrecadação',
      subtitle: 'Sorteio dispara quando a faixa acumula receita suficiente',
      description: 'Cada faixa de compra define uma meta de arrecadação. Quando o gráfico mostra que a faixa "1 número" acumulou R$200, o sorteio de R$20 dispara sozinho. Saudável financeiramente: o prêmio é sempre cerca de 10% do que foi arrecadado naquela faixa.',
      tiers: [
        { qty: '1 nº', prize: 'Meta: R$200 → R$20', ratio: '10% do arrecadado' },
        { qty: '3 nºs', prize: 'Meta: R$400 → R$40', ratio: '10% do arrecadado' },
        { qty: '5 nºs', prize: 'Meta: R$750 → R$75', ratio: '10% do arrecadado' },
        { qty: '10 nºs', prize: 'Meta: R$1500 → R$150', ratio: '10% do arrecadado' },
        { qty: '20 nºs', prize: 'Meta: R$3000 → R$300', ratio: '10% do arrecadado' },
      ],
      pros: [
        'Financeiramente saudável — prêmio nunca supera a receita',
        'O gráfico de arrecadação vira ferramenta de decisão real',
        'Sorteios acontecem quando há volume suficiente de participantes',
        'Processo automático verifica as metas a cada minuto',
        'Cresce junto com as vendas — quanto mais vende, maior o prêmio',
      ],
      cons: [
        'Menos previsível para o cliente — "quando vai sortear?"',
        'Exige comunicação ativa: "Faltam R$80 para o próximo sorteio!"',
        'Pode demorar muito em rifas com poucos compradores',
        'Precisa de barra de progresso visível para manter interesse',
      ],
    },
    {
      id: 'badges',
      icon: Award,
      color: 'rose',
      gradient: 'from-rose-500/20 to-pink-500/10',
      border: 'border-rose-500/30',
      iconBg: 'bg-rose-500/20 text-rose-400',
      badge: 'FIDELIZAÇÃO',
      badgeColor: 'bg-rose-500/20 text-rose-400 border-rose-500/30',
      title: 'Medalhas de Participação',
      subtitle: 'Sistema de conquistas e recompensas por histórico de compras',
      description: 'Selos (medalhas virtuais) acumulados ao longo de múltiplas rifas. Participante, Frequente, VIP, Diamante — cada medalha desbloqueia benefícios reais como desconto na próxima rifa, bilhete bônus ou sorteio exclusivo. Funciona como um "programa de pontos", mas sem precisar pagar dinheiro de volta.',
      tiers: [
        { qty: 'Participante', prize: '1ª rifa', ratio: 'Sem benefício extra' },
        { qty: 'Frequente', prize: '5 rifas', ratio: '+5% desconto' },
        { qty: 'VIP', prize: '10 nºs numa rifa', ratio: '+1 bilhete bônus' },
        { qty: 'Diamante', prize: 'Todas do mês', ratio: 'Sorteio exclusivo' },
        { qty: 'Lendário', prize: '3 meses seguidos', ratio: 'Frete grátis + bônus' },
      ],
      pros: [
        'Cria identidade e pertencimento ("sou VIP aqui!")',
        'Incentiva o cliente a voltar sem precisar dar prêmio imediato',
        'Clientes compartilham suas medalhas nas redes — divulgação gratuita',
        'Programa de fidelidade sem precisar devolver dinheiro',
        'Diferencial único frente a rifas concorrentes',
      ],
      cons: [
        'É o mais complexo de construir — exige novo sistema de medalhas',
        'O valor que o cliente enxerga depende do tamanho da base de clientes',
        'Medalha sem benefício concreto é ignorada rapidamente',
        'Precisa de design visual cuidadoso no aplicativo do cliente',
        'As regras podem ficar complexas demais com o tempo',
      ],
    },
  ];

  // Form State
  const [formData, setFormData] = useState({
    titulo: '',
    descricao: '',
    preco_numero: '',
    total_numeros: '',
    start_at: '',
    end_at: '',
    status: 'active'
  });

  const fetchRaffles = async () => {
    setLoading(true);
    const data = await RaffleService.list();
    setRaffles(data);
    setLoading(false);
  };

  useEffect(() => {
    fetchRaffles();
  }, []);

  const handleOpenModal = (raffle?: any) => {
    if (raffle) {
      setEditingRaffle(raffle);
      setFormData({
        titulo: raffle.name || raffle.titulo,
        descricao: raffle.description || raffle.descricao || '',
        preco_numero: raffle.price_default?.toString() || raffle.preco_numero?.toString() || '5.00',
        total_numeros: raffle.total_numeros?.toString() || '500',
        start_at: raffle.start_at ? new Date(raffle.start_at).toISOString().split('T')[0] : '',
        end_at: raffle.end_at ? new Date(raffle.end_at).toISOString().split('T')[0] : '',
        status: raffle.status
      });
    } else {
      setEditingRaffle(null);
      setFormData({
        titulo: '',
        descricao: '',
        preco_numero: '5.00',
        total_numeros: '500',
        start_at: new Date().toISOString().split('T')[0],
        end_at: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toISOString().split('T')[0],
        status: 'active'
      });
    }
    setIsModalOpen(true);
  };

  useEffect(() => {
    if (!isDetailsOpen || !flashPromo) return;
    const t = setInterval(() => setFlashNow(Date.now()), 1000);
    return () => clearInterval(t);
  }, [isDetailsOpen, flashPromo]);

  const handleOpenDetails = async (id: number) => {
    setLoading(true);
    try {
      const [detail, discounts, flash] = await Promise.all([
        RaffleService.getDetail(id),
        RaffleService.getDiscounts(id).catch(() => []),
        RaffleService.getFlashPromo(id).catch(() => null),
      ]);
      setSelectedRaffle(detail);
      setDiscountTiers(discounts.map((d: any) => ({ min_qty: d.min_qty, discount_pct: Number(d.discount_pct) })));
      setFlashPromo(flash);
      setIsDetailsOpen(true);
    } catch (err) {
      alert('Erro ao carregar detalhes');
    } finally {
      setLoading(false);
    }
  };

  const handleSaveDiscounts = async () => {
    if (!selectedRaffle) return;
    setSavingDiscounts(true);
    try {
      await RaffleService.saveDiscounts(selectedRaffle.id, discountTiers);
      alert('Descontos salvos!');
    } catch {
      alert('Erro ao salvar descontos');
    } finally {
      setSavingDiscounts(false);
    }
  };

  const handleActivateFlash = async () => {
    if (!selectedRaffle) return;
    setActivatingFlash(true);
    try {
      const res = await RaffleService.createFlashPromo(selectedRaffle.id, flashForm);
      setFlashPromo(res.promo);
      setFlashNow(Date.now());
    } catch {
      alert('Erro ao ativar promoção relâmpago');
    } finally {
      setActivatingFlash(false);
    }
  };

  const handleCancelFlash = async () => {
    if (!selectedRaffle || !flashPromo) return;
    try {
      await RaffleService.cancelFlashPromo(selectedRaffle.id, flashPromo.id);
      setFlashPromo(null);
    } catch {
      alert('Erro ao cancelar promoção');
    }
  };

  function fmtCountdown(endsAt: string) {
    const diff = Math.max(0, new Date(endsAt).getTime() - flashNow);
    const h = Math.floor(diff / 3600000);
    const m = Math.floor((diff % 3600000) / 60000);
    const s = Math.floor((diff % 60000) / 1000);
    if (h > 0) return `${h}h ${String(m).padStart(2,'0')}m ${String(s).padStart(2,'0')}s`;
    return `${String(m).padStart(2,'0')}:${String(s).padStart(2,'0')}`;
  }

  const handleDraw = async (id: number) => {
    if (confirm('Deseja executar o sorteio agora? O ganhador será selecionado aleatoriamente via SHA256 entre os bilhetes pagos.')) {
        setDrawing(true);
        try {
            const res = await RaffleService.draw(id);
            alert(`Sorteio realizado! Ganhador: ${res.result.winner_name} (Bilhete #${res.result.ticket_number})`);
            setIsDetailsOpen(false);
            fetchRaffles();
        } catch (err: any) {
            alert(err.response?.data?.error || 'Erro ao realizar sorteio');
        } finally {
            setDrawing(false);
        }
    }
  };

  const handleSave = async (e: React.FormEvent) => {
    e.preventDefault();
    try {
      if (editingRaffle) {
        await RaffleService.update(editingRaffle.id, formData);
      } else {
        await RaffleService.create(formData);
      }
      setIsModalOpen(false);
      fetchRaffles();
    } catch (err) {
      alert('Erro ao salvar sorteio');
    }
  };

  const handleDelete = async (id: number) => {
    if (confirm('Excluir este sorteio?')) {
      try {
        await RaffleService.delete(id);
        fetchRaffles();
      } catch (err) {
        alert('Erro ao excluir');
      }
    }
  };

  return (
    <div className="space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-500">
      <header className="flex justify-between items-center">
        <div>
            <h2 className="text-3xl font-black text-white tracking-tighter uppercase italic">Sorteios Digitais</h2>
            <p className="text-slate-400 mt-1 font-medium">Gestão de prêmios, bilhetes e sorteio SHA256.</p>
        </div>
        <div className="flex items-center gap-3">
          <button
            onClick={() => setIsRaffleTypesOpen(true)}
            className="bg-slate-800 hover:bg-slate-700 text-slate-300 hover:text-white border border-slate-700 hover:border-slate-600 font-black px-6 py-4 rounded-2xl flex items-center gap-2 transition-all active:scale-95 italic uppercase text-xs"
          >
            <Layers size={16} strokeWidth={2.5} />
            Tipos de Sorteios
          </button>
          <button
            onClick={() => handleOpenModal()}
            className="bg-cyan-500 hover:bg-cyan-400 text-slate-950 font-black px-8 py-4 rounded-2xl flex items-center gap-2 transition-all shadow-lg shadow-cyan-500/20 active:scale-95 italic uppercase text-xs"
          >
              <Plus size={18} strokeWidth={3} />
              Novo Sorteio
          </button>
        </div>
      </header>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        {loading && !isDetailsOpen ? (
            [1,2,3].map(i => (
                <div key={i} className="bg-slate-900/40 border border-slate-800 h-72 rounded-[2rem] animate-pulse" />
            ))
        ) : raffles.map(raffle => (
            <div key={raffle.id} className="bg-slate-900/40 backdrop-blur-md border border-slate-800 rounded-[2rem] overflow-hidden hover:border-cyan-500/30 transition-all group flex flex-col relative">
                <div className="p-8">
                    <div className="flex justify-between items-start mb-6">
                        <div className={`px-3 py-1 rounded-lg text-[10px] font-black uppercase tracking-widest border ${
                            raffle.status === 'active' 
                                ? 'bg-emerald-500/10 text-emerald-400 border-emerald-500/20' 
                                : 'bg-slate-800 text-slate-500 border-slate-700'
                        }`}>
                            {raffle.status}
                        </div>
                        <span className="text-cyan-400 font-black text-2xl tabular-nums italic tracking-tighter">R$ {parseFloat(raffle.price_default || raffle.preco_numero).toFixed(2)}</span>
                    </div>
                    
                    <h3 className="text-xl font-black text-white mb-2 group-hover:text-cyan-400 transition-colors uppercase italic tracking-tight truncate">
                        {raffle.name || raffle.titulo}
                    </h3>
                    
                    <div className="flex items-center gap-4 mt-6 p-4 bg-slate-800/20 rounded-2xl border border-slate-800">
                        <div className="flex-1">
                            <div className="flex justify-between text-[10px] font-black text-slate-500 uppercase mb-2">
                                <span>Vendas</span>
                                <span>{raffle.vendas_count || 0}/{raffle.total_numeros}</span>
                            </div>
                            <div className="h-1.5 w-full bg-slate-800 rounded-full overflow-hidden">
                                <div 
                                    className="h-full bg-gradient-to-r from-cyan-600 to-cyan-400 shadow-[0_0_8px_rgba(34,211,238,0.4)]" 
                                    style={{ width: `${Math.min(100, ((raffle.vendas_count || 0) / raffle.total_numeros) * 100)}%` }} 
                                />
                            </div>
                        </div>
                    </div>
                </div>

                <div className="mt-auto p-6 bg-slate-800/20 border-t border-slate-800 flex items-center justify-between group-hover:bg-slate-800/40 transition-all">
                    <button 
                        onClick={() => handleOpenDetails(raffle.id)}
                        className="text-[10px] font-black text-cyan-500 hover:text-cyan-300 uppercase tracking-widest flex items-center gap-2"
                    >
                        <BarChart3 size={14} />
                        Auditagem
                    </button>
                    <div className="flex gap-2">
                        <button 
                          onClick={() => handleOpenModal(raffle)}
                          className="p-3 bg-slate-800 text-slate-400 hover:text-white rounded-xl transition-all border border-slate-700"
                        >
                            <Edit3 size={16} />
                        </button>
                        <button 
                          onClick={() => handleDelete(raffle.id)}
                          className="p-3 bg-rose-500/10 text-rose-500 hover:bg-rose-500 hover:text-white rounded-xl transition-all border border-rose-500/10"
                        >
                            <Trash2 size={16} />
                        </button>
                    </div>
                </div>
            </div>
        ))}
      </div>

      {/* RAFFLE DETAILS & DRAW MODAL */}
      <Modal 
        isOpen={isDetailsOpen} 
        onClose={() => setIsDetailsOpen(false)} 
        title="Auditagem & Sorteio Digital"
      >
        {selectedRaffle && (
            <div className="space-y-8">
                <div className="grid grid-cols-2 gap-4">
                    <div className="p-6 bg-slate-800/30 rounded-3xl border border-slate-800">
                        <span className="text-[10px] font-black text-slate-500 uppercase block mb-1">Números Vendidos</span>
                        <span className="text-3xl font-black text-white italic">{selectedRaffle.totalSold}</span>
                    </div>
                    <div className="p-6 bg-slate-800/30 rounded-3xl border border-slate-800">
                        <span className="text-[10px] font-black text-slate-500 uppercase block mb-1">Disponíveis</span>
                        <span className="text-3xl font-black text-cyan-400 italic">{selectedRaffle.totalDisponivel}</span>
                    </div>
                </div>

                <div className="bg-slate-950 p-6 rounded-3xl border border-slate-800">
                    <h4 className="text-[10px] font-black text-slate-500 uppercase mb-4 flex items-center gap-2">
                        <Users size={14} className="text-cyan-500" />
                        Compradores Recentes
                    </h4>
                    <div className="max-h-40 overflow-y-auto space-y-2 pr-2 custom-scrollbar">
                        {selectedRaffle.soldNumbers?.length > 0 ? selectedRaffle.soldNumbers.slice(0, 10).map((n: any, i: number) => (
                            <div key={i} className="flex justify-between items-center text-xs p-3 bg-slate-900 rounded-xl border border-white/5">
                                <span className="font-bold text-slate-300">#{n.numero.toString().padStart(3, '0')}</span>
                                <span className="text-slate-500">{n.usuario_nome || 'Cliente'}</span>
                            </div>
                        )) : (
                            <p className="text-slate-600 text-xs italic">Nenhum bilhete vendido ainda.</p>
                        )}
                    </div>
                </div>

                {/* Flash promo panel */}
                <div className={`p-6 rounded-3xl border ${flashPromo ? 'bg-orange-500/5 border-orange-500/20' : 'bg-slate-950 border-slate-800'}`}>
                  <h4 className="text-[10px] font-black text-slate-500 uppercase mb-4 flex items-center gap-2">
                    <Timer size={14} className={flashPromo ? 'text-orange-400' : 'text-cyan-500'} />
                    Promoção Relâmpago
                    {flashPromo && (
                      <span className="ml-auto text-orange-400 font-black text-xs animate-pulse">
                        ⚡ {fmtCountdown(flashPromo.ends_at)}
                      </span>
                    )}
                  </h4>

                  {flashPromo ? (
                    <div className="space-y-3">
                      <div className="flex items-center justify-between bg-orange-500/10 border border-orange-500/20 rounded-2xl px-4 py-3">
                        <div>
                          <p className="text-orange-300 font-black text-lg">{Number(flashPromo.discount_pct).toFixed(0)}% OFF</p>
                          <p className="text-slate-400 text-xs">{flashPromo.label}</p>
                        </div>
                        <p className="text-orange-400 font-black tabular-nums text-sm">{fmtCountdown(flashPromo.ends_at)}</p>
                      </div>
                      <button onClick={handleCancelFlash}
                        className="w-full py-2 rounded-xl bg-rose-500/10 hover:bg-rose-500/20 text-rose-400 text-xs font-black border border-rose-500/20 transition-all flex items-center justify-center gap-1.5">
                        <Trash2 size={12} /> Cancelar Promoção
                      </button>
                    </div>
                  ) : (
                    <div className="space-y-3">
                      <div className="grid grid-cols-2 gap-2">
                        <div>
                          <label className="text-[10px] font-black text-slate-500 uppercase block mb-1">Desconto %</label>
                          <input
                            type="number" min={1} max={100} step={1}
                            value={flashForm.discount_pct}
                            onChange={e => setFlashForm(f => ({ ...f, discount_pct: Number(e.target.value) }))}
                            className="w-full bg-slate-800/50 border border-slate-700 rounded-xl px-3 py-2 text-white text-sm font-black outline-none focus:border-orange-500/50"
                          />
                        </div>
                        <div>
                          <label className="text-[10px] font-black text-slate-500 uppercase block mb-1">Duração</label>
                          <select
                            value={flashForm.duration_minutes}
                            onChange={e => setFlashForm(f => ({ ...f, duration_minutes: Number(e.target.value) }))}
                            className="w-full bg-slate-800/50 border border-slate-700 rounded-xl px-3 py-2 text-white text-sm font-black outline-none focus:border-orange-500/50">
                            <option className="bg-slate-900 text-white" value={10}>10 minutos</option>
                            <option className="bg-slate-900 text-white" value={15}>15 minutos</option>
                            <option className="bg-slate-900 text-white" value={30}>30 minutos</option>
                            <option className="bg-slate-900 text-white" value={60}>1 hora</option>
                            <option className="bg-slate-900 text-white" value={120}>2 horas</option>
                            <option className="bg-slate-900 text-white" value={240}>4 horas</option>
                            <option className="bg-slate-900 text-white" value={360}>6 horas</option>
                            <option className="bg-slate-900 text-white" value={720}>12 horas</option>
                          </select>
                        </div>
                      </div>
                      <div>
                        <label className="text-[10px] font-black text-slate-500 uppercase block mb-1">Título</label>
                        <input
                          type="text"
                          value={flashForm.label}
                          onChange={e => setFlashForm(f => ({ ...f, label: e.target.value }))}
                          className="w-full bg-slate-800/50 border border-slate-700 rounded-xl px-3 py-2 text-white text-sm outline-none focus:border-orange-500/50"
                          placeholder="Ex: Oferta de fim de semana!"
                        />
                      </div>
                      <button
                        disabled={activatingFlash}
                        onClick={handleActivateFlash}
                        className="w-full py-2.5 rounded-xl bg-gradient-to-r from-orange-500 to-rose-500 hover:from-orange-400 hover:to-rose-400 disabled:opacity-50 text-white text-xs font-black flex items-center justify-center gap-1.5 transition-all shadow-lg shadow-orange-500/20">
                        <Zap size={12} /> {activatingFlash ? 'Ativando…' : 'Ativar Promoção Relâmpago'}
                      </button>
                    </div>
                  )}
                </div>

                {/* Discount tiers panel */}
                <div className="bg-slate-950 p-6 rounded-3xl border border-slate-800">
                  <h4 className="text-[10px] font-black text-slate-500 uppercase mb-4 flex items-center gap-2">
                    <Tag size={14} className="text-cyan-500" />
                    Descontos por Quantidade
                  </h4>
                  <div className="space-y-2 mb-3">
                    {discountTiers.length === 0 && (
                      <p className="text-slate-600 text-xs italic">Nenhuma faixa configurada.</p>
                    )}
                    {discountTiers.map((tier, i) => (
                      <div key={i} className="flex items-center gap-2">
                        <div className="flex-1 flex items-center gap-2 bg-slate-900 border border-slate-800 rounded-xl px-3 py-2">
                          <span className="text-[10px] text-slate-500 uppercase font-black shrink-0">Min.</span>
                          <input
                            type="number" min={2} value={tier.min_qty}
                            onChange={e => setDiscountTiers(ts => ts.map((t, j) => j === i ? { ...t, min_qty: parseInt(e.target.value) || 2 } : t))}
                            className="w-12 bg-transparent text-white text-sm font-black outline-none"
                          />
                          <span className="text-[10px] text-slate-500 uppercase font-black shrink-0 ml-2">%</span>
                          <input
                            type="number" min={1} max={100} step={0.5} value={tier.discount_pct}
                            onChange={e => setDiscountTiers(ts => ts.map((t, j) => j === i ? { ...t, discount_pct: parseFloat(e.target.value) || 0 } : t))}
                            className="w-14 bg-transparent text-cyan-400 text-sm font-black outline-none"
                          />
                        </div>
                        <button onClick={() => setDiscountTiers(ts => ts.filter((_, j) => j !== i))}
                          className="p-2 text-rose-500 hover:text-white hover:bg-rose-500/20 rounded-xl transition-all">
                          <Trash2 size={14} />
                        </button>
                      </div>
                    ))}
                  </div>
                  <div className="flex gap-2">
                    <button
                      onClick={() => setDiscountTiers(ts => [...ts, { min_qty: 3, discount_pct: 10 }])}
                      className="flex-1 py-2 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-300 text-xs font-black flex items-center justify-center gap-1.5 transition-all border border-slate-700">
                      <Plus size={12} /> Faixa
                    </button>
                    <button
                      disabled={savingDiscounts}
                      onClick={handleSaveDiscounts}
                      className="flex-1 py-2 rounded-xl bg-cyan-500 hover:bg-cyan-400 disabled:opacity-50 text-slate-950 text-xs font-black flex items-center justify-center gap-1.5 transition-all">
                      <Save size={12} /> {savingDiscounts ? 'Salvando…' : 'Salvar'}
                    </button>
                  </div>
                </div>

                {!selectedRaffle.winner_id ? (
                    <button
                        disabled={drawing || selectedRaffle.totalSold === 0}
                        onClick={() => handleDraw(selectedRaffle.id)}
                        className="w-full bg-gradient-to-r from-orange-500 to-rose-600 hover:from-orange-400 hover:to-rose-500 disabled:opacity-50 text-white font-black py-5 rounded-2xl flex items-center justify-center gap-3 transition-all shadow-xl shadow-rose-500/20 uppercase italic"
                    >
                        <Zap size={20} className={drawing ? 'animate-spin' : ''} />
                        {drawing ? 'Processando SHA256...' : 'Executar Sorteio Digital'}
                    </button>
                ) : (
                    <div className="p-8 bg-emerald-500/10 border border-emerald-500/20 rounded-3xl text-center">
                        <Trophy size={48} className="text-yellow-400 mx-auto mb-4" />
                        <h5 className="text-emerald-400 font-black uppercase italic tracking-tighter text-xl">Sorteio Concluído!</h5>
                        <p className="text-slate-400 text-sm mt-2">Este prêmio já possui um ganhador auditado.</p>
                    </div>
                )}
            </div>
        )}
      </Modal>

      {/* RAFFLE TYPES FULLSCREEN MODAL */}
      {isRaffleTypesOpen && createPortal(
        <>
        <div className="fixed inset-0 z-[9999] bg-slate-950/95 backdrop-blur-xl flex flex-col animate-in fade-in duration-200">
          {/* Header */}
          <div className="flex items-center justify-between px-8 py-6 border-b border-slate-800 shrink-0">
            <div className="flex items-center gap-4">
              <div className="p-3 bg-slate-800 rounded-2xl border border-slate-700">
                <Lightbulb size={22} className="text-amber-400" />
              </div>
              <div>
                <h2 className="text-2xl font-black text-white uppercase italic tracking-tighter">Tipos de Sorteios</h2>
                <p className="text-slate-500 text-sm font-medium mt-0.5">Estratégias de gamificação — estude, anote e implemente um por vez</p>
              </div>
            </div>
            <button
              onClick={() => setIsRaffleTypesOpen(false)}
              className="p-3 bg-slate-800 hover:bg-slate-700 text-slate-400 hover:text-white rounded-2xl border border-slate-700 transition-all active:scale-95"
            >
              <X size={20} />
            </button>
          </div>

          {/* Scrollable content */}
          <div className="flex-1 overflow-y-auto p-8">
            <div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
              {RAFFLE_TYPES.map((type) => {
                const Icon = type.icon;
                return (
                  <div
                    key={type.id}
                    className={`bg-gradient-to-br ${type.gradient} border ${type.border} rounded-3xl flex flex-col overflow-hidden`}
                  >
                    {/* Card header */}
                    <div className="p-6 pb-4">
                      <div className="flex items-start justify-between mb-4">
                        <div className={`p-3 rounded-2xl ${type.iconBg}`}>
                          <Icon size={22} strokeWidth={2} />
                        </div>
                        <div className="flex items-center gap-2">
                          <span className={`px-2.5 py-1 rounded-lg text-[9px] font-black uppercase tracking-widest border ${type.badgeColor}`}>
                            {type.badge}
                          </span>
                          <button
                            onClick={() => setReadingCard(type.id)}
                            title="Modo leitura A4"
                            className="p-2 rounded-xl bg-slate-800/60 hover:bg-white/10 text-slate-500 hover:text-white border border-slate-700/50 hover:border-white/20 transition-all active:scale-95"
                          >
                            <BookOpen size={14} strokeWidth={2} />
                          </button>
                        </div>
                      </div>
                      <h3 className="text-lg font-black text-white uppercase italic tracking-tight leading-tight">{type.title}</h3>
                      <p className="text-slate-400 text-xs font-medium mt-1">{type.subtitle}</p>
                      <p className="text-slate-500 text-xs mt-3 leading-relaxed">{type.description}</p>
                    </div>

                    {/* Tier table */}
                    <div className="mx-6 mb-4 bg-slate-900/60 rounded-2xl border border-slate-800 overflow-hidden">
                      <div className="grid grid-cols-3 px-3 py-2 border-b border-slate-800">
                        <span className="text-[9px] font-black text-slate-600 uppercase">Faixa</span>
                        <span className="text-[9px] font-black text-slate-600 uppercase">Prêmio / Hora</span>
                        <span className="text-[9px] font-black text-slate-600 uppercase text-right">Retorno</span>
                      </div>
                      {type.tiers.map((tier, i) => (
                        <div key={i} className={`grid grid-cols-3 px-3 py-2 ${i < type.tiers.length - 1 ? 'border-b border-slate-800/50' : ''}`}>
                          <span className="text-[11px] font-black text-white">{tier.qty}</span>
                          <span className="text-[11px] font-bold text-slate-300">{tier.prize}</span>
                          <span className="text-[10px] text-slate-500 text-right font-medium">{tier.ratio}</span>
                        </div>
                      ))}
                    </div>

                    {/* Pros & Cons */}
                    <div className="px-6 pb-4 grid grid-cols-2 gap-3">
                      <div>
                        <p className="text-[9px] font-black text-emerald-500 uppercase tracking-widest mb-2 flex items-center gap-1">
                          <CheckCircle2 size={10} /> Vantagens
                        </p>
                        <ul className="space-y-1.5">
                          {type.pros.map((pro, i) => (
                            <li key={i} className="text-[10px] text-slate-400 leading-tight flex gap-1.5">
                              <span className="text-emerald-500 mt-0.5 shrink-0">+</span>
                              {pro}
                            </li>
                          ))}
                        </ul>
                      </div>
                      <div>
                        <p className="text-[9px] font-black text-rose-500 uppercase tracking-widest mb-2 flex items-center gap-1">
                          <XCircle size={10} /> Desvantagens
                        </p>
                        <ul className="space-y-1.5">
                          {type.cons.map((con, i) => (
                            <li key={i} className="text-[10px] text-slate-400 leading-tight flex gap-1.5">
                              <span className="text-rose-500 mt-0.5 shrink-0">−</span>
                              {con}
                            </li>
                          ))}
                        </ul>
                      </div>
                    </div>

                    {/* Suggestions textarea */}
                    <div className="px-6 pb-6 mt-auto">
                      <label className="text-[9px] font-black text-slate-600 uppercase tracking-widest mb-2 flex items-center gap-1">
                        <Lightbulb size={9} className="text-amber-500" />
                        Minhas anotações / sugestões de melhoria
                      </label>
                      <textarea
                        value={typeSuggestions[type.id] || ''}
                        onChange={e => saveTypeSuggestion(type.id, e.target.value)}
                        placeholder="Ex: Usar crédito em vez de dinheiro para evitar lei 5768. Notificar via WhatsApp 1h antes do sorteio..."
                        className="w-full bg-slate-900/80 border border-slate-700 focus:border-amber-500/50 rounded-2xl px-4 py-3 text-white text-[11px] outline-none transition-all resize-none h-24 placeholder:text-slate-700 font-mono leading-relaxed"
                      />
                      {typeSuggestions[type.id] && (
                        <p className="text-[9px] text-slate-600 mt-1.5 flex items-center gap-1">
                          <CheckCircle2 size={9} className="text-emerald-600" />
                          Salvo automaticamente
                        </p>
                      )}
                    </div>
                  </div>
                );
              })}
            </div>

            {/* Bottom info bar */}
            <div className="max-w-7xl mx-auto mt-8 p-6 bg-slate-900/40 border border-slate-800 rounded-3xl flex items-start gap-4">
              <div className="p-3 bg-amber-500/10 rounded-2xl shrink-0">
                <Lightbulb size={20} className="text-amber-400" />
              </div>
              <div>
                <p className="text-white font-black text-sm uppercase italic">Como usar este painel</p>
                <p className="text-slate-400 text-xs mt-1 leading-relaxed max-w-3xl">
                  Estude cada tipo, anote suas ideias no campo abaixo de cada card — as anotações são salvas automaticamente no navegador.
                  Quando decidir qual estratégia implementar, abra uma conversa e mencione o tipo escolhido.
                  A implementação de cada tipo leva de 1 a 5 dias dependendo da complexidade.
                  <span className="text-amber-400 font-black"> Recomendação: comece pelo "Sorteio Relâmpago por Tier" — tem o maior impacto com o menor esforço técnico.</span>
                </p>
              </div>
            </div>
          </div>
        </div>

        {/* A4 READING MODE */}
        {readingCard && (() => {
          const card = RAFFLE_TYPES.find(t => t.id === readingCard)!;
          const CardIcon = card.icon;
          return (
            <div className="fixed inset-0 z-[10000] bg-slate-900/90 backdrop-blur-sm flex flex-col animate-in fade-in duration-150">
              {/* Reading toolbar */}
              <div className="flex items-center justify-between px-6 py-3 bg-slate-950/80 border-b border-slate-800 shrink-0 print:hidden">
                <button
                  onClick={() => setReadingCard(null)}
                  className="flex items-center gap-2 text-slate-400 hover:text-white transition-colors text-sm font-bold"
                >
                  <ArrowLeft size={16} />
                  Voltar aos cards
                </button>
                <span className="text-slate-500 text-xs font-black uppercase tracking-widest">Modo Leitura</span>
                <button
                  onClick={() => window.print()}
                  className="flex items-center gap-2 text-slate-400 hover:text-white transition-colors text-sm font-bold print:hidden"
                >
                  <Printer size={15} />
                  Imprimir / PDF
                </button>
              </div>

              {/* A4 scroll area */}
              <div className="flex-1 overflow-y-auto py-10 px-4 bg-slate-800/20">
                <div
                  className="mx-auto bg-white text-slate-900 shadow-2xl shadow-black/60"
                  style={{ width: '210mm', minHeight: '297mm', padding: '20mm 22mm' }}
                >
                  {/* Document header */}
                  <div className="flex items-start justify-between pb-6 border-b-2 border-slate-200 mb-8">
                    <div>
                      <p className="text-[9px] font-black uppercase tracking-[0.2em] text-slate-400 mb-2">Alemão Conveniências — Estratégia de Sorteios</p>
                      <h1 className="text-3xl font-black text-slate-900 leading-tight uppercase">{card.title}</h1>
                      <p className="text-slate-500 text-sm font-medium mt-1">{card.subtitle}</p>
                    </div>
                    <div className={`p-4 rounded-2xl shrink-0 ml-6 ${card.iconBg.replace('text-', 'text-').replace('/20', '/15')}`}
                      style={{ background: `color-mix(in srgb, currentColor 8%, transparent)` }}>
                      <CardIcon size={32} className={card.iconBg.split(' ')[1]} strokeWidth={1.5} />
                    </div>
                  </div>

                  {/* Badge */}
                  <div className="flex items-center gap-3 mb-6">
                    <span className="inline-block px-3 py-1 rounded-md text-[10px] font-black uppercase tracking-widest bg-slate-100 text-slate-600 border border-slate-200">
                      {card.badge}
                    </span>
                  </div>

                  {/* Description */}
                  <section className="mb-8">
                    <h2 className="text-[10px] font-black uppercase tracking-[0.15em] text-slate-400 mb-3 border-b border-slate-100 pb-2">Descrição</h2>
                    <p className="text-slate-700 text-sm leading-relaxed">{card.description}</p>
                  </section>

                  {/* Tiers table */}
                  <section className="mb-8">
                    <h2 className="text-[10px] font-black uppercase tracking-[0.15em] text-slate-400 mb-3 border-b border-slate-100 pb-2">Faixas de Compra (níveis por quantidade)</h2>
                    <table className="w-full text-sm border-collapse">
                      <thead>
                        <tr className="bg-slate-50">
                          <th className="text-left py-2.5 px-3 text-[10px] font-black uppercase tracking-wider text-slate-500 border border-slate-200">Faixa / Qtd. comprada</th>
                          <th className="text-left py-2.5 px-3 text-[10px] font-black uppercase tracking-wider text-slate-500 border border-slate-200">Prêmio / Horário</th>
                          <th className="text-left py-2.5 px-3 text-[10px] font-black uppercase tracking-wider text-slate-500 border border-slate-200">Retorno / Categoria</th>
                        </tr>
                      </thead>
                      <tbody>
                        {card.tiers.map((tier, i) => (
                          <tr key={i} className={i % 2 === 0 ? 'bg-white' : 'bg-slate-50/50'}>
                            <td className="py-2.5 px-3 font-black text-slate-800 border border-slate-200">{tier.qty}</td>
                            <td className="py-2.5 px-3 font-semibold text-slate-700 border border-slate-200">{tier.prize}</td>
                            <td className="py-2.5 px-3 text-slate-500 border border-slate-200 text-xs">{tier.ratio}</td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </section>

                  {/* Pros & Cons */}
                  <section className="mb-8">
                    <h2 className="text-[10px] font-black uppercase tracking-[0.15em] text-slate-400 mb-4 border-b border-slate-100 pb-2">Análise de Viabilidade</h2>
                    <div className="grid grid-cols-2 gap-6">
                      <div>
                        <p className="text-[10px] font-black uppercase tracking-wider text-emerald-600 mb-3 flex items-center gap-1.5">
                          <CheckCircle2 size={11} /> Vantagens
                        </p>
                        <ul className="space-y-2.5">
                          {card.pros.map((pro, i) => (
                            <li key={i} className="flex gap-2 text-xs text-slate-700 leading-snug">
                              <span className="text-emerald-500 font-black shrink-0 mt-0.5">+</span>
                              {pro}
                            </li>
                          ))}
                        </ul>
                      </div>
                      <div>
                        <p className="text-[10px] font-black uppercase tracking-wider text-rose-500 mb-3 flex items-center gap-1.5">
                          <XCircle size={11} /> Desvantagens
                        </p>
                        <ul className="space-y-2.5">
                          {card.cons.map((con, i) => (
                            <li key={i} className="flex gap-2 text-xs text-slate-700 leading-snug">
                              <span className="text-rose-500 font-black shrink-0 mt-0.5">−</span>
                              {con}
                            </li>
                          ))}
                        </ul>
                      </div>
                    </div>
                  </section>

                  {/* Suggestions */}
                  <section>
                    <h2 className="text-[10px] font-black uppercase tracking-[0.15em] text-slate-400 mb-3 border-b border-slate-100 pb-2 flex items-center gap-1.5">
                      <Lightbulb size={11} className="text-amber-500" />
                      Minhas Anotações
                    </h2>
                    {typeSuggestions[card.id] ? (
                      <div className="bg-amber-50 border border-amber-200 rounded-lg p-4 text-xs text-slate-700 font-mono leading-relaxed whitespace-pre-wrap">
                        {typeSuggestions[card.id]}
                      </div>
                    ) : (
                      <p className="text-slate-400 text-xs italic">Nenhuma anotação registrada. Volte aos cards para adicionar sugestões.</p>
                    )}
                  </section>

                  {/* Footer */}
                  <div className="mt-12 pt-4 border-t border-slate-200 flex items-center justify-between">
                    <p className="text-[9px] text-slate-400 uppercase tracking-widest">alemaoconveniencias.local — Documento interno</p>
                    <p className="text-[9px] text-slate-400">Gerado em {new Date().toLocaleDateString('pt-BR', { day: '2-digit', month: 'long', year: 'numeric' })}</p>
                  </div>
                </div>
              </div>
            </div>
          );
        })()}
        </>
      , document.body)}

      {/* CREATE/EDIT MODAL */}
      <Modal 
        isOpen={isModalOpen} 
        onClose={() => setIsModalOpen(false)} 
        title={editingRaffle ? 'Editar Sorteio' : 'Novo Sorteio'}
      >
        <form onSubmit={handleSave} className="space-y-6">
            <div>
                <label className="block text-[10px] font-black uppercase tracking-widest text-slate-500 mb-2">Prêmio / Nome do Sorteio</label>
                <input 
                    required
                    type="text" 
                    value={formData.titulo}
                    onChange={e => setFormData({...formData, titulo: e.target.value})}
                    className="w-full bg-slate-800/50 border border-slate-700 rounded-xl px-4 py-3 text-white focus:ring-1 ring-cyan-500 outline-none transition-all"
                />
            </div>
            <div>
                <label className="block text-[10px] font-black uppercase tracking-widest text-slate-500 mb-2">Descrição / Regras</label>
                <textarea 
                    value={formData.descricao}
                    onChange={e => setFormData({...formData, descricao: e.target.value})}
                    className="w-full bg-slate-800/50 border border-slate-700 rounded-xl px-4 py-3 text-white focus:ring-1 ring-cyan-500 outline-none transition-all h-24 resize-none"
                    placeholder="Descrição detalhada..."
                />
            </div>
            <div className="grid grid-cols-2 gap-4">
                <div>
                    <label className="block text-[10px] font-black uppercase tracking-widest text-slate-500 mb-2">Preço por Bilhete</label>
                    <input 
                        required
                        type="number" step="0.01"
                        value={formData.preco_numero}
                        onChange={e => setFormData({...formData, preco_numero: e.target.value})}
                        className="w-full bg-slate-800/50 border border-slate-700 rounded-xl px-4 py-3 text-white focus:ring-1 ring-cyan-500 outline-none transition-all"
                    />
                </div>
                <div>
                    <label className="block text-[10px] font-black uppercase tracking-widest text-slate-500 mb-2">Total de Cotas</label>
                    <input 
                        required
                        type="number"
                        value={formData.total_numeros}
                        onChange={e => setFormData({...formData, total_numeros: e.target.value})}
                        className="w-full bg-slate-800/50 border border-slate-700 rounded-xl px-4 py-3 text-white focus:ring-1 ring-cyan-500 outline-none transition-all"
                    />
                </div>
            </div>
            <div className="grid grid-cols-2 gap-4">
                <div>
                    <label className="block text-[10px] font-black uppercase tracking-widest text-slate-500 mb-2">Data de Início</label>
                    <input 
                        required
                        type="date"
                        value={formData.start_at}
                        onChange={e => setFormData({...formData, start_at: e.target.value})}
                        className="w-full bg-slate-800/50 border border-slate-700 rounded-xl px-4 py-3 text-white"
                    />
                </div>
                <div>
                    <label className="block text-[10px] font-black uppercase tracking-widest text-slate-500 mb-2">Data de Término</label>
                    <input 
                        required
                        type="date"
                        value={formData.end_at}
                        onChange={e => setFormData({...formData, end_at: e.target.value})}
                        className="w-full bg-slate-800/50 border border-slate-700 rounded-xl px-4 py-3 text-white"
                    />
                </div>
            </div>

            <button 
                type="submit"
                className="w-full bg-cyan-500 hover:bg-cyan-400 text-slate-950 font-black py-4 rounded-2xl flex items-center justify-center gap-2 transition-all shadow-lg shadow-cyan-500/20 uppercase italic text-sm"
            >
                <Save size={20} />
                {editingRaffle ? 'Salvar Alterações' : 'Criar Sorteio'}
            </button>
        </form>
      </Modal>
    </div>
  );
}
