// Fonte: frontend/src/app/core/pages/{logs, ai-chat-prompt, abcz}

function FilterDrawer({ fields, onClose, onApply }) {
  return (
    <React.Fragment>
      <div className="backdrop" onClick={onClose}></div>
      <aside className="drawer" role="dialog" aria-label="Filtrar">
        <div className="dr-head"><div style={{ flex: 1 }}><h3 style={{ margin: 0 }}>Filtrar</h3></div><button className="icon-btn" title="Fechar" onClick={onClose} style={{ marginTop: -8, marginRight: -12 }}><I n="close" /></button></div>
        <div className="dr-body" style={{ padding: '24px 32px', display: 'flex', flexDirection: 'column', gap: 20 }}>
          {fields.map((f) => f.type === 'select' ? <SelField key={f.label} label={f.label} options={f.options} ph="Selecionar" />
            : f.type === 'date2' ? <div key={f.label} className="lbl"><label>{f.label}</label><div className="frow2"><div className="inp"><input placeholder="DD/MM/AAAA" /></div><div className="inp"><input placeholder="DD/MM/AAAA" /></div></div></div>
            : <Field key={f.label} label={f.label} ph={f.ph} />)}
        </div>
        <div className="dr-foot"><button className="btn btn-ghost" onClick={onClose}>Limpar</button><button className="btn btn-primary" onClick={onApply}>Filtrar</button></div>
      </aside>
    </React.Fragment>
  )
}

// ---------- Logs ----------
const LOGS = [
  ['Fernanda Costa Ribeiro', 'Criação de manejo', '-', '48 animais', '12/10/2026', '09:42'],
  ['Patrícia Lopes Andrade', 'Diagnóstico Reprodutivo', '-', '112 animais', '12/10/2026', '08:15'],
  ['Ricardo Almeida Prado', 'Criação de grupo de repasse', 'GR-0231', '36 animais', '11/10/2026', '17:03'],
  ['Fernanda Costa Ribeiro', 'Adição de animal a grupo de repasse', 'GR-0231', '4 animais', '11/10/2026', '16:58'],
  ['Amanda Martins Souza', 'Edição de animal', '-', '1 animal', '11/10/2026', '14:20'],
  ['Patrícia Lopes Andrade', 'Cobertura/Inseminação', '-', '27 animais', '10/10/2026', '10:31'],
  ['Ricardo Almeida Prado', 'Criação de estação de monta', '-', '-', '09/10/2026', '15:47'],
  ['Fernanda Costa Ribeiro', 'Adição de animal a estação de monta', '-', '210 animais', '09/10/2026', '15:52'],
  ['Amanda Martins Souza', 'Exclusão de solicitação de parto', '-', '-', '08/10/2026', '11:06'],
  ['Patrícia Lopes Andrade', 'Alteração de genealogia de animal', '-', '1 animal', '07/10/2026', '09:12'],
]
const LOG_ACOES = ['Adição de animal a estação de monta', 'Adição de animal a grupo de repasse', 'Alteração de genealogia de animal', 'Cobertura/Inseminação', 'Criação de animais', 'Criação de estação de monta', 'Criação de grupo de repasse', 'Criação de manejo', 'Diagnóstico Reprodutivo', 'Edição de animal', 'Exclusão de solicitação de parto']

function LogsPage({ flash }) {
  const [drawer, setDrawer] = React.useState(false)
  return (
    <React.Fragment>
      <PH title="Logs" extra={<span className="qbadge"><b>1.284</b> Registros</span>}>
        <button className="btn btn-ghost" onClick={() => setDrawer(true)}><span className="bi"><I n="filter" /></span>Filtrar</button>
      </PH>
      <div className="cfg-body">
        <div className="tcard"><table className="pt" style={{ minWidth: 820 }}><thead><tr><th>Usuário</th><th>Ação</th><th>ID</th><th>Quantidade</th><th>Data</th><th>Hora</th></tr></thead>
          <tbody>{LOGS.map((r, i) => <tr key={i}>{r.map((c, j) => <td key={j} className={j === 0 ? 'nm' : ''} style={j === 0 ? { fontSize: 'var(--font-size-normal)' } : null}>{c}</td>)}</tr>)}</tbody></table>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '12px 16px', borderTop: 'var(--border-table-hairline)' }}><span className="cap">10 logs</span><div className="row-inline"><button className="icon-btn" style={{ width: 36, height: 36 }}><I n="chevron-back" /></button><span>1 de 129</span><button className="icon-btn" style={{ width: 36, height: 36 }}><I n="chevron-forward" /></button></div></div>
        </div>
      </div>
      {drawer && <FilterDrawer onClose={() => setDrawer(false)} onApply={() => setDrawer(false)} fields={[{ label: 'Período do log', type: 'date2' }, { label: 'Usuário', type: 'select', options: window.CFG.PESSOAS.filter((p) => p.web).map((p) => p.nome) }, { label: 'Ação', type: 'select', options: LOG_ACOES }]} />}
    </React.Fragment>
  )
}

