/* Marketing · Brand context + sticky pill switcher.
   - MktBrandProvider envolve o módulo Marketing (no wrapper).
   - useMktBrand() devolve { brand, setBrand, isAll, brandObj }.
   - Estado sincronizado com URL hash param ?marca= (sobre o hash actual #screen=marketing).
   - <MktBrandPills hideOnSubAgentes /> sticky abaixo do topbar.
*/

const MktBrandCtx = React.createContext(null);

const readHashMarca = () => {
  try {
    const h = window.location.hash || '';
    // hash pode ser #screen=marketing&marca=mimaki
    const params = new URLSearchParams(h.replace(/^#/, ''));
    return params.get('marca') || null;
  } catch { return null; }
};
const writeHashMarca = (id) => {
  try {
    const h = window.location.hash || '';
    const params = new URLSearchParams(h.replace(/^#/, ''));
    if (!id || id === 'todas') params.delete('marca');
    else params.set('marca', id);
    const next = '#' + params.toString();
    if (next !== h) {
      // actualizar hash sem disparar handlers do portal (que reagem a 'screen')
      const url = window.location.pathname + window.location.search + next;
      window.history.replaceState(null, '', url);
    }
  } catch {}
};

const MktBrandProvider = ({ children, userName }) => {
  const [brand, setBrandState] = React.useState(() => readHashMarca() || 'todas');
  const [userMarcas, setUserMarcas] = React.useState(null);

  const setBrand = React.useCallback((id) => {
    setBrandState(id || 'todas');
    writeHashMarca(id);
  }, []);

  // Listen to back/forward (hashchange) → sync state
  React.useEffect(() => {
    const onHash = () => {
      const m = readHashMarca() || 'todas';
      setBrandState(prev => prev === m ? prev : m);
    };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  // Resolve permissoes.marcas para o user efectivo
  React.useEffect(() => {
    const lookupMarcas = () => {
      const allUsers = window.AdminUsersData?.ALL_USERS;
      if (allUsers?.length && userName) {
        const u = allUsers.find(x => (x.nome_apresentar || x.email) === userName || x.email === userName);
        const marcas = u?.permissoes?.marcas;
        setUserMarcas(Array.isArray(marcas) && marcas.length ? marcas : null);
        return true;
      }
      return false;
    };
    if (!lookupMarcas()) {
      const onLoaded = () => lookupMarcas();
      window.addEventListener('digi-users-loaded', onLoaded);
      return () => window.removeEventListener('digi-users-loaded', onLoaded);
    }
  }, [userName]);

  const brandObj = (window.MKT_BRANDS || []).find(b => b.id === brand) || (window.MKT_BRANDS || [])[0];
  const isAll = brand === 'todas';

  return (
    <MktBrandCtx.Provider value={{ brand, setBrand, isAll, brandObj, userMarcas }}>
      {children}
    </MktBrandCtx.Provider>
  );
};

const useMktBrand = () => {
  const ctx = React.useContext(MktBrandCtx);
  if (!ctx) throw new Error('useMktBrand fora de MktBrandProvider');
  return ctx;
};
window.useMktBrand = useMktBrand;

// Multi-gradient para a pill "Todas"
const TODAS_GRADIENT = 'conic-gradient(from 0deg, #e60012 0deg 51deg, #00a86b 51deg 102deg, #f59e0b 102deg 154deg, #8b5cf6 154deg 205deg, #ec4899 205deg 256deg, #22d3ee 256deg 308deg, #64748b 308deg 360deg)';

// badges — objecto opcional { brandId: número } para contagens contextuais
const MktBrandPills = ({ badges, rightExtra }) => {
  const { brand, setBrand, userMarcas } = useMktBrand();
  const allBrands = (window.MKT_BRANDS || []).filter(b => b.id !== 'todas');
  const brands = userMarcas?.length ? allBrands.filter(b => userMarcas.includes(b.id)) : allBrands;
  const allItems = [{ id: 'todas', nome: 'Todas' }, ...brands];

  return (
    <div style={{
      position: 'sticky', top: 0, zIndex: 30,
      background: 'var(--bg)',
      borderBottom: '1px solid var(--border)',
      padding: '0 20px',
      display: 'flex', alignItems: 'stretch',
      overflowX: 'auto',
    }}>
      {allItems.map(b => {
        const isActive = b.id === brand;
        const badge = badges?.[b.id];
        return (
          <button key={b.id} onClick={() => setBrand(b.id)}
            style={{
              display: 'inline-flex', alignItems: 'center', gap: 6,
              padding: '11px 14px',
              background: 'transparent', border: 'none', outline: 'none',
              borderBottom: `2px solid ${isActive ? 'var(--text)' : 'transparent'}`,
              marginBottom: '-1px',
              fontSize: 13,
              fontWeight: isActive ? 600 : 400,
              fontFamily: 'var(--font-display)',
              color: isActive ? 'var(--text)' : 'var(--text-muted)',
              cursor: 'pointer', whiteSpace: 'nowrap',
              transition: 'color .1s',
            }}
            onMouseEnter={e => { if (!isActive) e.currentTarget.style.color = 'var(--text)'; }}
            onMouseLeave={e => { if (!isActive) e.currentTarget.style.color = 'var(--text-muted)'; }}>
            {b.nome}
            {badge != null && (
              <span style={{
                fontSize: 10, fontFamily: 'var(--font-mono)',
                padding: '1px 5px', borderRadius: 3,
                background: 'var(--bg-sunken)',
                color: 'var(--text-dim)',
              }}>{badge}</span>
            )}
          </button>
        );
      })}
      {rightExtra && (
        <>
          <span style={{ flex: 1 }} />
          <div style={{ display: 'flex', alignItems: 'center', flexShrink: 0 }}>{rightExtra}</div>
        </>
      )}
    </div>
  );
};

window.MktBrandProvider = MktBrandProvider;
window.useMktBrand = useMktBrand;
window.MktBrandPills = MktBrandPills;
window.MKT_TODAS_GRADIENT = TODAS_GRADIENT;