const IMPORT_TIPOS = {
  Pessoas: {
    rotulos: ['Novas pessoas', 'Alteradas', 'Serão desativadas', 'Com erro'], colCod: 'Matrícula', colNome: 'Nome',
    previa: [
      ['004601', 'Rogério Antunes Dias', 'Nova', 'Fazenda Mateira · Campo'],
      ['004602', 'Lucas Henrique Prado', 'Nova', 'Fazenda Guanabara · Campo'],
      ['004603', 'Valdir Souza Neto', 'Nova', 'Fazenda Paranapanema · Campo'],
      ['004604', 'Jéssica Moura Lacerda', 'Nova', 'Fazenda Mateira · Campo'],
      ['004605', 'Osvaldo Teixeira Reis', 'Nova', 'Fazenda Mateira · Campo'],
      ['004606', 'Raimundo Carvalho Filho', 'Nova', 'Fazenda Mateira · Campo'],
      ['004607', 'Daniela Rocha Pires', 'Nova', 'Fazenda Mateira · Campo'],
      ['004608', 'Wellington Barros Cruz', 'Nova', 'Fazenda Mateira · Campo'],
      ['004609', 'Geraldo Mendes Viana', 'Nova', 'Fazenda Mateira · Campo'],
      ['004610', 'Simone Araújo Freitas', 'Nova', 'Fazenda Mateira · Campo'],
      ['004611', 'Luiz Fernando Castro', 'Nova', 'Fazenda Guanabara · Campo'],
      ['001248', 'Fernanda Costa Ribeiro', 'Alterada', 'Cargo: Gerente de fazenda → Gerente regional'],
      ['004517', 'Antônio Pereira dos Santos', 'Alterada', 'Data de nascimento corrigida'],
      ['004530', 'Cláudio Ferreira Gomes', 'Alterada', 'Data de nascimento corrigida'],
      ['002031', 'Amanda Martins Souza', 'Alterada', 'E-mail atualizado'],
      ['004541', 'Edson Batista Nunes', 'Desativada', 'Desligamento em 30/09/2026'],
      ['—', 'Joana Ramos', 'Erro', 'Linha 18: matrícula em branco'],
      ['004522', 'Benedito R. Lima', 'Erro', 'Linha 23: matrícula duplicada na planilha'],
    ],
    historico: [['01/10/2026 08:14', 'pessoas_erp_setembro.xlsx', 'Ricardo Almeida Prado', [5, 12, 2, 0]], ['02/09/2026 09:40', 'pessoas_erp_agosto.xlsx', 'Ricardo Almeida Prado', [8, 6, 1, 1]], ['01/08/2026 07:55', 'pessoas_erp_julho.xlsx', 'Fernanda Costa Ribeiro', [2, 9, 3, 0]]],
  },
  'Maquinário': {
    rotulos: ['Novos maquinários', 'Alterados', 'Serão desativados', 'Com erro'], colCod: 'Código', colNome: 'Maquinário',
    previa: [
      ['MQ-0412', 'Trator John Deere 6125J', 'Nova', 'Fazenda Mateira'],
      ['MQ-0413', 'Pulverizador Jacto Uniport 3030', 'Nova', 'Fazenda Guanabara'],
      ['MQ-0388', 'Colhedora de forragem JF C120', 'Alterada', 'Horímetro inicial: 1.240 → 1.310'],
      ['MQ-0201', 'Caminhão Mercedes Atego 2426', 'Alterada', 'Centro de custo: Logística → Pecuária'],
      ['MQ-0107', 'Trator Massey Ferguson 4275', 'Desativada', 'Baixa patrimonial'],
      ['—', 'Grade aradora 16 discos', 'Erro', 'Linha 9: código em branco'],
    ],
    historico: [['15/09/2026 10:02', 'maquinario_erp_set.xlsx', 'Ricardo Almeida Prado', [3, 7, 0, 0]], ['14/07/2026 16:30', 'maquinario_erp_jul.xlsx', 'Ricardo Almeida Prado', [1, 4, 2, 0]]],
  },
  'Classificação': {
    rotulos: ['Novas classificações', 'Alteradas', 'Serão desativadas', 'Com erro'], colCod: 'Código', colNome: 'Classificação',
    previa: [
      ['CL-310', 'Manutenção de cercas', 'Nova', 'Grupo: Infraestrutura'],
      ['CL-122', 'Vacinação', 'Alterada', 'Grupo: Sanidade → Sanidade animal'],
      ['CL-098', 'Roçada manual', 'Desativada', 'Substituída por CL-311'],
    ],
    historico: [['20/09/2026 11:18', 'classificacao_erp.xlsx', 'Ricardo Almeida Prado', [4, 2, 1, 0]]],
  },
  'Centro de Custo': {
    rotulos: ['Novos centros de custo', 'Alterados', 'Serão desativados', 'Com erro'], colCod: 'Código', colNome: 'Centro de custo',
    previa: [
      ['CC-2104', 'Pecuária · Paranapanema', 'Nova', 'Fazenda Paranapanema'],
      ['CC-1102', 'Pecuária · Mateira', 'Alterada', 'Responsável: Fernanda Costa Ribeiro'],
      ['CC-1301', 'Logística · Guanabara', 'Alterada', 'Nome atualizado'],
      ['—', 'Reflorestamento', 'Erro', 'Linha 6: fazenda não encontrada'],
    ],
    historico: [['03/09/2026 08:47', 'centros_custo_erp.xlsx', 'Ricardo Almeida Prado', [1, 3, 0, 0]]],
  },
}
const ALT_ORDEM = ['Nova', 'Alterada', 'Desativada', 'Erro']
const ALT_PILL = { Nova: ['var(--color-success-light-100)', 'var(--color-success-dark)'], Alterada: ['var(--color-info-light-100)', 'var(--color-info-dark)'], Desativada: ['var(--color-alert-light-100)', 'var(--color-alert-dark)'], Erro: ['var(--color-danger-light-100)', 'var(--color-danger-dark)'] }
const BARRAS = ['var(--color-success)', 'var(--color-info)', 'var(--color-alert)', 'var(--color-danger)']