// ---------- Regras da IA ----------
const PROMPT_TIPOS = ['Regras de geração de SQL', 'Regras de formatação da resposta']
const PROMPTS0 = {
  'Regras de geração de SQL': [
    { id: 1, data: '02/10/2026 14:22', ativo: true, txt: '# Regras de negócio para geração de SQL\n\n- Considere apenas animais com status ativo, salvo pedido explícito.\n- "Plantel" se refere ao campo stock_number.\n- Datas de parto usam o fuso America/Sao_Paulo.\n- Para lotação, use UA = peso vivo / 450 kg.' },
    { id: 2, data: '18/09/2026 09:05', ativo: false, txt: '# Regras de negócio para geração de SQL\n\n- Considere apenas animais com status ativo.\n- "Plantel" se refere ao campo stock_number.' },
  ],
  'Regras de formatação da resposta': [
    { id: 3, data: '25/09/2026 16:40', ativo: true, txt: '# Formatação\n\n- Responda em português do Brasil.\n- Use separador de milhar com ponto (111.548).\n- Datas no formato DD/MM/AAAA.\n- Quando houver mais de 5 linhas, responda com tabela.' },
  ],
}
function PromptSwitch({ on, onChange }) {
  return <label className={'sw sm' + (on ? ' on' : '')} onClick={(e) => { e.preventDefault(); onChange(!on) }} style={{ justifyContent: 'center' }}><span className="sw-track"><span className="sw-handle"></span></span></label>
}
function RegrasIAPage({ flash }) {
  const [p, setP] = React.useState(PROMPTS0)
  const [ver, setVer] = React.useState(null)
  const [add, setAdd] = React.useState(null)
  const [txt, setTxt] = React.useState('')
  const toggle = (tipo, id, on) => setP({ ...p, [tipo]: p[tipo].map((v) => ({ ...v, ativo: on ? v.id === id : (v.id === id ? false : v.ativo) })) })
  return (
    <React.Fragment>
      <PH title="Regras de negócio da IA" />
      <div className="cfg-body" style={{ gap: '2em' }}>
        {PROMPT_TIPOS.map((tipo) => (
          <LCard key={tipo} title={tipo} style={{ marginBottom: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '1em' }}><span className="cap" style={{ color: 'var(--color-primary)' }}>Versões</span><button className="btn btn-outline" onClick={() => { setTxt(''); setAdd(tipo) }}>Adicionar novo prompt</button></div>
            {p[tipo].length ? <table className="ai-table"><thead><tr><th>Criado em</th><th>Conteúdo</th><th style={{ width: 88, textAlign: 'center' }}>Ativo</th></tr></thead><tbody>
              {p[tipo].map((v) => <tr key={v.id} className={v.ativo ? 'on' : ''}><td>{v.data}</td><td><button className="btn btn-ghost btn-small" onClick={() => setVer({ ...v, tipo })}>Ver</button></td><td style={{ textAlign: 'center' }}><PromptSwitch on={v.ativo} onChange={(on) => toggle(tipo, v.id, on)} /></td></tr>)}
            </tbody></table> : <span className="note">Nenhum prompt cadastrado. A regra padrão do sistema está em uso.</span>}
          </LCard>
        ))}
      </div>
      {ver && <React.Fragment><div className="backdrop" onClick={() => setVer(null)}></div><div className="modal wide"><div style={{ display: 'flex', justifyContent: 'space-between', gap: 16 }}><h2>{ver.tipo} — {ver.data}{ver.ativo ? ' (ativo)' : ''}</h2><button className="icon-btn" onClick={() => setVer(null)}><I n="close" /></button></div>
        <div style={{ display: 'flex', justifyContent: 'flex-end' }}><button className="btn btn-ghost btn-small" onClick={() => flash('success', 'Conteúdo copiado.')}><span className="bi"><I n="clipboard" /></span>Copiar conteúdo</button></div>
        <div className="mono">{ver.txt}</div></div></React.Fragment>}
      {add && <React.Fragment><div className="backdrop" onClick={() => setAdd(null)}></div><div className="modal wide"><h2>Adicionar novo prompt — {add}</h2>
        <p>O novo prompt é criado inativo. Use o toggle da tabela para ativá-lo quando quiser que a IA passe a utilizá-lo.</p>
        <textarea className="mono-input" placeholder="Inserir as regras de negócio" value={txt} onChange={(e) => setTxt(e.target.value)}></textarea>
        <div className="modal-actions"><button className="btn btn-ghost" onClick={() => setAdd(null)}>Cancelar</button><button className="btn btn-primary" disabled={!txt.trim()} onClick={() => { setP({ ...p, [add]: [{ id: Date.now(), data: '12/10/2026 17:20', ativo: false, txt }, ...p[add]] }); setAdd(null); flash('success', 'Prompt adicionado, inativo.') }}>Adicionar</button></div></div></React.Fragment>}
    </React.Fragment>
  )
}

