/* global React, Icon, Button, EstadoDados, calcPeriod, PERIODOS_PRESET, ymdLocal, fmtDate */
// ============================================================
// Marketplace_Hub.jsx — a ENTRADA ÚNICA do Marketplace (redesenho, Lote A, 10/10/2026)
//
// Cinco áreas — Visão geral · Vendas · Anúncios e kits · Recebimentos · Lojas e integrações — e, em cada uma, as
// telas de antes REALOCADAS (não reescritas). Cada rota é uma VISTA; a vista diz quais filtros valem nela.
//
// Os filtros (empresa, plataforma, loja, período) são UM estado para o módulo inteiro, guardado na aba do navegador
// (sessionStorage): trocar de área ou sair e voltar mantém o que a pessoa escolheu. As telas leem pelo
// `useMktFiltros()` (contexto); fora da entrada, o mesmo hook devolve os filtros NEUTROS (nada filtrado).
//
// O que não é estilo:
//  - período: UMA régua, a do `calcPeriod` (decisão 5 do PM, 10/10/2026), a MESMA chamada de Dashboard e Relatórios —
//    o `Periodo.jsx` e o `ML_PERIODOS` saíram do Marketplace. O Personalizado é dia local (o `calcPeriod` lia a data pura
//    como meia-noite UTC e recuava um dia em Brasília: consertado lá, para os três, no mesmo dia);
//  - sem filtro nenhum escolhido, NADA é filtrado (nem loja arquivada, nem loja que a lista não leu): os números de
//    "todas" são os de antes, exatos;
//  - a empresa daqui é do Marketplace, não a empresa em foco no topo (que nasce na principal e esconderia as lojas das
//    outras empresas por padrão);
//  - a largura da tela se destrava SÓ nas rotas destas cinco áreas (decisão 4): `mktViewportDaRota`.
// ============================================================

const MKT_PLATAFORMAS = ['Mercado Livre', 'Shopee', 'TikTok Shop', 'Outra'];
const MKT_FECHAMENTO_PLATAFORMAS = ['Shopee', 'TikTok Shop', 'Outra'];   // o lançamento semanal (o ML vem da sincronização)

// As áreas e as vistas. `filtros`: os que VALEM na vista (os outros ficam guardados, só não aparecem).
// `plataformaFixa`: a vista só existe para uma plataforma. `plataformas`: as que a vista aceita.
// `lojaObrigatoria`: a vista mostra UMA loja por vez (não existe "todas").
const MKT_AREAS = [
  { id: 'visao', rotulo: 'Visão geral', icone: 'layout-dashboard', vistas: [
    { rota: 'marketplace', rotulo: 'Visão geral', filtros: ['empresa', 'plataforma', 'loja', 'periodo'] },
  ] },
  { id: 'vendas', rotulo: 'Vendas', icone: 'shopping-bag', vistas: [
    { rota: 'marketplace/vendas', rotulo: 'Fechamentos por período', filtros: ['empresa', 'plataforma', 'loja', 'periodo'], plataformas: MKT_FECHAMENTO_PLATAFORMAS },
    { rota: 'marketplace/vendas/mercado-livre', rotulo: 'Vendas do Mercado Livre', filtros: ['empresa', 'loja', 'periodo'], plataformaFixa: 'Mercado Livre' },
  ] },
  { id: 'anuncios', rotulo: 'Anúncios e kits', icone: 'tags', vistas: [
    { rota: 'marketplace/anuncios', rotulo: 'Anúncios do Mercado Livre', filtros: ['empresa', 'loja'], plataformaFixa: 'Mercado Livre', lojaObrigatoria: true },
    { rota: 'marketplace/anuncios/sem-vinculo', rotulo: 'Vendas sem vínculo', filtros: ['empresa', 'loja'], plataformaFixa: 'Mercado Livre',
      nota: 'A fila mostra todas as datas: venda esperando vínculo não vence.' },
  ] },
  { id: 'recebimentos', rotulo: 'Recebimentos', icone: 'landmark', vistas: [
    { rota: 'marketplace/recebimentos', rotulo: 'Declarações da Shopee', filtros: [],
      nota: 'Os filtros ainda não valem aqui: a área mostra as declarações de todas as lojas da Shopee. O repasse de cada fechamento continua em Vendas › Fechamentos por período (o botão do lançamento).' },
  ] },
  { id: 'lojas', rotulo: 'Lojas e integrações', icone: 'store', vistas: [
    { rota: 'marketplace/lojas', rotulo: 'Lojas', filtros: ['empresa', 'plataforma', 'loja'] },
    { rota: 'marketplace/lojas/mercado-livre', rotulo: 'Sincronização do Mercado Livre', filtros: ['empresa', 'loja'], plataformaFixa: 'Mercado Livre' },
  ] },
];
const MKT_VISTAS = MKT_AREAS.flatMap((a) => a.vistas.map((v) => ({ ...v, area: a.id })));

