/* PRODUÇÃO wrapper — sub-nav kpis / stock-pi / plano-mensal / nao-conformes / desperdicios
   Ecrãs em desenvolvimento: objectivo, design e data prevista ligada ao Roadmap. */

const getPrdRoadmapDate = (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 PrdStub = ({ kicker, title, tagline, description, phaseId, fallbackDate, items }) => {
  const deliveryDate = getPrdRoadmapDate(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' }}>
        PRODUÇÃO · {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 PrdKpis = () => (
  <PrdStub
    kicker="KPIs PRODUÇÃO"
    title="KPIs de Produção"
    tagline="Produção · Desempenho Operacional Diário"
    phaseId="pr03"
    fallbackDate="Setembro 2026"
    description="Semáforo diário do desempenho operacional: dias de satisfação de encomendas, percentagem de não conformes e desperdícios — com trending por período. Elimina a dependência de ficheiros Excel para o director de produção."
    items={[
      { t: 'Semáforo operacional', d: 'Verde/amarelo/vermelho por indicador · limiar configurável por KPI · visão instantânea do estado da produção.' },
      { t: 'Dias de satisfação de encomendas', d: 'Média de dias entre recepção da encomenda e expedição · evolução diária e mensal · comparação com objectivo.' },
      { t: 'Taxa de não conformes (%)', d: '% de unidades NC por período · por turno e linha de produção · tendência de melhoria ou deterioração.' },
      { t: 'Desperdícios', d: 'Volume de desperdício por tipo e período · % do total produzido · trending com linha de objectivo.' },
      { t: 'Trending por período', d: 'Gráfico de evolução de todos os KPIs: diário, semanal, mensal e acumulado YTD.' },
    ]}
  />
);

const PrdStockPi = () => (
  <PrdStub
    kicker="STOCK PI"
    title="Stock de Produto Intermédio"
    tagline="Produção · Cobertura 60 Dias"
    phaseId="pr04"
    fallbackDate="Setembro 2026"
    description="Níveis actuais de stock de produto intermédio (PI) versus o objectivo de 60 dias de cobertura. Alertas de rotura por referência com antecedência suficiente para desencadear encomendas e evitar paragens de produção."
    items={[
      { t: 'Cobertura actual vs objectivo 60d', d: 'Por referência PI: stock actual em dias · objectivo de cobertura · gap em dias e em unidades.' },
      { t: 'Alertas de rotura iminente', d: 'Referências com cobertura <30 dias destacadas automaticamente · alerta para responsável de produção e compras.' },
      { t: 'Histórico por referência', d: 'Evolução dos níveis de stock PI por referência nos últimos 90 dias · picos e vales · correlação com ordens de fabrico.' },
      { t: 'Prioridade de produção', d: 'Ranking de referências por urgência de reposição · suporte à decisão de sequenciamento de OFs.' },
    ]}
  />
);

const PrdPlanoMensal = () => (
  <PrdStub
    kicker="PLANO MENSAL"
    title="Plano Mensal de Produção"
    tagline="Produção · Plano vs Actual"
    phaseId="pr05"
    fallbackDate="Setembro 2026"
    description="Plano de produção PI mensal com comparação plano vs actual, capacidade disponível, desvios e responsável. Dá ao director de produção visibilidade real do que foi planeado versus o que acontece."
    items={[
      { t: 'Plano vs actual por referência', d: 'Quantidade planeada vs produzida por referência PI · desvio em unidades e em % · estado (em curso/concluído/atrasado).' },
      { t: 'Capacidade disponível', d: 'Horas de produção disponíveis vs horas planeadas · % de ocupação por linha · folga ou sobrecarga.' },
      { t: 'Desvios e causa', d: 'Registo de desvio com causa (avaria, NC, falta de MP, paragem planeada) · responsável · acção correctiva.' },
      { t: 'Visão mensal consolidada', d: 'Sumário do mês: total planeado vs produzido · % de cumprimento global · comparação com meses anteriores.' },
    ]}
  />
);

const PrdNaoConformes = () => (
  <PrdStub
    kicker="NÃO CONFORMES"
    title="Não Conformes de Produção"
    tagline="Produção · Ciclo de Qualidade Interno"
    phaseId="pr06"
    fallbackDate="Outubro 2026"
    description="CRUD para registo e acompanhamento de não conformes internos. Cada NC tem tipificação, análise de causa raiz, acção correctiva, responsável e estado — com aging automático para garantir que nenhum fica sem resolução."
    items={[
      { t: 'Registo de NC', d: 'Criar NC com: data · linha/turno · referência · quantidade afectada · tipificação · descrição da não conformidade.' },
      { t: 'Causa raiz', d: 'Análise estruturada de causa raiz (diagrama 5M ou livre) · historial de causas por tipo de NC.' },
      { t: 'Acção correctiva', d: 'Associar acção correctiva · responsável · prazo · estado (pendente/em curso/fechada) · evidência de resolução.' },
      { t: 'Aging automático', d: 'NCs abertas há mais de X dias destacadas · alerta automático para responsável · escalação se não fechada no prazo.' },
    ]}
  />
);

const PrdDesperdicios = () => (
  <PrdStub
    kicker="DESPERDÍCIOS"
    title="Desperdícios de Produção"
    tagline="Produção · Redução Sistemática"
    phaseId="pr07"
    fallbackDate="Outubro 2026"
    description="Registo de desperdícios por tipo e turno com trending, objectivos de redução e alertas de desvio. Permite responsabilizar cada turno e acompanhar sistematicamente a evolução para reduzir desperdício."
    items={[
      { t: 'Registo por tipo e turno', d: 'Peso/volume de desperdício por categoria (tinta, substrato, embalagem, produto NC) · turno · linha · responsável.' },
      { t: 'Trending por período', d: 'Evolução do desperdício total e por tipo: diário, semanal, mensal · detecção de padrões por turno ou dia da semana.' },
      { t: 'Objectivos de redução', d: 'Meta configurável de desperdício por tipo · % de cumprimento actual · gap para objectivo · linha de tendência.' },
      { t: 'Alertas de desvio', d: 'Turno com desperdício acima do limiar definido → alerta automático para director de produção com detalhe da ocorrência.' },
    ]}
  />
);

const PrdPlaneamentoMrp = () => {
  const [snap, setSnap] = React.useState(null);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState(false);

  React.useEffect(() => {
    fetch('/api/mrp-data')
      .then(r => r.ok ? r.json() : null)
      .then(d => { setSnap(d); setLoading(false); })
      .catch(() => { setError(true); setLoading(false); });
  }, []);

  if (loading) return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%', color: 'var(--text-muted)', fontSize: 13, gap: 10 }}>
      <div style={{ width: 18, height: 18, borderRadius: '50%', border: '2px solid color-mix(in oklch, #8cb700 30%, transparent)', borderTopColor: '#8cb700', animation: '_mrpSpin .65s linear infinite' }} />
      A carregar dados MRP…
    </div>
  );

  if (error || !snap?.mrp_data?._ENC) 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' }}>PRODUÇÃO · PLANEAMENTO MRP</div>
      <h2 className="font-display" style={{ margin: '6px 0 0', fontSize: 26, fontWeight: 500 }}>Planeamento MRP</h2>
      <div className="card" style={{ marginTop: 18, padding: '18px 20px', maxWidth: 480 }}>
        <div style={{ fontSize: 13, color: 'var(--text-muted)', lineHeight: 1.6 }}>
          {error ? 'Erro ao carregar dados MRP.' : 'Sem dados carregados. Para popular o MRP, faz upload do ficheiro HTML gerado pelo PowerShell através do endpoint '}<code style={{ fontSize: 11 }}>/api/mrp-upload</code>.
        </div>
      </div>
    </div>
  );

  return window.PrdMrpScreen ? <window.PrdMrpScreen snap={snap} /> : null;
};

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

const ProducaoInner = ({ onOpenChat }) => {
  const [sub, setSub] = window.useSubNav('digi-producao-sub', 'kpis');

  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': 'kpis', '2': 'stock-pi', '3': 'plano-mensal', '4': 'nao-conformes', '5': 'desperdicios', '6': 'planeamento-mrp' };
      if (map[e.key]) setSub(map[e.key]);
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  if (sub === 'kpis') return <PrdKpis />;
  if (sub === 'stock-pi') return <PrdStockPi />;
  if (sub === 'plano-mensal') return <PrdPlanoMensal />;
  if (sub === 'nao-conformes') return <PrdNaoConformes />;
  if (sub === 'desperdicios') return <PrdDesperdicios />;
  if (sub === 'planeamento-mrp') return <PrdPlaneamentoMrp />;
  return <PrdKpis />;
};

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

window.ProducaoScreenWrapper = ProducaoScreenWrapper;