// ---------- Integração ABCZ ----------
const ABCZ = [
  { tipo: 'Parto', data: '12/10/2026 08:14', doc: 'ABCZ-2026-118204', st: 'success', msg: 'Registro aceito', plantel: '18.442', nasc: 'GB 4812', brinco: '982 000412 551 803', det: true },
  { tipo: 'Inseminação Artificial', data: '11/10/2026 16:02', doc: 'ABCZ-2026-118177', st: 'pending', msg: '', plantel: '17.905', nasc: 'GB 4501', brinco: '982 000412 550 117', det: true },
  { tipo: 'Pesagem', data: '11/10/2026 10:47', doc: 'ABCZ-2026-118150', st: 'failed', msg: 'Peso fora da faixa esperada para a idade', plantel: '16.330', nasc: 'MT 2977', brinco: '982 000412 549 902', det: true },
  { tipo: 'Cobertura Natural', data: '10/10/2026 14:31', doc: 'ABCZ-2026-118098', st: 'success', msg: 'Registro aceito', plantel: '15.871', nasc: 'MT 2810', brinco: '982 000412 548 220', det: true },
  { tipo: 'Baixa de animal', data: '09/10/2026 09:12', doc: 'ABCZ-2026-118041', st: 'success', msg: 'Registro aceito', plantel: '12.004', nasc: 'PP 1204', brinco: '-', det: false },
]
const ABCZ_ST = { success: ['var(--color-success-dark)', 'var(--color-primary-30)'], failed: ['var(--color-danger-dark)', 'var(--color-primary-30)'], pending: ['var(--color-alert)', 'var(--color-primary)'] }
function IC({ title, children, w }) { return <div className="ic" style={w ? { flex: '0 0 ' + w } : null}><span className="cap" style={{ color: 'var(--color-primary)' }}>{title}</span><b>{children || '-'}</b></div> }
function AbczPage({ flash }) {
  const [drawer, setDrawer] = React.useState(false)
  return (
    <React.Fragment>
      <PH title="Envio para ABCZ">
        <button className="btn btn-ghost" onClick={() => flash('info', 'Exportação do relatório ABCZ iniciada.')}><span className="bi"><I n="download" /></span>Exportar</button>
        <button className="btn btn-ghost" onClick={() => setDrawer(true)}><span className="bi"><I n="filter" /></span>Filtrar</button>
      </PH>
      <div className="cfg-body">
        <span className="cap" style={{ fontSize: 'var(--font-size-normal)' }}><b style={{ color: 'var(--color-grayish-dark)' }}>2.418</b> Registros</span>
        <DNote>"Abrir registro" leva para telas do módulo Gestão de Rebanhos (inseminação, partos, manejo, ficha do animal). Dentro de Configurações, o clique tira o usuário desta área e troca o menu lateral. Avaliar se abre em nova aba ou volta para cá.</DNote>
        <div style={{ overflowX: 'auto', paddingBottom: 4 }}>
          {ABCZ.map((r) => (
            <div key={r.doc} className={'abcz-item' + (r.det ? ' det' : '')}>
              <IC title="Tipo de comunicação">{r.tipo}</IC><IC title="Data">{r.data}</IC><IC title="Número ABCZ">{r.doc}</IC>
              <div className="ic" style={{ flex: '0 0 300px' }}><span className="cap" style={{ color: 'var(--color-primary)' }}>Status ABCZ</span><span className="abcz-st" style={{ background: ABCZ_ST[r.st][0], color: ABCZ_ST[r.st][1] }} title={r.msg}>{r.st === 'pending' && !r.msg ? 'Aguardando processamento' : r.msg}</span></div>
              <IC title="Nº de plantel">{r.plantel}</IC><IC title="Nº de nascimento">{r.nasc}</IC><IC title="Brinco eletrônico">{r.brinco}</IC>
              {r.det ? <div className="ic" style={{ flex: '0 0 auto' }}><button className="btn btn-ghost" style={{ fontSize: 'var(--font-size-normal)' }} onClick={() => flash('info', 'Abre o registro no módulo Gestão de Rebanhos.')}><span className="bi"><I n="folder" /></span>Abrir registro</button></div> : <div className="ic" style={{ flex: '0 0 170px' }}></div>}
            </div>
          ))}
        </div>
      </div>
      {drawer && <FilterDrawer onClose={() => setDrawer(false)} onApply={() => setDrawer(false)} fields={[
        { label: 'Nº de Brinco Eletrônico', ph: 'Pesquisar nº de brinco eletrônico' }, { label: 'Nº de Nascimento', ph: 'Pesquisar nº de nascimento' }, { label: 'Nº de Plantel', ph: 'Inserir número' },
        { label: 'Fazenda', type: 'select', options: window.CFG.FAZENDAS }, { label: 'Setor', type: 'select', options: ['Cria', 'Engorda', 'Seleção'] }, { label: 'Número ABCZ', ph: 'Inserir número' },
        { label: 'Status ABCZ', type: 'select', options: ['Sucesso', 'Pendente', 'Falha'] }, { label: 'Tipo de comunicação', type: 'select', options: ['Inseminação Artificial', 'Cobertura Natural', 'Parto', 'Baixa de animal', 'Morte de animal', 'Pesagem'] },
        { label: 'Período', type: 'date2' }]} />}
    </React.Fragment>
  )
}

Object.assign(window, { LogsPage, RegrasIAPage, AbczPage })