const { useState, useEffect, useRef } = React

function I({ n, className = '', style }) { return <i className={('icon-font-' + n + ' ' + className).trim()} style={style}></i> }

function useOutside(open, onClose) {
  const ref = useRef(null)
  useEffect(() => {
    if (!open) return
    const h = (e) => { if (ref.current && !ref.current.contains(e.target)) onClose() }
    document.addEventListener('mousedown', h)
    return () => document.removeEventListener('mousedown', h)
  }, [open])
  return ref
}

function FarmSelector({ mode, fazendas, onChange }) {
  const agregado = mode === 'global' ? 'Grupo Guanabara' : 'Minhas fazendas'
  const [val, setVal] = useState(mode === 'single' ? fazendas[0] : agregado)
  const [open, setOpen] = useState(false)
  const ref = useOutside(open, () => setOpen(false))
  useEffect(() => { setVal(mode === 'single' ? fazendas[0] : agregado); onChange && onChange(null) }, [mode])
  const ag = val === agregado
  const disp = <span className="fs2-txt"><span className="fs2-cap">{ag ? 'Grupo' : 'Fazenda'}</span><span className="fs2-val">{ag ? (mode === 'global' ? 'Guanabara' : 'Minhas fazendas') : val.replace('Fazenda ', '')}</span></span>
  if (mode === 'single') return <div className="fs2">{disp}</div>
  const pick = (v) => { setVal(v); setOpen(false); onChange && onChange(v === agregado ? null : v) }
  return (
    <div className="fs2" ref={ref}>
      <button className="fs2-trigger" aria-label="Fazenda" onClick={() => setOpen(!open)}>{disp}<I n={open ? 'chevron-up' : 'chevron-down'} /></button>
      {open && <ul className="dd fs2-dd">
        {fazendas.map((f) => <li key={f} className={val === f ? 'sel' : ''} onClick={() => pick(f)}>{f}</li>)}
        <li className={'div ' + (ag ? 'sel' : '')} onClick={() => pick(agregado)}>{agregado}{mode === 'multi' && <span className="meta">{fazendas.length}</span>}</li>
      </ul>}
    </div>
  )
}

function GlobalHeader({ user, showFarm, showConfig, onLogo, onConfig, section, onFarm }) {
  return (
    <header className="gh">
      <button className="gh-logo-btn" onClick={onLogo} title="Voltar aos produtos"><img className="gh-logo" src="../../assets/logo-vertical.svg" alt="Grupo Guanabara" /></button>
      {section && <div className="gh-slot"><span className="gh-section"><I n="settings-outline" />{section}</span></div>}
      {showFarm && <div className="gh-slot"><FarmSelector mode={user.farmMode} fazendas={user.fazendas} onChange={onFarm} /></div>}
      <div className="gh-right">
        <span className="gh-user">{user.nome}</span>
        {showConfig && <button className="btn btn-ghost" onClick={onConfig}><span className="bi"><I n="settings-outline" /></span>Configurações</button>}
        <button className="btn btn-ghost"><span className="bi"><I n="exit-outline" /></span>Sair</button>
      </div>
    </header>
  )
}

function FilterSelect({ label, options, value, onChange }) {
  const [open, setOpen] = useState(false)
  const ref = useOutside(open, () => setOpen(false))
  return (
    <div className="fsel" ref={ref}>
      <div className={'sel' + (value ? ' filled' : '') + (open ? ' focus' : '')} style={open ? { borderColor: 'var(--color-primary-200)' } : null} onClick={() => setOpen(!open)}>
        <span>{value || label}</span>
        {value ? <I n="close" className="x" style={{ cursor: 'pointer' }} /> : <I n={open ? 'chevron-up' : 'chevron-down'} />}
      </div>
      {open && <ul className="dd">
        {value && <li onClick={(e) => { e.stopPropagation(); onChange(null); setOpen(false) }}>Todos</li>}
        {options.map((o, i) => <li key={o} className={(value && i === 0 ? 'div ' : '') + (value === o ? 'sel' : '')} onClick={() => { onChange(o); setOpen(false) }}>{o}</li>)}
      </ul>}
    </div>
  )
}

function FarmsCell({ fazendas }) {
  if (fazendas === 'all') return <span className="cell strong">Todas as fazendas</span>
  return <span className="cell">{fazendas.join(', ')}</span>
}

const APP_PILL = { Boletim: 'App Boletins', Maternidade: 'App Maternidade', 'Manejo de Pastagem': 'App Manejo de Pastagem' }
function AccessCell({ web, app }) {
  return (
    <div className="row-inline" style={{ flexWrap: 'wrap', gap: 6 }}>
      {web && <span className="pill pill-app">Web</span>}
      {app.map((a) => <span key={a} className="pill pill-app">{APP_PILL[a] || 'App ' + a}</span>)}
    </div>
  )
}

function StatusChip({ ativo }) {
  return ativo ? <span className="chip chip-active"><I n="radio-button-on" />Ativo</span> : <span className="chip chip-inactive"><I n="radio-button-off" />Inativo</span>
}

function OrigemPill({ origem }) { return <span className={'pill ' + (origem === 'ERP' ? 'pill-erp' : 'pill-manual')}>{origem}</span> }

Object.assign(window, { I, useOutside, FarmSelector, GlobalHeader, FilterSelect, FarmsCell, AccessCell, StatusChip, OrigemPill })