const { useState, useEffect } = React;

// --- Funcões Auxilares e Máscaras ---
function validarCPF(cpf) {
  cpf = cpf.replace(/[^\d]+/g, '');
  if (cpf.length !== 11 || !!cpf.match(/(\d)\1{10}/)) return false;
  let soma = 0, resto;
  for (let i = 1; i <= 9; i++) soma += parseInt(cpf.substring(i - 1, i)) * (11 - i);
  resto = (soma * 10) % 11;
  if (resto === 10 || resto === 11) resto = 0;
  if (resto !== parseInt(cpf.substring(9, 10))) return false;
  soma = 0;
  for (let i = 1; i <= 10; i++) soma += parseInt(cpf.substring(i - 1, i)) * (12 - i);
  resto = (soma * 10) % 11;
  if (resto === 10 || resto === 11) resto = 0;
  if (resto !== parseInt(cpf.substring(10, 11))) return false;
  return true;
}

function formatCPF(value) {
  if (!value) return '';
  return value.replace(/\D/g, '')
    .replace(/(\d{3})(\d)/, '$1.$2')
    .replace(/(\d{3})(\d)/, '$1.$2')
    .replace(/(\d{3})(\d{1,2})/, '$1-$2')
    .replace(/(-\d{2})\d+?$/, '$1');
}

function formatCNPJ(value) {
  if (!value) return '';
  return value.replace(/\D/g, '')
    .replace(/(\d{2})(\d)/, '$1.$2')
    .replace(/(\d{3})(\d)/, '$1.$2')
    .replace(/(\d{3})(\d)/, '$1/$2')
    .replace(/(\d{4})(\d{1,2})/, '$1-$2')
    .replace(/(-\d{2})\d+?$/, '$1');
}

function formatCardNumber(value) {
  return value.replace(/\D/g, '').replace(/(\d{4})/g, '$1 ').trim().substring(0, 19);
}

function formatExpiry(value) {
  const v = value.replace(/\D/g, '');
  if (v.length >= 2) return v.substring(0, 2) + '/' + v.substring(2, 4);
  return v;
}

function validarSenha(senha) {
  const minLength = 8;
  const hasUpperCase = /[A-Z]/.test(senha);
  const hasNumber = /[0-9]/.test(senha);
  const hasSpecial = /[!@#$%^&*(),.?":{}|<>]/.test(senha);
  
  if (senha.length < minLength) return "A senha deve ter pelo menos 8 caracteres.";
  if (!hasUpperCase) return "A senha deve conter pelo menos uma letra maiúscula.";
  if (!hasNumber) return "A senha deve conter pelo menos um número.";
  if (!hasSpecial) return "A senha deve conter pelo menos um caractere especial.";
  return null;
}

// RemovidonotasDB mock e integrado com MariaDB via backend.
const API_URL = 'https://api.iaagro.app/api';

function App() {
  const [view, setView] = useState('landing');
  const [user, setUser] = useState(null);
  const [theme, setTheme] = useState('dark');
  const [notification, setNotification] = useState({ show: false, msg: '', type: 'info' });

  const notify = (msg, type = 'info') => {
    setNotification({ show: true, msg, type });
    setTimeout(() => setNotification({ show: false, msg: '', type: 'info' }), 4000);
  };

  // --- Sistema de Temas ---
  useEffect(() => {
    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
    const applyTheme = (isDark) => {
      const newTheme = isDark ? 'dark' : 'light';
      setTheme(newTheme);
      document.documentElement.setAttribute('data-theme', newTheme);
    };

    applyTheme(mediaQuery.matches);
    const handleChange = (e) => applyTheme(e.matches);
    mediaQuery.addEventListener('change', handleChange);

    // Persistência de Login: Recuperar do localStorage
    const savedUser = localStorage.getItem('iaagro_user');
    if (savedUser) {
      try {
        const parsedUser = JSON.parse(savedUser);
        setUser(parsedUser);
        setView('portal');
      } catch (e) {
        localStorage.removeItem('iaagro_user');
      }
    }

    return () => mediaQuery.removeEventListener('change', handleChange);
  }, []);

  // --- Observador para Animações de Scroll (Reveal) ---
  useEffect(() => {
    const observerOptions = {
      threshold: 0.15,
      rootMargin: '0px 0px -50px 0px'
    };

    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('active');
          // Opcional: parar de observar após animar uma vez
          // observer.unobserve(entry.target);
        }
      });
    }, observerOptions);

    const revealElements = document.querySelectorAll('.reveal');
    revealElements.forEach(el => observer.observe(el));

    // Re-observar se a view mudar (importante p/ SPA)
    return () => {
      revealElements.forEach(el => observer.unobserve(el));
    };
  }, [view]); // Dispara novamente ao trocar de tela (landing -> portal etc)

  const switchTheme = () => {
    const newTheme = theme === 'dark' ? 'light' : 'dark';
    setTheme(newTheme);
    document.documentElement.setAttribute('data-theme', newTheme);
  };

  const handleLogin = (userData) => {
    localStorage.setItem('iaagro_user', JSON.stringify(userData));
    setUser(userData);
    setView('portal');
  };

  const handleLogout = () => {
    localStorage.removeItem('iaagro_user');
    setUser(null);
    setView('landing');
  };

  return (
    <React.Fragment>
      <InteractiveBackground />
      {/* Botão Global de Tema - Efeito Glass Fixo */}
      <button onClick={switchTheme} className="theme-toggle-fixed hide-mobile" title="Alternar Tema Escuro/Claro" style={{ zIndex: 9999 }}>
        {theme === 'dark' ? <i className="ph-fill ph-sun"></i> : <i className="ph-fill ph-moon"></i>}
      </button>

      {view === 'landing' && <Landing onNavigate={setView} theme={theme} onSwitchTheme={switchTheme} />}
      {view === 'login' && <Login onNavigate={setView} onLogin={handleLogin} theme={theme} notify={notify} />}
      {view === 'register' && <Register onNavigate={setView} onLogin={handleLogin} theme={theme} notify={notify} />}
      {view === 'portal' && <Portal user={user} onLogout={handleLogout} theme={theme} notify={notify} />}

      {/* Botão de WhatsApp Flutuante */}
      <a href="https://wa.me/5511999999999" target="_blank" rel="noreferrer" className="float-wpp" title="Fale pelo WhatsApp">
        <i className="ph-fill ph-whatsapp-logo"></i>
      </a>

      {/* Sistema de Notificação Customizado */}
      <div className={`notification-toast ${notification.show ? 'show' : ''} ${notification.type}`}>
         <i className={`ph-fill ph-${notification.type === 'error' ? 'warning-circle' : 'check-circle'}`}></i>
         {notification.msg}
      </div>
    </React.Fragment>
  );
}

