// Telas existentes do sistema, só realocadas dentro de Configurações.
// Fonte: frontend/src/app/core/pages/{farm, parameters/tabs/cost-center, measuring-station}

function PH({ title, children, extra }) {
  return <div className="ph"><div className="ph-text"><div className="row-inline" style={{ gap: 12 }}>{typeof title === 'string' ? <h3>{title}</h3> : title}{extra}</div></div>{children && <div className="ph-actions">{children}</div>}</div>
}
function LCard({ title, children, style }) { return <div className="lcard" style={style}><div className="lcard-title">{title}</div>{children}</div> }
function DNote({ children }) { return <div className="dnote"><span className="dnote-tag">Nota de design</span><span>{children}</span></div> }
function Field({ label, value, ph, append, readOnly }) {
  return <div className="lbl"><label>{label}</label><div className="inp" style={readOnly ? { background: 'var(--color-neutral-light-500)', borderColor: 'var(--color-neutral-100)' } : null}><input defaultValue={value} placeholder={ph} readOnly={readOnly} style={readOnly ? { color: 'var(--color-grayish)' } : null} />{append && <span className="inp-append">{append}</span>}</div></div>
}
function SelField({ label, value, options, ph }) {
  const [v, setV] = React.useState(value || '')
  return <div className="lbl">{label && <label>{label}</label>}<SelectField value={v} placeholder={ph || 'Selecionar'} options={options} onChange={setV} /></div>
}
function ActiveChip({ on, f }) { return <span className={'chip ' + (on ? 'chip-active' : 'chip-inactive')}>{on ? (f ? 'Ativa' : 'Ativo') : (f ? 'Inativa' : 'Inativo')}</span> }
function EmptyChart({ title, subtitle, description }) {
  return <div className="empty"><img src="../../assets/images/no-data-found.png" alt="" style={{ width: 200 }} /><strong>{title}</strong><span>{subtitle}</span><span>{description}</span></div>
}
function FormActions({ flash, label = 'Salvar Alterações' }) {
  return <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 16 }}><button className="btn btn-outline">Descartar</button><button className="btn btn-primary" onClick={() => flash('success', 'Alterações salvas.')}>{label}</button></div>
}

// ---------- Fazendas ----------
const FARMS = [
  { id: 1, name: 'Fazenda Guanabara', city: 'Cassilândia', state: 'MS', animais: 12480, area: 9850, mods: 24, piq: 112, status: true, cnpj: '12.345.678/0001-90', ie: '28.411.927-3', prod: 8120, cep: '79540-000', end: 'Rodovia MS-306, km 42', num: 's/n', bairro: 'Zona Rural', sigla: 'GB', seq: '4.812' },
  { id: 2, name: 'Fazenda Mateira', city: 'Paranaíba', state: 'MS', animais: 8215, area: 6420, mods: 18, piq: 76, status: true, cnpj: '12.345.678/0002-71', ie: '28.411.928-1', prod: 5300, cep: '79500-000', end: 'Estrada da Mateira', num: '1200', bairro: 'Zona Rural', sigla: 'MT', seq: '2.977' },
  { id: 3, name: 'Fazenda Paranapanema', city: 'Ourinhos', state: 'SP', animais: 5930, area: 4100, mods: 0, piq: 0, status: true, cnpj: '12.345.678/0003-52', ie: '484.221.390.115', prod: 3650, cep: '19900-000', end: 'Rodovia SP-278, km 9', num: 's/n', bairro: 'Zona Rural', sigla: 'PP', seq: '1.204' },
]
const fmt = (n) => new Intl.NumberFormat('de-DE').format(n)
const SETORES = [
  { name: 'Cria', acts: ['Cria', 'Recria'], status: true },
  { name: 'Engorda', acts: ['Engorda'], status: true },
  { name: 'Seleção', acts: ['Seleção genética'], status: false },
]