function UploadArea({ onFile }) {
  const [drag, setDrag] = React.useState(false)
  const [erro, setErro] = React.useState(null)
  const inputRef = React.useRef(null)
  const handle = (file) => {
    if (!file) return
    if (!/\.xlsx$/i.test(file.name)) return setErro(file.name)
    setErro(null); onFile({ name: file.name, size: Math.max(1, Math.round(file.size / 1024)) + ' KB' })
  }
  const dnd = {
    onDragOver: (e) => { e.preventDefault(); setDrag(true) },
    onDragLeave: () => setDrag(false),
    onDrop: (e) => { e.preventDefault(); setDrag(false); handle(e.dataTransfer.files[0]) },
  }
  const input = <input ref={inputRef} type="file" accept=".xlsx" style={{ display: 'none' }} onChange={(e) => { handle(e.target.files[0]); e.target.value = '' }} />
  if (drag) return <div className="up drag" {...dnd}><I n="upload" /><strong>Solte o arquivo para enviar</strong><small>Formato aceito: .xlsx</small></div>
  if (erro) return <div className="up err" {...dnd}>{input}<I n="alert-circle-outline" /><span className="err-msg">O arquivo precisa estar no formato .xlsx.</span><small>{erro}</small><button className="btn btn-outline btn-small" onClick={() => inputRef.current.click()}>Selecionar outro arquivo</button></div>
  return (
    <div className="up" {...dnd}>{input}
      <I n="upload" /><strong>Arraste a planilha do ERP aqui</strong>
      <button className="btn btn-outline btn-small" onClick={() => inputRef.current.click()}>Selecionar arquivo</button>
      <small>Formato aceito: .xlsx</small>
    </div>
  )
}

const IMP_APPS = ['Boletins', 'Maternidade', 'Manejo de Pastagem']
const IMP_PERFIS = ['Gestor', 'Analista', 'Executor']
const accVazio = () => ({ m: {}, admin: false, web: false, email: '', app: [] })
const semAcesso = (a) => !a || (!a.admin && !Object.keys(a.m).length && !a.web && !a.app.length)

