// Padrão único de tela de cadastro em Configurações: cabeçalho + ação, busca + contagem, tabela com Status e lápis, drawer de inclusão/edição.
const CAD_ERP_NOTA = 'Dados sincronizados pela planilha do ERP. Altere na origem.'
const cadValor = (c, r) => c.fmt ? c.fmt(r) : Array.isArray(r[c.k]) ? r[c.k].join(', ') : (r[c.k] === '' || r[c.k] == null ? '—' : c.type === 'num' && c.append ? r[c.k] + ' ' + c.append : r[c.k])
const cadCap = (s) => s.charAt(0).toUpperCase() + s.slice(1)

function CadAviso({ children }) {
  return <div className="ro-note" style={{ fontSize: 'var(--font-size-normal)' }}><I n="warning-outline" style={{ color: 'var(--color-alert)' }} />{children}</div>
}

function CadDrawer({ def, erp, aviso, row, rows, onClose, onSave, fazendas }) {
  const novo = !row
  const [d, setD] = React.useState(() => row ? { ...row } : { ...Object.fromEntries(def.cols.map((c) => [c.k, c.type === 'multi' ? [] : ''])), ativo: true })
  const [tentou, setTentou] = React.useState(false)
  const set = (k) => (v) => setD((x) => ({ ...x, [k]: v }))
  const vazio = (v) => Array.isArray(v) ? !v.length : !String(v ?? '').trim()
  const chave = def.cols[0].k === 'codigo' ? 'codigo' : 'nome'
  const dup = !erp && !vazio(d[chave]) && rows.some((r) => r !== row && String(r[chave]).trim().toLowerCase() === String(d[chave]).trim().toLowerCase() && (!('fazenda' in d) || r.fazenda === d.fazenda))
  const erro = (c) => !tentou ? null : (c.req && !c.sync && vazio(d[c.k])) ? 'Campo obrigatório.' : (c.k === chave && dup) ? (def.dup || 'Já existe um cadastro com esse valor.') : null
  const salvar = () => { setTentou(true); if (def.cols.some((c) => c.req && !c.sync && vazio(d[c.k])) || dup) return; onSave(row, d) }
  const campo = (c) => {
    const e = erro(c)
    const opts = fazendas && (c.k === 'fazenda' || c.k === 'fazendas') ? c.opts.filter((o) => fazendas.includes(o)) : c.opts
    const append = c.appendFrom ? (d[c.appendFrom] || '').toLowerCase() : c.append
    const wrap = (ctrl) => <div key={c.k} className="lbl" style={c.full ? { gridColumn: '1 / -1' } : null}><label>{c.label}</label>{ctrl}{e && <span className="err-msg">{e}</span>}</div>
    if (erp && c.sync) return wrap(<div className="ro"><span>{cadValor(c, d)}</span><i className="lock" title="Somente leitura"></i></div>)
    if (c.type === 'select') return wrap(<SelectField value={d[c.k]} placeholder="Selecionar" options={opts} error={!!e} onChange={set(c.k)} />)
    if (c.type === 'multi') return wrap(<MultiSelectField value={d[c.k]} placeholder="Selecionar" options={opts} emptyMsg="Todas as opções já foram escolhidas" onChange={set(c.k)} />)
    return wrap(<div className="inp" style={e ? { borderColor: 'var(--color-danger-light)' } : null}><input placeholder={'Inserir ' + c.label.toLowerCase()} value={d[c.k]} inputMode={c.type === 'num' ? 'decimal' : undefined} onChange={(ev) => set(c.k)(c.type === 'num' ? ev.target.value.replace(/[^\d,]/g, '') : ev.target.value)} />{append && <span className="inp-append">{append}</span>}</div>)
  }
  return (
    <DrawerShell title={(novo ? 'Incluir ' : 'Editar ') + def.singular} onClose={onClose}
      foot={<React.Fragment><button className="btn btn-ghost" onClick={onClose}>Cancelar</button><button className="btn btn-primary" onClick={salvar}>{novo ? 'Incluir ' + def.singular : 'Salvar alterações'}</button></React.Fragment>}>
      <div className="fsec flat">
        <div className="fsec-head"><div><h4>Dados</h4></div></div>
        <div className="fsec-body">
          {aviso && <CadAviso>{aviso}</CadAviso>}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 16 }}>{def.cols.map(campo)}</div>
          {erp && <div className="ro-note"><I n="information-circle-outline" />{CAD_ERP_NOTA}</div>}
        </div>
      </div>
      {!novo && <div className="fsec flat">
        <div className="fsec-head"><div><h4>Status</h4><p>Itens inativos deixam de aparecer para seleção. O histórico é mantido.</p></div><Switch on={d.ativo} onChange={set('ativo')} label={d.ativo ? 'Ativo' : 'Inativo'} /></div>
      </div>}
    </DrawerShell>
  )
}