// === LANDING PAGE ===
function Landing({ onNavigate, theme, onSwitchTheme }) {
  const logoSrc = theme === 'dark' ? 'assets/logo-dark.svg' : 'assets/logo-light.svg';
  const [menuOpen, setMenuOpen] = React.useState(false);
  const [activeDots, setActiveDots] = React.useState(1); // Foco no meio (index 1)
  const plansRef = React.useRef(null);

  React.useEffect(() => {
    // Focar no item do meio (Profissional) ao carregar se for mobile
    if (window.innerWidth <= 768 && plansRef.current) {
      const scrollWidth = plansRef.current.scrollWidth;
      plansRef.current.scrollLeft = (scrollWidth / 3);
    }
  }, []);

  const handleScroll = (e) => {
    if (window.innerWidth > 768) return;
    const scrollLeft = e.target.scrollLeft;
    const scrollWidth = e.target.scrollWidth - e.target.clientWidth;
    const percentage = scrollLeft / scrollWidth;
    
    let index = 1;
    if (percentage < 0.25) index = 0;
    else if (percentage > 0.75) index = 2;
    
    if (index !== activeDots) setActiveDots(index);
  };

  return (
    <div>
      <nav className="glass-navbar">
        {/* Esquerda: Tema no mobile, Logo no desktop */}
        <div className="nav-mobile-left">
          <button onClick={onSwitchTheme} className="theme-toggle-nav" title="Mudar Tema">
            {theme === 'dark' ? <i className="ph-fill ph-sun"></i> : <i className="ph-fill ph-moon"></i>}
          </button>
          
          <div className="nav-logo hide-mobile">
            <img src={logoSrc} alt="IAAGRO Logo" style={{ height: '28px' }} />
          </div>
        </div>

        {/* Centro: Logo no mobile, Links no desktop */}
        <div className="nav-center-area">
          <div className="nav-logo show-mobile-only">
            <img src={logoSrc} alt="IAAGRO Logo" style={{ height: '28px' }} />
          </div>

          <ul className={`nav-links ${menuOpen ? 'open' : ''}`}>
            <li><a href="#hero" onClick={() => setMenuOpen(false)}>Início</a></li>
            <li><a href="#features" onClick={() => setMenuOpen(false)}>Recursos</a></li>
            <li><a href="#pricing" onClick={() => setMenuOpen(false)}>Planos</a></li>
            <li><a href="#testimonials" onClick={() => setMenuOpen(false)}>Depoimentos</a></li>
            <li><a href="#contact" onClick={() => setMenuOpen(false)}>Dúvidas</a></li>
            <li className="mobile-menu-actions">
               <button className="btn btn-outline" style={{ width: '100%' }} onClick={() => { setMenuOpen(false); onNavigate('login'); }}>Entrar</button>
               <button className="btn btn-primary" style={{ width: '100%' }} onClick={() => { setMenuOpen(false); onNavigate('register'); }}>Registre-se</button>
            </li>
          </ul>
        </div>

        {/* Direita: Acoes/Hamburger */}
        <div className="nav-actions">
          <div className="hide-mobile" style={{ display: 'flex', gap: '1rem' }}>
            <button className="btn btn-outline" style={{ padding: '0.5rem 1.5rem' }} onClick={() => onNavigate('login')}>Entrar</button>
            <button className="btn btn-primary" style={{ padding: '0.5rem 1.5rem' }} onClick={() => onNavigate('register')}>Registre-se</button>
          </div>

          <button className="menu-toggle" onClick={() => setMenuOpen(!menuOpen)}>
            <i className={`ph-bold ph-${menuOpen ? 'x' : 'list'}`}></i>
          </button>
        </div>
      </nav>

      <section id="hero" className="hero-section">
        <div className="hero-content">
          <h1>Revolucione a Emissão de<br /><span className="text-gradient">Notas Fiscais</span></h1>
          <p>Esqueça os sistemas complexos. Envie os dados direto pelo <strong>WhatsApp</strong> e nossa Inteligência Artificial preenche, valida e emite sua nota na hora.</p>
          <div className="hero-buttons reveal reveal-fade-up">
            <button className="btn btn-primary" onClick={() => onNavigate('register')}>
              Criar Conta Grátis <i className="ph-bold ph-arrow-right"></i>
            </button>
            <button className="btn btn-outline" onClick={() => document.getElementById('features').scrollIntoView()}>
              Entender Como Funciona
            </button>
          </div>
        </div>
      </section>

      {/* RECURSOS */}
      <section id="features" className="section-padding">
        <div className="page-header" style={{ justifyContent: 'center', textAlign: 'center', marginBottom: '4rem' }}>
          <div>
            <h2>Como a IAAGRO trabalha?</h2>
            <p>Um fluxo completo e automatizado, do campo até a Receita Federal.</p>
          </div>
        </div>
        <div className="profile-grid">
          <div className="card reveal reveal-fade-up" style={{ textAlign: 'center' }}>
            <i className="ph-fill ph-whatsapp-logo" style={{ fontSize: '3rem', color: '#25D366', marginBottom: '1rem' }}></i>
            <h3>1. Envio de Dados Simplificado</h3>
            <p style={{ color: 'var(--text-secondary)' }}>Mande uma mensagem de texto simples dos produtos vendidos e do comprador para o nosso WhatsApp.</p>
          </div>
          <div className="card reveal reveal-fade-up" style={{ textAlign: 'center', transitionDelay: '0.1s' }}>
            <i className="ph-fill ph-brain" style={{ fontSize: '3rem', color: 'var(--primary-color)', marginBottom: '1rem' }}></i>
            <h3>2. Extração via IA</h3>
            <p style={{ color: 'var(--text-secondary)' }}>Nosso motor de PNL entende a linguagem rural, define os NCMs corretos, as alíquotas aplicáveis e as tributações exigidas.</p>
          </div>
          <div className="card reveal reveal-fade-up" style={{ textAlign: 'center', transitionDelay: '0.2s' }}>
            <i className="ph-fill ph-cloud-check" style={{ fontSize: '3rem', color: '#3b82f6', marginBottom: '1rem' }}></i>
            <h3>3. Armazenamento Blindado (5 Anos)</h3>
            <p style={{ color: 'var(--text-secondary)' }}>Os XMLs e DANFEs são armazenados com segurança nos servidores da <a href="https://nuuv.cloud" target="_blank" rel="noreferrer" style={{ color: 'var(--primary-color)', textDecoration: 'none', fontWeight: 'bold' }}>nuuv.cloud</a> pelo tempo exigido por lei.</p>
          </div>
          <div className="card reveal reveal-fade-up" style={{ textAlign: 'center', transitionDelay: '0.3s' }}>
            <i className="ph-fill ph-chart-line-up" style={{ fontSize: '3rem', color: '#f59e0b', marginBottom: '1rem' }}></i>
            <h3>4. Painel para Contabilidade</h3>
            <p style={{ color: 'var(--text-secondary)' }}>Compartilhe acessos limitados para que seu contador consiga exportar relatórios instantâneos de todo período via portal web.</p>
          </div>
        </div>
      </section>

      {/* PLANOS */}
      <section id="pricing" className="section-padding">
        <div className="page-header" style={{ justifyContent: 'center', textAlign: 'center' }}>
          <div>
            <h2>Escolha seu Plano</h2>
            <p>Flexibilidade para todos os tamanhos de negócios e produtores rurais.</p>
          </div>
        </div>

        <div className="plans-grid" ref={plansRef} onScroll={handleScroll}>
          <div className="plan-card reveal reveal-fade-left">
            <h3 className="plan-name">Iniciante</h3>
            <div className="plan-price">
              <span className="plan-currency">R$</span>49
            </div>
            <div className="plan-period">/mês</div>
            <ul className="plan-features">
              <li><i className="ph-bold ph-check"></i> 50 Emissões mensais</li>
              <li><i className="ph-bold ph-check"></i> Bot Básico do WhatsApp</li>
              <li><i className="ph-bold ph-check"></i> Suporte por E-mail em 24h</li>
            </ul>
            <button className="btn btn-outline" onClick={() => onNavigate('register')}>Começar</button>
          </div>

          <div className="plan-card popular reveal reveal-fade-up">
            <div className="badge-popular">Mais Escolhido</div>
            <h3 className="plan-name text-gradient">Profissional</h3>
            <div className="plan-price">
              <span className="plan-currency">R$</span>129
            </div>
            <div className="plan-period">/mês</div>
            <ul className="plan-features">
              <li><i className="ph-bold ph-check"></i> Emissões Ilimitadas</li>
              <li><i className="ph-bold ph-check"></i> Integração Inteligente via Texto</li>
              <li><i className="ph-bold ph-check"></i> Armazenamento Legal (5 anos)</li>
              <li><i className="ph-bold ph-check"></i> Sincronização Sefaz Direta</li>
            </ul>
            <button className="btn btn-primary" onClick={() => onNavigate('register')}>Assinar Profissional</button>
          </div>

          <div className="plan-card reveal reveal-fade-right">
            <h3 className="plan-name">Cooperativa</h3>
            <div className="plan-price">
              <span className="plan-currency">R$</span>299
            </div>
            <div className="plan-period">/mês</div>
            <ul className="plan-features">
              <li><i className="ph-bold ph-check"></i> Tudo do plano Profissional</li>
              <li><i className="ph-bold ph-check"></i> Emissão Múltiplos CNPJs</li>
              <li><i className="ph-bold ph-check"></i> Exportação p/ Lotes Contábeis</li>
              <li><i className="ph-bold ph-check"></i> Relatórios Analíticos Gerenciais</li>
            </ul>
            <button className="btn btn-outline" onClick={() => window.open('https://wa.me/5511999999999', '_blank')}>Falar com Vendas</button>
          </div>
        </div>

        {/* Paginação do Carrossel (Mobile Only) */}
        <div className="carousel-dots">
          <span className={`dot ${activeDots === 0 ? 'active' : ''}`}></span>
          <span className={`dot ${activeDots === 1 ? 'active' : ''}`}></span>
          <span className={`dot ${activeDots === 2 ? 'active' : ''}`}></span>
        </div>
      </section>

      {/* DEPOIMENTOS */}
      <section id="testimonials" className="section-padding" >
        <div className="page-header" style={{ justifyContent: 'center', textAlign: 'center', marginBottom: '3rem' }}>
          <div>
            <h2>O que dizem os produtores</h2>
            <p>Opiniões reais de quem já eliminou processos ultrapassados no agronegócio.</p>
          </div>
        </div>
        <div className="plans-grid">
          <div className="card reveal reveal-fade-up">
            <div style={{ display: 'flex', gap: '1rem', alignItems: 'center', marginBottom: '1.5rem' }}>
              <div className="user-avatar" style={{ width: '45px', height: '45px', borderRadius: '8px' }}>CA</div>
              <div><h4 style={{ margin: 0, fontSize: '1.1rem' }}>Carlos Almeida</h4><span style={{ fontSize: '0.85rem', color: 'var(--text-secondary)' }}>Fazenda Boa Esperança</span></div>
            </div>
            <p style={{ color: 'var(--text-secondary)', fontStyle: 'italic', lineHeight: 1.6 }}>
              “Antigamente eu perdia horas no computador puxando XML, era horrível estar no pasto e ter que voltar. Hoje eu mando um texto rápido pelo WhatsApp com os dados da carga, e a nota desponta no e-mail do cliente na mesma hora. Fantástico.”
            </p>
          </div>

          <div className="card reveal reveal-fade-up" style={{ transitionDelay: '0.1s' }}>
            <div style={{ display: 'flex', gap: '1rem', alignItems: 'center', marginBottom: '1.5rem' }}>
              <div className="user-avatar" style={{ width: '45px', height: '45px', borderRadius: '8px', background: 'linear-gradient(135deg, #f59e0b, #d97706)' }}>MF</div>
              <div><h4 style={{ margin: 0, fontSize: '1.1rem' }}>Marta Fidelis</h4><span style={{ fontSize: '0.85rem', color: 'var(--text-secondary)' }}>Cooperativa Agrosul</span></div>
            </div>
            <p style={{ color: 'var(--text-secondary)', fontStyle: 'italic', lineHeight: 1.6 }}>
              “Conseguimos alocar a IAAGRO para operar notas de mais de 12 caminhões por dia. Basta digitar o pedido e a IA faz a conversão tributária exata, zeramos multas por esquecimento de regras estaduais complexas.”
            </p>
          </div>

          <div className="card reveal reveal-fade-up" style={{ transitionDelay: '0.2s' }}>
            <div style={{ display: 'flex', gap: '1rem', alignItems: 'center', marginBottom: '1.5rem' }}>
              <div className="user-avatar" style={{ width: '45px', height: '45px', borderRadius: '8px', background: 'linear-gradient(135deg, #10b981, #047857)' }}>RR</div>
              <div><h4 style={{ margin: 0, fontSize: '1.1rem' }}>Rafael Rios</h4><span style={{ fontSize: '0.85rem', color: 'var(--text-secondary)' }}>Engenheiro Agrônomo Independente</span></div>
            </div>
            <p style={{ color: 'var(--text-secondary)', fontStyle: 'italic', lineHeight: 1.6 }}>
              “A facilidade de emitir receitas técnicas e vincular faturamento apenas digitando no chat é surreal. A IA reconhece corretamente a descrição dos produtos fitossanitários com poucos caracteres. Recomendo muito.”
            </p>
          </div>
        </div>
      </section>

      {/* FAQ E DUVIDAS */}
      <section id="contact" className="section-padding">
        <div className="page-header" style={{ justifyContent: 'center', textAlign: 'center', marginBottom: '3rem' }}>
          <div>
            <h2>Dúvidas Frequentes</h2>
            <p>Nossa equipe está pronta para lhe integrar à nova era fiscal.</p>
          </div>
        </div>

        <div style={{ maxWidth: '800px', margin: '0 auto' }}>
          <div className="faq-item reveal reveal-fade-up">
            <h4>Preciso de um certificado digital para que funcione?</h4>
            <p>Sim. É requisito legal da Secretaria da Fazenda que toda empresa possua certificado A1 (.pfx) para gerar a assinatura digital nas transações financeiras. Após o upload o robô assume esta etapa por você.</p>
          </div>
          <div className="faq-item reveal reveal-fade-up" style={{ transitionDelay: '0.1s' }}>
            <h4>É seguro enviar os dados das vendas pelo WhatsApp?</h4>
            <p>Absolutamente. Nosso tráfego emprega criptografia E2EE (ponta-a-ponta) e descartamos históricos temporais de conversão em áudio em servidores imediatamente após a geração do Danfe.</p>
          </div>
          <div className="faq-item reveal reveal-fade-up" style={{ transitionDelay: '0.2s' }}>
            <h4>O bot do WhatsApp funciona aos finais de semana?</h4>
            <p>Sim! A automação operada em infraestrutura da IAAGRO está disponível 24 horas por dia, 7 dias por semana, sem intervenção humana, incluindo feriados nacionais.</p>
          </div>
          <div className="faq-item reveal reveal-fade-up" style={{ transitionDelay: '0.3s' }}>
            <h4>E se a nota gerar um erro por informações enviadas erradas (Cancelamento)?</h4>
            <p>Você pode cancelar a NF-e solicitando por mensagem no chat. O próprio bot faz os testes com o Portal Sefaz, caso alguma variável (como valor e CPF incompatíveis) aconteça, o sistema vai pedir confirmação antes da emissão definitiva (draft).</p>
          </div>
        </div>

        <div style={{ textAlign: 'center', padding: '3rem 0' }}>
          <button className="btn btn-primary" onClick={() => window.open('https://wa.me/5511999999999', '_blank')}>
            <i className="ph-fill ph-whatsapp-logo"></i> Chamar no WhatsApp Agora
          </button>
        </div>
      </section>

      {/* FOOTER OFICIAL NUUV*/}
      <footer style={{ padding: '3rem 2rem', textAlign: 'center', borderTop: '1px solid var(--surface-border)', color: 'var(--text-secondary)', background: 'var(--bg-color)', position: 'relative', zIndex: 10 }}>
        <p style={{ marginBottom: '0.5rem', fontWeight: 600 }}>© 2026 IAAGRO. Todos os direitos reservados.</p>
        <p style={{ fontSize: '0.9rem' }}>
          Powered by <a href="https://nuuv.cloud" target="_blank" rel="noreferrer" style={{ color: 'var(--primary-color)', textDecoration: 'none', fontWeight: 'bold' }}>nuuv.cloud</a>
        </p>
      </footer>
    </div>
  );
}

