/* screen_marketing_plano_comunicacao.jsx
   Marketing · Plano de Comunicação — em desenvolvimento.
   Expõe window.MktPlanoComunicacaoScreen.
*/

const MktPlanoComunicacaoScreen = ({ 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 · PLANO DE COMUNICAÇÃO
        </div>
        <h1 className="font-display" style={{ margin: '6px 0 4px', fontSize: 26, fontWeight: 600, letterSpacing: '-0.015em' }}>
          Plano de Comunicação
        </h1>
        <div style={{ fontSize: 12, color: 'var(--text-muted)', display: 'flex', alignItems: 'center', gap: 8, marginBottom: 20 }}>
          Calendário editorial trimestral · Email · Social · Blog · PR · Gerado por 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 que traduz a estratégia da marca e os objectivos do trimestre em calendário editorial concreto por canal. Alimenta directamente a Produção de Conteúdos — cada item do plano abre pré-preenchido no ecrã de conteúdos filtrado por marca, canal e semana. Origem: ← Marcas + Objectivos.
        </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: 'Marcas e Estratégia', d: 'Base estratégica por marca — ICP, personas, tom de voz, restrições, análise de concorrentes. Alimenta os pilares editoriais.' },
                { t: 'Objectivos', d: 'Metas trimestrais por marca × mercado — orientam prioridades editoriais, cadência e ênfase por canal.' },
                { t: 'RAG KB por marca', d: 'Conhecimento consolidado de produtos, provas técnicas e mensagens-chave — usado na geração AI de conteúdo editorial.' },
                { t: 'Web search (trending / SEO)', d: 'Monitoriza tópicos em alta e consultas SEO relevantes por mercado — feed para calendário orgânico e blog.' },
              ].map((f, i) => (
                <div key={i} style={cardStyle}>
                  <div style={titleStyle}>{f.t}</div>
                  <div style={descStyle}>{f.d}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Gerar plano trimestral AI */}
          <div>
            <div style={{ ...subLabel }}><span style={dot('#0ea5e9')} />Gerar Plano Trimestral com AI</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                { t: 'Extended thinking Opus', d: 'Opus com raciocínio profundo gera plano de 13 semanas por marca — considera estratégia, objectivos, calendário fiscal e sazonalidade do mercado.' },
                { t: 'Distribuição por canal e semana', d: 'Cadência recomendada por canal (Email · Social · Blog · PR), com balanceamento entre marca, produto e prova.' },
                { t: 'Regenerar / ajustar por marca', d: 'Cada marca pode ter plano próprio, editar itens, aprovar ou pedir nova geração — histórico versionado.' },
              ].map((f, i) => (
                <div key={i} style={cardStyle}>
                  <div style={titleStyle}>{f.t}</div>
                  <div style={descStyle}>{f.d}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Calendário editorial por canal */}
          <div>
            <div style={{ ...subLabel }}><span style={dot('#059669')} />Calendário Editorial por Canal</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                { t: 'Vista trimestral por canal', d: 'Grelha semanas × canais (Email · Social · Blog · PR) com item editorial por célula — panorâmica clara do plano.' },
                { t: 'Filtro por marca', d: 'Toggle rápido entre marcas — cada marca tem calendário independente, mas herda pilares comuns quando aplicável.' },
                { t: 'Detalhe por item', d: 'Título, rationale, canal, formato, data planeada e notas — editável antes da promoção para briefing.' },
              ].map((f, i) => (
                <div key={i} style={cardStyle}>
                  <div style={titleStyle}>{f.t}</div>
                  <div style={descStyle}>{f.d}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Badge de estado */}
          <div>
            <div style={{ ...subLabel }}><span style={dot('#8b5cf6')} />Badge de Estado por Item Editorial</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                { t: 'Em produção', d: 'Item já promovido para Produção de Conteúdos — está a ser trabalhado por copy / criativo / performance.' },
                { t: 'Aprovado', d: 'Conteúdo pronto, aprovado nos gates internos (RL / FC) — aguarda janela de publicação.' },
                { t: 'No ar', d: 'Conteúdo publicado no canal — data e link/URL da publicação registados para closed-loop de Resultados.' },
              ].map((f, i) => (
                <div key={i} style={cardStyle}>
                  <div style={titleStyle}>{f.t}</div>
                  <div style={descStyle}>{f.d}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Link Produção de Conteúdos */}
          <div>
            <div style={{ ...subLabel }}><span style={dot('#f59e0b')} />Link Directo → Produção de Conteúdos</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                { t: 'Promover item para briefing', d: 'Um clique cria briefing pré-preenchido em Produção — marca, canal, formato, rationale e datas herdadas do plano.' },
                { t: 'Vista filtrada de Produção', d: 'Abre Produção de Conteúdos já filtrado por este item — evita procura manual e mantém contexto.' },
                { t: 'Sincronização de estados', d: 'O estado no calendário reflecte automaticamente o estado real em Produção / Campanhas / Publicação.' },
              ].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>Marcas + Objectivos → <span style={{ color: 'var(--ai-500)' }}>Plano de Comunicação</span></div>
              <div style={{ paddingLeft: 16 }}>↓</div>
              <div>Calendário editorial trimestral por canal</div>
              <div style={{ paddingLeft: 16, color: 'var(--text-muted)' }}>├── Email (Brevo)</div>
              <div style={{ paddingLeft: 16, color: 'var(--text-muted)' }}>├── Social (Meta / LinkedIn)</div>
              <div style={{ paddingLeft: 16, color: 'var(--text-muted)' }}>├── Blog (SEO)</div>
              <div style={{ paddingLeft: 16, color: 'var(--text-muted)' }}>└── PR (mídia especializada)</div>
              <div style={{ paddingLeft: 16 }}>↓</div>
              <div>Produção de Conteúdos → <span style={{ color: 'var(--ai-500)' }}>Campanhas · Publicação · Resultados</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 }}>
              Existe uma versão anterior com CRUD de planos, calendário/lista/kanban e geração AI que não está alinhada com a arquitectura final pretendida. Para reconstruir de forma correcta é necessário:
              <br /><br />
              1. Criar tabelas <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--text)' }}>plano_comunicacao</span> (por marca × trimestre) e <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--text)' }}>plano_itens</span> (item editorial: canal, semana, título, rationale, estado, link a briefing).
              <br />
              2. Skill <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--text)' }}>content-strategy</span> + <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--text)' }}>launch-strategy</span> + <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--text)' }}>social-media-marketing</span> + <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--text)' }}>seo-content-writer</span> + <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--text)' }}>email-sequence</span> orquestradas por FRAME-EDITORIAL (por criar).
              <br />
              3. Integração RAG KB por marca + web_search (trending / SEO) para alimentar o plano com sinais reais de mercado.
              <br />
              4. Promoção item → briefing em Produção de Conteúdos com pré-preenchimento e sincronização de estado bidireccional.
            </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>
              {[
                ['content-strategy',        'Define pilares editoriais por marca'],
                ['launch-strategy',         'Estrutura lançamentos e campanhas fase a fase'],
                ['seo-content-writer',      'Optimiza conteúdo de blog para SEO e trending'],
                ['email-sequence',          'Desenha sequências de email por objectivo'],
                ['social-media-marketing',  'Adapta mensagens ao canal social e formato'],
                ['FRAME-EDITORIAL',         'Metodologia editorial (por criar)'],
                ['Extended thinking Opus',  'Gera plano trimestral com raciocínio profundo'],
                ['RAG KB Marcas',           'Recupera contexto estratégico por marca'],
                ['web_search',              'Trending topics e sinais SEO por mercado'],
              ].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 trimestral por canal',            'Calendário editorial vivo por marca'],
                ['Plano descolado da estratégia',         'Puxado directo de Marcas + Objectivos'],
                ['Reunião mensal para calendarizar',      'Plano AI trimestral em minutos'],
                ['Sem visibilidade do estado por item',   'Badge em produção / aprovado / no ar'],
                ['Briefings criados do zero repetidos',   'Promoção item → briefing pré-preenchido'],
                ['Trending SEO ignorado no plano',        'Web search alimenta calendário orgânico'],
              ].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 (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)' }}>plano_comunicacao</span> — plano por marca × trimestre</div>
              <div><span style={{ color: 'var(--ai-500)' }}>plano_itens</span> — item editorial (canal · semana · estado · link briefing)</div>
              <div style={{ marginTop: 6, fontStyle: 'italic', color: 'var(--text-dim)' }}>Sincronizada com Produção / Campanhas / Publicação</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

window.MktPlanoComunicacaoScreen = MktPlanoComunicacaoScreen;