function FazendasPage({ flash }) {
  const [sel, setSel] = React.useState(null)
  const [tab, setTab] = React.useState('Dados')
  const { Tabs } = window.FazendaGuanabaraDesignSystem_b62f7e
  if (sel) {
    const f = sel
    return (
      <React.Fragment>
        <PH title={<div className="row-inline" style={{ gap: 12 }}><button className="icon-btn" style={{ width: 36, height: 36 }} title="Voltar" onClick={() => setSel(null)}><I n="chevron-back" /></button><nav className="bc" style={{ margin: 0, fontSize: 'var(--font-size-4xl)', fontWeight: 700 }}><a onClick={() => setSel(null)}>Fazendas</a><span>/</span><span style={{ color: 'var(--color-grayish-dark)' }}>{f.name}</span></nav><ActiveChip on={f.status} f /></div>} />
        <div className="cfg-body">
          <Tabs tabs={['Dados', 'Administrativo', 'Mapa', 'Setores']} value={tab} onChange={setTab} />
          {tab === 'Dados' && <React.Fragment>
            <LCard title="Informações da Fazenda">
              <div className="frow3"><div style={{ gridColumn: 'span 2' }}><Field label="Nome da Fazenda" value={f.name} /></div><Field label="CEP" value={f.cep} /></div>
              <div className="frow3"><Field label="Endereço" value={f.end} /><Field label="Número" value={f.num} /><Field label="Bairro" value={f.bairro} readOnly /></div>
              <div className="frow3"><Field label="Complemento (opcional)" ph="Inserir complemento" /><Field label="Cidade" value={f.city} readOnly /><Field label="Estado" value={f.state} readOnly /></div>
            </LCard>
            <FormActions flash={flash} />
          </React.Fragment>}
          {tab === 'Administrativo' && <React.Fragment>
            <LCard title="Informações administrativas">
              <div className="frow5"><Field label="CNPJ" value={f.cnpj} /><Field label="Inscrição Estadual" value={f.ie} /><Field label="Área total" value={fmt(f.area)} append="ha" /><Field label="Área produtiva" value={fmt(f.prod)} append="ha" />
                <div className="lbl"><label className="cap" style={{ color: 'var(--color-primary)' }}>Status</label><div style={{ height: 48, display: 'flex', alignItems: 'center' }}><FarmSwitch initial={f.status} /></div></div></div>
            </LCard>
            <LCard title="Numeração de nascimento"><div className="frow2"><Field label="Número de nascimento" value={f.seq} /><Field label="Sigla da fazenda" value={f.sigla} /></div></LCard>
            <FormActions flash={flash} />
          </React.Fragment>}
          {tab === 'Mapa' && <React.Fragment>
            <DNote>A aba Mapa (módulos e piquetes) é do módulo de Pastagem. Em Configurações ela mantém o mesmo conteúdo, mas vale decidir se fica aqui, só no módulo, ou nos dois. Quando o mapa está ativo, ela usa o mesmo componente do UI kit Capacidade de Lotação.</DNote>
            <div className="tcard"><EmptyChart title="Mapa da fazenda" subtitle="Nenhum mapa importado para esta fazenda." description="O mapa e a divisão em módulos e piquetes estarão disponíveis em breve." /></div>
          </React.Fragment>}
          {tab === 'Setores' && <React.Fragment>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <p style={{ margin: 0, fontSize: 'var(--font-size-lg)' }}><b style={{ color: 'var(--color-grayish-dark)' }}>3</b> setores · <b style={{ color: 'var(--color-grayish-dark)' }}>2</b> ativos</p>
              <button className="btn btn-primary" onClick={() => flash('info', 'Modal Cadastrar setor (SectorModal), sem alteração.')}>Cadastrar setor</button>
            </div>
            <div className="tcard"><table className="pt" style={{ minWidth: 640 }}><thead><tr><th>Nome</th><th>Atividade Pecuária</th><th>Status</th></tr></thead><tbody>
              {SETORES.map((s) => <tr key={s.name}><td className="nm">{s.name}</td><td><div className="row-inline">{s.acts.map((a) => <span key={a} className="chip chip-uns">{a}</span>)}</div></td>
                <td><div className="row-inline" style={{ justifyContent: 'space-between' }}><ActiveChip on={s.status} /><button className="icon-btn" title={'Editar setor ' + s.name}><I n="pencil" /></button></div></td></tr>)}
            </tbody></table></div>
          </React.Fragment>}
        </div>
      </React.Fragment>
    )
  }
  return (
    <React.Fragment>
      <PH title={<span className="row-inline" style={{ alignItems: 'baseline', gap: '.6em' }}><h3>Fazendas</h3><span style={{ fontSize: 'var(--font-size-3xl)' }}><b style={{ color: 'var(--color-grayish)' }}>{FARMS.length}</b> <span style={{ color: 'var(--color-grayish-light)' }}>fazendas</span></span></span>}>
        <button className="btn btn-primary" onClick={() => flash('info', 'Cadastro de nova fazenda (FarmEditor), sem alteração.')}><span className="bi"><I n="add-circle-outline" /></span>Nova Fazenda</button>
      </PH>
      <div className="cfg-body">
        <div className="farm-grid">
          {FARMS.map((f) => (
            <div key={f.id} className={'fcard' + (f.status ? '' : ' inactive')} role="button" tabIndex={0} onClick={() => { setTab('Dados'); setSel(f) }}>
              <div className="fcard-h"><div style={{ minWidth: 0 }}><div className="fcard-name">{f.name}</div><div className="fcard-loc">{f.city} · {f.state}</div></div><ActiveChip on={f.status} f /></div>
              <div className="fcard-m">
                <div><div className="fcard-ml">Animais ativos</div><p className="fcard-mv"><b>{fmt(f.animais)}</b><span>cab</span></p></div>
                <div><div className="fcard-ml">Área total</div><p className="fcard-mv"><b>{fmt(f.area)}</b><span>ha</span></p></div>
              </div>
              <div className="fcard-s">{f.mods} módulos · {f.piq} piquetes</div>
            </div>
          ))}
        </div>
      </div>
    </React.Fragment>
  )
}
function FarmSwitch({ initial }) { const [on, setOn] = React.useState(initial); return <Switch on={on} onChange={setOn} label={on ? 'Ativa' : 'Inativa'} /> }

