/* QUALIDADE wrapper — sub-nav rec-fornecedores / rec-clientes / avaliacao
   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 de screen_business_ai_roadmap.jsx)
const getQldRoadmapDate = (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)
const QldStub = ({ kicker, title, tagline, description, phaseId, fallbackDate, items }) => {
  const deliveryDate = getQldRoadmapDate(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' }}>
        QUALIDADE · {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 QldReclamacoesFornecedores = () => (
  <QldStub
    kicker="RECLAMAÇÕES FORNECEDORES"
    title="Reclamações a Fornecedores"
    tagline="Qualidade · Gestão de Fornecedores"
    phaseId="ql03"
    fallbackDate="Setembro 2026"
    description="Registo e acompanhamento centralizado de todas as reclamações a fornecedores. Cada reclamação tem análise de causa raiz, acção correctiva associada, responsável e estado de resolução — com aging automático e histórico completo."
    items={[
      { t: 'CRUD de reclamações', d: 'Registo de nova reclamação · fornecedor · SKU · lote · data · quantidade afectada · descrição da não-conformidade.' },
      { t: 'Acção correctiva', d: 'Associar acção correctiva a cada reclamação · responsável · prazo · estado (pendente/em curso/fechada) · evidência de resolução.' },
      { t: 'Aging e SLA', d: 'Reclamações abertas há mais de X dias destacadas automaticamente · alerta para responsável · risco de escalação.' },
      { t: 'Métricas e histórico', d: 'Taxa de resolução por fornecedor · tempo médio de resposta · recorrência de causas · relatório para reunião de gestão.' },
    ]}
  />
);

const QldReclamacoesClientes = () => (
  <QldStub
    kicker="RECLAMAÇÕES CLIENTES"
    title="Reclamações de Clientes"
    tagline="Qualidade · Por SKU e Tipificação"
    phaseId="ql04"
    fallbackDate="Setembro 2026"
    description="Análise de reclamações de clientes por produto (SKU), tipificadas por causa. Permite identificar padrões de reincidência por marca antes que se tornem problemas de reputação, com acompanhamento do armazém A7."
    items={[
      { t: 'Registo por SKU', d: 'Cada reclamação associada ao produto exacto (SKU · lote · data de produção) · cliente · canal de recepção · data de reporte.' },
      { t: 'Tipificação por causa', d: 'Classificação por tipo: embalagem · qualidade do produto · prazo · quantidade · documentação. Causas raiz estruturadas.' },
      { t: 'Trending e % por marca', d: 'Evolução mensal de reclamações por marca · % do total · detecção de clusters por período ou campanha.' },
      { t: 'Análise de reincidência', d: 'Digi detecta o mesmo problema em múltiplos clientes ou SKUs → alerta automático para equipa de qualidade e produção.' },
      { t: 'Acompanhamento armazém A7', d: 'Rastreabilidade de reclamações até ao lote e localização no armazém A7 · apoio a decisões de recolha ou substituição.' },
    ]}
  />
);

const QldAvaliacaoFornecedores = () => (
  <QldStub
    kicker="AVALIAÇÃO FORNECEDORES"
    title="Avaliação de Fornecedores"
    tagline="Qualidade · Decisões de Renovação"
    phaseId="ql_aval"
    fallbackDate="Outubro 2026"
    description="Avaliação sistemática de fornecedores com base em cada entrega e numa revisão anual consolidada. Cobre matérias-primas e consumíveis — condições de entrega, condições comerciais e qualidade do produto — para suportar decisões de renovação ou substituição."
    items={[
      { t: 'Avaliação por entrega', d: 'Registo automático: quantidades recebidas vs encomendadas, prazo de entrega, estado da documentação · score por entrega.' },
      { t: 'Avaliação anual de fornecedores', d: 'Revisão anual consolidada para MP e consumíveis: condições de entrega, condições comerciais, qualidade do produto · score global.' },
      { t: 'Scorecard por fornecedor', d: 'Histórico de scores por fornecedor · evolução temporal · benchmarking entre fornecedores do mesmo tipo de material.' },
      { t: 'Suporte a decisões', d: 'Digi identifica fornecedores abaixo do limiar mínimo → alerta para responsável de compras com resumo de desempenho e sugestão de acção.' },
    ]}
  />
);

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

const QualidadeInner = ({ onOpenChat }) => {
  const [sub, setSub] = window.useSubNav('digi-qualidade-sub', 'rec-fornecedores');

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

  if (sub === 'rec-fornecedores') return <QldReclamacoesFornecedores />;
  if (sub === 'rec-clientes') return <QldReclamacoesClientes />;
  if (sub === 'avaliacao') return <QldAvaliacaoFornecedores />;
  return <QldReclamacoesFornecedores />;
};

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

window.QualidadeScreenWrapper = QualidadeScreenWrapper;