function VincSelect({ v, onChange }) {
  const [pos, setPos] = React.useState(null)
  const ref = useOutside(!!pos, () => setPos(null))
  const pares = Object.entries(v.m)
  const acc = { admin: v.admin, vinc: pares.map(([f, pf]) => [[f], pf]) }
  const set = (patch) => {
    const n = { ...v }
    if ('admin' in patch) n.admin = patch.admin
    if (patch.vinc) { const m = {}; patch.vinc.forEach(([fs, pf]) => fs.forEach((f) => { if (pf) m[f] = pf })); n.m = m }
    onChange(n)
  }
  const abrir = (e) => { const r = e.currentTarget.getBoundingClientRect(); setPos({ top: Math.max(16, Math.min(r.bottom + 4, window.innerHeight - 440)), left: Math.max(16, Math.min(r.left, window.innerWidth - 696)) }) }
  return (
    <div ref={ref}>
      <button type="button" className="sel" style={{ minHeight: 40, height: 'auto', padding: '6px 12px', width: 240, textAlign: 'left', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }} onClick={(e) => pos ? setPos(null) : abrir(e)}>
        <span style={{ display: 'flex', flexDirection: 'column', gap: 2, fontSize: 'var(--font-size-normal)' }}>
          {v.admin ? <span><strong>Administrador</strong> · Todas as fazendas</span>
            : pares.length ? pares.map(([f, pf]) => <span key={f} style={{ whiteSpace: 'nowrap' }}><strong>{pf}</strong> · {f}</span>)
            : <span style={{ color: 'var(--color-grayish-light)' }}>Definir</span>}
        </span><I n={pos ? 'chevron-up' : 'chevron-down'} />
      </button>
      {pos && <div role="dialog" aria-label="Fazendas e perfis" style={{ position: 'fixed', top: pos.top, left: pos.left, width: 680, maxHeight: 420, overflow: 'auto', zIndex: 200, background: 'var(--color-neutral-light-100)', borderRadius: 'var(--border-radius-default)', boxShadow: 'var(--shadow-card-default)', border: 'var(--border-neutral-light)' }}>
        <FarmsSection flat acc={acc} set={set} />
        <div style={{ display: 'flex', justifyContent: 'flex-end', padding: '0 16px 16px' }}><button className="btn btn-primary btn-small" onClick={() => setPos(null)}>Concluir</button></div>
      </div>}
    </div>
  )
}

