/* screen_marketing_objectivos.jsx
   Marketing · Objectivos — em desenvolvimento.
   Expõe window.MktObjectivosScreen.
*/

const MktObjectivosScreen = ({ 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 · OBJECTIVOS
        </div>
        <h1 className="font-display" style={{ margin: '6px 0 4px', fontSize: 26, fontWeight: 600, letterSpacing: '-0.015em' }}>
          Objectivos
        </h1>
        <div style={{ fontSize: 12, color: 'var(--text-muted)', display: 'flex', alignItems: 'center', gap: 8, marginBottom: 20 }}>
          Business Plan vs real · Cumprimento de metas por marca · Acções preditivas AI
          <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 central de cumprimento de Business Plan — cruzamento em tempo real entre metas anuais, pipeline do Gestor CRM, budget Mimaki consumido, stock de equipamentos e campanhas de preço activas.
          A camada AI gera acções preditivas e permite criar briefings directamente a partir de alertas.
        </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 }}>

          {/* 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: 'BP targets (Business Plan)', d: 'Metas anuais definidas por marca, mercado e trimestre — importadas do BP oficial da Digidelta.' },
                { t: 'Gestor CRM (FileMaker)', d: 'Pipeline actual por stage — LEAD, DEMO, PROPOSTA, WON — e valores previstos vs fechados por comercial e mercado.' },
                { t: 'Budget Mimaki', d: 'Verba de marketing anual atribuída pela Mimaki — total, consumido e restante por mercado.' },
                { t: 'Stock de equipamentos (Primavera)', d: 'Disponibilidade em tempo real de equipamentos para venda — modelo, quantidade, localização.' },
                { t: 'Primavera ERP', d: 'Facturação real, margens e desvios PrintPlan/DigiRent — cruzamento com metas.' },
                { t: 'Campanhas activas', d: 'Promoções em vigor com datas, condições comerciais e performance por campanha.' },
              ].map((f, i) => (
                <div key={i} style={cardStyle}>
                  <div style={titleStyle}>{f.t}</div>
                  <div style={descStyle}>{f.d}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Resumo KPIs */}
          <div>
            <div style={{ ...subLabel }}><span style={dot('#0ea5e9')} />Resumo KPIs — Semáforo & Desvios</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                { t: 'Semáforo por marca × mercado', d: 'Verde/amarelo/vermelho para cada célula marca × mercado com base no cumprimento YTD vs meta trimestral. Drill-down por comercial e produto.' },
                { t: 'Desvios BP vs real', d: 'Diferença absoluta e percentual entre meta e realizado, com projecção de fim de trimestre baseada em run rate actual.' },
                { t: 'Progresso YTD por trimestre', d: 'Vista trimestral e mensal — permite identificar onde o desvio acumulou e antecipar meses de risco.' },
              ].map((f, i) => (
                <div key={i} style={cardStyle}>
                  <div style={titleStyle}>{f.t}</div>
                  <div style={descStyle}>{f.d}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Budget Mimaki */}
          <div>
            <div style={{ ...subLabel }}><span style={dot('#059669')} />Budget Mimaki vs Consumido</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                { t: 'Verba total anual', d: 'Budget atribuído pela Mimaki para o ano, com breakdown por mercado (PT / ES / Export).' },
                { t: 'Consumido até à data', d: 'Total gasto em campanhas, eventos, produção — cruzado com facturas do Financeiro.' },
                { t: 'Restante e burn rate', d: 'Alertas automáticos quando burn rate excede 25% do restante mensal sem pipeline correspondente.' },
              ].map((f, i) => (
                <div key={i} style={cardStyle}>
                  <div style={titleStyle}>{f.t}</div>
                  <div style={descStyle}>{f.d}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Stock equipamentos */}
          <div>
            <div style={{ ...subLabel }}><span style={dot('#8b5cf6')} />Stock de Equipamentos</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                { t: 'Disponibilidade tempo real', d: 'Quantidades por modelo em cada localização (Prior Velho / Famalicão / Espanha), sincronização com Primavera.' },
                { t: 'Alertas de rutura', d: 'Modelos com stock < 3 unidades vs. pipeline com propostas activas → risco de perder deal por falta de entrega.' },
                { t: 'Oportunidades cross-sell', d: 'Detecta pipeline Mimaki + stock disponível de BIOND/Decal complementares no mesmo cliente.' },
              ].map((f, i) => (
                <div key={i} style={cardStyle}>
                  <div style={titleStyle}>{f.t}</div>
                  <div style={descStyle}>{f.d}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Campanhas de preço activas */}
          <div>
            <div style={{ ...subLabel }}><span style={dot('#f59e0b')} />Campanhas de Preço Activas</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                { t: 'Promoções em vigor', d: 'DigiRent, PrintPlan, Desconto Directo, Trade-in, Voucher on Demand — com datas de fim e mercados aplicáveis.' },
                { t: 'Performance por campanha', d: 'Leads gerados, propostas emitidas, fechos concretizados e ROI por campanha activa.' },
                { t: 'Alertas de fim de campanha', d: 'Antecipa fim de janela promocional (7d, 3d, 1d) para accionar comunicação de fecho ou renovação.' },
              ].map((f, i) => (
                <div key={i} style={cardStyle}>
                  <div style={titleStyle}>{f.t}</div>
                  <div style={descStyle}>{f.d}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Acções preditivas AI */}
          <div>
            <div style={{ ...subLabel }}><span style={dot('#ef4444')} />Acções Preditivas AI</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                { t: 'Alertas cruzados BP × pipeline × budget', d: 'Ex: "Budget consumido 80% em PT-Mimaki mas pipeline não cresceu 20% — sugestão: pausar Meta Ads e activar campanha de reactivação para clientes 12-24 meses."' },
                { t: 'Sugestões de acção comercial', d: 'Cross-sell detectado automaticamente entre marcas com base em stock + pipeline + histórico de compra do cliente.' },
                { t: 'Criar Briefing directamente do alerta', d: 'Botão CTA em cada alerta que abre o módulo Briefings pré-preenchido com contexto do desvio, mercado, marca e proposta de campanha correctiva.' },
              ].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('#ec4899')} />Ligações ao Sistema Existente</div>
            <div style={{ ...cardStyle, fontFamily: 'var(--font-mono)', fontSize: 12, lineHeight: 2, color: 'var(--text)' }}>
              <div>BP targets → <span style={{ color: 'var(--ai-500)' }}>Objectivos Module</span></div>
              <div style={{ paddingLeft: 16 }}>↓</div>
              <div>Cruzamento de dados em tempo real</div>
              <div style={{ paddingLeft: 16, color: 'var(--text-muted)' }}>├── Gestor CRM → pipeline actuals</div>
              <div style={{ paddingLeft: 16, color: 'var(--text-muted)' }}>├── Primavera → facturação real + stock</div>
              <div style={{ paddingLeft: 16, color: 'var(--text-muted)' }}>├── Budget Mimaki → consumido vs restante</div>
              <div style={{ paddingLeft: 16, color: 'var(--text-muted)' }}>└── Campanhas → performance por promoção</div>
              <div style={{ paddingLeft: 16 }}>↓</div>
              <div>Alertas preditivos AI → <span style={{ color: 'var(--ai-500)' }}>Briefings</span> (pré-preenchidos)</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 }}>
              Actualmente o módulo usa dados mock em JavaScript. Para ficar funcional é necessário:
              <br /><br />
              1. Criar tabelas <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--text)' }}>objectivos_bp</span> (metas por marca/mercado/trimestre) e <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--text)' }}>objectivos_actuals</span> (snapshots dos actuals do Gestor + Primavera).
              <br />
              2. Integração com Primavera API para facturação real + stock em tempo real — pendente de acesso e endpoints (João Paulino).
              <br />
              3. Integração com Gestor CRM para pipeline actuals — já disponível via gestor-client.js, falta agregação por mercado/marca/stage.
              <br />
              4. FRAME-KPI para a camada AI que gera alertas e acções preditivas — por criar.
            </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>
              {[
                ['FRAME-KPI',              'Análise de KPIs por marca vs BP (por criar)'],
                ['Extended thinking Opus', 'Acções preditivas complexas com raciocínio profundo'],
                ['Claude Analista',        'Análise autónoma diária (Fase 2)'],
                ['Gestor CRM API',         'Pipeline actuals por stage, comercial, mercado'],
                ['Primavera API',          'Facturação real, margens, stock (integração futura)'],
                ['Budget Tracker',         'Consumo Mimaki vs restante, burn rate, alertas'],
                ['Alert Composer',         'Gera alertas cruzados BP × pipeline × budget'],
                ['Briefing Generator',     'Pré-preenche briefing a partir do alerta AI'],
              ].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>
              {[
                ['Excel manual mensal',                    'Dashboard em tempo real'],
                ['Desvios detectados no fim do mês',       'Alertas preditivos em tempo real'],
                ['Sem correlação BP × pipeline × stock',   'Cruzamento automático de fontes'],
                ['Briefings reactivos ad-hoc',             'Briefings gerados a partir de alertas AI'],
                ['Budget Mimaki sem visibilidade',         'Burn rate + alertas de consumo'],
                ['Stock discutido em reunião semanal',     'Alertas de rutura vs pipeline em vigor'],
              ].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 por criar */}
          <div>
            <div style={sectionLabel}>BD (POR CRIAR)</div>
            <div style={{ ...cardStyle, fontFamily: 'var(--font-mono)', fontSize: 11, lineHeight: 1.8, color: 'var(--text-muted)' }}>
              <div><span style={{ color: 'var(--ai-500)' }}>objectivos_bp</span> — metas por marca, mercado, trimestre</div>
              <div><span style={{ color: 'var(--ai-500)' }}>objectivos_actuals</span> — snapshots dos actuals</div>
              <div style={{ marginTop: 6, fontStyle: 'italic', color: 'var(--text-dim)' }}>Actualmente mock JS</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

window.MktObjectivosScreen = MktObjectivosScreen;