// === LOGIN ===
function Login({ onNavigate, onLogin, theme, notify }) {
  const logoSrc = theme === 'dark' ? 'assets/logo-dark.svg' : 'assets/logo-light.svg';
  const [phone, setPhone] = useState('');
  const [password, setPassword] = useState('');
  const [showPass, setShowPass] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!phone || !password) return notify("Preencha todos os campos.", "error");
    
    try {
      const response = await fetch(`${API_URL}/login`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ phone: phone.replace(/\D/g, ''), password })
      });
      
      const data = await response.json();
      if (response.ok) {
        onLogin(data);
        notify("Bem-vindo ao IAAGRO!", "success");
      } else {
        notify(data.error || "Erro ao fazer login.", "error");
      }
    } catch (err) {
      notify("Erro ao conectar com o servidor.", "error");
    }
  };

  return (
    <div className="auth-container">
      <div className="auth-header-btn">
        <button onClick={() => onNavigate('landing')} className="btn btn-outline" style={{ padding: '0.6rem 1.2rem', borderRadius: '8px' }}>
          <i className="ph ph-arrow-left"></i> Voltar p/ o Início
        </button>
      </div>
      <div className="auth-card">
        <div className="auth-header">
          <img src={logoSrc} alt="IAAGRO" style={{ height: '40px', marginBottom: '1rem' }} />
          <h1 className="text-gradient" style={{ fontSize: '2rem' }}>Acessar Portal</h1>
          <p>Emita suas notas via IA no WhatsApp</p>
        </div>
        <form onSubmit={handleSubmit}>
          <div className="form-group">
            <label htmlFor="phone">Telefone vinculado (Chave)</label>
            <div className="input-wrapper">
              <input type="text" placeholder="(DDD) 99999-9999" id="phone" value={phone} onChange={e => setPhone(e.target.value)} />
              <i className="ph ph-device-mobile form-icon"></i>
            </div>
          </div>

          <div className="form-group">
            <label htmlFor="password">Senha de Acesso</label>
            <div className="input-wrapper">
              <input type={showPass ? "text" : "password"} placeholder="Sua senha secreta" id="password" value={password} onChange={e => setPassword(e.target.value)} />
              <i className="ph ph-lock-key form-icon"></i>
              <button type="button" className="btn-icon pass-toggle" onClick={() => setShowPass(!showPass)}>
                <i className={`ph ph-eye${showPass ? '-slash' : ''}`}></i>
              </button>
            </div>
          </div>

          <button type="submit" className="btn btn-primary btn-full">
            Entrar <i className="ph-bold ph-sign-in"></i>
          </button>
        </form>
        <div className="auth-switch">
          Ainda não é cliente? <button type="button" onClick={() => onNavigate('register')}>Cadastre-se</button>
        </div>
        <div className="auth-switch" style={{ marginTop: '0.5rem' }}>
          <button type="button" onClick={() => notify("Um link de recuperação foi enviado para seu e-mail cadastrado.", "info")}>Esqueci minha senha</button>
        </div>
      </div>
    </div>
  );
}