function ImportTab({ tipo, user, flash }) {
  const isP = tipo === 'Pessoas'
  const [accs, setAccs] = React.useState({})
  const [sel, setSel] = React.useState([])
  const [lote, setLote] = React.useState({ fazenda: '', perfil: '', app: [] })
  const [confirma, setConfirma] = React.useState(false)
  const getA = (k) => accs[k] || accVazio()
  const setA = (k, patch) => setAccs((s) => ({ ...s, [k]: { ...(s[k] || accVazio()), ...patch } }))
  const aplicarLote = () => {
    setAccs((s) => {
      const n = { ...s }
      sel.forEach((k) => {
        const a = { ...(n[k] || accVazio()) }
        if (lote.fazenda && lote.perfil) a.m = { ...a.m, [lote.fazenda]: lote.perfil }
        if (lote.app.length) a.app = IMP_APPS.filter((x) => a.app.includes(x) || lote.app.includes(x))
        n[k] = a
      })
      return n
    })
    flash('success', 'Acessos aplicados a ' + sel.length + (sel.length === 1 ? ' pessoa.' : ' pessoas.'))
    setSel([]); setLote({ fazenda: '', perfil: '', app: [] })
  }
  const cfg = IMPORT_TIPOS[tipo]
  const [arquivo, setArquivo] = React.useState(null)
  const [historico, setHistorico] = React.useState(cfg.historico)
  const [filtro, setFiltro] = React.useState(null)
  const contagem = ALT_ORDEM.map((a) => cfg.previa.filter((r) => r[2] === a).length)
  const linhas = cfg.previa.filter((r) => !filtro || r[2] === filtro).sort((a, b) => (a[2] === 'Erro' ? -1 : 0) - (b[2] === 'Erro' ? -1 : 0))
  const novas = cfg.previa.filter((r) => r[2] === 'Nova')
  const nSem = isP ? novas.filter((r) => semAcesso(accs[r[0]])).length : 0
  const aplicar = () => { if (nSem > 0) setConfirma(true); else efetivar() }
  const efetivar = () => {
    setConfirma(false); setAccs({}); setSel([])
    const agora = new Date()
    const p = (n) => String(n).padStart(2, '0')
    const data = `${p(agora.getDate())}/${p(agora.getMonth() + 1)}/${agora.getFullYear()} ${p(agora.getHours())}:${p(agora.getMinutes())}`
    setHistorico([[data, arquivo.name, user.nome, contagem], ...historico])
    setArquivo(null); setFiltro(null)
    flash('success', `Planilha de ${tipo.toLowerCase()} aplicada. ${contagem[0]} novos, ${contagem[1]} alterados, ${contagem[2]} desativados.${contagem[3] ? ` ${contagem[3]} linhas com erro ignoradas.` : ''}`)
  }
  return (
    <div className="form-wrap" style={{ maxWidth: isP ? 1320 : 1080 }}>
      <div className="fsec">
        <div className="fsec-head"><div><h4>Enviar planilha</h4><p>Exporte a planilha de {tipo.toLowerCase()} no ERP e envie aqui. Nada muda até você aplicar as alterações.</p></div></div>
        <div className="fsec-body"><hr />
          {!arquivo ? <UploadArea onFile={setArquivo} /> : (
            <div className="file" style={{ minHeight: 0 }}>
              <span className="file-ic"><I n="file-tray-full-outline" /></span>
              <div className="file-txt"><strong>{arquivo.name}</strong><small>{arquivo.size} · {cfg.previa.length} linhas lidas</small></div>
              <button className="icon-btn" title="Remover arquivo" onClick={() => { setArquivo(null); setFiltro(null) }}><I n="close" /></button>
            </div>
          )}
        </div>
      </div>

      {arquivo && <div className="fsec">
        <div className="fsec-head"><div><h4>Prévia das alterações</h4><p>Clique em um total para filtrar as linhas.</p></div></div>
        <div className="fsec-body"><hr />
          <div className="sum-grid">
            {cfg.rotulos.map((r, i) => (
              <div key={r} className={'sum' + (contagem[i] === 0 ? ' zero' : '')} style={{ '--bar': BARRAS[i], cursor: 'pointer', outline: filtro === ALT_ORDEM[i] ? '2px solid var(--color-primary-200)' : 'none', outlineOffset: 2 }}
                onClick={() => setFiltro(filtro === ALT_ORDEM[i] ? null : ALT_ORDEM[i])}><b>{contagem[i]}</b><span>{r}</span></div>
            ))}
          </div>
          {isP && sel.length > 0 && <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'flex-end', gap: 12, padding: 16, background: 'var(--color-primary-30)', borderRadius: 'var(--border-radius-default)' }}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 4, minWidth: 140, alignSelf: 'center' }}><strong style={{ color: 'var(--color-grayish-dark)' }}>Aplicar aos selecionados</strong><span style={{ fontSize: 'var(--font-size-xsm)', color: 'var(--color-grayish)' }}>{sel.length} {sel.length === 1 ? 'pessoa selecionada' : 'pessoas selecionadas'}</span></div>
            <div className="lbl" style={{ flex: '1 1 180px' }}><label>Fazenda</label><SelectField value={lote.fazenda} placeholder="Selecione a fazenda" options={window.CFG.FAZENDAS} onChange={(v) => setLote({ ...lote, fazenda: v })} /></div>
            <div className="lbl" style={{ flex: '1 1 160px' }}><label>Perfil</label><SelectField value={lote.perfil} placeholder="Selecione o perfil" options={IMP_PERFIS} desc={window.CFG.PERFIL_DESC} onChange={(v) => setLote({ ...lote, perfil: v })} /></div>
            <div className="lbl" style={{ flex: '2 1 240px' }}><label>Aplicativos</label><MultiSelectField value={lote.app} placeholder="Selecione os aplicativos" options={IMP_APPS} emptyMsg="Todos os aplicativos já foram escolhidos" onChange={(v) => setLote({ ...lote, app: v })} /></div>
            <div style={{ display: 'flex', gap: 8 }}><button className="btn btn-ghost" onClick={() => setSel([])}>Limpar seleção</button><button className="btn btn-primary" disabled={!((lote.fazenda && lote.perfil) || lote.app.length)} onClick={aplicarLote}>Aplicar</button></div>
          </div>}
          <div className="tcard" style={{ boxShadow: 'none', border: 'var(--border-neutral-light)', overflowX: 'auto' }}>
            <table className="pt" style={{ minWidth: isP ? 1180 : 640 }}>
              <thead><tr>{isP && <th className="ck">{(() => { const vis = linhas.filter((r) => r[2] === 'Nova').map((r) => r[0]); const all = vis.length > 0 && vis.every((k) => sel.includes(k)); return vis.length > 0 && <button type="button" className="ckb" aria-label="Selecionar todas as novas" onClick={() => setSel(all ? sel.filter((k) => !vis.includes(k)) : [...new Set([...sel, ...vis])])}><I n={all ? 'checkbox-checked' : 'checkbox-unchecked'} /></button> })()}</th>}<th>{cfg.colCod}</th><th>{cfg.colNome}</th><th>Alteração</th>{isP && <React.Fragment><th>Fazendas e perfis</th><th>Acesso web</th><th>Aplicativos</th></React.Fragment>}<th>Detalhe</th></tr></thead>
              <tbody>{linhas.map((r, i) => {
                const nova = isP && r[2] === 'Nova'
                const a = getA(r[0])
                const on = sel.includes(r[0])
                return (
                <tr key={i} className={on ? 'selected' : ''} style={{ verticalAlign: 'top' }}>
                  {isP && <td className="ck">{nova && <button type="button" className="ckb" aria-label={'Selecionar ' + r[1]} onClick={() => setSel(on ? sel.filter((k) => k !== r[0]) : [...sel, r[0]])}><I n={on ? 'checkbox-checked' : 'checkbox-unchecked'} /></button>}</td>}
                  <td>{r[0]}</td><td className="nm" style={{ fontSize: 'var(--font-size-normal)' }}>{r[1]}</td>
                  <td><span className="pill" style={{ background: ALT_PILL[r[2]][0], color: ALT_PILL[r[2]][1] }}>{r[2]}</span></td>
                  {isP && (nova ? <React.Fragment>
                    <td><VincSelect v={a} onChange={(n) => setA(r[0], n)} /></td>
                    <td><div style={{ display: 'flex', flexDirection: 'column', gap: 8, width: 220 }}><Switch on={a.web} onChange={(v) => setA(r[0], { web: v })} label={a.web ? 'Sim' : 'Não'} />{a.web && <div className="inp" style={!a.email.trim() ? { borderColor: 'var(--color-danger-light)' } : null}><input placeholder="nome@grupoguanabara.com.br" value={a.email} onChange={(e) => setA(r[0], { email: e.target.value })} /></div>}</div></td>
                    <td><div style={{ width: 240 }}><MultiSelectField value={a.app} placeholder="Selecionar" options={IMP_APPS} emptyMsg="Todos os aplicativos já foram escolhidos" onChange={(v) => setA(r[0], { app: v })} /></div></td>
                  </React.Fragment> : <React.Fragment><td style={{ color: 'var(--color-grayish-light)' }}>—</td><td style={{ color: 'var(--color-grayish-light)' }}>—</td><td style={{ color: 'var(--color-grayish-light)' }}>—</td></React.Fragment>)}
                  <td style={r[2] === 'Erro' ? { color: 'var(--color-danger-dark)' } : null}><div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}><span>{r[3]}</span>{nova && semAcesso(accs[r[0]]) && <span style={{ display: 'flex', alignItems: 'center', gap: 4, color: 'var(--color-alert-dark)', fontSize: 'var(--font-size-xsm)', fontWeight: 'var(--font-weight-semibold)', whiteSpace: 'nowrap' }}><I n="warning-outline" />Sem acesso definido</span>}</div></td></tr>
              )})}</tbody>
            </table>
          </div>
          {contagem[3] > 0 && <div className="ro-note" style={{ fontSize: 'var(--font-size-normal)' }}><I n="warning-outline" style={{ color: 'var(--color-danger)' }} />{contagem[3] === 1 ? 'A linha com erro não será importada.' : `As ${contagem[3]} linhas com erro não serão importadas.`} Corrija na planilha e envie de novo, se precisar.</div>}
          <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 16, paddingTop: 8 }}>
            <button className="btn btn-ghost" onClick={() => { setArquivo(null); setFiltro(null); setAccs({}); setSel([]) }}>Cancelar</button>
            <button className="btn btn-primary" onClick={aplicar}>Aplicar alterações</button>
          </div>
        </div>
      </div>}
      {confirma && <React.Fragment>
        <div className="backdrop" style={{ zIndex: 165 }} onClick={() => setConfirma(false)}></div>
        <div className="modal" role="dialog" aria-label="Confirmar importação">
          <h2>Aplicar alterações?</h2>
          <p>{contagem[0]} novas, {contagem[1]} alteradas e {contagem[2]} desativadas.{contagem[3] ? ' ' + contagem[3] + (contagem[3] === 1 ? ' linha com erro será ignorada.' : ' linhas com erro serão ignoradas.') : ''}</p>
          <div className="ro-note" style={{ fontSize: 'var(--font-size-normal)' }}><I n="warning-outline" style={{ color: 'var(--color-alert)' }} />{nSem} {nSem === 1 ? 'pessoa nova sem acesso. Ela será criada, mas não consegue entrar no sistema até receber um acesso.' : 'pessoas novas sem acesso. Elas serão criadas, mas não conseguem entrar no sistema até receberem um acesso.'}</div>
          <div className="modal-actions"><button className="btn btn-ghost" onClick={() => setConfirma(false)}>Voltar</button><button className="btn btn-primary" onClick={efetivar}>Aplicar alterações</button></div>
        </div>
      </React.Fragment>}

      <div className="fsec">
        <div className="fsec-head"><div><h4>Histórico</h4><p>Planilhas de {tipo.toLowerCase()} já aplicadas.</p></div></div>
        <div className="fsec-body" style={{ padding: 0 }}>
          <table className="pt" style={{ minWidth: 720 }}>
            <thead><tr><th>Data</th><th>Arquivo</th><th>Importado por</th><th>Resultado</th><th aria-label="Baixar"></th></tr></thead>
            <tbody>{historico.map((h, i) => (
              <tr key={i}><td style={{ whiteSpace: 'nowrap' }}>{h[0]}</td><td className="nm" style={{ fontSize: 'var(--font-size-normal)' }}>{h[1]}</td><td>{h[2]}</td>
                <td><div className="row-inline">{ALT_ORDEM.map((a, j) => h[3][j] > 0 && <span key={a} className="pill" style={{ background: ALT_PILL[a][0], color: ALT_PILL[a][1] }}>{h[3][j]} {a === 'Erro' ? (h[3][j] > 1 ? 'erros' : 'erro') : a.toLowerCase() + (h[3][j] > 1 ? 's' : '')}</span>)}</div></td>
                <td className="act"><button className="icon-btn" title="Baixar planilha" onClick={() => flash('info', `Download de ${h[1]} iniciado.`)}><I n="download" /></button></td></tr>
            ))}</tbody>
          </table>
        </div>
      </div>
    </div>
  )
}

