function Hub({ user }) {
  const produtos = window.CFG.PRODUTOS.filter((p) => user.produtos.includes(p.id))
  return (
    <main className="hub">
      <div className="hub-box">
        <div className="hub-cards">
          {produtos.map((p) => (
            <a key={p.id} className="hub-card" href={encodeURI(p.href)}>
              <img src={p.img} alt="" draggable={false} />
              <div className="hub-card-text"><h2>{p.label}</h2><span className="hub-go" aria-hidden="true"><I n="chevron-forward" />Acessar</span></div>
            </a>
          ))}
        </div>
      </div>
    </main>
  )
}

// Menu branco colapsável — mesmo padrão do menu de Rebanhos (PastagemSidebar light + mini).
const CFG_GROUP_ICON = { 'Pessoas e acessos': 'people-outline', 'Fazendas': 'folder', 'Rebanho': 'cow', 'Pastagem': 'file-tray-full-outline', 'Boletins': 'clipboard', 'Maquinário': 'briefcase-outline', 'Sistema': 'list-outline' }
function SettingsMenu({ ativo, onNav, permitidos }) {
  const groups = window.CFG.MENU_CFG
    .map((g) => ({ label: g.grupo, icon: CFG_GROUP_ICON[g.grupo] || 'folder', items: g.itens.filter((i) => !permitidos || permitidos.includes(i))
      .map((it) => ({ id: it, label: it, active: ativo === it, onClick: () => onNav(it), tag: window.CFG.MENU_ERP.includes(it) ? 'ERP' : null })) }))
    .filter((g) => g.items.length)
  return <FGSideMenu groups={groups} storageKey="cfg_menu_mini" title="Configurações" titleIcon="settings-outline" itemIndent={24} />
}

const PERFIS_NOTA_CFG = { Administrador: 'Todas as telas.', Gestor: 'Rebanho, Pastagem, Boletins e Maquinário. Sem acesso a Pessoas, Fazendas e Sistema.' }
const LVL_STYLE = {
  Editar: { background: 'var(--color-primary-200)', color: 'var(--color-neutral-light-200)' },
  Visualizar: { background: 'var(--color-primary-30)', color: 'var(--color-primary)' },
  Parcial: { background: 'var(--color-neutral-light-100)', color: 'var(--color-primary)', boxShadow: 'inset 0 0 0 1px var(--color-primary-200)' },
  'Sem acesso': { background: 'var(--color-neutral-100)', color: 'var(--color-grayish)' },
}
function LvlChip({ n }) { return <span style={{ display: 'inline-flex', alignItems: 'center', padding: '4px 12px', borderRadius: 'var(--border-radius-chip)', fontSize: 'var(--font-size-xsm)', fontWeight: 'var(--font-weight-semibold)', whiteSpace: 'nowrap', ...LVL_STYLE[n] }}>{n}</span> }

