// Caririaçu Guincho — CRUDs auxiliares de Configurações
// Renderizados como abas dentro de ConfigScreen (screen-outros.jsx)
// Cada componente retorna um <Card> com header interno (padrão da aba Usuários).

const { useState: useStateCA, useEffect: useEffectCA } = React;

// ── Estilos compartilhados (padrão tabela Usuários) ───────────────────────
const headerStyleCA = {
  padding: '16px 20px', borderBottom: '1px solid #F1F5F9',
  display: 'flex', alignItems: 'center', justifyContent: 'space-between'
};
const titleStyleCA = {
  margin: 0, fontSize: 17, fontWeight: 700, color: '#0F172A',
  fontFamily: 'DM Sans, sans-serif'
};
const thStyleCA = {
  padding: '10px 16px', textAlign: 'left', fontSize: 12, fontWeight: 600,
  color: '#64748B', borderBottom: '1px solid #E2E8F0'
};
const tdStyleCA = { padding: '10px 16px', borderBottom: '1px solid #E2E8F0' };
const emptyStyleCA = { padding: 40, textAlign: 'center', color: '#94A3B8', fontSize: 13 };
const iconBtnCA = (color = '#64748B') => ({
  background: 'none', border: 'none', cursor: 'pointer', color,
  padding: 4, borderRadius: 6
});