const MAQ_TIPOS = {
  'Veículo de Apoio': ['Toyota Hilux', 'Mitsubishi L200'],
  'Transporte de Administração': ['Fiat Toro', 'Honda HRV', 'Volvo XC 60', 'Toyota Corola Cross'],
  'Motocicleta': ['Honda Bross 150'],
  'Trator': ['John Deere 6125J', 'Valtra A950'],
}
const MODELO_TIPO = Object.fromEntries(Object.entries(MAQ_TIPOS).flatMap(([t, ms]) => ms.map((m) => [m, t])))
const MODELOS = Object.keys(MODELO_TIPO).sort()
const FAZ_CURTA = { 'Fazenda Guanabara': 'Guanabara', 'Fazenda Mateira': 'Mateira', 'Fazenda Paranapanema': 'Paranapanema' }
const MAQUINAS0 = [
  { id: 1, nome: 'Subaru Forester XT 2017 - FG029', tipo: 'Veículo de Apoio', modelo: 'Toyota Hilux', codigo: '3464', frota: 'FG029', km: 0, fazenda: 'Fazenda Guanabara', ativo: true },
  { id: 2, nome: 'Fiat Toro - FG056', tipo: 'Transporte de Administração', modelo: 'Fiat Toro', codigo: '4535', frota: 'FG056', km: 164018, fazenda: 'Fazenda Guanabara', ativo: true },
  { id: 3, nome: 'Honda HRV - FG063', tipo: 'Transporte de Administração', modelo: 'Honda HRV', codigo: '5003', frota: 'FG063', km: 0, fazenda: 'Fazenda Guanabara', ativo: true },
  { id: 4, nome: 'Volvo XC60 - FG064', tipo: 'Transporte de Administração', modelo: 'Volvo XC 60', codigo: '5061', frota: 'FG064', km: 0, fazenda: 'Fazenda Guanabara', ativo: true },
  { id: 5, nome: 'Corolla Cross - FG084', tipo: 'Transporte de Administração', modelo: 'Toyota Corola Cross', codigo: '5724', frota: 'FG084', km: 1462, fazenda: 'Fazenda Guanabara', ativo: true },
  { id: 6, nome: 'Moto HD Bross 150 - FG006', tipo: 'Motocicleta', modelo: 'Honda Bross 150', codigo: '30003', frota: 'FG006', km: 92080, fazenda: 'Fazenda Guanabara', ativo: true },
  { id: 7, nome: 'Moto HD Bross 150 - FG007', tipo: 'Motocicleta', modelo: 'Honda Bross 150', codigo: '30004', frota: 'FG007', km: 32773, fazenda: 'Fazenda Guanabara', ativo: true },
  { id: 8, nome: 'Toyota Hilux Simples - FG017', tipo: 'Veículo de Apoio', modelo: 'Toyota Hilux', codigo: '2358', frota: 'FG017', km: 342447, fazenda: 'Fazenda Guanabara', ativo: true },
  { id: 9, nome: 'Trator JD 6125J - FM012', tipo: 'Trator', modelo: 'John Deere 6125J', codigo: '6120', frota: 'FM012', km: 8410, fazenda: 'Fazenda Mateira', ativo: true },
  { id: 10, nome: 'L200 Triton - FP021', tipo: 'Veículo de Apoio', modelo: 'Mitsubishi L200', codigo: '4102', frota: 'FP021', km: 211930, fazenda: 'Fazenda Paranapanema', ativo: false },
]
const MAQ_HIST = ['01/10/2026 08:14', '15/09/2026 10:02', '14/07/2026 16:30', '02/06/2026 09:11', '05/05/2026 14:48', '01/04/2026 07:59', '03/03/2026 11:20']
const fmtKm = (n) => new Intl.NumberFormat('de-DE').format(n)