// === REGISTER ===
function Register({ onNavigate, onLogin, theme, notify }) {
  const logoSrc = theme === 'dark' ? 'assets/logo-dark.svg' : 'assets/logo-light.svg';
  const [formData, setFormData] = useState({ name: '', cpf: '', email: '', cnpj: '', phone: '', password: '', confirmPassword: '' });
  const [showPass, setShowPass] = useState(false);

  const handleChange = (e) => {
    setFormData({ ...formData, [e.target.id]: e.target.value });
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!formData.name || !formData.email || !formData.cnpj || !formData.phone || !formData.password || !formData.cpf) {
      return notify("Preencha todos os campos.", "error");
    }

    if (!validarCPF(formData.cpf)) {
      return notify("CPF Inválido. Digite um CPF correto.", "error");
    }

    const erroSenha = validarSenha(formData.password);
    if (erroSenha) return notify(erroSenha, "error");

    if (formData.password !== formData.confirmPassword) {
      return notify("As senhas não coincidem.", "error");
    }

    try {
      const response = await fetch(`${API_URL}/register`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          ...formData,
          cpf: formData.cpf.replace(/\D/g, ''),
          phone: formData.phone.replace(/\D/g, '')
        })
      });
      
      const data = await response.json();
      if (response.ok) {
        onLogin(data);
        notify("Cadastro realizado com sucesso!", "success");
      } else {
        notify(data.error || "Erro ao registrar.", "error");
      }
    } catch (err) {
      notify("Erro ao conectar com o servidor.", "error");
    }
  };

  return (
    <div className="auth-container" style={{ padding: '1rem' }}>
      <div className="auth-header-btn" style={{ maxWidth: '580px' }}>
        <button onClick={() => onNavigate('landing')} className="btn btn-outline" style={{ padding: '0.6rem 1.2rem', borderRadius: '8px' }}>
          <i className="ph ph-arrow-left"></i> Voltar p/ o Início
        </button>
      </div>

      <div className="auth-card" style={{ maxWidth: '580px', padding: '2rem' }}>
        <div className="auth-header">
          <img src={logoSrc} alt="IAAGRO" style={{ height: '35px', marginBottom: '0.5rem' }} />
          <h1 className="text-gradient" style={{ fontSize: '1.8rem' }}>Começar Grátis</h1>
          <p>Prepare sua conta e seu certificado A1</p>
        </div>
        <form onSubmit={handleSubmit}>
          <div className="profile-grid">
            <div className="form-group full-width">
              <label htmlFor="name">Nome Completo do Responsável</label>
              <div className="input-wrapper">
                <input type="text" id="name" placeholder="Ex: João Silva" value={formData.name} onChange={handleChange} />
                <i className="ph ph-user form-icon"></i>
              </div>
            </div>

            <div className="form-group full-width">
              <label htmlFor="cpf">CPF do Responsável</label>
              <div className="input-wrapper">
                <input type="text" id="cpf" placeholder="000.000.000-00" value={formatCPF(formData.cpf)} onChange={(e) => setFormData({ ...formData, cpf: e.target.value.replace(/\D/g, '') })} />
                <i className="ph ph-identification-card form-icon"></i>
              </div>
            </div>

            <div className="form-group">
              <label htmlFor="email">E-mail Profissional</label>
              <div className="input-wrapper">
                <input type="email" id="email" placeholder="nome@agro.com" value={formData.email} onChange={handleChange} />
                <i className="ph ph-envelope-simple form-icon"></i>
              </div>
            </div>

            <div className="form-group">
              <label htmlFor="phone">WhastApp (Chave Emitente)</label>
              <div className="input-wrapper">
                <input type="text" id="phone" placeholder="(11) 99999-9999" value={formData.phone} onChange={handleChange} />
                <i className="ph ph-whatsapp-logo form-icon"></i>
              </div>
            </div>

            <div className="form-group full-width">
              <label htmlFor="cnpj">CNPJ Emitente</label>
              <div className="input-wrapper">
                <input type="text" id="cnpj" placeholder="00.000.000/0000-00" value={formatCNPJ(formData.cnpj)} onChange={(e) => setFormData({ ...formData, cnpj: e.target.value.replace(/\D/g, '') })} />
                <i className="ph ph-buildings form-icon"></i>
              </div>
            </div>

            <div className="form-group">
              <label htmlFor="password">Criar Senha de Acesso</label>
              <div className="input-wrapper">
                <input type={showPass ? "text" : "password"} id="password" placeholder="Crie uma senha forte" value={formData.password} onChange={handleChange} />
                <i className="ph ph-lock-key form-icon"></i>
                <button type="button" className="btn-icon pass-toggle" onClick={() => setShowPass(!showPass)}>
                  <i className={`ph ph-eye${showPass ? '-slash' : ''}`}></i>
                </button>
              </div>
              <p style={{ fontSize: '0.75rem', color: 'var(--text-secondary)', marginTop: '4px' }}>Mínimo 8 caracteres, 1 maiúscula, números e símbolos.</p>
            </div>

            <div className="form-group">
              <label htmlFor="confirmPassword">Confirmar Senha</label>
              <div className="input-wrapper">
                <input type={showPass ? "text" : "password"} id="confirmPassword" placeholder="Repita a senha" value={formData.confirmPassword} onChange={handleChange} />
                <i className="ph ph-repeat form-icon"></i>
              </div>
            </div>
          </div>
          <button type="submit" className="btn btn-primary btn-full" style={{ marginTop: '1rem' }}>
            Registrar Perfil Completo <i className="ph-fill ph-rocket-launch"></i>
          </button>
        </form>
        <div className="auth-switch">
          Já possui conta? <button type="button" onClick={() => onNavigate('login')}>Fazer Login</button>
        </div>
      </div>
    </div>
  );
}

// === PORTAL DASHBOARD ===
function Portal({ user, onLogout, theme, notify }) {
  const logoSrc = theme === 'dark' ? 'assets/logo-dark.svg' : 'assets/logo-light.svg';
  const [tab, setTab] = useState('perfil');

  return (
    <div className="portal-layout">
      {/* Sidebar */}
      <aside className="sidebar">
        <div className="sidebar-logo">
          <img src={logoSrc} alt="IAAGRO Logo" style={{ height: '36px' }} />
        </div>

        <ul className="nav-menu">
          <li className={`nav-item ${tab === 'notas' ? 'active' : ''}`} onClick={() => setTab('notas')}>
            <i className="ph ph-receipt"></i>
            Minhas Notas
          </li>
          <li className={`nav-item ${tab === 'plano' ? 'active' : ''}`} onClick={() => setTab('plano')}>
            <i className="ph ph-crown"></i>
            Meu Plano
          </li>
          <li className={`nav-item ${tab === 'autorizados' ? 'active' : ''}`} onClick={() => setTab('autorizados')}>
            <i className="ph ph-users-four"></i>
            Números Autorizados
          </li>
        </ul>

        <div className="sidebar-footer">
          <div className="user-snippet">
            <div className="user-avatar" style={{ border: '2px solid var(--primary-color)' }}>
              {user.name.charAt(0).toUpperCase()}
            </div>
            <div className="user-info">
              <div className="name" style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
                {user.name.split(' ')[0]}
                <button className="btn-icon" title="Editar Perfil" onClick={() => setTab('perfil')} style={{ color: tab === 'perfil' ? 'var(--primary-color)' : 'inherit', fontSize: '0.9rem' }}>
                   <i className="ph ph-pencil-simple-line"></i>
                </button>
              </div>
              <div className="role">Produtor Autorizado</div>
            </div>
          </div>
          <button className="logout-btn premium-logout" onClick={onLogout}>
            <i className="ph-bold ph-sign-out"></i> Sair do Portal
          </button>
        </div>
      </aside>

      <main className="main-content">
        {tab === 'notas' && <NotasView userId={user.id} notify={notify} />}
        {tab === 'perfil' && <PerfilView user={user} notify={notify} />}
        {tab === 'plano' && <PlanoView user={user} notify={notify} />}
        {tab === 'autorizados' && <AuthorizedNumbersView userId={user.id} notify={notify} />}
      </main>
    </div>
  );
}