// ---------- Centros de custo ----------
const CC_TREE = [
  { code: '1', name: 'Pecuária', children: [
    { code: '1.01', name: 'Cria', children: [{ code: '1.01.001', name: 'Maternidade' }, { code: '1.01.002', name: 'Sanidade' }] },
    { code: '1.02', name: 'Recria e engorda', children: [{ code: '1.02.001', name: 'Pastagens' }, { code: '1.02.002', name: 'Suplementação' }] },
  ] },
  { code: '2', name: 'Agricultura', children: [{ code: '2.01', name: 'Silagem' }, { code: '2.02', name: 'Grãos' }] },
  { code: '3', name: 'Administrativo', children: [{ code: '3.01', name: 'Escritório' }, { code: '3.02', name: 'Logística', children: [{ code: '3.02.001', name: 'Maquinário' }, { code: '3.02.002', name: 'Combustível' }] }] },
]
function Tree({ items }) {
  return <ol>{items.map((it) => <li key={it.code}><span className="tree-label"><span>{it.name}</span><span className="tree-code">{it.code}</span></span>{it.children && <Tree items={it.children} />}</li>)}</ol>
}
function CentrosCustoPage({onImport, flash }) {
  const [menu, setMenu] = React.useState(false)
  const ref = useOutside(menu, () => setMenu(false))
  return (
    <React.Fragment>
      <PH title="Centros de custo">
        <button className="btn btn-ghost btn-small" onClick={() => onImport('Centro de Custo')}>Ver histórico</button>
        <PlanilhaButton items={[{ name: 'Importar', icon: 'upload', action: () => onImport('Centro de Custo') }, { name: 'Baixar template', icon: 'download', action: () => flash && flash('info', 'Download do template de centros de custo iniciado.') }, { name: 'Exportar versão ERP', icon: 'download', action: () => flash && flash('info', 'Exportação no formato do ERP iniciada.') }, { name: 'Exportar lista do sistema', icon: 'download', action: () => flash && flash('info', 'Exportação da lista atual do sistema iniciada.') }]} />
      </PH>
      <div className="cfg-body">
        <p style={{ margin: 0, fontSize: 'var(--font-size-lg)', lineHeight: '24px', maxWidth: 900 }}>Este parâmetro é importado do seu sistema ERP. Para alterá-lo é necessário criar esta alteração no sistema ERP e exportar a planilha .xlsx de Centros de Custos, e então importar o arquivo aqui.</p>
        <div className="tcard tree" style={{ padding: '20px 24px' }}><Tree items={CC_TREE} /></div>
      </div>
    </React.Fragment>
  )
}