function ImportView({ tipo, titulo, onBack, user, flash }) {
  return (
    <React.Fragment>
      <div className="ph"><div className="ph-text"><div className="row-inline" style={{ gap: 12 }}>
        <button className="icon-btn" style={{ width: 36, height: 36 }} title="Voltar" onClick={onBack}><I n="chevron-back" /></button>
        <nav className="bc" style={{ margin: 0, fontSize: 'var(--font-size-4xl)', fontWeight: 700 }}><a onClick={onBack}>{titulo}</a><span>/</span><span style={{ color: 'var(--color-grayish-dark)' }}>Importar planilha do ERP</span></nav>
      </div></div></div>
      <div className="cfg-body"><ImportTab tipo={tipo} user={user} flash={flash} /></div>
    </React.Fragment>
  )
}

function MaqDrawer({ maq, onClose, onSave, fazendas, frotas }) {
  const novo = !maq
  const FAZENDAS = fazendas || window.CFG.FAZENDAS
  const [d, setD] = React.useState(() => maq ? { ...maq, km: String(maq.km) } : { nome: '', tipo: '', modelo: '', codigo: '', frota: '', km: '', fazenda: '', ativo: true })
  const [tentou, setTentou] = React.useState(false)
  const set = (k) => (v) => setD((x) => ({ ...x, [k]: v, ...(k === 'modelo' ? { tipo: MODELO_TIPO[v] } : {}) }))
  const obrig = ['nome', 'modelo', 'codigo', 'frota', 'fazenda']
  const frotaDup = !!String(d.frota).trim() && (frotas || []).some((f) => f.toLowerCase() === String(d.frota).trim().toLowerCase())
  const falta = (k) => tentou && !String(d[k]).trim()
  const erroCampo = (k) => falta(k) ? 'Campo obrigatório.' : k === 'frota' && tentou && frotaDup ? 'Já existe um maquinário com esse número de frota.' : null
  const salvar = () => { setTentou(true); if (obrig.some((k) => !String(d[k]).trim()) || frotaDup) return; onSave(maq, { ...d, km: Number(String(d.km).replace(/\D/g, '')) || 0 }) }
  const txt = (label, k, ph, extra) => <div className="lbl"><label>{label}</label><div className="inp" style={erroCampo(k) ? { borderColor: 'var(--color-danger-light)' } : null}><input placeholder={ph} value={d[k]} onChange={(e) => set(k)(e.target.value)} {...extra} />{k === 'km' && <span className="inp-append">km</span>}</div>{erroCampo(k) && <span className="err-msg">{erroCampo(k)}</span>}</div>
  const sel = (label, k, opts, ph) => <div className="lbl"><label>{label}</label><SelectField value={d[k]} placeholder={ph} options={opts} error={falta(k)} onChange={set(k)} />{falta(k) && <span className="err-msg">Campo obrigatório.</span>}</div>
  return (
    <DrawerShell title={novo ? 'Criar maquinário' : 'Editar maquinário'} onClose={onClose}
      foot={<React.Fragment><button className="btn btn-ghost" onClick={onClose}>Cancelar</button><button className="btn btn-primary" onClick={salvar}>{novo ? 'Criar maquinário' : 'Salvar alterações'}</button></React.Fragment>}>
      <div className="fsec flat">
        <div className="fsec-head"><div><h4>Identificação</h4></div></div>
        <div className="fsec-body">
          {txt('Nome', 'nome', 'Inserir nome')}
          <div className="pd-row3">{txt('Código', 'codigo', 'Inserir código')}{txt('Nº da Frota', 'frota', 'Inserir número')}{sel('Fazenda', 'fazenda', FAZENDAS, 'Selecione a fazenda')}</div>
        </div>
      </div>
      <div className="fsec flat">
        <div className="fsec-head"><div><h4>Modelo</h4></div></div>
        <div className="fsec-body">
          <div className="pd-row3">{sel('Modelo', 'modelo', MODELOS, 'Selecione o modelo')}<div className="lbl"><label>Tipo de Maquinário</label><div className="ro"><span>{d.modelo ? MODELO_TIPO[d.modelo] : 'Definido pelo modelo'}</span></div></div>{txt('Km atual', 'km', '0', { inputMode: 'numeric' })}</div>
        </div>
      </div>
      {!novo && <div className="fsec flat">
        <div className="fsec-head"><div><h4>Status</h4><p>Maquinário inativo não aparece para seleção nos boletins nem nas manutenções. O histórico é mantido.</p></div><Switch on={d.ativo} onChange={set('ativo')} label={d.ativo ? 'Ativo' : 'Inativo'} /></div>
      </div>}
    </DrawerShell>
  )
}

