/* screen_marketing_budget.jsx
   Marketing · Budget — em desenvolvimento.
   Investimento multi-canal · Custo AI · Previsão vs Real.
   Expõe window.MktBudgetScreen.
*/

const MktBudgetScreen = ({ userName }) => {
  const hour = new Date().getHours();
  const saudacao = hour < 12 ? 'Bom dia' : hour < 19 ? 'Boa tarde' : 'Boa noite';
  const rawName = userName || (window.currentUser && (window.currentUser.nome_apresentar || window.currentUser.nome)) || '';
  const firstName = rawName.split(' ')[0] || 'Fábio';

  const cardStyle = { padding: '14px 16px', borderRadius: 10, background: 'var(--bg-sunken)', border: '1px solid var(--border)', display: 'flex', flexDirection: 'column', gap: 4 };
  const titleStyle = { fontSize: 13, fontWeight: 600, color: 'var(--text)', marginBottom: 2 };
  const descStyle  = { fontSize: 12, color: 'var(--text-muted)', lineHeight: 1.6 };
  const sectionLabel = { fontSize: 10, fontFamily: 'var(--font-mono)', letterSpacing: '0.08em', color: 'var(--text-dim)', marginBottom: 10 };
  const subLabel = {
    fontSize: 10, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em',
    color: 'var(--ai-500, #3859D0)', fontFamily: 'var(--font-mono)', marginBottom: 8, marginTop: 4,
    display: 'flex', alignItems: 'center', gap: 6,
  };
  const dot = (color) => ({ width: 7, height: 7, borderRadius: '50%', background: color, flexShrink: 0, display: 'inline-block' });

  const tableHeader = { fontSize: 10, fontWeight: 700, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)', padding: '6px 10px', background: 'var(--bg-sunken)', borderBottom: '1px solid var(--border)' };
  const tableCell   = { fontSize: 12, color: 'var(--text)', padding: '8px 10px', borderBottom: '1px solid var(--border)', lineHeight: 1.5 };
  const tableCellMuted = { ...tableCell, color: 'var(--text-muted)' };

  return (
    <div className="scrollbar" style={{ height: '100%', overflowY: 'auto' }}>

      {/* Page header */}
      <div style={{ padding: '28px 32px 0', flexShrink: 0 }}>
        <div style={{ fontSize: 10, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)', letterSpacing: '0.08em' }}>
          MARKETING · BUDGET
        </div>
        <h1 className="font-display" style={{ margin: '6px 0 4px', fontSize: 26, fontWeight: 600, letterSpacing: '-0.015em' }}>
          Budget
        </h1>
        <div style={{ fontSize: 12, color: 'var(--text-muted)', display: 'flex', alignItems: 'center', gap: 8, marginBottom: 20 }}>
          Investimento multi-canal · Custo AI · Previsão vs Real
          <span style={{
            fontSize: 9, fontFamily: 'var(--font-mono)', letterSpacing: '0.09em', fontWeight: 600,
            padding: '2px 7px', borderRadius: 4,
            background: 'color-mix(in oklch, var(--warning) 12%, transparent)',
            color: 'var(--warning)',
            border: '1px solid color-mix(in oklch, var(--warning) 28%, transparent)',
          }}>EM DESENVOLVIMENTO</span>
        </div>

        <div style={{ fontSize: 22, fontWeight: 700, color: 'var(--text)', fontFamily: 'var(--font-display)', marginBottom: 6, letterSpacing: '-0.02em' }}>
          {saudacao}, {firstName}.
        </div>
        <div style={{ fontSize: 13, color: 'var(--text-muted)', lineHeight: 1.65, maxWidth: 700, marginBottom: 28 }}>
          Módulo unificado de gestão do budget de Marketing — investimento em todas as plataformas (Ads, Email, PR, Eventos, SaaS) mais o consumo AI (Claude API, Magnific, custos por FRAME e por output). Previsão anual vs consumo real com alertas de burn rate e projecção de fim de trimestre.
        </div>
      </div>

      {/* Two-column layout */}
      <div style={{ padding: '0 32px 40px', display: 'grid', gridTemplateColumns: '1fr 380px', gap: 24, alignItems: 'start' }}>

        {/* ── Coluna esquerda ── */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>

          {/* 1. Origem de dados */}
          <div>
            <div style={sectionLabel}>O QUE ESTARÁ AQUI</div>
            <div style={{ ...subLabel }}><span style={dot('#3859D0')} />Origem de Dados</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                { t: 'Facturas Ads (Meta / Google / LinkedIn)', d: 'Scan automático via email (Brevo/inbox) — extrai valor, período, plataforma. Endpoint já existente.' },
                { t: 'Facturas SaaS + AI', d: 'Brevo · Magnific · Anthropic · OpenAI · Canva · Figma · outros — mesma pipeline de scan-emails.' },
                { t: 'agent_runs (Claude API)', d: 'Cada chamada Claude com input/output tokens, modelo usado e custo calculado. Base para o custo AI granular.' },
                { t: 'briefings · conteudo_campanhas · plano_comunicacao', d: 'Outputs de trabalho ligados aos agent_runs que os geraram — permite atribuir custo por output.' },
                { t: 'Primavera (facturação real)', d: 'Cross-check com facturação real de Marketing no Primavera — reconciliação de fecho mensal.' },
              ].map((f, i) => (
                <div key={i} style={cardStyle}>
                  <div style={titleStyle}>{f.t}</div>
                  <div style={descStyle}>{f.d}</div>
                </div>
              ))}
            </div>
          </div>

          {/* 2. Investimento por canal */}
          <div>
            <div style={{ ...subLabel }}><span style={dot('#0ea5e9')} />Investimento por Canal</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                { t: 'Ads — Meta · Google · LinkedIn', d: 'Planeado vs gasto real por plataforma, por marca × mercado × trimestre. Drill-down por campanha.' },
                { t: 'Email — Brevo (envios + AI templates)', d: 'Custo Brevo + custo AI de geração de templates. Cross-tab com performance de emails enviados.' },
                { t: 'PR · Eventos · Sponsorships', d: 'Feiras, activações, patrocínios, materiais físicos. Registo manual + facturas via scan.' },
                { t: 'Tools SaaS', d: 'Magnific · Nano Banana · Canva · Figma · Anthropic · OpenAI · outras subscrições. Total mensal e anual.' },
                { t: 'Breakdown por marca × mercado × trimestre', d: 'Cruzamento em qualquer eixo — ver quanto foi gasto em Meta Ads PT-Mimaki no Q2, por exemplo.' },
              ].map((f, i) => (
                <div key={i} style={cardStyle}>
                  <div style={titleStyle}>{f.t}</div>
                  <div style={descStyle}>{f.d}</div>
                </div>
              ))}
            </div>
          </div>

          {/* 3. Custo AI (Claude API) */}
          <div>
            <div style={{ ...subLabel }}><span style={dot('#059669')} />Custo AI · Claude API</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                { t: 'Total por modelo', d: 'Consumo em € por modelo (Opus 4.7 · Sonnet 4.6 · Haiku 4.5) — permite decidir onde vale a pena mudar de modelo.' },
                { t: 'Custo por tipo de tarefa', d: 'Briefing · conceito · copy · idiomas · plano trimestral · critic loop · análise concorrentes — todos com custo agregado.' },
                { t: 'Burn rate diário / semanal / mensal', d: 'Ritmo de consumo AI em tempo real — sinal precoce de gasto acima do esperado.' },
                { t: 'Alertas', d: 'Notificação quando >X€/dia · quando projecção fim de mês excede plano · quando custo por output cresce inesperadamente.' },
              ].map((f, i) => (
                <div key={i} style={cardStyle}>
                  <div style={titleStyle}>{f.t}</div>
                  <div style={descStyle}>{f.d}</div>
                </div>
              ))}
            </div>
          </div>

          {/* 4. Custo por FRAME */}
          <div>
            <div style={{ ...subLabel }}><span style={dot('#8b5cf6')} />Custo por FRAME Executado</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                { t: 'FRAMEs medidas', d: 'FRAME-BRIEFING · FRAME-CONCEITO · FRAME-KPI · FRAME-ADS · FRAME-EDITORIAL · FRAME-CONTENT · FRAME-EMAIL · FRAME-SOCIAL.' },
                { t: 'Ranking de FRAMEs mais caras', d: 'Ordenadas por custo total mensal — identifica candidatas a optimização.' },
                { t: 'Custo médio por execução', d: 'Base para decidir usar Sonnet em vez de Opus quando o delta de qualidade não justifica o delta de custo.' },
                { t: 'Delta antes/depois de optimizações', d: 'Cada mudança à FRAME (prompt trim, downgrade modelo) medida no custo real seguinte.' },
              ].map((f, i) => (
                <div key={i} style={cardStyle}>
                  <div style={titleStyle}>{f.t}</div>
                  <div style={descStyle}>{f.d}</div>
                </div>
              ))}
            </div>
          </div>

          {/* 5. Custo por Output */}
          <div>
            <div style={{ ...subLabel }}><span style={dot('#f59e0b')} />Custo por Output</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                { t: 'Custo unitário por peça', d: 'Quanto custou gerar cada briefing, campanha, plano trimestral, artigo blog, criativo Magnific — do zero à aprovação.' },
                { t: 'Cross-tab output × marca × ROI', d: 'Correlação: campanhas que geraram X leads custaram Y€ em AI para produzir → ROI da produção AI.' },
                { t: 'Ranking por retorno', d: 'Outputs que mais leads / vendas geraram vs custo de produção — orienta priorização de reforço.' },
              ].map((f, i) => (
                <div key={i} style={cardStyle}>
                  <div style={titleStyle}>{f.t}</div>
                  <div style={descStyle}>{f.d}</div>
                </div>
              ))}
            </div>
          </div>

          {/* 6. Previsão vs Real */}
          <div>
            <div style={{ ...subLabel }}><span style={dot('#ef4444')} />Previsão vs Real</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                { t: 'Vista mensal · trimestral · anual', d: 'Budget alocado × consumido × restante em cada nível temporal, com drill-down por canal e marca.' },
                { t: 'Projecção baseada em burn rate', d: 'Previsão de fim de trimestre / ano com o ritmo actual — antecipa ultrapassagens ou sobra.' },
                { t: 'Comparação com trimestre anterior', d: 'Delta vs período homólogo — identifica alterações estruturais de perfil de gasto.' },
              ].map((f, i) => (
                <div key={i} style={cardStyle}>
                  <div style={titleStyle}>{f.t}</div>
                  <div style={descStyle}>{f.d}</div>
                </div>
              ))}
            </div>
          </div>

          {/* 7. Alertas e semáforo */}
          <div>
            <div style={{ ...subLabel }}><span style={dot('#ec4899')} />Alertas e Semáforo</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                { t: '🟢 <70% consumido no ritmo esperado', d: 'Ok — sem acção necessária. Continuar plano de investimento.' },
                { t: '🟡 70-90% ou desvio de projecção', d: 'Atenção — rever cadência das próximas 2-4 semanas. Sugestão AI de reajuste.' },
                { t: '🔴 >90% ou ultrapassagem de mês', d: 'Alerta imediato para FC + Board. Pausar campanhas de menor ROI ou pedir reforço de budget.' },
              ].map((f, i) => (
                <div key={i} style={cardStyle}>
                  <div style={titleStyle}>{f.t}</div>
                  <div style={descStyle}>{f.d}</div>
                </div>
              ))}
            </div>
          </div>

          {/* 8. Reconciliação Primavera */}
          <div>
            <div style={{ ...subLabel }}><span style={dot('#06b6d4')} />Reconciliação Primavera</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                { t: 'Cross-check facturação real', d: 'Compara facturas scan-emails com facturação Primavera de Marketing — detecta facturas em falta ou duplicadas.' },
                { t: 'Fecho mensal preparado', d: 'Vista pronta a exportar para Financeiro no fecho — sem trabalho manual de recolha.' },
                { t: 'Discrepâncias sinalizadas', d: 'Facturas com valor divergente entre scan e Primavera flagadas para revisão humana.' },
              ].map((f, i) => (
                <div key={i} style={cardStyle}>
                  <div style={titleStyle}>{f.t}</div>
                  <div style={descStyle}>{f.d}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Ligações ao sistema */}
          <div>
            <div style={{ ...subLabel }}><span style={dot('#94a3b8')} />Ligações ao Sistema Existente</div>
            <div style={{ ...cardStyle, fontFamily: 'var(--font-mono)', fontSize: 12, lineHeight: 2, color: 'var(--text)' }}>
              <div>Facturas + agent_runs + Primavera → <span style={{ color: 'var(--ai-500)' }}>Budget</span></div>
              <div style={{ paddingLeft: 16 }}>↓</div>
              <div>Agregação por canal · marca · FRAME · output</div>
              <div style={{ paddingLeft: 16, color: 'var(--text-muted)' }}>├── Investimento multi-canal (Ads · Email · PR · SaaS)</div>
              <div style={{ paddingLeft: 16, color: 'var(--text-muted)' }}>├── Custo AI (Claude · Magnific · outros)</div>
              <div style={{ paddingLeft: 16, color: 'var(--text-muted)' }}>├── Custo por FRAME · por output</div>
              <div style={{ paddingLeft: 16, color: 'var(--text-muted)' }}>└── Previsão vs Real + alertas</div>
              <div style={{ paddingLeft: 16 }}>↓</div>
              <div>Decisões de investimento → <span style={{ color: 'var(--ai-500)' }}>Objectivos · Campanhas · Financeiro (fecho mensal)</span></div>
            </div>
          </div>

          {/* Nota técnica */}
          <div style={{
            padding: '14px 16px', borderRadius: 8,
            background: 'color-mix(in oklch, var(--warning) 6%, transparent)',
            border: '1px solid color-mix(in oklch, var(--warning) 25%, transparent)',
          }}>
            <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--warning)', fontFamily: 'var(--font-mono)', marginBottom: 6, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Consideração técnica</div>
            <div style={{ fontSize: 12, color: 'var(--text-muted)', lineHeight: 1.65 }}>
              O backend existente (endpoints <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--text)' }}>/api/marketing/budget/*</span>, pipeline scan-emails, tabela <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--text)' }}>budget_expenses</span>) é preservado — só a UI é reestruturada. Categorias já existentes cobrem o novo âmbito: <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--text)' }}>Ads · Tools · AI · Content · Stock · Outros</span>.
              <br /><br />
              Para atingir o objectivo final é necessário:
              <br /><br />
              1. Garantir que <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--text)' }}>agent_runs</span> tem <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--text)' }}>cost_eur</span> e <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--text)' }}>output_type</span> (briefing / conceito / plano / etc.) — permitir agregação por FRAME e por output.
              <br />
              2. Criar tabelas <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--text)' }}>budget_ai_aggregations</span> (rollup diário/mensal por FRAME/output) · <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--text)' }}>budget_forecasts</span> (planeamento anual/trimestral) · <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--text)' }}>budget_reconciliation</span> (scan vs Primavera).
              <br />
              3. Skill <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--text)' }}>ai-cost-tracker</span> a orquestrar agregação e alertas.
              <br />
              4. FRAME-BUDGET (por criar) para a camada AI de sugestões de re-alocação.
              <br />
              5. Integração Primavera Finance API (João Paulino) para reconciliação real.
            </div>
          </div>
        </div>

        {/* ── Coluna direita ── */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 24, position: 'sticky', top: 0 }}>

          {/* Skills e Tools */}
          <div>
            <div style={sectionLabel}>SKILLS E TOOLS</div>
            <div style={{ border: '1px solid var(--border)', borderRadius: 10, overflow: 'hidden' }}>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr' }}>
                <div style={tableHeader}>Skill / Tool</div>
                <div style={tableHeader}>O que faz</div>
              </div>
              {[
                ['invoice-scanner ✅',        'Pipeline scan-emails já operacional'],
                ['ai-cost-tracker',          'Agrega custo por FRAME e por output'],
                ['multi-platform-attribution','Consolida Meta · Google · LinkedIn · Brevo'],
                ['forecast-engine',          'Projecção baseada em burn rate'],
                ['burn-rate-monitor',        'Alertas semáforo verde/amarelo/vermelho'],
                ['reconciliation-bot',       'Cross-check scan vs Primavera'],
                ['FRAME-BUDGET',             'Sugestões de re-alocação (por criar)'],
                ['Primavera Finance API',    'Facturação real (via João Paulino)'],
              ].map(([skill, desc], i) => (
                <div key={i} style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr' }}>
                  <div style={{ ...tableCell, fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ai-500)' }}>{skill}</div>
                  <div style={tableCellMuted}>{desc}</div>
                </div>
              ))}
            </div>
          </div>

          {/* O que ganhamos */}
          <div>
            <div style={sectionLabel}>O QUE GANHAMOS</div>
            <div style={{ border: '1px solid var(--border)', borderRadius: 10, overflow: 'hidden' }}>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
                <div style={{ ...tableHeader, color: 'var(--danger)' }}>Antes</div>
                <div style={{ ...tableHeader, color: 'var(--success)' }}>Depois</div>
              </div>
              {[
                ['Ads e SaaS em Excel separado',    'Vista consolidada multi-canal'],
                ['Custo AI invisível',              'Custo por FRAME e por output'],
                ['Sem previsão vs real',            'Burn rate + projecção fim de trimestre'],
                ['Alerta de ultrapassagem tarde',   'Semáforo em tempo real'],
                ['Fecho manual com Financeiro',     'Reconciliação Primavera automática'],
                ['Modelo AI escolhido no palpite',  'Delta custo/qualidade medido'],
                ['ROI da produção AI desconhecido', 'Custo por output × leads gerados'],
              ].map(([before, after], i) => (
                <div key={i} style={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
                  <div style={{ ...tableCellMuted, fontSize: 11 }}>{before}</div>
                  <div style={{ ...tableCell, fontSize: 11 }}>{after}</div>
                </div>
              ))}
            </div>
          </div>

          {/* BD */}
          <div>
            <div style={sectionLabel}>BD</div>
            <div style={{ ...cardStyle, fontFamily: 'var(--font-mono)', fontSize: 11, lineHeight: 1.8, color: 'var(--text-muted)' }}>
              <div><span style={{ color: 'var(--success)' }}>budget_expenses</span> ✅ (existe · scan-emails)</div>
              <div><span style={{ color: 'var(--success)' }}>agent_runs</span> ✅ (Claude API runs)</div>
              <div><span style={{ color: 'var(--ai-500)' }}>budget_ai_aggregations</span> [criar] — rollup por FRAME/output</div>
              <div><span style={{ color: 'var(--ai-500)' }}>budget_forecasts</span> [criar] — planeamento anual</div>
              <div><span style={{ color: 'var(--ai-500)' }}>budget_reconciliation</span> [criar] — scan vs Primavera</div>
              <div style={{ marginTop: 6, fontStyle: 'italic', color: 'var(--text-dim)' }}>Categorias: Ads · Tools · AI · Content · Stock · Outros ✅</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

window.MktBudgetScreen = MktBudgetScreen;