function mktVistaDaRota(rota) {
  const r = String(rota || '').replace(/^#/, '').split('?')[0];
  return MKT_VISTAS.find((v) => v.rota === r) || null;
}
// A largura da tela (decisão 4): só as rotas destas cinco áreas respondem à largura do aparelho; o resto do app
// continua desenhado contra 1440 px. Quem aplica é o app.jsx, a cada troca de rota.
function mktViewportDaRota(rota) {
  return mktVistaDaRota(rota) ? 'width=device-width, initial-scale=1' : 'width=1440';
}

// ── o estado dos filtros: guardado na aba, validado, com padrão silencioso ──────────────────────────────────
const MKT_FILTROS_CHAVE = 'tm-mkt-filtros';
const MKT_PERIODO_PADRAO = 'ano';
function mktFiltrosPadrao() { return { empresaId: '', plataforma: '', lojaId: '', periodoId: MKT_PERIODO_PADRAO, de: '', ate: '' }; }
function mktLerFiltros(armazem) {
  const p = mktFiltrosPadrao();
  try {
    const s = (armazem || window.sessionStorage).getItem(MKT_FILTROS_CHAVE);
    const o = s ? JSON.parse(s) : null;
    if (!o || o.v !== 1) return p;
    const ids = (typeof PERIODOS_PRESET !== 'undefined' ? PERIODOS_PRESET : []).map((x) => x.id);
    const data = (x) => (/^\d{4}-\d{2}-\d{2}$/.test(String(x || '')) ? String(x) : '');
    return {
      empresaId: typeof o.empresaId === 'string' ? o.empresaId : '',
      plataforma: MKT_PLATAFORMAS.includes(o.plataforma) ? o.plataforma : '',
      lojaId: typeof o.lojaId === 'string' ? o.lojaId : '',
      periodoId: ids.includes(o.periodoId) ? o.periodoId : MKT_PERIODO_PADRAO,
      de: data(o.de), ate: data(o.ate),
    };
  } catch (e) { return p; }
}
function mktGravarFiltros(f, armazem) {
  try { (armazem || window.sessionStorage).setItem(MKT_FILTROS_CHAVE, JSON.stringify({ v: 1, ...f })); } catch (e) { /* sem armazenamento: só não volta igual */ }
}

// O período na régua única. `inicio`/`fim` em data (AAAA-MM-DD, dia local, intervalo fechado) para quem filtra por
// data_venda; `start`/`end` (Date) e `key` (estável: só muda quando a pessoa troca o período ou o dia vira) para quem
// consulta por hora. Personalizado sem as duas datas cai no padrão do calcPeriod (do dia 1 até hoje) — e diz isso.
function mktPeriodo(periodoId, de, ate) {
  const id = periodoId || MKT_PERIODO_PADRAO;
  const p = calcPeriod(id, id === 'custom' ? de : '', id === 'custom' ? ate : '');
  const inicio = ymdLocal(p.start), fim = ymdLocal(p.end);
  const preset = (typeof PERIODOS_PRESET !== 'undefined' ? PERIODOS_PRESET : []).find((x) => x.id === id);
  return { id, key: p.key, start: p.start, end: p.end, inicio, fim,
    nome: preset ? preset.label : id, rotulo: fmtDate(inicio) + ' – ' + fmtDate(fim),
    incompleto: id === 'custom' && (!de || !ate) };
}

// A decisão inteira dos filtros, para uma vista: quais lojas ela oferece, qual loja vale, o que passa.
// Pura: recebe o estado guardado, as lojas lidas e a vista.
function mktResolverFiltros(estado, lojas, vista) {
  const e = estado || mktFiltrosPadrao();
  const v = vista || { filtros: [] };
  const vale = (f) => (v.filtros || []).includes(f);
  const todasLojas = Array.isArray(lojas) ? lojas : [];
  const aceitas = v.plataformaFixa ? [v.plataformaFixa] : (v.plataformas || MKT_PLATAFORMAS);
  const empresaId = vale('empresa') ? (e.empresaId || '') : '';
  const plataforma = v.plataformaFixa ? v.plataformaFixa : (vale('plataforma') && aceitas.includes(e.plataforma) ? e.plataforma : '');
  const naEmpresa = (l) => !empresaId || l.empresa_id === empresaId;
  const naPlataforma = (l) => (plataforma ? (l.plataforma || 'Outra') === plataforma : aceitas.includes(l.plataforma || 'Outra'));
  // As lojas que PASSAM incluem as arquivadas (filtrar por Shopee não pode esconder a venda de uma loja Shopee
  // arquivada); as que o seletor OFERECE são as ativas, mais a escolhida.
  const candidatas = todasLojas.filter((l) => naEmpresa(l) && naPlataforma(l));
  const lojasDaVista = candidatas.filter((l) => l.situacao !== 'Arquivada' || l.id === e.lojaId);
  let lojaId = vale('loja') && candidatas.some((l) => l.id === e.lojaId) ? e.lojaId : '';
  if (v.lojaObrigatoria && !lojaId) lojaId = lojasDaVista[0] ? lojasDaVista[0].id : '';
  // Filtrando = a pessoa escolheu alguma coisa que restringe. A plataforma FIXA não conta: a tela já é só daquela
  // plataforma por construção — e "nada escolhido" tem que deixar passar TUDO (inclusive loja que a lista não leu).
  const filtrando = !!(empresaId || (plataforma && !v.plataformaFixa) || lojaId);
  const permitidas = new Set(lojaId ? [lojaId] : candidatas.map((l) => l.id));
  const periodo = vale('periodo') ? mktPeriodo(e.periodoId, e.de, e.ate) : null;
  return {
    empresaId, plataforma, plataformaFixa: v.plataformaFixa || '', lojaId, lojasDaVista, filtrando,
    // a chave das lojas que passam: texto estável para lista de dependências (nunca o Set, que é novo a cada render)
    chaveLojas: filtrando ? [...permitidas].sort().join(',') : '',
    passaLoja: (id) => !filtrando || permitidas.has(id),
    periodo,
    passaData: (iso) => {
      if (!periodo) return true;
      const d = String(iso || '').slice(0, 10);
      return !!d && d >= periodo.inicio && d <= periodo.fim;
    },
  };
}

// Para a tela que consulta POR LOJA ou TODAS (o resumo do ML é `p_loja` ou nulo): o filtro vira uma loja, todas,
// nenhuma ou várias. "Várias" (uma empresa com mais de uma loja daquela plataforma) a tela não junta sozinha: pede a loja.
function mktAlvoDaLoja(fm) {
  if (fm.lojaId) return { tipo: 'uma', id: fm.lojaId };
  if (!fm.filtrando) return { tipo: 'todas' };
  const ids = fm.chaveLojas ? fm.chaveLojas.split(',') : [];
  if (!ids.length) return { tipo: 'nenhuma' };
  if (ids.length === 1) return { tipo: 'uma', id: ids[0] };
  return { tipo: 'varias', n: ids.length };
}

// ── o contexto que as telas leem ────────────────────────────────────────────────────────────────────────────
const MktFiltrosCtx = React.createContext(null);
function useMktFiltros() {
  const ctx = React.useContext(MktFiltrosCtx);
  if (ctx) return ctx;
  // fora da entrada (nenhuma rota de hoje, mas a tela não pode quebrar): nada filtrado, o padrão do período
  return { ...mktResolverFiltros(mktFiltrosPadrao(), [], { filtros: ['periodo'] }), dentroDoHub: false, vista: null, definir: () => {} };
}
// O título da tela realocada: dentro da entrada é o nome da vista; fora, o de antes.
function mktTituloDaTela(fm, tituloDeAntes) { return fm && fm.dentroDoHub && fm.vista ? fm.vista.rotulo : tituloDeAntes; }

// ── a barra de filtros ──────────────────────────────────────────────────────────────────────────────────────
function MktFiltrosBarra({ fm, estado, definir, lojasLidas, empresas }) {
  const vista = fm.vista || { filtros: [] };
  const vale = (f) => (vista.filtros || []).includes(f);
  if (!(vista.filtros || []).length) return vista.nota ? <div className="mkt-nota"><Icon name="info" size={14} />{vista.nota}</div> : null;
  const presets = typeof PERIODOS_PRESET !== 'undefined' ? PERIODOS_PRESET : [];
  const comLoja = (lojasLidas.rows || []);
  const empresasComLoja = (empresas || []).filter((e) => comLoja.some((l) => l.empresa_id === e.id));
  const aceitas = vista.plataformaFixa ? [vista.plataformaFixa] : (vista.plataformas || MKT_PLATAFORMAS);
  const plataformasComLoja = aceitas.filter((p) => comLoja.some((l) => (l.plataforma || 'Outra') === p));
  const escolheu = !!(estado.empresaId || estado.plataforma || estado.lojaId || estado.periodoId !== MKT_PERIODO_PADRAO);
  return (
    <div className="mkt-filtros" role="group" aria-label="Filtros do Marketplace">
      {vale('empresa') && (
        <label className="mkt-filtro">
          <span>Empresa</span>
          <select className="input" value={fm.empresaId} onChange={(e) => definir({ empresaId: e.target.value })}>
            <option value="">Todas as empresas</option>
            {empresasComLoja.map((e) => <option key={e.id} value={e.id}>{e.nome_fantasia || e.razao_social || 'Empresa'}</option>)}
          </select>
        </label>
      )}
      <label className="mkt-filtro">
        <span>Plataforma</span>
        {vista.plataformaFixa || !vale('plataforma') ? (
          <span className="mkt-fixo" title="Esta vista é de uma plataforma só">{vista.plataformaFixa || 'Todas'}</span>
        ) : (
          <select className="input" value={fm.plataforma} onChange={(e) => definir({ plataforma: e.target.value })}>
            <option value="">Todas{vista.plataformas ? ' (' + vista.plataformas.filter((p) => p !== 'Outra').join(' e ') + ')' : ''}</option>
            {plataformasComLoja.map((p) => <option key={p} value={p}>{p}</option>)}
          </select>
        )}
      </label>
      {vale('loja') && (
        <label className="mkt-filtro mkt-filtro-loja">
          <span>Loja</span>
          <select className="input" value={fm.lojaId} disabled={lojasLidas.lendo || (!fm.lojasDaVista.length && !!vista.lojaObrigatoria)}
            onChange={(e) => definir({ lojaId: e.target.value })}>
            {!vista.lojaObrigatoria && <option value="">{lojasLidas.lendo ? 'Lendo as lojas…' : 'Todas as lojas' + (fm.lojasDaVista.length ? ' (' + fm.lojasDaVista.length + ')' : '')}</option>}
            {vista.lojaObrigatoria && !fm.lojasDaVista.length && <option value="">{lojasLidas.lendo ? 'Lendo as lojas…' : 'Nenhuma loja'}</option>}
            {fm.lojasDaVista.map((l) => <option key={l.id} value={l.id}>{l.nome}{l.situacao === 'Arquivada' ? ' (arquivada)' : ''}</option>)}
          </select>
        </label>
      )}
      {vale('periodo') && (
        <label className="mkt-filtro">
          <span>Período</span>
          <select className="input" value={estado.periodoId} onChange={(e) => definir({ periodoId: e.target.value })}>
            {presets.map((p) => <option key={p.id} value={p.id}>{p.label}</option>)}
          </select>
        </label>
      )}
      {vale('periodo') && estado.periodoId === 'custom' && (
        <div className="mkt-filtro mkt-filtro-datas">
          <label><span>De</span><input className="input" type="date" value={estado.de} onChange={(e) => definir({ de: e.target.value })} /></label>
          <label><span>Até</span><input className="input" type="date" value={estado.ate} onChange={(e) => definir({ ate: e.target.value })} /></label>
        </div>
      )}
      {vale('periodo') && fm.periodo && (
        <div className="mkt-faixa" aria-live="polite">
          <Icon name="calendar" size={13} />
          {fm.periodo.rotulo}
          {fm.periodo.incompleto && <span className="mkt-aviso-curto"> · escolha as duas datas (até lá: do dia 1 até hoje)</span>}
        </div>
      )}
      {escolheu && (
        <button type="button" className="mkt-limpar" onClick={() => definir(mktFiltrosPadrao())}>Limpar filtros</button>
      )}
      {lojasLidas.erro && (
        <div className="mkt-filtros-erro" role="alert">Não consegui ler as lojas ({lojasLidas.erro}) — os filtros de empresa e loja estão sem opções; nada foi filtrado.</div>
      )}
      {vista.nota && <div className="mkt-nota"><Icon name="info" size={14} />{vista.nota}</div>}
    </div>
  );
}

// ── a entrada: cabeçalho, as cinco áreas, os filtros, as vistas da área e a tela ───────────────────────────
function MktArea({ rota, onNav, children }) {
  const vista = mktVistaDaRota(rota);
  const area = MKT_AREAS.find((a) => vista && a.id === vista.area) || MKT_AREAS[0];
  const [estado, setEstado] = React.useState(() => mktLerFiltros());
  const [lojasLidas, setLojasLidas] = React.useState({ lendo: true, rows: [], erro: '' });
  const [releitura, setReleitura] = React.useState(0);
  React.useEffect(() => {
    let vivo = true;
    (async () => {
      if (!window.tmSupabase) { setLojasLidas({ lendo: false, rows: [], erro: '' }); return; }
      const r = await window.tmSupabase.from('marketplace_lojas').select('id,nome,plataforma,empresa_id,situacao,baixa_estoque,baixa_estoque_desde').order('nome');
      if (!vivo) return;
      setLojasLidas(r.error ? { lendo: false, rows: [], erro: r.error.message || r.error.code || 'leitura' } : { lendo: false, rows: r.data || [], erro: '' });
    })();
    return () => { vivo = false; };
  }, [releitura]);
  const definir = React.useCallback((patch) => {
    setEstado((a) => { const b = { ...a, ...patch }; mktGravarFiltros(b); return b; });
  }, []);
  const resolvido = mktResolverFiltros(estado, lojasLidas.rows, vista);
  const fm = { ...resolvido, vista, area: area.id, lojas: lojasLidas.rows, lojasLendo: lojasLidas.lendo, lojasErro: lojasLidas.erro,
    dentroDoHub: true, definir, relerLojas: () => setReleitura((k) => k + 1) };
  const empresas = Array.isArray(window.tmEmpresas) ? window.tmEmpresas : [];
  // decisão 8: a Transição (venda de loja lançada como B2B) mora em Configurações › Financeiro › Classificação
  // pendente; daqui se chega lá — e só aparece para quem pode abrir a tela de destino (a pergunta do menu)
  const podeTransicao = window.tmPode && window.tmModuloDaRota ? window.tmPode(window.tmModuloDaRota('marketplace/transicao'), 'ver') : false;
  const ir = (r) => { if (onNav) onNav(r); };
  return (
    <MktFiltrosCtx.Provider value={fm}>
      <div className="canvas mkt-hub">
        <div className="page-head mkt-cabeca">
          <div>
            <div className="page-title">Marketplace</div>
            <div className="page-sub">Mercado Livre, Shopee e TikTok Shop: vendas, anúncios, recebimentos e lojas</div>
          </div>
        </div>
        <nav className="mkt-areas" aria-label="Áreas do Marketplace">
          {MKT_AREAS.map((a) => {
            const ativa = a.id === area.id;
            return (
              <button type="button" key={a.id} className={`mkt-area${ativa ? ' ativa' : ''}`} aria-current={ativa ? 'page' : undefined}
                onClick={() => ir(a.vistas[0].rota)}>
                <Icon name={a.icone} size={15} />
                <span>{a.rotulo}</span>
              </button>
            );
          })}
        </nav>
        <MktFiltrosBarra fm={fm} estado={estado} definir={definir} lojasLidas={lojasLidas} empresas={empresas} />
        {area.vistas.length > 1 && (
          <div className="mkt-vistas" role="group" aria-label={'Vistas de ' + area.rotulo}>
            {area.vistas.map((v) => {
              const ativa = vista && v.rota === vista.rota;
              return (
                <button type="button" key={v.rota} className={`mkt-vista${ativa ? ' ativa' : ''}`} aria-current={ativa ? 'page' : undefined}
                  onClick={() => ir(v.rota)}>{v.rotulo}</button>
              );
            })}
          </div>
        )}
        <div className="mkt-conteudo">{children}</div>
        {area.id === 'vendas' && podeTransicao && (
          <div className="mkt-rodape-nota">
            Venda de loja de marketplace que entrou como pedido B2B? A correção mora em Configurações › Financeiro › Classificação pendente.
            {' '}<button type="button" className="fc-linkbtn" onClick={() => ir('marketplace/transicao')}>Vendas de marketplace lançadas como B2B</button>
          </div>
        )}
      </div>
    </MktFiltrosCtx.Provider>
  );
}

Object.assign(window, {
  MktArea, useMktFiltros, mktTituloDaTela, MktFiltrosCtx,
  MKT_AREAS, MKT_VISTAS, MKT_PLATAFORMAS, MKT_FECHAMENTO_PLATAFORMAS, mktVistaDaRota, mktViewportDaRota,
  mktFiltrosPadrao, mktLerFiltros, mktGravarFiltros, mktPeriodo, mktResolverFiltros, mktAlvoDaLoja, MKT_PERIODO_PADRAO,
});