function CadastroLista({ item, def0, flash, user }) {
  const { Tabs } = window.FazendaGuanabaraDesignSystem_b62f7e
  const defs = def0.tabs || [{ ...def0, label: item }]
  const [tab, setTab] = React.useState(defs[0].label)
  const [data, setData] = React.useState(() => Object.fromEntries(defs.map((t) => [t.label, t.rows.map((r, i) => ({ ...r, id: i + 1 }))])))
  const [q, setQ] = React.useState('')
  const [drawer, setDrawer] = React.useState(null)
  const [imp, setImp] = React.useState(false)
  const def = defs.find((t) => t.label === tab)
  const rows = data[tab]
  const erp = !!def0.erp
  if (imp) return <ImportView tipo={def0.importTipo} titulo={item} onBack={() => setImp(false)} user={user} flash={flash} />
  const cols = def.cols.filter((c) => !c.hide)
  const esc = user && user.gestorFazendas
  const noEscopo = (r) => !esc || ('fazenda' in r ? esc.includes(r.fazenda) : 'fazendas' in r ? r.fazendas.some((f) => esc.includes(f)) : true)
  const ql = q.trim().toLowerCase()
  const lista = rows.filter(noEscopo).filter((r) => !ql || def.cols.some((c) => String(cadValor(c, r)).toLowerCase().includes(ql)))
  const salvar = (row, d) => {
    setData((s) => ({ ...s, [tab]: row ? s[tab].map((r) => r.id === row.id ? { ...d, id: row.id } : r) : [{ ...d, id: Date.now() }, ...s[tab]] }))
    setDrawer(null); flash('success', row ? 'Alterações salvas.' : '"' + (d.nome || d.codigo) + '" incluído em ' + item + '.')
  }
  return (
    <React.Fragment>
      <div className="ph"><div className="ph-text"><h3>{item}</h3></div>
        <div className="ph-actions">
          {erp
            ? <PlanilhaButton items={[{ name: 'Importar', icon: 'upload', action: () => setImp(true) }, { name: 'Baixar template', icon: 'download', action: () => flash('info', 'Download do template de ' + item.toLowerCase() + ' 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 })}>{'Incluir ' + def.singular}</button>}
        </div>
      </div>
      <div className="cfg-body">
        {def0.tabs && <Tabs tabs={defs.map((t) => ({ value: t.label, label: t.label, count: data[t.label].length }))} value={tab} onChange={(v) => { setTab(v); setQ('') }} />}
        <div className="fbar">
          <div className="inp search" style={{ flex: '0 1 420px' }}>
            <input placeholder="Buscar" value={q} onChange={(e) => setQ(e.target.value)} />
            {q && <I n="close-circle-outline" style={{ color: 'var(--color-neutral-500)', fontSize: 16, paddingRight: 8, cursor: 'pointer' }} onClick={() => setQ('')} />}
            <I n="search" />
          </div>
          <span className="count">{lista.length} {lista.length === 1 ? 'item' : 'itens'}</span>
        </div>
        <div className="tcard" style={{ overflowX: 'auto' }}>
          <table className="pt" style={{ minWidth: 640 }}>
            <thead><tr>{cols.map((c) => <th key={c.k} style={c.width ? { width: c.width } : null}>{c.label}</th>)}<th style={{ width: 120 }}>Status</th><th aria-label="Ações" style={{ width: 64 }}></th></tr></thead>
            <tbody>{lista.map((r) => (
              <tr key={r.id} className={r.ativo ? '' : 'inactive'}>
                {cols.map((c, i) => <td key={c.k} className={i === 0 ? 'nm' : ''} style={i === 0 ? { fontSize: 'var(--font-size-normal)' } : null}>{cadValor(c, r)}</td>)}
                <td><StatusChip ativo={r.ativo} /></td>
                <td style={{ textAlign: 'right' }}><button className="icon-btn" title={'Editar ' + (r.nome || r.codigo)} onClick={() => setDrawer(r)}><I n="pencil" /></button></td>
              </tr>
            ))}</tbody>
          </table>
          {lista.length === 0 && <div className="empty"><strong>Nenhum item encontrado</strong><span>Revise a busca.</span>{q && <button className="btn btn-ghost" onClick={() => setQ('')}>Limpar busca</button>}</div>}
        </div>
      </div>
      {drawer && <CadDrawer key={drawer.id || 'novo'} def={def} erp={erp} aviso={def0.aviso} fazendas={esc} row={drawer.novo ? null : drawer} rows={rows} onClose={() => setDrawer(null)} onSave={salvar} />}
    </React.Fragment>
  )
}

function ParametrosGeraisPage({ flash }) {
  const [peso, setPeso] = React.useState('450')
  const [tentou, setTentou] = React.useState(false)
  const err = tentou && !peso.trim()
  return (
    <React.Fragment>
      <div className="ph"><div className="ph-text"><h3>Parâmetros gerais</h3></div></div>
      <div className="cfg-body">
        <div className="fsec">
          <div className="fsec-head"><div><h4>Rebanho</h4></div></div>
          <div className="fsec-body"><hr />
            <div className="lbl" style={{ maxWidth: 320 }}><label>Peso médio da fazenda</label><div className="inp" style={err ? { borderColor: 'var(--color-danger-light)' } : null}><input inputMode="decimal" value={peso} onChange={(e) => setPeso(e.target.value.replace(/[^\d,]/g, ''))} /><span className="inp-append">kg</span></div>{err && <span className="err-msg">Campo obrigatório.</span>}</div>
          </div>
        </div>
        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 16 }}><button className="btn btn-primary" onClick={() => { setTentou(true); if (peso.trim()) flash('success', 'Parâmetros gerais salvos.') }}>Salvar alterações</button></div>
      </div>
    </React.Fragment>
  )
}

function CadastroPage({ item, flash, user }) {
  const def0 = window.CADASTROS[item]
  if (def0.form) return <ParametrosGeraisPage flash={flash} />
  return <CadastroLista item={item} def0={def0} flash={flash} user={user} />
}

Object.assign(window, { CadastroPage })