// Header global compartilhado entre os módulos (mesmo header do hub de produtos em Configurações).
// Autocontido: estilos inline, ícones pela fonte do DS (icon-font-*). Uso: <FGGlobalHeader user="Nome" fazendas={[...]} onFarm={fn} showConfig />
function FGGlobalHeader({ user, fazendas = ['Fazenda Guanabara', 'Fazenda Mateira', 'Fazenda Paranapanema'], agregado = 'Todas as fazendas', onFarm, showConfig = true, flat, perfil }) {
  const [val, setVal] = React.useState(agregado)
  const [open, setOpen] = React.useState(false)
  const ref = React.useRef(null)
  React.useEffect(() => {
    if (!open) return
    const h = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false) }
    document.addEventListener('mousedown', h)
    return () => document.removeEventListener('mousedown', h)
  }, [open])
  const pick = (v) => { setVal(v); setOpen(false); onFarm && onFarm(v === agregado ? null : v) }
  const HUB = '../configuracoes/index.html'
  const sep = { borderLeft: '1px solid transparent', alignSelf: 'stretch' }
  const ghost = { flexShrink: 0, whiteSpace: 'nowrap', display: 'inline-flex', alignItems: 'center', gap: 8, padding: '.75em 1em', border: 0, borderRadius: 'var(--border-radius-default)', background: 'transparent', color: 'var(--color-neutral-light-100)', fontFamily: 'var(--font-family)', fontSize: 'var(--font-size-normal)', fontWeight: 'var(--font-weight-semibold)', textTransform: 'uppercase', letterSpacing: 'var(--letter-space-default)', cursor: 'pointer', textDecoration: 'none' }
  const li = (sel) => ({ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, padding: '12px 16px', fontSize: 'var(--font-size-lg)', fontWeight: 'var(--font-weight-semibold)', color: sel ? 'var(--color-primary)' : 'var(--color-grayish)', background: sel ? 'var(--color-primary-30)' : 'transparent', borderRadius: 'var(--border-radius-default)', cursor: 'pointer', whiteSpace: 'nowrap' })
  return (
    <header style={{ display: 'flex', alignItems: 'center', gap: 'clamp(12px, 2vw, 24px)', padding: '6px clamp(16px, 2.5vw, 32px) 6px 0', minWidth: 0, background: 'var(--color-primary)', boxShadow: flat ? 'none' : 'var(--shadow-header-default)', flexShrink: 0, position: 'relative', zIndex: 50, fontFamily: 'var(--font-family)' }}>
      <a href={HUB} title="Voltar aos produtos" style={{ display: 'flex', alignItems: 'center', flexShrink: 0, paddingLeft: 24 }}><img src="../../assets/logo-vertical.svg" alt="Grupo Guanabara" style={{ height: 40, display: 'block', filter: 'brightness(0) invert(1)' }} /></a>
      <span style={{ width: 1, height: 28, background: 'rgba(255,255,255,.3)', flexShrink: 0, marginLeft: -4 }} />
      <div style={{ display: 'flex', alignItems: 'center', minWidth: 0, marginLeft: -4 }}>
        <div ref={ref} style={{ position: 'relative' }}>
          <button aria-label="Fazenda" onClick={() => setOpen(!open)} onMouseEnter={(e) => e.currentTarget.style.background = 'rgba(255,255,255,.08)'} onMouseLeave={(e) => e.currentTarget.style.background = open ? 'rgba(255,255,255,.08)' : 'transparent'} style={{ display: 'flex', alignItems: 'center', gap: 12, border: 0, borderRadius: 8, background: open ? 'rgba(255,255,255,.08)' : 'transparent', padding: '5px 10px', cursor: 'pointer', fontFamily: 'inherit', textAlign: 'left', color: 'var(--color-neutral-light-100)', transition: 'background .15s' }}>
            <span style={{ display: 'flex', flexDirection: 'column', gap: 1, lineHeight: 1.1 }}>
              <span style={{ fontSize: 11, fontWeight: 'var(--font-weight-medium)', letterSpacing: '0.06em', textTransform: 'uppercase', color: 'rgba(255,255,255,.65)' }}>{val === agregado ? 'Grupo' : 'Fazenda'}</span>
              <span style={{ fontSize: 'var(--font-size-lg)', fontWeight: 'var(--font-weight-semibold)', letterSpacing: '0.01em', whiteSpace: 'nowrap' }}>{val === agregado ? 'Guanabara' : val.replace('Fazenda ', '')}</span>
            </span>
            <i className={'icon-font-' + (open ? 'chevron-up' : 'chevron-down')} style={{ fontSize: 14, color: 'rgba(255,255,255,.75)', marginTop: 12 }}></i>
          </button>
          {open && <ul style={{ position: 'absolute', top: 'calc(100% + 8px)', left: 0, minWidth: 260, zIndex: 60, margin: 0, padding: 8, listStyle: 'none', background: 'var(--color-neutral-light-100)', border: '1px solid var(--color-primary-200)', boxShadow: 'var(--shadow-main-default)', borderRadius: 'var(--border-radius-default)' }}>
            {fazendas.map((v) => <li key={v} style={li(val === v)} onClick={() => pick(v)}>{v}</li>)}
            <li style={{ height: 1, background: 'var(--color-neutral-200)', margin: '8px 16px', padding: 0 }}></li>
            <li style={li(val === agregado)} onClick={() => pick(agregado)}>Grupo Guanabara</li>
          </ul>}
        </div>
      </div>
      <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 4, minWidth: 0 }}>
        <span style={{ paddingRight: 16, marginRight: 8, borderRight: '1px solid rgba(255,255,255,.25)', color: 'var(--color-neutral-light-100)', fontWeight: 'var(--font-weight-semibold)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', maxWidth: 280, flexShrink: 1 }}>{user}</span>
        {showConfig && <a href={HUB + '?config=1' + (perfil ? '&perfil=' + encodeURIComponent(perfil) : '')} style={ghost}><i className="icon-font-settings-outline" style={{ fontSize: 18 }}></i>Configurações</a>}
        <button style={ghost}><i className="icon-font-exit-outline" style={{ fontSize: 18 }}></i>Sair</button>
      </div>
    </header>
  )
}
window.FGGlobalHeader = FGGlobalHeader