// ── CrudSimplesScreen ─────────────────────────────────────────────────────
// Helper para CRUDs com nome (obrigatório) + ativo (boolean).
// Usado por Combustíveis e Tipos de despesa.
const CrudSimplesScreen = ({ titulo, tituloSingular, tabela, campos = ['nome'] }) => {
  const [items, setItems] = useStateCA([]);
  const [modal, setModal] = useStateCA(false);
  const [editing, setEditing] = useStateCA(null);
  const [form, setForm] = useStateCA({ nome: '', ativo: true });

  const carregar = async () => {
    const data = await db.list(tabela, { order: 'nome', asc: true });
    setItems(data);
  };

  useEffectCA(() => { carregar(); }, []);

  const openNew = () => {
    setEditing(null);
    setForm({ nome: '', ativo: true });
    setModal(true);
  };
  const openEdit = (row) => {
    setEditing(row);
    setForm({ nome: row.nome || '', ativo: row.ativo !== false });
    setModal(true);
  };
  const salvar = async () => {
    if (!form.nome.trim()) { showToast('Informe o nome', 'warning'); return; }
    const payload = { nome: form.nome.trim(), ativo: !!form.ativo };
    if (editing) {
      const upd = await db.update(tabela, editing.id, payload);
      if (upd) { showToast(`${upd.nome} atualizado`, 'success'); await carregar(); setModal(false); }
    } else {
      const created = await db.insert(tabela, payload);
      if (created) { showToast(`${created.nome} adicionado`, 'success'); await carregar(); setModal(false); }
    }
  };
  const excluir = async (row) => {
    if (!confirm(`Excluir "${row.nome}"?`)) return;
    const ok = await db.remove(tabela, row.id);
    if (ok) { showToast(`"${row.nome}" excluído`, 'warning'); await carregar(); }
  };

  const mostraAtivo = campos.includes('ativo');

  return (
    <Card style={{ padding: 0, overflow: 'hidden' }}>
      <div style={headerStyleCA}>
        <h2 style={titleStyleCA}>{titulo}</h2>
        <Btn variant="primary" size="sm" icon="plus" onClick={openNew}>Adicionar</Btn>
      </div>

      {items.length === 0 ? (
        <div style={emptyStyleCA}>Nenhum item cadastrado.</div>
      ) : (
        <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
          <thead>
            <tr style={{ background: '#F8FAFC' }}>
              <th style={thStyleCA}>Nome</th>
              {mostraAtivo && <th style={thStyleCA}>Status</th>}
              <th style={{ ...thStyleCA, width: 100 }}>Ações</th>
            </tr>
          </thead>
          <tbody>
            {items.map((row, i) => (
              <tr key={row.id} style={{ background: i % 2 ? '#F8FAFC' : '#fff' }}>
                <td style={{ ...tdStyleCA, fontWeight: 600, color: '#0F172A' }}>{row.nome}</td>
                {mostraAtivo && (
                  <td style={tdStyleCA}>
                    <StatusBadge status={row.ativo === false ? 'inativo' : 'ativo'} />
                  </td>
                )}
                <td style={tdStyleCA}>
                  <div style={{ display: 'flex', gap: 4 }}>
                    <button title="Editar" onClick={() => openEdit(row)} style={iconBtnCA('#64748B')}
                      onMouseEnter={e => e.currentTarget.style.background = '#F1F5F9'}
                      onMouseLeave={e => e.currentTarget.style.background = 'none'}>
                      <Icon name="edit" size={15} />
                    </button>
                    <button title="Excluir" onClick={() => excluir(row)} style={iconBtnCA('#EF4444')}
                      onMouseEnter={e => e.currentTarget.style.background = '#FEF2F2'}
                      onMouseLeave={e => e.currentTarget.style.background = 'none'}>
                      <Icon name="trash" size={15} />
                    </button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      )}

      <Modal open={modal} onClose={() => setModal(false)}
        title={editing ? `Editar ${editing.nome}` : `Novo ${tituloSingular || titulo.toLowerCase()}`}
        width={460}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <Input label="Nome" placeholder="Digite o nome" value={form.nome}
            onChange={e => setForm(f => ({ ...f, nome: e.target.value }))} />
          {mostraAtivo && (
            <label style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 14, color: '#374151', cursor: 'pointer' }}>
              <input type="checkbox" checked={!!form.ativo}
                onChange={e => setForm(f => ({ ...f, ativo: e.target.checked }))}
                style={{ width: 18, height: 18, accentColor: '#F59E0B', cursor: 'pointer' }} />
              Ativo
            </label>
          )}
          <div style={{ display: 'flex', gap: 10, justifyContent: 'flex-end', paddingTop: 8, borderTop: '1px solid #F1F5F9' }}>
            <Btn variant="secondary" onClick={() => setModal(false)}>Cancelar</Btn>
            <Btn variant="primary" icon="check" onClick={salvar}>{editing ? 'Salvar' : 'Adicionar'}</Btn>
          </div>
        </div>
      </Modal>
    </Card>
  );
};

// ── ConfigCombustiveisScreen ──────────────────────────────────────────────
const ConfigCombustiveisScreen = () =>
  <CrudSimplesScreen titulo="Combustíveis" tituloSingular="combustível" tabela="combustiveis" campos={['nome', 'ativo']} />;

// ── ConfigTiposDespesaScreen ──────────────────────────────────────────────
const ConfigTiposDespesaScreen = () =>
  <CrudSimplesScreen titulo="Tipos de despesa" tituloSingular="tipo de despesa" tabela="tipos_despesa" campos={['nome', 'ativo']} />;

// ── ConfigPostosScreen ────────────────────────────────────────────────────
const ConfigPostosScreen = () => {
  const [items, setItems] = useStateCA([]);
  const [modal, setModal] = useStateCA(false);
  const [editing, setEditing] = useStateCA(null);
  const [form, setForm] = useStateCA({ nome: '', endereco: '', ativo: true });

  const carregar = async () => {
    setItems(await db.list('postos', { order: 'nome', asc: true }));
  };
  useEffectCA(() => { carregar(); }, []);

  const openNew = () => {
    setEditing(null);
    setForm({ nome: '', endereco: '', ativo: true });
    setModal(true);
  };
  const openEdit = (row) => {
    setEditing(row);
    setForm({ nome: row.nome || '', endereco: row.endereco || '', ativo: row.ativo !== false });
    setModal(true);
  };
  const salvar = async () => {
    if (!form.nome.trim()) { showToast('Informe o nome do posto', 'warning'); return; }
    const payload = {
      nome: form.nome.trim(),
      endereco: form.endereco.trim() || null,
      ativo: !!form.ativo,
    };
    if (editing) {
      const upd = await db.update('postos', editing.id, payload);
      if (upd) { showToast(`${upd.nome} atualizado`, 'success'); await carregar(); setModal(false); }
    } else {
      const created = await db.insert('postos', payload);
      if (created) { showToast(`${created.nome} adicionado`, 'success'); await carregar(); setModal(false); }
    }
  };
  const excluir = async (row) => {
    if (!confirm(`Excluir posto "${row.nome}"?`)) return;
    const ok = await db.remove('postos', row.id);
    if (ok) { showToast(`"${row.nome}" excluído`, 'warning'); await carregar(); }
  };

  return (
    <Card style={{ padding: 0, overflow: 'hidden' }}>
      <div style={headerStyleCA}>
        <h2 style={titleStyleCA}>Postos</h2>
        <Btn variant="primary" size="sm" icon="plus" onClick={openNew}>Adicionar</Btn>
      </div>

      {items.length === 0 ? (
        <div style={emptyStyleCA}>Nenhum posto cadastrado.</div>
      ) : (
        <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
          <thead>
            <tr style={{ background: '#F8FAFC' }}>
              <th style={thStyleCA}>Nome</th>
              <th style={thStyleCA}>Endereço</th>
              <th style={thStyleCA}>Status</th>
              <th style={{ ...thStyleCA, width: 100 }}>Ações</th>
            </tr>
          </thead>
          <tbody>
            {items.map((row, i) => (
              <tr key={row.id} style={{ background: i % 2 ? '#F8FAFC' : '#fff' }}>
                <td style={{ ...tdStyleCA, fontWeight: 600, color: '#0F172A' }}>{row.nome}</td>
                <td style={{ ...tdStyleCA, color: '#64748B' }}>{row.endereco || '—'}</td>
                <td style={tdStyleCA}>
                  <StatusBadge status={row.ativo === false ? 'inativo' : 'ativo'} />
                </td>
                <td style={tdStyleCA}>
                  <div style={{ display: 'flex', gap: 4 }}>
                    <button title="Editar" onClick={() => openEdit(row)} style={iconBtnCA('#64748B')}
                      onMouseEnter={e => e.currentTarget.style.background = '#F1F5F9'}
                      onMouseLeave={e => e.currentTarget.style.background = 'none'}>
                      <Icon name="edit" size={15} />
                    </button>
                    <button title="Excluir" onClick={() => excluir(row)} style={iconBtnCA('#EF4444')}
                      onMouseEnter={e => e.currentTarget.style.background = '#FEF2F2'}
                      onMouseLeave={e => e.currentTarget.style.background = 'none'}>
                      <Icon name="trash" size={15} />
                    </button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      )}

      <Modal open={modal} onClose={() => setModal(false)}
        title={editing ? `Editar ${editing.nome}` : 'Novo posto'}
        width={500}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <Input label="Nome" placeholder="Posto Shell Centro" value={form.nome}
            onChange={e => setForm(f => ({ ...f, nome: e.target.value }))} />
          <Input label="Endereço (opcional)" placeholder="Av. Principal, 123 — Centro" value={form.endereco}
            onChange={e => setForm(f => ({ ...f, endereco: e.target.value }))} />
          <label style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 14, color: '#374151', cursor: 'pointer' }}>
            <input type="checkbox" checked={!!form.ativo}
              onChange={e => setForm(f => ({ ...f, ativo: e.target.checked }))}
              style={{ width: 18, height: 18, accentColor: '#F59E0B', cursor: 'pointer' }} />
            Ativo
          </label>
          <div style={{ display: 'flex', gap: 10, justifyContent: 'flex-end', paddingTop: 8, borderTop: '1px solid #F1F5F9' }}>
            <Btn variant="secondary" onClick={() => setModal(false)}>Cancelar</Btn>
            <Btn variant="primary" icon="check" onClick={salvar}>{editing ? 'Salvar' : 'Adicionar'}</Btn>
          </div>
        </div>
      </Modal>
    </Card>
  );
};

// ── ConfigChecklistsScreen ────────────────────────────────────────────────
// Lista templates de checklist (checklist_templates) com itens editáveis em JSON.
const tempItemId = () => `tmp-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;

const ConfigChecklistsScreen = () => {
  const [items, setItems] = useStateCA([]);
  const [modal, setModal] = useStateCA(false);
  const [editing, setEditing] = useStateCA(null);
  const [nome, setNome] = useStateCA('');
  const [ativo, setAtivo] = useStateCA(true);
  const [itens, setItens] = useStateCA([]); // [{id, label, obrigatorio}]

  const carregar = async () => {
    setItems(await db.list('checklist_templates', { order: 'nome', asc: true }));
  };
  useEffectCA(() => { carregar(); }, []);

  const normalizaItens = (raw) => {
    if (!raw) return [];
    let arr = raw;
    if (typeof raw === 'string') {
      try { arr = JSON.parse(raw); } catch { return []; }
    }
    if (!Array.isArray(arr)) return [];
    return arr.map((it) => ({
      id: it.id ?? tempItemId(),
      label: it.label || '',
      obrigatorio: it.obrigatorio !== false,
    }));
  };

  const openNew = () => {
    setEditing(null);
    setNome('');
    setAtivo(true);
    setItens([]);
    setModal(true);
  };
  const openEdit = (row) => {
    setEditing(row);
    setNome(row.nome || '');
    setAtivo(row.ativo !== false);
    setItens(normalizaItens(row.itens));
    setModal(true);
  };

  const addItem = () => {
    setItens(arr => [...arr, { id: tempItemId(), label: '', obrigatorio: true }]);
  };
  const updateItem = (id, patch) => {
    setItens(arr => arr.map(it => it.id === id ? { ...it, ...patch } : it));
  };
  const removeItem = (id) => {
    setItens(arr => arr.filter(it => it.id !== id));
  };

  const salvar = async () => {
    if (!nome.trim()) { showToast('Informe o nome do template', 'warning'); return; }
    if (itens.length === 0) { showToast('Adicione ao menos um item', 'warning'); return; }
    if (itens.some(it => !it.label.trim())) { showToast('Preencha o texto de todos os itens', 'warning'); return; }

    const itensFinal = itens.map((it, idx) => ({
      id: idx + 1,
      label: it.label.trim(),
      obrigatorio: !!it.obrigatorio,
    }));

    const payload = {
      nome: nome.trim(),
      ativo: !!ativo,
      itens: itensFinal,
    };

    if (editing) {
      const upd = await db.update('checklist_templates', editing.id, payload);
      if (upd) { showToast(`Template "${upd.nome}" atualizado`, 'success'); await carregar(); setModal(false); }
    } else {
      const created = await db.insert('checklist_templates', payload);
      if (created) { showToast(`Template "${created.nome}" criado`, 'success'); await carregar(); setModal(false); }
    }
  };

  const excluir = async (row) => {
    if (!confirm(`Excluir template "${row.nome}"?`)) return;
    const ok = await db.remove('checklist_templates', row.id);
    if (ok) { showToast(`"${row.nome}" excluído`, 'warning'); await carregar(); }
  };

  const countItens = (raw) => normalizaItens(raw).length;

  return (
    <Card style={{ padding: 0, overflow: 'hidden' }}>
      <div style={headerStyleCA}>
        <h2 style={titleStyleCA}>Templates de checklist</h2>
        <Btn variant="primary" size="sm" icon="plus" onClick={openNew}>Adicionar</Btn>
      </div>

      {items.length === 0 ? (
        <div style={emptyStyleCA}>Nenhum template cadastrado.</div>
      ) : (
        <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
          <thead>
            <tr style={{ background: '#F8FAFC' }}>
              <th style={thStyleCA}>Nome</th>
              <th style={thStyleCA}>Itens</th>
              <th style={thStyleCA}>Status</th>
              <th style={{ ...thStyleCA, width: 100 }}>Ações</th>
            </tr>
          </thead>
          <tbody>
            {items.map((row, i) => (
              <tr key={row.id} style={{ background: i % 2 ? '#F8FAFC' : '#fff' }}>
                <td style={{ ...tdStyleCA, fontWeight: 600, color: '#0F172A' }}>{row.nome}</td>
                <td style={{ ...tdStyleCA, color: '#64748B' }}>{countItens(row.itens)} {countItens(row.itens) === 1 ? 'item' : 'itens'}</td>
                <td style={tdStyleCA}>
                  <StatusBadge status={row.ativo === false ? 'inativo' : 'ativo'} />
                </td>
                <td style={tdStyleCA}>
                  <div style={{ display: 'flex', gap: 4 }}>
                    <button title="Editar" onClick={() => openEdit(row)} style={iconBtnCA('#64748B')}
                      onMouseEnter={e => e.currentTarget.style.background = '#F1F5F9'}
                      onMouseLeave={e => e.currentTarget.style.background = 'none'}>
                      <Icon name="edit" size={15} />
                    </button>
                    <button title="Excluir" onClick={() => excluir(row)} style={iconBtnCA('#EF4444')}
                      onMouseEnter={e => e.currentTarget.style.background = '#FEF2F2'}
                      onMouseLeave={e => e.currentTarget.style.background = 'none'}>
                      <Icon name="trash" size={15} />
                    </button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      )}

      <Modal open={modal} onClose={() => setModal(false)}
        title={editing ? `Editar template — ${editing.nome}` : 'Novo template de checklist'}
        width={620}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <Input label="Nome do template" placeholder="Ex: Saída de viagem"
            value={nome} onChange={e => setNome(e.target.value)} />

          <div>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
              <label style={{ fontSize: 13, fontWeight: 500, color: '#374151' }}>
                Itens do checklist {itens.length > 0 && <span style={{ color: '#94A3B8', fontWeight: 400 }}>({itens.length})</span>}
              </label>
              <Btn variant="secondary" size="sm" icon="plus" onClick={addItem}>Adicionar item</Btn>
            </div>

            {itens.length === 0 ? (
              <div style={{ padding: 20, textAlign: 'center', color: '#94A3B8', fontSize: 12, background: '#F8FAFC', borderRadius: 8, border: '1px dashed #E2E8F0' }}>
                Nenhum item ainda. Clique em "Adicionar item" para começar.
              </div>
            ) : (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8, maxHeight: 320, overflowY: 'auto', padding: 2 }}>
                {itens.map((it, idx) => (
                  <div key={it.id} style={{
                    display: 'flex', alignItems: 'center', gap: 8,
                    padding: '8px 10px', background: '#F8FAFC',
                    borderRadius: 8, border: '1px solid #E2E8F0'
                  }}>
                    <span style={{ fontSize: 12, color: '#94A3B8', fontWeight: 600, minWidth: 24, fontFamily: 'DM Mono, monospace' }}>{idx + 1}.</span>
                    <input type="text" value={it.label}
                      onChange={e => updateItem(it.id, { label: e.target.value })}
                      placeholder="Descrição do item"
                      style={{
                        flex: 1, padding: '7px 10px', borderRadius: 6, fontSize: 13,
                        border: '1px solid #E2E8F0', outline: 'none', background: '#fff',
                        fontFamily: 'Inter, sans-serif'
                      }} />
                    <label title="Obrigatório" style={{ display: 'flex', alignItems: 'center', gap: 5, fontSize: 12, color: '#64748B', cursor: 'pointer', whiteSpace: 'nowrap' }}>
                      <input type="checkbox" checked={!!it.obrigatorio}
                        onChange={e => updateItem(it.id, { obrigatorio: e.target.checked })}
                        style={{ width: 15, height: 15, accentColor: '#F59E0B', cursor: 'pointer' }} />
                      Obrig.
                    </label>
                    <button title="Remover" onClick={() => removeItem(it.id)} style={iconBtnCA('#EF4444')}
                      onMouseEnter={e => e.currentTarget.style.background = '#FEF2F2'}
                      onMouseLeave={e => e.currentTarget.style.background = 'none'}>
                      <Icon name="x" size={14} />
                    </button>
                  </div>
                ))}
              </div>
            )}
          </div>

          <label style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 14, color: '#374151', cursor: 'pointer' }}>
            <input type="checkbox" checked={!!ativo}
              onChange={e => setAtivo(e.target.checked)}
              style={{ width: 18, height: 18, accentColor: '#F59E0B', cursor: 'pointer' }} />
            Template ativo
          </label>

          <div style={{ display: 'flex', gap: 10, justifyContent: 'flex-end', paddingTop: 8, borderTop: '1px solid #F1F5F9' }}>
            <Btn variant="secondary" onClick={() => setModal(false)}>Cancelar</Btn>
            <Btn variant="primary" icon="check" onClick={salvar}>{editing ? 'Salvar' : 'Criar template'}</Btn>
          </div>
        </div>
      </Modal>
    </Card>
  );
};

Object.assign(window, {
  CrudSimplesScreen,
  ConfigCombustiveisScreen,
  ConfigTiposDespesaScreen,
  ConfigPostosScreen,
  ConfigChecklistsScreen,
});