function PerfisPage() {
  const { PERFIS, PERFIL_DESC, MODULOS, MATRIZ } = window.CFG
  return (
    <React.Fragment>
      <div className="ph"><div className="ph-text"><h3>Perfis de acesso</h3></div></div>
      <div className="cfg-body">
        <p style={{ margin: 0, fontSize: 'var(--font-size-lg)', lineHeight: '24px', maxWidth: 780, textWrap: 'pretty' }}>Nível de acesso de cada perfil no sistema web, por módulo. O perfil vale para as fazendas a que a pessoa está vinculada. O acesso aos aplicativos de campo é liberado por pessoa, em "Acesso aos aplicativos", e não depende do perfil.</p>
        <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>{['Sem acesso', 'Visualizar', 'Parcial', 'Editar'].map((n) => <LvlChip key={n} n={n} />)}</div>
        <div className="tcard" style={{ overflowX: 'auto' }}>
          <table className="pt" style={{ minWidth: 880, tableLayout: 'fixed' }}>
            <thead><tr><th style={{ width: '16%', verticalAlign: 'bottom' }}>Módulo</th>{PERFIS.map((pf) => <th key={pf} style={{ width: '21%', verticalAlign: 'top', textTransform: 'none' }}><strong style={{ display: 'block', fontSize: 'var(--font-size-lg)', color: 'var(--color-grayish-dark)' }}>{pf}</strong><span style={{ display: 'block', marginTop: 4, fontSize: 'var(--font-size-xsm)', fontWeight: 'var(--font-weight-normal)', color: 'var(--color-grayish)', lineHeight: '16px', whiteSpace: 'normal' }}>{PERFIL_DESC[pf]}</span></th>)}</tr></thead>
            <tbody>{MODULOS.map((m, i) => <tr key={m} style={{ verticalAlign: 'top' }}><td className="nm">{m}</td>{PERFIS.map((pf) => <td key={pf} style={{ whiteSpace: 'normal' }}><LvlChip n={MATRIZ[pf][i]} />{m === 'Configurações' && PERFIS_NOTA_CFG[pf] && <span style={{ display: 'block', marginTop: 6, fontSize: 'var(--font-size-xsm)', color: 'var(--color-grayish)', lineHeight: '16px' }}>{PERFIS_NOTA_CFG[pf]}</span>}</td>)}</tr>)}</tbody>
          </table>
        </div>
        <div className="ro-note" style={{ fontSize: 'var(--font-size-normal)' }}><I n="information-circle-outline" />Os perfis são fixos e não podem ser editados nesta tela.</div>
      </div>
    </React.Fragment>
  )
}

function PlanilhaButton({ items }) {
  const [open, setOpen] = React.useState(false)
  const ref = useOutside(open, () => setOpen(false))
  return (
    <div className="selbtn" ref={ref}>
      <button className="btn btn-ghost btn-small" onClick={() => setOpen(!open)}>Planilha<span className="bi" style={{ paddingLeft: 8, paddingRight: 0 }}><I n="chevron-down" /></span></button>
      {open && <ul className="selbtn-items">{items.map((it) => <li key={it.name} onClick={() => { setOpen(false); it.action() }}><I n={it.icon} />{it.name}</li>)}</ul>}
    </div>
  )
}

function PessoasFiltro({ f, onClose, onApply }) {
  const { FAZENDAS, PERFIS } = window.CFG
  const [d, setD] = React.useState(f)
  const vazio = { fazenda: null, perfil: null, tipo: null, origem: null, status: null }
  return (
    <React.Fragment>
      <div className="backdrop" onClick={onClose}></div>
      <aside className="drawer pd" style={{ width: 480 }} role="dialog" aria-label="Filtrar">
        <div className="pd-close"><button type="button" aria-label="Fechar drawer" onClick={onClose}><I n="close" /></button></div>
        <div className="pd-title"><h4>Filtrar</h4></div>
        <div className="pd-body" style={{ display: 'flex', flexDirection: 'column', gap: 20, paddingTop: 24 }}>
          <div className="lbl"><label>Fazenda</label><SelectField value={d.fazenda} placeholder="Selecionar" options={FAZENDAS} onChange={(v) => setD({ ...d, fazenda: v })} /></div>
          <div className="lbl"><label>Perfil</label><SelectField value={d.perfil} placeholder="Selecionar" options={PERFIS} onChange={(v) => setD({ ...d, perfil: v })} /></div>
          <div className="lbl"><label>Status</label><SelectField value={d.status} placeholder="Selecionar" options={['Ativo', 'Inativo']} onChange={(v) => setD({ ...d, status: v })} /></div>
          <div className="lbl"><label>Origem</label><SelectField value={d.origem} placeholder="Selecionar" options={['ERP', 'Manual']} onChange={(v) => setD({ ...d, origem: v })} /></div>
          <div className="lbl"><label>Tipo de acesso</label><SelectField value={d.tipo} placeholder="Selecionar" options={['Web', 'Aplicativo', 'Ambos']} onChange={(v) => setD({ ...d, tipo: v })} /></div>
        </div>
        <div className="pd-foot"><button className="btn btn-ghost" onClick={() => setD(vazio)}>Limpar</button><button className="btn btn-primary" onClick={() => onApply(d)}>Filtrar</button></div>
      </aside>
    </React.Fragment>
  )
}