// ---------- Estações de medição ----------
const ESTACOES = [
  { id: 1, name: 'Estação Sede Guanabara', farm: 'Fazenda Guanabara', status: true, report: true, icrop: true },
  { id: 2, name: 'Estação Retiro Norte', farm: 'Fazenda Guanabara', status: true, report: false, icrop: true },
  { id: 3, name: 'Estação Mateira', farm: 'Fazenda Mateira', status: true, report: true, icrop: true },
  { id: 4, name: 'Pluviômetro Paranapanema', farm: 'Fazenda Paranapanema', status: true, report: true, icrop: false },
]
function EstacoesTable({ rows, onEdit, onDelete }) {
  return (
    <div className="tcard"><table className="pt" style={{ minWidth: 760 }}><thead><tr><th>Nome</th><th>Fazenda</th><th>Status</th><th>Incluir no relatório</th><th></th></tr></thead><tbody>
      {rows.map((s) => <tr key={s.id} style={s.status ? null : { opacity: 0.7 }}>
        <td className="nm">{s.name}</td><td><span className="chip chip-basic">{s.farm}</span></td><td><ActiveChip on={s.status} /></td>
        <td><span className={'chip ' + (s.report ? 'chip-basic' : 'chip-dis')}>{s.report ? 'Sim' : 'Não'}</span></td>
        <td><div style={{ display: 'flex', gap: 24, justifyContent: 'flex-end' }}><button className="btn btn-ghost btn-small" onClick={() => onEdit(s)}><span className="bi"><I n="pencil" /></span>Editar</button>{onDelete && <button className="btn btn-ghost btn-small" onClick={() => onDelete(s)}><span className="bi"><I n="close" /></span>Excluir</button>}</div></td>
      </tr>)}
    </tbody></table></div>
  )
}
function EstacoesPage({ flash }) {
  const [form, setForm] = React.useState(null)
  const [del, setDel] = React.useState(null)
  const [rows, setRows] = React.useState(ESTACOES)
  if (form) {
    const s = form.novo ? {} : form
    return (
      <React.Fragment>
        <PH title={<div className="row-inline" style={{ gap: 12 }}><button className="icon-btn" style={{ width: 36, height: 36 }} title="Voltar" onClick={() => setForm(null)}><I n="chevron-back" /></button><h3>{form.novo ? 'Cadastrar estação de medição' : 'Editar estação de medição'}</h3></div>}>
          <button className="btn btn-primary" onClick={() => { setForm(null); flash('success', 'Estação de medição salva.') }}>Salvar</button>
        </PH>
        <div className="cfg-body">
          <LCard title="Informações da estação de medição">
            <div className="frow3"><div style={{ gridColumn: 'span 2' }}><Field label="Nome da estação" value={s.name} ph="Inserir nome" /></div><SelField label="Fazenda" value={s.farm} options={window.CFG.FAZENDAS} /></div>
            <hr style={{ border: 0, borderTop: 'var(--border-separator)', margin: '24px 0' }} />
            <div className="row-inline" style={{ gap: 48, alignItems: 'flex-start' }}>
              <div className="lbl"><label className="cap" style={{ color: 'var(--color-primary)' }}>Status</label><StSwitch initial={form.novo ? true : s.status} a="Ativo" b="Inativo" /></div>
              <div className="lbl"><label style={{ display: 'flex', alignItems: 'center', gap: 6 }}>Incluir no relatório<span className="tt" style={{ border: 0 }}><I n="information-circle-outline" /><span className="tt-box" style={{ width: 260 }}>Ao marcar esta opção, os índices pluviométricos desta estação passarão a ser exibidos no Relatório Exportado da seção Relatórios.</span></span></label><StSwitch initial={form.novo ? false : s.report} a="Sim" b="Não" /></div>
            </div>
          </LCard>
          <DNote>"Incluir no relatório" se refere ao Relatório Exportado da seção Relatórios, que fica dentro do módulo Gestão de Rebanhos. O texto de ajuda pode precisar citar o módulo agora que a tela saiu dele.</DNote>
        </div>
      </React.Fragment>
    )
  }
  return (
    <React.Fragment>
      <PH title="Estações de medição"><button className="btn btn-primary" onClick={() => setForm({ novo: true })}>Cadastrar</button></PH>
      <div className="cfg-body">
        <span className="cap" style={{ color: 'var(--color-primary)', paddingLeft: 10 }}>Estações iCrop</span>
        <EstacoesTable rows={rows.filter((r) => r.icrop)} onEdit={setForm} />
        <span className="cap" style={{ color: 'var(--color-primary)', paddingLeft: 10, marginTop: 8 }}>Estações Manuais</span>
        <EstacoesTable rows={rows.filter((r) => !r.icrop)} onEdit={setForm} onDelete={setDel} />
      </div>
      {del && <React.Fragment><div className="backdrop" onClick={() => setDel(null)}></div><div className="modal"><h2>Deseja realmente excluir está estação de medição?</h2>
        <div className="modal-actions"><button className="btn btn-ghost" onClick={() => setDel(null)}>Cancelar</button><button className="btn btn-destructive" onClick={() => { setRows(rows.filter((r) => r.id !== del.id)); setDel(null); flash('success', 'Estação de medição excluída.') }}>Sim</button></div></div></React.Fragment>}
    </React.Fragment>
  )
}
function StSwitch({ initial, a, b }) { const [on, setOn] = React.useState(initial); return <div style={{ height: 48, display: 'flex', alignItems: 'center' }}><Switch on={on} onChange={setOn} label={on ? a : b} /></div> }

Object.assign(window, { PH, LCard, DNote, Field, SelField, ActiveChip, EmptyChart, FazendasPage, CentrosCustoPage, EstacoesPage })