// Cadastro de operadores (pessoas alocaveis no grid HRC). Arquivo proprio, mesmo
// motivo do instancias.jsx: nao inflar mais views.jsx.

const { useState: useStateO, useEffect: useEffectO } = React;

function OperadoresView({ podeEditar }) {
  const [operadores, setOperadores] = useStateO([]);
  const [loading, setLoading] = useStateO(true);
  const [saving, setSaving] = useStateO(false);
  const [error, setError] = useStateO('');
  const [form, setForm] = useStateO({ nome: '', apelido: '', cor: '' });
  const [editando, setEditando] = useStateO(null); // { id, nome, apelido, cor }

  const carregar = async () => {
    setLoading(true);
    setError('');
    try {
      const r = await window.rcFetch('/api/operadores?incluir_inativos=1');
      if (!r.ok) {
        const d = await r.json().catch(() => ({}));
        setError(d.detail || 'Falha ao carregar operadores');
        return;
      }
      setOperadores(await r.json());
    } catch (_) {
      setError('Erro de conexao');
    } finally {
      setLoading(false);
    }
  };

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

  const setField = (key, value) => setForm(prev => ({ ...prev, [key]: value }));

  const criar = async (e) => {
    e?.preventDefault?.();
    if (!form.nome.trim()) { setError('Informe o nome'); return; }
    setSaving(true);
    setError('');
    try {
      const r = await window.rcFetch('/api/operadores', {
        method: 'POST',
        body: JSON.stringify({
          nome: form.nome.trim(),
          apelido: form.apelido.trim() || null,
          cor: form.cor || null,
        }),
      });
      if (!r.ok) {
        const d = await r.json().catch(() => ({}));
        setError(d.detail || 'Falha ao criar operador');
        return;
      }
      setForm({ nome: '', apelido: '', cor: '' });
      await carregar();
    } catch (_) {
      setError('Erro de conexao');
    } finally {
      setSaving(false);
    }
  };

  const atualizar = async (operador, patch) => {
    setSaving(true);
    setError('');
    try {
      const r = await window.rcFetch(`/api/operadores/${operador.id}`, {
        method: 'PUT',
        body: JSON.stringify(patch),
      });
      if (!r.ok) {
        const d = await r.json().catch(() => ({}));
        setError(d.detail || 'Falha ao atualizar operador');
        return;
      }
      await carregar();
    } catch (_) {
      setError('Erro de conexao');
    } finally {
      setSaving(false);
    }
  };

  const salvarEdicao = async () => {
    if (!editando) return;
    await atualizar(editando, {
      nome: editando.nome.trim(),
      apelido: editando.apelido.trim() || null,
      cor: editando.cor || null,
    });
    setEditando(null);
  };

  return (
    <div className="view-page operadores-view" style={{ padding: 16, display: 'flex', flexDirection: 'column', gap: 14 }}>
      {podeEditar ? (
        <form className="card col gap-3" style={{ padding: 14, maxWidth: 380 }} onSubmit={criar}>
          <div className="row" style={{ gap: 8 }}>
            <Icon name="user" size={14} className="muted" />
            <strong style={{ fontSize: 13 }}>Novo operador</strong>
          </div>
          <div className="col" style={{ gap: 5 }}>
            <label className="uc">Nome</label>
            <Input value={form.nome} onChange={(v) => setField('nome', v)} placeholder="Nome completo" icon="user" />
          </div>
          <div className="col" style={{ gap: 5 }}>
            <label className="uc">Apelido (opcional)</label>
            <Input value={form.apelido} onChange={(v) => setField('apelido', v)} placeholder="Como aparece no grid" />
          </div>
          <div className="col" style={{ gap: 5 }}>
            <label className="uc">Cor (opcional)</label>
            <div className="row" style={{ gap: 8 }}>
              <input
                type="color"
                value={form.cor || '#5b8def'}
                onChange={(e) => setField('cor', e.target.value)}
                style={{ width: 36, height: 28, padding: 0, border: '1px solid var(--line)', borderRadius: 5, background: 'transparent', cursor: 'pointer' }}
              />
              {form.cor ? (
                <Btn size="sm" kind="ghost" onClick={() => setField('cor', '')}>Cor automática</Btn>
              ) : (
                <span className="dim" style={{ fontSize: 11 }}>Sem cor definida usa uma cor automática por id</span>
              )}
            </div>
          </div>
          {error && (
            <div style={{ fontSize: 12, color: 'var(--err)', background: 'var(--err-soft)', padding: '7px 10px', borderRadius: 6 }}>
              <Icon name="alert" size={11} /> {error}
            </div>
          )}
          <Btn type="submit" kind="primary" icon="plus" disabled={saving}>
            {saving ? 'Salvando...' : 'Criar operador'}
          </Btn>
        </form>
      ) : (error && (
        <div style={{ fontSize: 12, color: 'var(--err)', background: 'var(--err-soft)', padding: '7px 10px', borderRadius: 6, maxWidth: 380 }}>
          <Icon name="alert" size={11} /> {error}
        </div>
      ))}

      <div className="card" style={{ overflow: 'hidden' }}>
        <div className="row" style={{ padding: '10px 12px', borderBottom: '1px solid var(--line)', gap: 8 }}>
          <Icon name="user" size={14} className="muted" />
          <strong style={{ fontSize: 13 }}>Operadores</strong>
          <span className="chip">{operadores.length}</span>
          <div style={{ flex: 1 }} />
          <Btn kind="ghost" size="sm" icon="refresh" onClick={carregar} disabled={loading || saving}>
            Atualizar
          </Btn>
        </div>
        <div style={{ overflowX: 'auto' }}>
          <table className="tbl">
            <thead>
              <tr>
                <th style={{ width: 40 }}></th>
                <th>Nome</th>
                <th>Apelido</th>
                <th style={{ width: 90 }}>Status</th>
                {podeEditar ? <th style={{ width: 150 }}>Ações</th> : null}
              </tr>
            </thead>
            <tbody>
              {loading ? (
                <tr><td colSpan={podeEditar ? 5 : 4} className="muted">Carregando...</td></tr>
              ) : !operadores.length ? (
                <tr><td colSpan={podeEditar ? 5 : 4} className="muted">Nenhum operador cadastrado.</td></tr>
              ) : operadores.map(op => (
                <tr key={op.id}>
                  <td><ChipOperador operador={op} size={22} /></td>
                  <td>{op.nome}</td>
                  <td className="dim">{op.apelido || '-'}</td>
                  <td>{op.ativo ? <span className="chip">Ativo</span> : <span className="chip chip-err">Inativo</span>}</td>
                  {podeEditar ? (
                    <td>
                      <div className="row" style={{ gap: 4 }}>
                        <IconBtn name="edit" size="sm" title="Editar" onClick={() => setEditando({ id: op.id, nome: op.nome, apelido: op.apelido || '', cor: op.cor || '' })} disabled={saving} />
                        <Btn size="sm" kind="ghost" onClick={() => atualizar(op, { ativo: !op.ativo })} disabled={saving}>
                          {op.ativo ? 'Desativar' : 'Ativar'}
                        </Btn>
                      </div>
                    </td>
                  ) : null}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      {editando ? (
        <div className="modal-backdrop" onClick={() => setEditando(null)}>
          <div className="modal" style={{ maxWidth: 380 }} onClick={(e) => e.stopPropagation()}>
            <h3 style={{ marginTop: 0, fontSize: 14 }}>Editar operador</h3>
            <div className="col gap-3">
              <div className="col" style={{ gap: 5 }}>
                <label className="uc">Nome</label>
                <Input value={editando.nome} onChange={(v) => setEditando(m => ({ ...m, nome: v }))} icon="user" />
              </div>
              <div className="col" style={{ gap: 5 }}>
                <label className="uc">Apelido</label>
                <Input value={editando.apelido} onChange={(v) => setEditando(m => ({ ...m, apelido: v }))} />
              </div>
              <div className="col" style={{ gap: 5 }}>
                <label className="uc">Cor</label>
                <input
                  type="color"
                  value={editando.cor || '#5b8def'}
                  onChange={(e) => setEditando(m => ({ ...m, cor: e.target.value }))}
                  style={{ width: 36, height: 28, padding: 0, border: '1px solid var(--line)', borderRadius: 5, background: 'transparent', cursor: 'pointer' }}
                />
              </div>
            </div>
            <div className="row" style={{ justifyContent: 'flex-end', gap: 8, marginTop: 14 }}>
              <Btn kind="ghost" onClick={() => setEditando(null)} disabled={saving}>Cancelar</Btn>
              <Btn kind="primary" onClick={salvarEdicao} disabled={saving}>{saving ? 'Salvando…' : 'Salvar'}</Btn>
            </div>
          </div>
        </div>
      ) : null}
    </div>
  );
}

Object.assign(window, { OperadoresView });