/* SAT wrapper — sub-nav overview / inbox WA / histórico
   Ecrãs em desenvolvimento: objectivo, design e data prevista ligada ao Roadmap. */

// Lê a data de entrega de uma fase do roadmap (window.TRACKS_DATA exportado em screen_business_ai_roadmap.jsx)
const getRoadmapDate = (phaseId, fallback) => {
  const tracks = window.TRACKS_DATA || [];
  for (const track of tracks) {
    if (!Array.isArray(track.phases)) continue;
    const phase = track.phases.find(p => p.id === phaseId);
    if (phase && phase.e instanceof Date) {
      return phase.e.toLocaleDateString('pt-PT', { month: 'long', year: 'numeric' });
    }
  }
  return fallback || '—';
};

// Stub partilhado: design do template (breadcrumb · título · badge · descrição · objectivos · data entrega)
const SATStub = ({ kicker, title, tagline, description, phaseId, fallbackDate, items }) => {
  const deliveryDate = getRoadmapDate(phaseId, fallbackDate);

  const goToRoadmap = () => {
    try {
      localStorage.setItem('screen', 'business');
      localStorage.setItem('digi-business-sub', 'roadmap');
    } catch {}
    window.location.reload();
  };

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

      {/* Breadcrumb */}
      <div className="font-mono" style={{ fontSize: 11, color: 'var(--text-dim)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>
        SAT · {kicker}
      </div>

      {/* Título */}
      <h2 className="font-display" style={{ margin: '6px 0 0', fontSize: 26, fontWeight: 500, letterSpacing: '-0.01em' }}>
        {title}
      </h2>

      {/* Tagline + badge EM DESENVOLVIMENTO */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 8, flexWrap: 'wrap' }}>
        <span style={{ fontSize: 13, color: 'var(--text-muted)' }}>{tagline}</span>
        <span style={{
          fontSize: 10.5,
          fontFamily: 'var(--font-mono)',
          fontWeight: 600,
          padding: '3px 9px',
          borderRadius: 5,
          border: '1px solid color-mix(in oklch, #f59e0b 55%, transparent)',
          background: 'color-mix(in oklch, #f59e0b 8%, transparent)',
          color: '#b45309',
          letterSpacing: '0.04em',
        }}>
          EM DESENVOLVIMENTO
        </span>
      </div>

      {/* Descrição */}
      <p style={{ fontSize: 13.5, color: 'var(--text-muted)', lineHeight: 1.65, marginTop: 18, maxWidth: 640 }}>
        {description}
      </p>

      {/* Card de objectivo */}
      <div className="card" style={{ marginTop: 22, padding: 0, maxWidth: 700 }}>
        <div style={{
          padding: '13px 18px',
          borderBottom: '1px solid var(--border)',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        }}>
          <div className="font-display" style={{ fontSize: 12, fontWeight: 600, letterSpacing: '0.07em', color: 'var(--text-muted)' }}>
            OBJECTIVO DO MÓDULO
          </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>

      {/* Data de entrega + link roadmap */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 18, flexWrap: 'wrap' }}>
        <span className="badge" style={{ fontSize: 11 }}>
          <Icon name="calendar" size={11} />Entrega prevista · {deliveryDate}
        </span>
        <button className="btn btn-xs btn-ghost" onClick={goToRoadmap} style={{ fontSize: 11 }}>
          ver roadmap →
        </button>
      </div>

    </div>
  );
};

// ============ Ecrãs ============

const SATOverviewScreen = () => (
  <SATStub
    kicker="OVERVIEW"
    title="Overview SAT"
    tagline="Suporte Técnico · 2026"
    phaseId="sat02"
    fallbackDate="Novembro 2026"
    description="Dashboard central do departamento de suporte técnico. Visão consolidada de tickets abertos, tempos de resposta, máquinas em campo e alertas de escalação. A Digi AI assiste em diagnóstico e priorização automática."
    items={[
      { t: 'Dashboard de tickets', d: 'Abertos · em progresso · escalados · fechados. Métricas MTTR e SLA por cliente e por máquina.' },
      { t: 'Mapa de cobertura SAT', d: 'Técnicos disponíveis vs tickets abertos por zona geográfica. Sugestão de alocação optimizada pela Digi.' },
      { t: 'KPIs de desempenho', d: 'Tempo médio de resposta, taxa de resolução no 1.º contacto, rácio de escalação. Evolução 30/60/90 dias.' },
      { t: 'Alertas activos', d: 'Máquinas paradas há +24h · escalações pendentes · clientes premium em espera há mais de 2h.' },
    ]}
  />
);

const SATInboxScreen = () => (
  <SATStub
    kicker="INBOX WA"
    title="Inbox WhatsApp SAT"
    tagline="Assistência AI · Tempo Real"
    phaseId="sat03"
    fallbackDate="Novembro 2026"
    description="Canal de suporte via WhatsApp assistido por IA. Os técnicos recebem mensagens de clientes directamente no portal, com sugestões de resposta, referências ao manual técnico e historial da máquina em contexto."
    items={[
      { t: 'Inbox unificado', d: 'Todos os contactos WhatsApp SAT num único painel · ordenados por urgência · estado do ticket integrado.' },
      { t: 'Assistência AI em tempo real', d: 'Digi sugere respostas com base no historial da máquina, código de erro reportado e base de conhecimento técnico Mimaki.' },
      { t: 'Referências técnicas inline', d: 'Erro detectado na conversa → card com secção do manual, casos similares e peças envolvidas — tudo sem sair do chat.' },
      { t: 'Escalação assistida', d: 'Se AI detecta padrão de alto risco (motor, cabeça, firmware crítico) → sugere escalação com briefing automático para técnico sénior.' },
    ]}
  />
);

const SATHistoricoScreen = () => (
  <SATStub
    kicker="HISTÓRICO"
    title="Histórico & Base de Conhecimento"
    tagline="Memória Institucional · SAT"
    phaseId="sat04"
    fallbackDate="Novembro 2026"
    description="Registo completo de intervenções, erros resolvidos e padrões detectados. A Digi constrói uma base de conhecimento técnico com cada caso fechado — o próximo técnico tem contexto imediato antes de sair para campo."
    items={[
      { t: 'Histórico de intervenções', d: 'Todas as visitas SAT por máquina e por cliente · técnico · duração · resolução · peças trocadas.' },
      { t: 'Base de conhecimento técnico', d: 'Casos fechados transformados em artigos KB · indexados por código de erro, modelo e componente afectado.' },
      { t: 'Análise de padrões', d: 'Digi detecta recorrências: mesmo erro em múltiplas máquinas → alerta de lote. Mesmo cliente com falhas repetidas → proposta de contrato PM.' },
      { t: 'Relatórios e exportação', d: 'Relatório mensal de actividade SAT para gestão · histórico por cliente para renovações de contrato de manutenção.' },
    ]}
  />
);

// ============ Wrapper ============

const SATInner = ({ onOpenChat }) => {
  const [sub, setSub] = window.useSubNav('digi-sat-sub', 'overview');

  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': 'overview', '2': 'inbox', '3': 'historico' };
      if (map[e.key]) setSub(map[e.key]);
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  if (sub === 'overview') return <SATOverviewScreen />;
  if (sub === 'inbox') return <SATInboxScreen />;
  if (sub === 'historico') return <SATHistoricoScreen />;
  return <SATOverviewScreen />;
};

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

window.SATWrapper = SATWrapper;