/* global React, Icon, Ticker */

function MPortais({ onNav }) {
  return (
    <>
      <Ticker />
      <div className="page">
        <div className="page-header">
          <div>
            <div className="eyebrow">
              <span>Portais Externos</span>
              <span className="chip">M10</span>
              <span className="badge" style={{ background: 'var(--bg-3)', color: 'var(--fg-3)' }}>DEMO · aguarda Storage + scraping de portais</span>
            </div>
            <h1 className="page-title">Portal do Cliente · Portal do Contador</h1>
            <p className="page-sub">Visão restrita por papel: cliente acompanha pedidos e NFs · contador exporta XML/SPED/livros fiscais por competência.</p>
          </div>
        </div>

        <div className="card" style={{ padding: 48, marginTop: 14, textAlign: 'center' }}>
          <div style={{ display: 'inline-grid', placeItems: 'center', width: 72, height: 72, borderRadius: '50%', background: 'var(--bg-2)', border: '1px solid var(--line-2)', marginBottom: 18 }}>
            <Icon name="users" size={32} style={{ color: 'var(--fg-3)' }} />
          </div>
          <div style={{ fontSize: 18, fontWeight: 600, marginBottom: 8 }}>Aguardando Storage + integrações de portais</div>
          <p style={{ fontSize: 13, color: 'var(--fg-2)', maxWidth: 600, margin: '0 auto 22px', lineHeight: 1.6 }}>
            Este módulo expõe duas visões externas: <strong>Portal do Cliente</strong> (órgãos públicos acompanham seus pedidos)
            e <strong>Portal do Contador</strong> (download de XML/SPED por competência).
            Precisa de <strong>Supabase Storage</strong> para os arquivos fiscais e scraping de portais públicos (PNCP, Comprasnet) para alimentação automática.
          </p>
          <div style={{ display: 'flex', justifyContent: 'center', gap: 10, flexWrap: 'wrap' }}>
            <button className="btn" onClick={() => onNav('config')}>
              <Icon name="settings" /> Abrir M13 Configurações
            </button>
          </div>

          <div style={{ marginTop: 36, padding: 18, background: 'var(--bg-2)', borderRadius: 6, maxWidth: 680, margin: '36px auto 0', textAlign: 'left' }}>
            <div className="field-label" style={{ marginBottom: 10 }}>O QUE ESTE MÓDULO FARÁ QUANDO ATIVO</div>
            <ul style={{ fontSize: 12, color: 'var(--fg-1)', lineHeight: 1.8, paddingLeft: 18, margin: 0 }}>
              <li><strong>Portal do Cliente:</strong> login restrito do órgão · acompanha pedidos, rastreio, NF, solicita 2ª via</li>
              <li><strong>Portal do Contador:</strong> download de NFs, SPED Fiscal, SPED Contribuições, DCTFWeb, livros fiscais por competência</li>
              <li><strong>Scraping de portais:</strong> captura automática de editais PNCP/Comprasnet (após contrato Edge Function)</li>
              <li><strong>Storage:</strong> arquivamento dos PDFs/XMLs com retenção fiscal de 5 anos (LGPD-compliant)</li>
            </ul>
          </div>
        </div>
      </div>
    </>
  );
}

window.MPortais = MPortais;