function MaqHistoricoModal({ onClose, flash }) {
  const [n, setN] = React.useState(5)
  return (
    <React.Fragment>
      <div className="backdrop" onClick={onClose}></div>
      <div className="modal" role="dialog" aria-label="Histórico de importações">
        <div style={{ display: 'flex', justifyContent: 'space-between', gap: 16 }}><h2>Histórico de importações de parâmetros de maquinários</h2><button className="icon-btn" onClick={onClose}><I n="close" /></button></div>
        <p>Histórico das planilhas xlsx de parâmetros de maquinários importados do seu sistema ERP</p>
        <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
          {MAQ_HIST.slice(0, n).map((h) => <li key={h}><button className="btn btn-outline" onClick={() => flash('info', 'Download da planilha de ' + h + ' iniciado.')}><span className="bi"><I n="download" /></span>{'Importação ' + h}</button></li>)}
        </ul>
        <div className="modal-actions"><button className="btn btn-ghost" disabled={n >= MAQ_HIST.length} onClick={() => setN(n + 5)}>Mostrar mais</button></div>
      </div>
    </React.Fragment>
  )
}

function MaquinarioPage({ user, flash }) {
  const [imp, setImp] = React.useState(false)
  const [q, setQ] = React.useState('')
  const [rows, setRows] = React.useState(MAQUINAS0)
  const [drawer, setDrawer] = React.useState(null)
  const [hist, setHist] = React.useState(false)
  if (imp) return <ImportView tipo="Maquinário" titulo="Maquinário" onBack={() => setImp(false)} user={user} flash={flash} />
  const ql = q.toLowerCase()
  const esc = user && user.gestorFazendas
  const lista = rows.filter((m) => !esc || esc.includes(m.fazenda)).filter((m) => !q || [m.nome, m.tipo, m.modelo, m.codigo, m.frota, m.fazenda].some((v) => v.toLowerCase().includes(ql)))
  const salvar = (maq, d) => {
    if (maq) setRows(rows.map((r) => r.id === maq.id ? { ...r, ...d } : r))
    else setRows([{ ...d, id: Date.now() }, ...rows])
    setDrawer(null); flash('success', maq ? 'Maquinário atualizado.' : 'Maquinário criado.')
  }
  return (
    <React.Fragment>
      <div className="ph"><div className="ph-text"><h3>Maquinário</h3></div>
        <div className="ph-actions">
          <button className="btn btn-ghost btn-small" onClick={() => setHist(true)}>Ver histórico</button>
          <PlanilhaButton items={[{ name: 'Importar', icon: 'upload', action: () => setImp(true) }, { name: 'Baixar template', icon: 'download', action: () => flash('info', 'Download do template de maquinário 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-primary" onClick={() => setDrawer({ novo: true })}>Criar maquinário</button>
        </div>
      </div>
      <div className="cfg-body">
        <div className="lbl" style={{ width: 280 }}><label>Pesquisar</label><div className="inp"><input placeholder="Buscar" value={q} onChange={(e) => setQ(e.target.value)} /><span style={{ display: 'flex', alignItems: 'center', paddingRight: 14, color: 'var(--color-grayish)' }}><I n="search" /></span></div></div>
        <div className="tcard"><table className="pt" style={{ minWidth: 1040 }}>
          <thead><tr><th>Nome</th><th>Tipo de Maquinário</th><th>Modelo</th><th>Código</th><th>Nº da Frota</th><th>Km atual</th><th>Fazenda</th><th>Status</th><th></th></tr></thead>
          <tbody>{lista.length ? lista.map((m) => <tr key={m.id} className={m.ativo ? '' : 'inactive'}>
            <td className="nm">{m.nome}</td><td>{m.tipo}</td><td>{m.modelo}</td><td>{m.codigo}</td><td>{m.frota}</td><td>{fmtKm(m.km)}</td><td>{FAZ_CURTA[m.fazenda] || m.fazenda}</td><td><StatusChip ativo={m.ativo} /></td>
            <td style={{ textAlign: 'right' }}><button className="icon-btn" title={'Editar ' + m.nome} onClick={() => setDrawer(m)}><I n="pencil" /></button></td>
          </tr>) : <tr><td colSpan="9" style={{ textAlign: 'center', padding: 32, color: 'var(--color-grayish)' }}>Nenhum maquinário encontrado.</td></tr>}</tbody>
        </table></div>
      </div>
      {drawer && <MaqDrawer fazendas={esc} frotas={rows.filter((r) => drawer.novo || r.id !== drawer.id).map((r) => r.frota)} key={drawer.id || 'novo'} maq={drawer.novo ? null : drawer} onClose={() => setDrawer(null)} onSave={salvar} />}
      {hist && <MaqHistoricoModal onClose={() => setHist(false)} flash={flash} />}
    </React.Fragment>
  )
}

Object.assign(window, { ImportView, MaquinarioPage, UploadArea })