/* LOGÍSTICA wrapper — sub-nav dias-stock / nivel-servico / rotacao-stock / print-plan
   Ecrãs em desenvolvimento: objectivo, design e data prevista ligada ao Roadmap. */

const getLgtRoadmapDate = (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 || '—';
};

const LgtStub = ({ kicker, title, tagline, description, phaseId, fallbackDate, items }) => {
  const deliveryDate = getLgtRoadmapDate(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' }}>
      <div className="font-mono" style={{ fontSize: 11, color: 'var(--text-dim)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>
        LOGÍSTICA · {kicker}
      </div>
      <h2 className="font-display" style={{ margin: '6px 0 0', fontSize: 26, fontWeight: 500, letterSpacing: '-0.01em' }}>
        {title}
      </h2>
      <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>
      <p style={{ fontSize: 13.5, color: 'var(--text-muted)', lineHeight: 1.65, marginTop: 18, maxWidth: 640 }}>
        {description}
      </p>
      <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>
      <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 LgtDiasStock = () => (
  <LgtStub
    kicker="DIAS DE STOCK"
    title="Dias de Stock"
    tagline="Logística · Cobertura por Família"
    phaseId="lg03"
    fallbackDate="Setembro 2026"
    description="Mapa de dias de stock por família, distinguindo MP, PI, PA e ME. Inclui CMV e consumos Print Plan para cenário real. MP e PI analisados pelos consumos das Ordens de Fabrico. Cobre DECAL e Mimaki com visão mensal e acumulada."
    items={[
      { t: 'Mapa por família (MP/PI/PA/ME)', d: 'Dias de cobertura actuais por categoria e família · sinalização de ruptura (<30d) e excesso (>120d) com código de cores.' },
      { t: 'Consumos reais via Ordens de Fabrico', d: 'MP e PI analisados com base nos consumos reais das OFs — não por saídas de armazém — para uma visão alinhada com o ritmo de produção.' },
      { t: 'Print Plan e CMV', d: 'Consumos Print Plan integrados no cálculo · CMV por família para validar custo de cobertura actual vs objectivo.' },
      { t: 'Cobertura DECAL e Mimaki', d: 'Visão separada por unidade de negócio · comparação de cobertura relativa entre as duas marcas.' },
      { t: 'Visão mensal e acumulada', d: 'Evolução dos dias de stock ao longo do ano · detecção de tendências sazonais · comparação com período homólogo.' },
    ]}
  />
);

const LgtNivelServico = () => (
  <LgtStub
    kicker="NÍVEL DE SERVIÇO"
    title="Nível de Serviço de Entregas"
    tagline="Logística · Cumprimento de Prazos"
    phaseId="lg04"
    fallbackDate="Setembro 2026"
    description="Mede o nível de serviço por mercado: tempo encomenda→entrega, tempo data prometida→entrega e idade dos lotes faturados vs data de fabrico. Inclui número de expedições diário e mensal por guias. Classificado por tipo de terceiro, vendedor e país."
    items={[
      { t: 'Tempo encomenda → entrega', d: 'Dias entre a data de encomenda e a data de expedição efectiva · por mercado, vendedor e tipo de cliente.' },
      { t: 'Desvio data prometida → entrega', d: 'Diferença entre a data comprometida com o cliente e a data real de entrega · % de cumprimento por país e vendedor.' },
      { t: 'Idade dos lotes faturados', d: 'Dias entre a data de fabrico e a data de faturação · detecção de lotes antigos a sair · risco de expiração.' },
      { t: 'Expedições diário e mensal', d: 'Número de guias de transporte por dia e por mês · volume de linhas expedidas · top transportadores.' },
      { t: 'Segmentação por tipo, vendedor, país', d: 'Filtros por tipo de terceiro (cliente directo, distribuidor, consignação), vendedor responsável e país de destino.' },
    ]}
  />
);

const LgtRotacaoStock = () => (
  <LgtStub
    kicker="ROTAÇÃO DE STOCK"
    title="Rotação de Stock"
    tagline="Logística · Anomalias de Disponibilidade"
    phaseId="lg05"
    fallbackDate="Outubro 2026"
    description="Tabela de rotação dos produtos de tabela com sinalização dos artigos que deveriam estar e não estão. Top 5 positivo e negativo classificado por família, modelo, quantidade, cor, tamanho e tipo de cliente."
    items={[
      { t: 'Rotação de produtos de tabela', d: 'Velocidade de saída por referência · rotação real vs rotação esperada pelo histórico de vendas.' },
      { t: 'Artigos em falta', d: 'Listagem de referências que deveriam estar em stock (pelo perfil de venda) mas não estão · dias em ruptura · impacto estimado.' },
      { t: 'Top 5 positivo', d: 'Artigos com maior rotação no período · por família, modelo, quantidade, cor, tamanho e tipo de cliente.' },
      { t: 'Top 5 negativo', d: 'Artigos com menor rotação ou stock parado há mais de X dias · capital imobilizado · sugestão de promoção ou reafectação.' },
    ]}
  />
);

const LgtPrintPlan = () => (
  <LgtStub
    kicker="PRINT PLAN & CONSIGNAÇÕES"
    title="Print Plan e Consignações"
    tagline="Logística · Stock Alocado a Clientes"
    phaseId="lg06"
    fallbackDate="Outubro 2026"
    description="Stock em armazém por cliente de Print Plan e consignação — quantidade, valor e % de consumos. Evolução mensal para avaliar ritmo de consumo vs stock disponível."
    items={[
      { t: 'Stock por cliente Print Plan', d: 'Quantidade e valor em armazém por referência e por cliente · % consumida no período · data de última movimentação.' },
      { t: 'Stock em consignação', d: 'Inventário consignado por cliente · valor total alocado · evolução de consumos · alerta de stock parado.' },
      { t: 'Evolução mensal', d: 'Ritmo de consumo mensal vs stock disponível por cliente · projecção de esgotamento · necessidade de reposição antecipada.' },
      { t: 'Alertas de desvio', d: 'Clientes com consumo abaixo do esperado (stock a acumular) ou consumo acelerado (risco de ruptura) — alertas automáticos.' },
    ]}
  />
);

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

const LogisticaInner = ({ onOpenChat }) => {
  const [sub, setSub] = window.useSubNav('digi-logistica-sub', 'dias-stock');

  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': 'dias-stock', '2': 'nivel-servico', '3': 'rotacao-stock', '4': 'print-plan' };
      if (map[e.key]) setSub(map[e.key]);
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  if (sub === 'dias-stock') return <LgtDiasStock />;
  if (sub === 'nivel-servico') return <LgtNivelServico />;
  if (sub === 'rotacao-stock') return <LgtRotacaoStock />;
  if (sub === 'print-plan') return <LgtPrintPlan />;
  return <LgtDiasStock />;
};

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

window.LogisticaScreenWrapper = LogisticaScreenWrapper;