/* FINANCEIRO wrapper — sub-nav cobrancas / tesouraria / contabilidade / controlling.
   Cobranças é o módulo activo (5 vistas internas via FinanceCobrancasModule).
   Os outros 3 são placeholders honestos enquanto o módulo Patrícia matura. */

const FinTodoStub = ({ title, kicker, owner, eta, blurb, items }) => (
  <div className="scrollbar" style={{ padding: '24px 28px 80px', height: '100%', overflowY: 'auto' }}>
    <div className="font-mono" style={{ fontSize: 11, color: 'var(--text-dim)', letterSpacing: '0.08em' }}>
      FINANCEIRO · {kicker}
    </div>
    <h2 className="font-display" style={{ margin: '6px 0 4px', fontSize: 28, fontWeight: 500, letterSpacing: '-0.01em' }}>
      {title}
    </h2>
    <div style={{ fontSize: 13, color: 'var(--text-muted)', maxWidth: 640, lineHeight: 1.55 }}>{blurb}</div>

    <div style={{ display: 'flex', gap: 8, marginTop: 14, flexWrap: 'wrap' }}>
      <span className="badge" style={{ fontSize: 10.5 }}>
        <Icon name="user" size={11} />Owner · {owner}
      </span>
      <span className="badge" style={{ fontSize: 10.5 }}>
        <Icon name="calendar" size={11} />ETA · {eta}
      </span>
      <span className="badge badge-warning" style={{ fontSize: 10.5 }}>
        <Icon name="flag" size={11} />Por desenhar com utilizador
      </span>
    </div>

    <div className="card" style={{ marginTop: 22, padding: 0, maxWidth: 760 }}>
      <div style={{ padding: '14px 18px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div className="font-display" style={{ fontSize: 12.5, fontWeight: 600, letterSpacing: '0.06em', color: 'var(--text-muted)' }}>
          O QUE A DIGI VAI FAZER AQUI
        </div>
        <span className="font-mono" style={{ fontSize: 10, color: 'var(--text-dim)' }}>{items.length} capacidades</span>
      </div>
      {items.map((it, i) => (
        <div key={i} style={{
          padding: '12px 18px',
          borderBottom: i < items.length - 1 ? '1px solid var(--border)' : 'none',
          display: 'flex', alignItems: 'flex-start', gap: 12,
        }}>
          <div style={{
            width: 24, height: 24, borderRadius: 6, flexShrink: 0,
            background: 'var(--bg-sunken)', border: '1px solid var(--border)',
            display: 'grid', placeItems: 'center',
            fontFamily: 'var(--font-mono)', fontSize: 10.5, color: 'var(--text-dim)', fontWeight: 600,
          }}>{String(i + 1).padStart(2, '0')}</div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 13, fontWeight: 500 }}>{it.t}</div>
            <div style={{ fontSize: 11.5, color: 'var(--text-muted)', marginTop: 2, lineHeight: 1.5 }}>{it.d}</div>
          </div>
        </div>
      ))}
    </div>

    <div className="ai-surface card" style={{ marginTop: 16, padding: 14, maxWidth: 760 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
        <span className="ai-chip"><span className="ai-dot" />Digi AI · contexto</span>
      </div>
      <div style={{ fontSize: 12.5, lineHeight: 1.55, color: 'var(--text-muted)' }}>
        Esta área é placeholder honesto — o desenho final sai de 1-2 sessões com o owner. Cobranças
        está em produção; quando estabilizar, replicamos o padrão (KPIs · queue · drilldown · config) aqui.
      </div>
    </div>
  </div>
);

const FinTesouraria = () => (
  <FinTodoStub
    kicker="TESOURARIA"
    title="Cash flow & previsão"
    owner="Etelvina"
    eta="Q3 2026"
    blurb="Posição diária por banco, projecção 13 semanas, alertas de cobertura, calendário de pagamentos a fornecedores. Liga a Cobranças (entradas previstas) e Compras (saídas confirmadas)."
    items={[
      { t: 'Posição diária consolidada', d: '4 bancos · saldo + cativo + disponível · sync diário 09:00.' },
      { t: 'Cash flow rolling 13 semanas', d: 'Confirmados · provisórios · cenário pessimista. Entradas vêm de Cobranças, saídas de Compras.' },
      { t: 'Calendário de pagamentos', d: 'Aprovação em lote por dia · separação fornecedores críticos / não-críticos · auto-batching SEPA.' },
      { t: 'Alertas de cobertura', d: 'Digi avisa quando projecção descoberta a 4 semanas vista — antes de Patrícia ter de descobrir.' },
      { t: 'Reconciliação bancária', d: 'Match automático extracto ↔ documento · só excepções chegam à Etelvina.' },
    ]}
  />
);

const FinContabilidade = () => (
  <FinTodoStub
    kicker="CONTABILIDADE"
    title="Lançamentos, fecho e fiscal"
    owner="Etelvina + contabilista externo"
    eta="Q4 2026"
    blurb="Diário, balancete, fecho mensal, IVA, IES, modelo 22. A Digi não substitui Primavera — assiste a Etelvina nos lançamentos repetitivos e prepara fechos."
    items={[
      { t: 'Lançamentos repetitivos', d: 'Reconciliação bancária + classificação de despesas frequentes · sugestão Digi com confidence; Etelvina valida.' },
      { t: 'Fecho mensal · checklist', d: 'Etapas obrigatórias (provisões, acréscimos, depreciações) · estado por empresa SGPS · alerta dia útil 10.' },
      { t: 'IVA + retenções', d: 'Pré-validação dos mapas · cruzamento com facturação Primavera · só excepções abrem.' },
      { t: 'Pacote para contabilista', d: 'Export mensal estruturado (movimentos · documentos · justificações) → bypass de email/zip manual.' },
    ]}
  />
);

const FinControlling = ({ onOpenChat }) => {
  if (window.ControllingModule) return <window.ControllingModule onOpenChat={onOpenChat} />;
  return <FinTodoStub kicker="CONTROLLING" title="A carregar..." owner="Clara" eta="—" blurb="Módulo Controlling indisponível." items={[]} />;
};

// ============ Inner ============
const FinanceiroInner = ({ onOpenChat }) => {
  const [sub, setSub] = useSubNav('digi-financeiro-sub', 'cobrancas');

  React.useEffect(() => {
    const onKey = (e) => {
      if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA' || e.target.isContentEditable) return;
      if (e.metaKey || e.ctrlKey || e.altKey) return;
      const map = { '1': 'cobrancas', '2': 'tesouraria', '3': 'contabilidade', '4': 'controlling' };
      if (map[e.key]) setSub(map[e.key]);
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  const Cobrancas = window.FinanceCobrancasModule;

  if (sub === 'cobrancas' && Cobrancas) return <Cobrancas onOpenChat={onOpenChat} />;
  if (sub === 'tesouraria') return <FinTesouraria />;
  if (sub === 'contabilidade') return <FinContabilidade />;
  if (sub === 'controlling') return <FinControlling onOpenChat={onOpenChat} />;
  // fallback: aging report antigo (caso o módulo Cobranças falhe a carregar)
  if (window.FinanceiroLegacyAging) return <window.FinanceiroLegacyAging onOpenChat={onOpenChat} />;
  return Cobrancas ? <Cobrancas onOpenChat={onOpenChat} /> : null;
};

const FinanceiroScreenWrapper = ({ variation, onOpenChat }) => (
  <div style={{ background: 'var(--bg)', height: '100%', minHeight: 0, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
    <FinanceiroInner onOpenChat={onOpenChat} />
  </div>
);

window.FinanceiroScreenWrapper = FinanceiroScreenWrapper;