/**
 * Pessoa — criar ou editar quem recebe a lista e quem a pode atualizar.
 * Página (sete campos). Só o administrador, que também define a password.
 *
 * Mudar o nome de alguém muda-o também nos itens onde aparece como
 * comercial ou responsável de etapa.
 */

function ScreenPessoa({ idEditar }) {
  const { dados, utilizador, acoes, irPara } = useLista();
  const original = idEditar ? dados.pessoas.find((p) => p.id === idEditar) : null;
  const [nome, setNome] = React.useState(original ? original.nome : '');
  const [email, setEmail] = React.useState(original ? original.email : '');
  const [funcao, setFuncao] = React.useState(original ? original.funcao : '');
  const [perfil, setPerfil] = React.useState(original ? original.perfil : 'leitor');
  const [comercial, setComercial] = React.useState(original ? !!original.comercial : false);
  const [notificar, setNotificar] = React.useState(original ? original.notificar !== false : true);
  const [password, setPassword] = React.useState('');
  const [erro, setErro] = React.useState('');
  const [aGravar, setAGravar] = React.useState(false);

  const titulo = original ? original.nome : 'Nova pessoa';

  if (utilizador.perfil !== 'admin') {
    return (
      <>
        <CabecalhoPagina titulo={titulo} />
        <p className="text-sm text-muted-foreground">Só o Bruno altera as pessoas.</p>
      </>
    );
  }

  async function guardar(ev) {
    ev.preventDefault();
    if (!nome.trim()) { setErro('Indica o nome.'); return; }
    if (email.trim() && !/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email.trim())) { setErro('O email não parece válido.'); return; }
    if (dados.pessoas.some((p) => p !== original && p.nome.toLowerCase() === nome.trim().toLowerCase())) { setErro('Já existe uma pessoa com esse nome.'); return; }
    if (original && original.perfil === 'admin' && perfil !== 'admin' && dados.pessoas.filter((p) => p.perfil === 'admin').length === 1) {
      setErro('Tem de ficar pelo menos um administrador.');
      return;
    }
    if (password && password.length < 10) { setErro('A password tem de ter pelo menos 10 caracteres.'); return; }
    setErro('');
    setAGravar(true);
    const ok = await acoes.guardarPessoa(original, {
      nome: nome.trim(), email: email.trim(), funcao: funcao.trim() || 'Equipa', perfil, comercial, notificar,
      password: password || undefined,
    });
    setAGravar(false);
    if (ok) irPara('base', null, { sec: 'pessoas' });
  }

  return (
    <form onSubmit={guardar} className="max-w-2xl" noValidate>
      <nav className="mb-3 text-sm text-muted-foreground" aria-label="Rasto">
        <a href="#/base?sec=pessoas" className="hover:text-foreground">Base de dados / Pessoas</a> / <span className="text-foreground">{titulo}</span>
      </nav>
      <CabecalhoPagina titulo={titulo} />

      <datalist id="lista-funcoes">{dados.listas.funcoes.map((f) => <option key={f} value={f} />)}</datalist>

      <section className="border bg-card p-5">
        <div className="grid gap-4 sm:grid-cols-2">
          <CampoFormulario rotulo="Nome">
            <input className="campo" value={nome} onChange={(e) => setNome(e.target.value)} required autoFocus={!original} />
          </CampoFormulario>
          <CampoFormulario rotulo="Email">
            <input className="campo" type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="nome@netscreen.pt" />
          </CampoFormulario>
          <CampoFormulario rotulo="Função" className="sm:col-span-2">
            <input className="campo" list="lista-funcoes" value={funcao} onChange={(e) => setFuncao(e.target.value)} placeholder="Comercial, Engenharia, Operações…" />
          </CampoFormulario>
        </div>

        <fieldset className="mt-5">
          <legend className="mb-2 text-sm font-medium">O que pode fazer</legend>
          <div className="space-y-2 text-sm">
            {[
              ['admin', 'Administrador', 'Cria itens, muda estados, chamadas de atenção e a base de dados.'],
              ['editor', 'Atualiza itens', 'Conclui etapas, muda datas e edita os itens. Fica registado quem e quando.'],
              ['leitor', 'Só consulta', 'Vê a lista e recebe as notificações, se estiverem ligadas.'],
            ].map(([valor, rotulo, ajuda]) => (
              <label key={valor} className="flex cursor-pointer items-start gap-3 rounded-md p-2 hover:bg-secondary/60">
                <input type="radio" name="perfil" className="mt-1" checked={perfil === valor} onChange={() => setPerfil(valor)} />
                <span><span className="block">{rotulo}</span><span className="text-muted-foreground">{ajuda}</span></span>
              </label>
            ))}
          </div>
        </fieldset>

        <CampoFormulario
          rotulo={original ? 'Nova password' : 'Password'}
          ajuda={original ? '(só se for para mudar; pelo menos 10 caracteres)' : '(pelo menos 10 caracteres; sem password, não entra na app)'}
          className="mt-5 block sm:max-w-sm"
        >
          <input className="campo" type="password" autoComplete="new-password" value={password} onChange={(e) => setPassword(e.target.value)} />
        </CampoFormulario>

        <div className="mt-4 space-y-2 text-sm">
          <label className="flex items-center gap-2.5">
            <input type="checkbox" checked={comercial} onChange={(e) => setComercial(e.target.checked)} />
            É comercial (aparece na escolha de comerciais de um item)
          </label>
          <label className="flex items-center gap-2.5">
            <input type="checkbox" checked={notificar} onChange={(e) => setNotificar(e.target.checked)} />
            Está no grupo de notificações do Teams
          </label>
        </div>
      </section>

      <div className="mt-6 flex flex-wrap items-center justify-end gap-3">
        {erro && <p role="alert" className="mr-auto text-sm text-[hsl(var(--offline))]">{erro}</p>}
        <a href="#/base?sec=pessoas" className={BOTAO_SECUNDARIO}>Cancelar</a>
        <button type="submit" className={BOTAO_PRIMARIO} disabled={aGravar}>{aGravar ? 'A gravar…' : 'Guardar'}</button>
      </div>
    </form>
  );
}