function VinculosCell({ p }) {
  if (p.perfil === 'Administrador' && p.fazendas === 'all') return <span className="cell"><strong style={{ color: 'var(--color-grayish-dark)', fontWeight: 'var(--font-weight-semibold)' }}>Administrador</strong></span>
  const linhas = p.fazendas === 'all' ? [[p.perfil, 'Todas as fazendas']] : (p.perfis || p.fazendas.map((f) => [f, p.perfil])).map(([f, pf]) => [pf, f])
  return <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>{linhas.map(([pf, f]) => <span key={f} className="cell" style={{ whiteSpace: 'nowrap', display: 'inline-flex', gap: 6 }}><strong style={{ color: 'var(--color-grayish-dark)', fontWeight: 'var(--font-weight-semibold)' }}>{pf}</strong>{' '}{f}</span>)}</div>
}

function PessoasPage({ farmSel, user, pessoas: todas, onToggleStatus, flash, aba, setAba, onEdit, onAdd, onDesativar, onImport, sel, setSel, onBulkEdit, onBulkDesativar }) {
  const { PERFIS } = window.CFG
  const FAZENDAS = window.CFG.FAZENDAS
  const pessoas = farmSel ? todas.filter((p) => p.fazendas === 'all' || p.fazendas.includes(farmSel)) : todas
  const [busca, setBusca] = React.useState('')
  const [f, setF] = React.useState({ fazenda: null, perfil: null, tipo: null, origem: null, status: null })
  const [menu, setMenu] = React.useState(null)
  const [fdr, setFdr] = React.useState(false)
  const menuRef = useOutside(menu !== null, () => setMenu(null))
  const set = (k) => (v) => setF({ ...f, [k]: v })

  const isExec = (p) => p.app.length > 0
  const isWeb = (p) => p.web
  const base = aba === 'exec' ? pessoas.filter(isExec) : aba === 'web' ? pessoas.filter(isWeb) : pessoas
  const { Tabs } = window.FazendaGuanabaraDesignSystem_b62f7e
  const abas = [
    { value: 'todas', label: 'Todas', count: pessoas.length },
    { value: 'exec', label: 'Executores', count: pessoas.filter(isExec).length },
    { value: 'web', label: 'Usuários web', count: pessoas.filter(isWeb).length },
  ]
  const q = busca.trim().toLowerCase()
  const lista = base.filter((p) => {
    if (q && !p.nome.toLowerCase().includes(q) && !p.cracha.includes(q)) return false
    if (f.fazenda && p.fazendas !== 'all' && !p.fazendas.includes(f.fazenda)) return false
    if (f.perfil && !(p.perfis ? p.perfis.some((v) => v[1] === f.perfil) : p.perfil === f.perfil)) return false
    if (f.tipo === 'Web' && !(p.web && !p.app.length)) return false
    if (f.tipo === 'Aplicativo' && !(!p.web && p.app.length)) return false
    if (f.tipo === 'Ambos' && !(p.web && p.app.length)) return false
    if (f.origem && p.origem !== f.origem) return false
    if (f.status && (f.status === 'Ativo') !== p.ativo) return false
    return true
  })
  const filtrado = q || Object.values(f).some(Boolean)
  const selPessoas = pessoas.filter((p) => sel.includes(p.id))
  const todasSel = lista.length > 0 && lista.every((p) => sel.includes(p.id))
  const algumaSel = lista.some((p) => sel.includes(p.id))
  const nAtivos = Object.values(f).filter(Boolean).length
  const limpar = () => { setBusca(''); setF({ fazenda: null, perfil: null, tipo: null, origem: null, status: null }) }

  return (
    <React.Fragment>
      <div className="ph">
        <div className="ph-text"><h3>Pessoas</h3></div>
        <div className="ph-actions">
          <PlanilhaButton items={[{ name: 'Importar', icon: 'upload', action: onImport }, { name: 'Baixar template', icon: 'download', action: () => flash('info', 'Download do template de pessoas iniciado.') }, { name: 'Exportar versão ERP', icon: 'download', action: () => flash('info', 'Exportação no formato do ERP iniciada.') }, { name: 'Exportar lista do sistema', icon: 'download', action: () => flash('info', 'Exportação da lista atual do sistema iniciada.') }]} />
          <button className="btn btn-ghost btn-small" style={{ textTransform: 'none' }} onClick={() => setFdr(true)}><span className="bi"><I n="filter" /></span>Filtrar{nAtivos > 0 && ' (' + nAtivos + ')'}</button>
          <button className="btn btn-primary" onClick={onAdd}>Adicionar pessoa</button>
        </div>
      </div>
      <div className="cfg-body">
        <Tabs tabs={abas} value={aba} onChange={setAba} />
        <div className="fbar">
          <div className="inp search" style={{ flex: '1 1 260px' }}>
            <input placeholder="Buscar por nome ou matrícula" value={busca} onChange={(e) => setBusca(e.target.value)} />
            {busca && <I n="close-circle-outline" style={{ color: 'var(--color-neutral-500)', fontSize: 16, paddingRight: 8, cursor: 'pointer' }} />}
            <I n="search" />
          </div>
          {nAtivos > 0 && <button className="btn btn-ghost btn-small" onClick={limpar}>Limpar filtros</button>}
          <span className="count">{lista.length} {lista.length === 1 ? 'pessoa' : 'pessoas'}</span>
        </div>
        <div className="tcard">
          <table className="pt">
            <thead><tr><th>Nome</th><th>Matrícula</th><th>Perfil</th><th>Acesso</th><th>Status</th><th aria-label="Ações"></th></tr></thead>
            <tbody>
              {lista.map((p) => (
                <tr key={p.id} className={(p.ativo ? '' : 'inactive')}>
                  <td className="nm">{p.nome}</td>
                  <td>{p.cracha}</td>
                  <td><VinculosCell p={p} /></td>
                  <td><AccessCell web={p.web} app={p.app} /></td>
                  <td><StatusChip ativo={p.ativo} /></td>
                  <td className="act">
                    <button className="icon-btn" title="Ações" onClick={() => setMenu(menu === p.id ? null : p.id)}><I n="ellipsis-vertical" /></button>
                    {menu === p.id && <ul className="dd act-menu" ref={menuRef}>
                      <li onClick={() => { setMenu(null); onEdit(p) }}><span style={{ display: 'flex', alignItems: 'center', gap: 6 }}><I n="pencil" />Editar</span></li>
                      {p.web && p.ativo && <li onClick={() => { setMenu(null); flash('success', 'Link de redefinição de senha enviado para ' + (p.email || 'o e-mail cadastrado') + '.') }}><span style={{ display: 'flex', alignItems: 'center', gap: 6 }}><I n="exit-outline" />Enviar redefinição de senha</span></li>}
                      <li className="div" onClick={() => { setMenu(null); p.ativo ? onDesativar(p) : onToggleStatus(p) }}><span style={{ display: 'flex', alignItems: 'center', gap: 6 }}><I n={p.ativo ? 'close-circle-outline' : 'checkmark-circle-outline'} />{p.ativo ? 'Desativar pessoa' : 'Reativar pessoa'}</span></li>
                    </ul>}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
          {lista.length === 0 && <div className="empty"><strong>Nenhuma pessoa encontrada</strong><span>Revise a busca ou os filtros aplicados.</span>{filtrado && <button className="btn btn-ghost" onClick={limpar}>Limpar filtros</button>}</div>}
        </div>
      </div>
      {fdr && <PessoasFiltro f={f} onClose={() => setFdr(false)} onApply={(nf) => { setF(nf); setFdr(false) }} />}
    </React.Fragment>
  )
}

function PlaceholderPage({ titulo }) {
  return (
    <React.Fragment>
      <div className="ph"><div className="ph-text"><h3>{titulo}</h3></div></div>
      <div className="cfg-body"><div className="tcard"><div className="empty"><strong>Tela ainda não desenhada</strong></div></div></div>
    </React.Fragment>
  )
}

Object.assign(window, { Hub, SettingsMenu, PerfisPage, PessoasPage, PlaceholderPage, PlanilhaButton })