function NotasView({ userId, notify }) {
  const [notas, setNotas] = useState([]);
  const [search, setSearch] = useState('');
  const [dataInicio, setDataInicio] = useState('');
  const [dataFim, setDataFim] = useState('');
  const [selected, setSelected] = useState([]);

  useEffect(() => {
    const fetchNotas = async () => {
      try {
        const response = await fetch(`${API_URL}/notas?userId=${userId}`);
        const data = await response.json();
        if (response.ok) {
          setNotas(data);
        }
      } catch (err) {
        console.error("Erro ao carregar notas.");
      }
    };
    if (userId) fetchNotas();
  }, [userId]);

  // Filtragem
  const filteredNotas = notas.filter(n => {
    let match = true;
    if (search && !n.numero.includes(search) && !n.chave.includes(search)) match = false;
    if (dataInicio && n.date < dataInicio) match = false;
    if (dataFim && n.date > dataFim) match = false;
    return match;
  });

  const toggleSelectAll = (e) => {
    if (e.target.checked) setSelected(filteredNotas.map(n => n.id));
    else setSelected([]);
  };

  const toggleSelect = (id) => {
    if (selected.includes(id)) setSelected(selected.filter(s => s !== id));
    else setSelected([...selected, id]);
  };

  const handleDownload = (nota, type) => {
    const url = type === 'xml' ? nota.xml : nota.pdf;
    if (!url || url === '#') return notify("Arquivo não disponível.", "error");
    window.open(url, '_blank');
  };

  const handleBulkDownload = (type) => {
    if (selected.length === 0) return notify("Selecione ao menos uma nota.", "error");
    notify(`Preparando arquivo ZIP com ${selected.length} notas (${type.toUpperCase()})`, "success");
  }

  const renderStatus = (nota) => {
    const temEvento = nota.status === 'Cancelada' || nota.status === 'Inutilizada' || (nota.eventos && nota.eventos.length > 0);
    if (temEvento) {
      return (
        <div className="custom-tooltip" style={{ alignItems: 'center', color: '#f59e0b' }}>
          <i className="ph-fill ph-warning-circle" style={{ fontSize: '1.2rem', marginRight: '4px' }}></i>
          <span style={{ fontSize: '0.8rem' }}>Aviso na Nota</span>
          <span className="tooltip-text">{nota.eventos && nota.eventos.length > 0 ? nota.eventos.join(', ') : nota.status}</span>
        </div>
      );
    }
    return <i className="ph-bold ph-check" style={{ color: 'var(--primary-color)' }}></i>;
  }

  return (
    <div className="animate-fade-in">
      <div className="page-header" style={{ flexWrap: 'wrap', gap: '1rem' }}>
        <div>
          <h2>Notas Emitidas e Processadas</h2>
          <p>Histórico completo de transmissões via Secretaria da Fazenda.</p>
        </div>
        <div className="badge-quota" style={{ background: 'var(--primary-color)', color: '#fff', padding: '0.5rem 1rem', borderRadius: '20px', fontWeight: 'bold' }}>
           Cota: {notas.length} registradas
        </div>
      </div>

      <div className="card" style={{ padding: '1.5rem', marginBottom: '1.5rem', display: 'flex', gap: '1rem', flexWrap: 'wrap', alignItems: 'flex-end', border: '1px solid rgba(0,210,106,0.2)' }}>
        <div style={{ flex: 1, minWidth: '220px' }}>
          <label style={{ fontSize: '0.85rem', color: 'var(--text-secondary)' }}>Buscar Número ou Chave</label>
          <input type="text" className="filter-input" placeholder="Digite número ou chave..." value={search} onChange={e => setSearch(e.target.value)} />
        </div>
        <div>
          <label style={{ fontSize: '0.85rem', color: 'var(--text-secondary)' }}>De Data</label>
          <input type="date" className="filter-input" value={dataInicio} onChange={e => setDataInicio(e.target.value)} />
        </div>
        <div>
          <label style={{ fontSize: '0.85rem', color: 'var(--text-secondary)' }}>Até Data</label>
          <input type="date" className="filter-input" value={dataFim} onChange={e => setDataFim(e.target.value)} />
        </div>
        <div style={{ display: 'flex', gap: '0.5rem', marginTop: '1rem' }}>
          <button className="btn btn-outline" style={{ padding: '0.6rem 1rem' }} onClick={() => handleBulkDownload('xml')}>
            <i className="ph ph-code"></i> Baixar XMLs das ({selected.length})
          </button>
          <button className="btn btn-outline" style={{ padding: '0.6rem 1rem' }} onClick={() => handleBulkDownload('pdf')}>
            <i className="ph ph-file-pdf"></i> Baixar PDFs das ({selected.length})
          </button>
        </div>
      </div>

      <div className="card table-container">
        {filteredNotas.length > 0 ? (
          <table className="data-table">
            <thead>
              <tr>
                <th style={{ width: '40px' }}><input type="checkbox" onChange={toggleSelectAll} checked={selected.length === filteredNotas.length && filteredNotas.length > 0} style={{ width: '16px', height: '16px', cursor: 'pointer' }} /></th>
                <th>Número</th>
                <th>Série</th>
                <th>Data Autorização</th>
                <th style={{ minWidth: '160px', whiteSpace: 'nowrap' }}>Valor Bruto</th>
                <th>Status Sefaz</th>
                <th>Ações Fiscais</th>
                <th>Baixar Lote Único</th>
              </tr>
            </thead>
            <tbody>
              {filteredNotas.map(n => (
                <tr key={n.id}>
                  <td><input type="checkbox" checked={selected.includes(n.id)} onChange={() => toggleSelect(n.id)} style={{ width: '16px', height: '16px', cursor: 'pointer' }} /></td>
                  <td><strong>{n.numero}</strong></td>
                  <td>{n.serie}</td>
                  <td>{n.date.split('-').reverse().join('/')}</td>
                  <td style={{ whiteSpace: 'nowrap' }}><span className="text-gradient" style={{ fontWeight: 600 }}>{n.value}</span></td>
                  <td>{renderStatus(n)}</td>
                  <td>
                    <div className="action-buttons">
                      <button className="btn-icon" style={{ color: '#ef4444' }} title="Cancelar NF-e"><i className="ph ph-x-circle"></i></button>
                      <button className="btn-icon" style={{ color: '#f97316' }} title="Inutilizar Numeração"><i className="ph ph-prohibit"></i></button>
                      <button className="btn-icon" style={{ color: '#3b82f6' }} title="Gerar Carta de Correção (CCe)"><i className="ph ph-file-text"></i></button>
                    </div>
                  </td>
                  <td>
                    <div className="action-buttons">
                      <button className="btn-icon" style={{ color: '#f59e0b' }} title="Baixar XML Original" onClick={() => handleDownload(n, 'xml')}><i className="ph ph-code"></i></button>
                      <button className="btn-icon" style={{ color: '#ef4444' }} title="Baixar DANFE em PDF" onClick={() => handleDownload(n, 'pdf')}><i className="ph ph-file-pdf"></i></button>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        ) : (
          <div className="empty-state">
            <i className="ph ph-magnifying-glass"></i>
            <h3>Nenhuma nota encontrada nos filtros.</h3>
            <p>Seus apontamentos com IA ainda não geraram uma Sefaz oficial ou os filtros estão vazios.</p>
          </div>
        )}
      </div>
    </div>
  )
}

function PerfilView({ user, notify }) {
  const [cnpjData, setCnpjData] = useState(null);
  const [fetchingCnpj, setFetchingCnpj] = useState(false);
  const [codMunicipio, setCodMunicipio] = useState(null);
  const [fetchingCodMunicipio, setFetchingCodMunicipio] = useState(false);
  const [fileError, setFileError] = useState('');
  const [isDrag, setIsDrag] = useState(false);
  const [showModal, setShowModal] = useState(false);
  const [correctionField, setCorrectionField] = useState('Razão Social');
  const [correctionData, setCorrectionData] = useState('');
  const [dropdownOpen, setDropdownOpen] = useState(false);
  const [certFile, setCertFile] = useState(null);
  const [certPass, setCertPass] = useState('');
  const [saving, setSaving] = useState(false);
  const modalOptions = ["Razão Social", "Endereço / Logradouro", "Inscrição Estadual", "Natureza Jurídica", "Código IBGE"];

  useEffect(() => {
    if (user.cnpj) {
      setFetchingCodMunicipio(true);
      const cleanCnpj = user.cnpj.replace(/\D/g, '');
      fetch(`https://brasilapi.com.br/api/cnpj/v1/${cleanCnpj}`)
        .then(res => res.json())
        .then(data => {
          if (data.razao_social) setCodMunicipio(data);
        })
        .catch(err => console.log('Erro ao buscar código do município'))
        .finally(() => setFetchingCodMunicipio(false));

      fetch(`https://api.opencnpj.org/${cleanCnpj}`)
        .then(res => res.json())
        .then(data => {
          if (data.razao_social) setCnpjData(data);
        })
        .catch(err => console.log('Erro ao buscar CNPJ (Usando Mock Local)'))
        .finally(() => setFetchingCnpj(false));
    }
  }, [user.cnpj]);

  const processFile = (file) => {
    setFileError('');
    if (file) {
      if (!file.name.toLowerCase().endsWith('.pfx')) {
        setFileError('Segurança: Arquivo rejeitado. Por favor, envie o certificado A1 original criptografado em .PFX.');
      } else {
        setFileError('Sucesso: ' + file.name + ' anexado pronto para validação de senha.');
        setCertFile(file);
        console.log("Certificado PFX aceito na checagem front-end", file);
      }
    }
  };

  const handleDrag = (e) => {
    e.preventDefault(); e.stopPropagation();
    if (e.type === 'dragenter' || e.type === 'dragover') setIsDrag(true);
    else setIsDrag(false);
  };

  const handleDrop = (e) => {
    e.preventDefault(); e.stopPropagation();
    setIsDrag(false);
    if (e.dataTransfer.files && e.dataTransfer.files[0]) {
      processFile(e.dataTransfer.files[0]);
    }
  };

  return (
    <div className="animate-fade-in relative">
      <div className="page-header">
        <div>
          <h2>Meu Perfil Físcal</h2>
          <p>Mantenha seus dados e certificados atualizados para o motor de Inteligência Artificial processar sem falhas.</p>
        </div>
      </div>

      {fetchingCnpj && <div className="api-block"><i className="ph ph-spinner-gap ph-spin" style={{ fontSize: '1.5rem' }}></i> Sincronizando metadados...</div>}

      {cnpjData && !fetchingCnpj && (
        <div className="api-block" style={{ display: 'flex', alignItems: 'center', gap: '1rem', flexWrap: 'wrap' }}>
          <i className="ph-fill ph-check-circle" style={{ color: 'var(--primary-color)', fontSize: '2rem' }}></i>
          <div style={{ flex: 1 }}>
            <strong>Dados da Empresa Sincronizados Oficialmente!</strong>
            <p style={{ margin: 0, fontSize: '0.9rem', color: 'var(--text-secondary)' }}>
              Dados retonados e validados do Emitente {cnpjData.razao_social}
            </p>
          </div>
          <button className="btn btn-outline" style={{ fontSize: '0.85rem', padding: '0.6rem 1.2rem', borderColor: '#f97316', color: '#f97316' }} onClick={(e) => { e.preventDefault(); setShowModal(true); }}>
            <i className="ph ph-warning"></i> Algum dado incorreto?
          </button>
        </div>
      )}

      {showModal && (
        <div style={{ position: 'fixed', top: 0, left: 0, width: '100%', height: '100%', background: 'rgba(0,0,0,0.6)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 99999 }}>
          <div className="card" style={{ minWidth: '400px', maxWidth: '90%', border: '1px solid #f97316', overflow: 'visible' }}>
            <h3 style={{ marginBottom: '1.5rem', color: '#f97316' }}>Solicitar Correção de Dado</h3>
            <div className="form-group">
              <label>Qual dado oficial está retornando incorreto?</label>

              <div style={{ position: 'relative' }}>
                <div className="filter-input" onClick={() => setDropdownOpen(!dropdownOpen)} style={{ cursor: 'pointer', display: 'flex', justifyContent: 'space-between', alignItems: 'center', userSelect: 'none' }}>
                  <span>{correctionField}</span>
                  <i className={`ph ph-caret-${dropdownOpen ? 'up' : 'down'}`}></i>
                </div>

                {dropdownOpen && (
                  <div style={{ position: 'absolute', top: '100%', left: 0, width: '100%', zIndex: 100, padding: '0.5rem', marginTop: '0.5rem', boxShadow: '0 10px 30px rgba(0,0,0,0.5)', background: 'var(--surface-color)', border: '1px solid var(--primary-color)', borderRadius: '12px' }}>
                    {modalOptions.map(opt => (
                      <div key={opt}
                        onMouseEnter={(e) => e.target.style.background = opt === correctionField ? 'var(--primary-color)' : 'rgba(128,128,128,0.1)'}
                        onMouseLeave={(e) => e.target.style.background = opt === correctionField ? 'var(--primary-color)' : 'transparent'}
                        style={{
                          padding: '0.8rem 1rem',
                          borderRadius: '8px',
                          cursor: 'pointer',
                          transition: 'background 0.2s',
                          backgroundColor: correctionField === opt ? 'var(--primary-color)' : 'transparent',
                          color: correctionField === opt ? '#000' : 'var(--text-primary)',
                          fontWeight: correctionField === opt ? '600' : 'normal',
                          marginBottom: '2px'
                        }}
                        onClick={() => { setCorrectionField(opt); setDropdownOpen(false); }}>
                        {opt}
                      </div>
                    ))}
                  </div>
                )}
              </div>

            </div>
            <div className="form-group" style={{ marginTop: '1rem' }}>
              <label>Informe com atenção o dado correto:</label>
              <textarea className="filter-input" rows="3" placeholder="Ex: A Razão correta sem liminares de processo é 'Fazenda Nova Crixas LTDA'." value={correctionData} onChange={e => setCorrectionData(e.target.value)}></textarea>
            </div>
            <div style={{ display: 'flex', gap: '1rem', justifyContent: 'flex-end', marginTop: '2rem' }}>
              <button className="btn btn-outline" type="button" onClick={() => setShowModal(false)}>Cancelar</button>
              <button className="btn btn-primary" type="button" style={{ background: '#f97316' }} onClick={() => {
                const limitStr = encodeURIComponent(`Olá equipe iaagro!\n\nGostaria de abrir um ticket para correção manual de dados.\n\n*CNPJ:* ${formatCNPJ(user.cnpj)}\n*Campo Inconsistente:* ${correctionField}\n*Dado Atualizado / Informação Correta:* ${correctionData}\n\nAguardo a aprovação.`);
                window.open(`https://wa.me/5511999999999?text=${limitStr}`, '_blank');
                setShowModal(false);
                setCorrectionData('');
              }}>Enviar via WhatsApp</button>
            </div>
          </div>
        </div>
      )}

      <div className="card">
        <form>
          <div className="profile-grid">
            <div className="form-group full-width">
              <label htmlFor="p-name">Nome do Gestor ou Sócio</label>
              <div className="input-wrapper">
                <input type="text" id="p-name" defaultValue={user.name} />
                <i className="ph ph-user form-icon"></i>
              </div>
            </div>

            <div className="form-group">
              <label htmlFor="p-cpf">CPF do Gestor</label>
              <div className="input-wrapper">
                <input type="text" id="p-cpf" defaultValue={formatCPF(user.cpf)} readOnly disabled style={{ opacity: 0.6 }} />
                <i className="ph ph-identification-card form-icon"></i>
              </div>
            </div>

            <div className="form-group">
              <label htmlFor="p-email">E-mail Comercial Monitorado</label>
              <div className="input-wrapper">
                <input type="email" id="p-email" defaultValue={user.email} />
                <i className="ph ph-envelope-simple form-icon"></i>
              </div>
            </div>

            <div className="form-group">
              <label htmlFor="p-cnpj">CNPJ Verificado</label>
              <div className="input-wrapper">
                <input type="text" id="p-cnpj" defaultValue={cnpjData ? formatCNPJ(cnpjData.cnpj) : formatCNPJ(user.cnpj)} readOnly disabled style={{ opacity: 0.6 }} />
                <i className="ph ph-lock-key form-icon"></i>
              </div>
            </div>

            <div className="form-group">
              <label htmlFor="p-phone">Chave WhatsApp (Não editável)</label>
              <div className="input-wrapper">
                <input type="text" id="p-phone" defaultValue={user.phone} readOnly disabled style={{ opacity: 0.6 }} />
                <i className="ph ph-phone form-icon"></i>
              </div>
            </div>
          </div>

          <h3 style={{ marginTop: '2.5rem', marginBottom: '1rem', color: 'var(--primary-color)', borderBottom: '1px solid var(--surface-border)', paddingBottom: '0.5rem' }}>
            Dados Tributários (Portal Automático)
          </h3>
          <div className="profile-grid">
            <div className="form-group full-width">
              <label>Razão Social Oficial</label>
              <div className="input-wrapper">
                <input type="text" value={cnpjData ? cnpjData.razao_social : ''} readOnly disabled style={{ opacity: 0.6 }} />
                <i className="ph ph-buildings form-icon"></i>
              </div>
            </div>

            <div className="form-group">
              <label>Tipo Logradouro</label>
              <div className="input-wrapper">
                <input type="text" value={cnpjData ? (cnpjData.tipo_logradouro || (cnpjData.logradouro ? cnpjData.logradouro.split(' ')[0] : 'S/ TR')) : '...'} readOnly disabled style={{ opacity: 0.6 }} />
                <i className="ph ph-road-horizon form-icon"></i>
              </div>
            </div>

            <div className="form-group">
              <label>Logradouro</label>
              <div className="input-wrapper">
                <input type="text" value={cnpjData?.logradouro || 'Sem Logradouro Fixo'} readOnly disabled style={{ opacity: 0.6 }} />
                <i className="ph ph-map-pin form-icon"></i>
              </div>
            </div>

            <div className="form-group">
              <label>Número</label>
              <div className="input-wrapper">
                <input type="text" value={cnpjData?.numero || 'S/N'} readOnly disabled style={{ opacity: 0.6 }} />
                <i className="ph ph-hash form-icon"></i>
              </div>
            </div>

            <div className="form-group">
              <label>Complemento</label>
              <div className="input-wrapper">
                <input type="text" value={cnpjData?.complemento || 'Nenhum'} readOnly disabled style={{ opacity: 0.6 }} />
                <i className="ph ph-plus form-icon"></i>
              </div>
            </div>

            <div className="form-group">
              <label>CEP</label>
              <div className="input-wrapper">
                <input type="text" value={cnpjData?.cep || 'N/A'} readOnly disabled style={{ opacity: 0.6 }} />
                <i className="ph ph-envelope-simple form-icon"></i>
              </div>
            </div>

            <div className="form-group">
              <label>Bairro</label>
              <div className="input-wrapper">
                <input type="text" value={cnpjData?.bairro || 'Sem Bairro'} readOnly disabled style={{ opacity: 0.6 }} />
                <i className="ph ph-map-trifold form-icon"></i>
              </div>
            </div>

            <div className="form-group">
              <label>Código Município IBGE</label>
              <div className="input-wrapper">
                <input type="text" value={codMunicipio?.codigo_municipio || 'N/A'} readOnly disabled style={{ opacity: 0.6 }} />
                <i className="ph ph-barcode form-icon"></i>
              </div>
            </div>

            <div className="form-group">
              <label>Município</label>
              <div className="input-wrapper">
                <input type="text" value={cnpjData?.municipio || 'N/A'} readOnly disabled style={{ opacity: 0.6 }} />
                <i className="ph ph-city form-icon"></i>
              </div>
            </div>

            <div className="form-group">
              <label>Estado (UF)</label>
              <div className="input-wrapper">
                <input type="text" value={cnpjData?.uf || 'N/A'} readOnly disabled style={{ opacity: 0.6 }} />
                <i className="ph ph-map-pin-line form-icon"></i>
              </div>
            </div>

            <div className="form-group">
              <label>País</label>
              <div className="input-wrapper">
                <input type="text" value={cnpjData ? "Brasil" : 'N/A'} readOnly disabled style={{ opacity: 0.6 }} />
                <i className="ph ph-flag form-icon"></i>
              </div>
            </div>

            <div className="form-group full-width">
              <label>Natureza Jurídica</label>
              <div className="input-wrapper">
                <input type="text" value={cnpjData?.natureza_juridica || 'N/A'} readOnly disabled style={{ opacity: 0.6 }} />
                <i className="ph ph-briefcase form-icon"></i>
              </div>
            </div>
          </div>

          <h3 style={{ marginTop: '2.5rem', marginBottom: '1rem', color: 'var(--primary-color)', borderBottom: '1px solid var(--surface-border)', paddingBottom: '0.5rem' }}>
            Certificado Digital Sefaz
          </h3>
          <p style={{ fontSize: '0.95rem', color: 'var(--text-secondary)', marginBottom: '1.5rem' }}>
            Para habilitar o disparo criptografado das notas, faça o upload de seu arquivo <strong>.PFX Tipo A1</strong> válido.
          </p>

          <div className="profile-grid" style={{ alignItems: 'flex-start' }}>
            <div className="form-group full-width">
              <label>Substituição ou Novo Certificado</label>

              <div
                className={`drop-zone ${isDrag ? 'drag-active' : ''}`}
                onDragEnter={handleDrag} onDragLeave={handleDrag} onDragOver={handleDrag} onDrop={handleDrop}
              >
                <input type="file" accept=".pfx, application/x-pkcs12" onChange={e => processFile(e.target.files[0])} className="drop-input" />
                <i className="ph ph-upload-simple" style={{ fontSize: '3rem', color: 'var(--primary-color)' }}></i>
                <p style={{ marginTop: '1rem', color: 'var(--text-secondary)' }}>Arraste seu certificado <strong>.pfx</strong> aqui ou clique para procurar</p>
                {fileError && <p style={{ color: fileError.includes('Sucesso') ? 'var(--primary-color)' : 'var(--danger)', fontSize: '0.9rem', marginTop: '0.5rem' }}><i className="ph-fill ph-info"></i> {fileError}</p>}
              </div>
            </div>

            <div className="form-group full-width">
              <label htmlFor="p-cert-pass">Senha Privada do Certificado (PIN / Token Oculto)</label>
              <div className="input-wrapper">
                <input type="password" id="p-cert-pass" placeholder="Insira a senha do A1" value={certPass} onChange={e => setCertPass(e.target.value)} />
                <i className="ph ph-key form-icon"></i>
              </div>
            </div>
          </div>

          <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '2rem' }}>
            <button type="button" className="btn btn-primary" disabled={saving} onClick={async (e) => { 
                e.preventDefault(); 
                if(!certFile || !certPass) return alert("Selecione o arquivo PFX e digite a senha.");
                setSaving(true);
                const fd = new FormData();
                fd.append('userId', user.id);
                fd.append('certPassword', certPass);
                fd.append('certificate', certFile);
                try {
                    const res = await fetch(`${API_URL}/user/update-certificate`, { method: 'POST', body: fd });
                    const data = await res.json();
                    if(res.ok) notify("Certificado A1 salvo com sucesso no S3!", "success");
                    else notify(data.error, "error");
                } catch(err) { notify("Erro ao conectar com servidor.", "error"); }
                finally { setSaving(false); }
            }}>
              <i className={`ph-bold ${saving ? 'ph-spinner-gap ph-spin' : 'ph-floppy-disk'}`}></i> {saving ? 'Enviando...' : 'Validar e Salvar Configurações'}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}

function AuthorizedNumbersView({ userId, notify }) {
  const [numbers, setNumbers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [newName, setNewName] = useState('');
  const [newPhone, setNewPhone] = useState('');

  const fetchNumbers = async () => {
    try {
      const res = await fetch(`${API_URL}/authorized-numbers/${userId}`);
      const data = await res.json();
      setNumbers(data);
    } catch(err) { console.error(err); }
    finally { setLoading(false); }
  };

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

  const handleAdd = async (e) => {
    e.preventDefault();
    if(!newName || !newPhone) return notify("Preencha nome e número.", "error");
    try {
      const res = await fetch(`${API_URL}/authorized-numbers/add`, {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({ userId, name: newName, phone: newPhone })
      });
      if(res.ok) {
        setNewName(''); setNewPhone('');
        fetchNumbers();
        notify("Número autorizado com sucesso!", "success");
      }
    } catch(err) { console.error(err); }
  };

  const handleDelete = async (id) => {
    if(!confirm("Deseja remover esta autorização?")) return;
    try {
      const res = await fetch(`${API_URL}/authorized-numbers/${id}`, { method: 'DELETE' });
      if(res.ok) {
          fetchNumbers();
          notify("Autorização removida.", "info");
      }
    } catch(err) { console.error(err); }
  };

  return (
    <div className="animate-fade-in">
      <div className="page-header">
        <div>
          <h2>Números Autorizados</h2>
          <p>Gerencie quem pode emitir notas fiscais pelo WhatsApp em seu nome.</p>
        </div>
      </div>

      <div className="card" style={{ marginBottom: '2rem' }}>
        <h3 style={{ marginBottom: '1.5rem' }}>Adicionar Nova Autorização</h3>
        <form onSubmit={handleAdd} style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
          <div className="form-group" style={{ flex: 2, minWidth: '200px' }}>
            <label>Nome do Colaborador / Familiar</label>
            <input type="text" className="filter-input" value={newName} onChange={e => setNewName(e.target.value)} placeholder="Ex: João da Fazenda" />
          </div>
          <div className="form-group" style={{ flex: 1, minWidth: '200px' }}>
            <label>WhatsApp (Com DDD)</label>
            <input type="text" className="filter-input" value={newPhone} onChange={e => setNewPhone(e.target.value)} placeholder="11999999999" />
          </div>
          <div style={{ display: 'flex', alignItems: 'flex-end', marginBottom: '1.5rem' }}>
            <button type="submit" className="btn btn-primary">
              <i className="ph ph-plus-circle"></i> Autorizar
            </button>
          </div>
        </form>
      </div>

      <div className="card">
        <h3>Lista de Autorizados</h3>
        {loading ? <p>Carregando...</p> : (
          <table className="data-table">
            <thead>
              <tr>
                <th>Nome</th>
                <th>Número (WhatsApp)</th>
                <th>Data Autorização</th>
                <th>Ações</th>
              </tr>
            </thead>
            <tbody>
              {numbers.map(n => (
                <tr key={n.id}>
                  <td style={{ fontWeight: '600' }}>{n.name}</td>
                  <td>{n.phone}</td>
                  <td>{new Date(n.created_at).toLocaleDateString()}</td>
                  <td>
                    <button className="btn-icon" style={{ color: 'var(--danger)' }} onClick={() => handleDelete(n.id)}>
                      <i className="ph ph-trash"></i>
                    </button>
                  </td>
                </tr>
              ))}
              {numbers.length === 0 && (
                <tr>
                  <td colSpan="4" style={{ textAlign: 'center', padding: '2rem' }}>Ninguém autorizado ainda.</td>
                </tr>
              )}
            </tbody>
          </table>
        )}
      </div>
    </div>
  );
}

function PlanoView({ user, notify }) {
  const [loading, setLoading] = useState(false);
  const [currentUser, setCurrentUser] = useState(user);
  const [showPayForm, setShowPayForm] = useState(null); // 'iniciante', 'profissional', etc
  const [cardData, setCardData] = useState({ holderName: '', number: '', expiry: '', cvv: '' });

  useEffect(() => {
     // Atualiza dados do usuário para pegar plano/vencimento novo
     fetch(`${API_URL}/user/${user.id}`)
     .then(res => res.json())
     .then(data => { if(data.id) setCurrentUser(data); });
  }, []);

  const handleSubscribe = async (planKey) => {
    setLoading(true);
    try {
      const response = await fetch(`${API_URL}/subscription/checkout`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ userId: user.id, planKey })
      });
      const data = await response.json();
      if (response.ok) {
        if (data.invoiceUrl) {
           const width = 600;
           const height = 800;
           const left = (window.screen.width / 2) - (width / 2);
           const top = (window.screen.height / 2) - (height / 2);
           const popup = window.open(data.invoiceUrl, 'AsaasCheckout', `width=${width},height=${height},top=${top},left=${left}`);
           
           if (!popup || popup.closed || typeof popup.closed === 'undefined') {
              notify("Checkout bloqueado pelo navegador. Por favor, libere popups e tente novamente.", "error");
              // Adicional: Abrir fallback em aba normal
              window.open(data.invoiceUrl, '_blank');
           } else {
              notify("Janela de pagamento aberta! Aguarde a conclusão.", "info");
           }

           // Polling para verificar quando o status muda para ACTIVE
           const checkStatus = setInterval(async () => {
              const res = await fetch(`${API_URL}/user/${user.id}`);
              const updated = await res.json();
              if (updated.subscription_status === 'ACTIVE') {
                 setCurrentUser(updated);
                 notify("Pagamento confirmado! Plano ativado.", "success");
                 clearInterval(checkStatus);
              }
           }, 5000);
           // Limpar polling após 10 minutos
           setTimeout(() => clearInterval(checkStatus), 600000);

        } else {
           notify("Troca de plano agendada com sucesso! Você continuará usando o plano atual até o próximo ciclo.", "success");
        }
      } else {
        notify(data.error || "Erro ao processar assinatura.", "error");
      }
    } catch (err) {
      notify("Erro de conexão.", "error");
    } finally {
      setLoading(false);
    }
  };

  const isCurrentPlan = (key) => currentUser.plan_key === key;
  const isScheduled = (key) => currentUser.next_plan_key === key;

  return (
    <div className="animate-fade-in">
      <div className="page-header">
        <div>
          <h2>Gestão de Assinatura</h2>
          <p>Status atual: <strong style={{ color: currentUser.subscription_status === 'ACTIVE' ? 'var(--primary-color)' : '#999' }}>
            {currentUser.subscription_status === 'ACTIVE' 
               ? `Pago - Válido até ${new Date(currentUser.due_date).toLocaleDateString()}` 
               : 'Aguardando Pagamento / Inativo'}
          </strong></p>
          <div className="usage-stats" style={{ marginTop: '1rem', background: 'rgba(255,255,255,0.05)', padding: '1rem', borderRadius: '8px', display: 'block' }}>
             <p style={{marginBottom: '0.5rem', fontSize: '1rem', color: '#fff', fontWeight: 'bold'}}>
                Cota de Emissão: <span style={{color: 'var(--primary-color)'}}>{currentUser.notes_used || 0} / {currentUser.notes_limit > 1000 ? 'Ilimitado' : (currentUser.notes_limit || 0)}</span> notas
             </p>
             <div className="usage-progress-bg" style={{ width: '100%', height: '10px', background: 'rgba(255,255,255,0.1)', borderRadius: '5px', overflow: 'hidden' }}>
                <div style={{ width: `${Math.min(100, (currentUser.notes_used / (currentUser.notes_limit || 1)) * 100) || 0}%`, height: '100%', background: 'var(--primary-color)', transition: 'width 0.5s ease' }}></div>
             </div>
          </div>
        </div>
      </div>

        <div className="plans-grid">
          <div className={`plan-card ${isCurrentPlan('iniciante') ? 'active-plan' : ''}`}>
            {isCurrentPlan('iniciante') && <div className="badge-popular">Seu Plano</div>}
            <h3 className="plan-name">Iniciante</h3>
            <div className="plan-price"><span className="plan-currency">R$</span>49<span className="plan-period">/mês</span></div>
            <ul className="plan-features">
              <li><i className="ph-bold ph-check"></i> 50 Emissões/mês</li>
              <li><i className="ph-bold ph-check"></i> Bot WhatsApp Básico</li>
            </ul>
            <button 
              className={`btn ${isScheduled('iniciante') ? 'btn-info' : 'btn-outline'}`} 
              disabled={loading || isCurrentPlan('iniciante') || isScheduled('iniciante')} 
              onClick={() => handleSubscribe('iniciante')}
            >
              {isCurrentPlan('iniciante') ? 'Plano Atual' : (isScheduled('iniciante') ? 'Troca Agendada' : 'Migrar / Assinar')}
            </button>
          </div>

          <div className={`plan-card popular ${isCurrentPlan('profissional') ? 'active-plan' : ''}`}>
            {isCurrentPlan('profissional') ? <div className="badge-popular">Seu Plano</div> : <div className="badge-popular">Recomendado</div>}
            <h3 className="plan-name text-gradient">Profissional</h3>
            <div className="plan-price"><span className="plan-currency">R$</span>129<span className="plan-period">/mês</span></div>
            <ul className="plan-features">
              <li><i className="ph-bold ph-check"></i> 100 Emissões/mês</li>
              <li><i className="ph-bold ph-check"></i> Motor de IA Avançado</li>
              <li><i className="ph-bold ph-check"></i> Sincroniza Sefaz</li>
            </ul>
            <button 
               className={`btn ${isScheduled('profissional') ? 'btn-info' : 'btn-primary'}`} 
               disabled={loading || isCurrentPlan('profissional') || isScheduled('profissional')} 
               onClick={() => handleSubscribe('profissional')}
            >
               {isCurrentPlan('profissional') ? 'Plano Atual' : (isScheduled('profissional') ? 'Troca Agendada' : 'Assinar Agora')}
            </button>
          </div>

          <div className={`plan-card ${isCurrentPlan('cooperativa') ? 'active-plan' : ''}`}>
             {isCurrentPlan('cooperativa') && <div className="badge-popular">Seu Plano</div>}
            <h3 className="plan-name">Cooperativa</h3>
            <div className="plan-price"><span className="plan-currency">R$</span>299<span className="plan-period">/mês</span></div>
            <ul className="plan-features">
              <li><i className="ph-bold ph-check"></i> Múltiplos CNPJs</li>
              <li><i className="ph-bold ph-check"></i> Relatórios p/ Contador</li>
            </ul>
            <button 
               className={`btn ${isScheduled('cooperativa') ? 'btn-info' : 'btn-outline'}`} 
               disabled={loading || isCurrentPlan('cooperativa') || isScheduled('cooperativa')} 
               onClick={() => handleSubscribe('cooperativa')}
            >
               {isCurrentPlan('cooperativa') ? 'Plano Atual' : (isScheduled('cooperativa') ? 'Troca Agendada' : 'Escolher Plano')}
            </button>
          </div>
        </div>
    </div>
  );
}

// === COMPONENTE DE FUNDO INTERATIVO ===
function InteractiveBackground() {
  const glowRef = React.useRef(null);
  const gridRef = React.useRef(null);

  useEffect(() => {
    let mouseX = window.innerWidth / 2;
    let mouseY = window.innerHeight / 2;

    const handleMouseMove = (e) => {
      mouseX = e.clientX;
      mouseY = e.clientY;
    };
    window.addEventListener('mousemove', handleMouseMove);

    let animationFrameId;
    let currentX = mouseX;
    let currentY = mouseY;

    const render = () => {
      currentX += (mouseX - currentX) * 0.06;
      currentY += (mouseY - currentY) * 0.06;
      if (glowRef.current) {
        glowRef.current.style.transform = `translate(calc(${currentX}px - 50%), calc(${currentY}px - 50%))`;
      }
      if (gridRef.current) {
        // Mascara o GRID iluminando somente a área envolta do cursor dinamicamente
        const maskStyle = `radial-gradient(circle 350px at ${currentX}px ${currentY}px, black 0%, transparent 100%)`;
        gridRef.current.style.maskImage = maskStyle;
        gridRef.current.style.WebkitMaskImage = maskStyle;
      }
      animationFrameId = requestAnimationFrame(render);
    };
    render();

    return () => {
      window.removeEventListener('mousemove', handleMouseMove);
      cancelAnimationFrame(animationFrameId);
    };
  }, []);

  return (
    <div style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, pointerEvents: 'none', zIndex: -2, overflow: 'hidden' }}>
      {/* O Grid Transparente que é revelado pelo mouse */}
      <div ref={gridRef} className="interactive-grid"></div>

      {/* Orbe dinâmico de luz verde/neon */}
      <div
        ref={glowRef}
        style={{
          position: 'absolute',
          top: 0, left: 0,
          width: '700px', height: '700px',
          borderRadius: '50%',
          background: 'radial-gradient(circle, rgba(0, 210, 106, 0.025) 0%, rgba(0, 0, 0, 0) 70%)',
          filter: 'blur(40px)',
          transform: 'translate(-50%, -50%)',
          willChange: 'transform'
        }}
      ></div>
    </div>
  );
}

// Render do React
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);