<?php
declare(strict_types=1);

$ref = strtoupper(preg_replace('/[^A-Z0-9]/i', '', (string) ($_GET['ref'] ?? '')));
?>
<!doctype html>
<html lang="pt-BR">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Cadastro Bulo</title>
  <link rel="icon" type="image/png" href="../assets/site/img/favicon.png">
  <link rel="apple-touch-icon" href="../assets/site/img/apple-touch-icon.png">
  <link rel="stylesheet" href="../assets/site/site.css">
</head>
<body>
  <header class="site-header">
    <div class="site-shell site-nav">
      <a class="brand-link" href="../index.php"><img class="brand-logo" src="../assets/site/img/bulo-logo.png" alt="Bulo">Bulo</a>
      <nav class="nav-links" data-nav-links>
        <a href="../motorista/">Motorista</a>
        <a href="../passageiro/">Passageiro</a>
        <a href="../ajuda/">Ajuda</a>
        <a class="nav-cta active" href="./">Cadastre-se</a>
      </nav>
      <button class="mobile-toggle" data-mobile-toggle aria-label="Abrir menu">&#9776;</button>
    </div>
  </header>

  <main>
    <section class="page-hero">
      <div class="site-shell">
        <h1>Cadastre-se no Bulo</h1>
        <p>Escolha passageiro ou motorista. Se você chegou por uma indicação, o código já vem preenchido automaticamente.</p>
        <?php if ($ref !== ''): ?>
          <p><strong>Código recebido:</strong> <?= htmlspecialchars($ref, ENT_QUOTES, 'UTF-8') ?></p>
        <?php endif; ?>
      </div>
    </section>

    <section class="section section-soft">
      <div class="site-shell portal-layout">
        <aside class="login-card">
          <h2>Todo mundo ganha</h2>
          <p>O Bulo conecta corridas, motoristas, passageiros e indicações. Você pode usar a plataforma e também compartilhar seu código para receber comissões nas corridas dos seus indicados.</p>
          <div class="grid-2" style="margin-top:18px;">
            <div class="feature-card"><h3>Passageiro</h3><p>Peça corridas, salve endereços, acompanhe viagens e indique passageiros.</p></div>
            <div class="feature-card"><h3>Motorista</h3><p>Receba chamadas, acompanhe ganhos e indique motoristas ou passageiros.</p></div>
          </div>
        </aside>

        <section class="form-card">
          <div id="alert" class="alert"></div>
          <div class="choice" role="tablist" aria-label="Tipo de cadastro">
            <button type="button" class="active" data-type="passageiro">Passageiro</button>
            <button type="button" data-type="motorista">Motorista</button>
          </div>

          <form id="cadastroForm" autocomplete="on">
            <input type="hidden" id="tipo" value="passageiro">

            <div class="section-title" style="text-align:left;margin:18px 0 14px;">
              <h2 style="font-size:24px;">Dados pessoais</h2>
            </div>
            <div class="form-grid">
              <label id="nomeCompletoWrap" class="field-full">Nome completo
                <input class="input" id="nomeCompleto" maxlength="120">
              </label>
              <label class="field driver-only">Nome
                <input class="input" id="primeiroNome" maxlength="60">
              </label>
              <label class="field driver-only">Sobrenome
                <input class="input" id="sobrenome" maxlength="90">
              </label>
              <label class="field">CPF
                <input class="input" id="cpf" inputmode="numeric" maxlength="14" placeholder="000.000.000-00">
              </label>
              <label class="field">Celular
                <input class="input" id="celular" inputmode="numeric" maxlength="15" placeholder="DDD + número">
              </label>
              <label class="field-full">E-mail
                <input class="input" id="email" type="email" maxlength="160">
              </label>
            </div>

            <div class="driver-only">
              <div class="section-title" style="text-align:left;margin:22px 0 14px;">
                <h2 style="font-size:24px;">Endereço do motorista</h2>
                <p style="margin-left:0;">Os documentos continuam sendo enviados pelo menu do app.</p>
              </div>
              <div class="form-grid">
                <label class="field">CEP
                  <input class="input" id="cep" inputmode="numeric" maxlength="9">
                </label>
                <label class="field">Número
                  <input class="input" id="enderecoNumero" maxlength="20">
                </label>
                <label class="field-full">Endereço
                  <input class="input" id="logradouro" maxlength="160">
                </label>
                <label class="field">Complemento
                  <input class="input" id="complemento" maxlength="80">
                </label>
                <label class="field">Bairro
                  <input class="input" id="bairro" maxlength="90">
                </label>
                <label class="field">Cidade
                  <input class="input" id="cidade" maxlength="90">
                </label>
                <label class="field">UF
                  <input class="input" id="uf" maxlength="2">
                </label>
              </div>
            </div>

            <div class="section-title" style="text-align:left;margin:22px 0 14px;">
              <h2 style="font-size:24px;">Acesso</h2>
            </div>
            <div class="form-grid">
              <label class="field">Senha
                <input class="input" id="senha" type="password" minlength="8">
              </label>
              <label class="field">Repetir senha
                <input class="input" id="repetirSenha" type="password" minlength="8">
              </label>
            </div>

            <div class="section-title" style="text-align:left;margin:22px 0 14px;">
              <h2 style="font-size:24px;">Indicação</h2>
            </div>
            <label class="field-full">Código de indicação
              <input class="input" id="indicador" value="<?= htmlspecialchars($ref, ENT_QUOTES, 'UTF-8') ?>" maxlength="20">
            </label>
            <div id="indicadorStatus" class="alert" style="margin-top:10px;"></div>

            <label style="display:flex;gap:10px;align-items:flex-start;margin:18px 0;color:#344054;font-weight:700;">
              <input id="termos" type="checkbox" style="margin-top:3px;">
              <span>Li e aceito os Termos de Uso da plataforma Bulo.</span>
            </label>

            <button id="submit" class="btn btn-primary" style="width:100%;border-radius:8px;" type="submit">Criar cadastro</button>
          </form>
        </section>
      </div>
    </section>
  </main>

  <footer class="site-footer">
    <div class="site-shell footer-inner">
      <span>Bulo Cadastro</span>
      <nav class="footer-links" aria-label="Redes sociais">
        <a href="https://www.instagram.com/bulo.app/" target="_blank" rel="noopener">Instagram</a>
        <a href="https://www.facebook.com/bulo.app/" target="_blank" rel="noopener">Facebook</a>
      </nav>
    </div>
  </footer>
  <script src="../assets/site/site.js"></script>
  <script>
    const initialRef = <?= json_encode($ref, JSON_UNESCAPED_UNICODE) ?>;
    let tipo = 'passageiro';
    let indicadorTimer = null;

    const qs = (selector) => document.querySelector(selector);
    const alertBox = qs('#alert');
    const form = qs('#cadastroForm');
    const submit = qs('#submit');
    const indicador = qs('#indicador');
    const indicadorStatus = qs('#indicadorStatus');

    function onlyDigits(value) {
      return (value || '').replace(/\D+/g, '');
    }

    function showAlert(text, ok = false) {
      alertBox.textContent = text;
      alertBox.className = `alert show ${ok ? 'ok' : 'error'}`;
      alertBox.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    }

    function setTipo(next) {
      tipo = next;
      qs('#tipo').value = tipo;
      document.body.classList.toggle('driver', tipo === 'motorista');
      qs('#nomeCompletoWrap').style.display = tipo === 'motorista' ? 'none' : 'grid';
      document.querySelectorAll('.choice button').forEach((button) => {
        button.classList.toggle('active', button.dataset.type === tipo);
      });
      verificarIndicador();
    }

    function gerarCodigo() {
      const letters = 'abcdefghijklmnopqrstuvwxyz';
      const numbers = '0123456789';
      let code = '';
      for (let i = 0; i < 4; i += 1) code += letters[Math.floor(Math.random() * letters.length)];
      for (let i = 0; i < 3; i += 1) code += numbers[Math.floor(Math.random() * numbers.length)];
      return code;
    }

    async function gerarCodigoDisponivel() {
      for (let i = 0; i < 8; i += 1) {
        const codigoind = gerarCodigo();
        const response = await fetch('../auth/check_codigoind.php', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ codigoind }),
        });
        const data = await response.json();
        if (data.disponivel === true) return codigoind;
      }
      throw new Error('Não foi possível gerar um código de indicação. Tente novamente.');
    }

    function validarCpf(cpf) {
      cpf = onlyDigits(cpf);
      if (cpf.length !== 11 || /^(\d)\1{10}$/.test(cpf)) return false;
      const nums = cpf.split('').map(Number);
      for (let t = 9; t < 11; t += 1) {
        let sum = 0;
        for (let i = 0; i < t; i += 1) sum += nums[i] * ((t + 1) - i);
        let digit = (sum * 10) % 11;
        if (digit === 10) digit = 0;
        if (nums[t] !== digit) return false;
      }
      return true;
    }

    function validar() {
      const cpf = onlyDigits(qs('#cpf').value);
      const celular = onlyDigits(qs('#celular').value);
      const senha = qs('#senha').value;

      if (tipo === 'motorista') {
        if (qs('#primeiroNome').value.trim().length < 2) return 'Informe o nome com pelo menos 2 caracteres.';
        if (qs('#sobrenome').value.trim().length < 2) return 'Informe o sobrenome com pelo menos 2 caracteres.';
      } else if (qs('#nomeCompleto').value.trim().length < 3) {
        return 'Informe o nome completo.';
      }
      if (!validarCpf(cpf)) return 'CPF inválido. Confira os números informados.';
      if (!/^\d{10,11}$/.test(celular)) return 'Celular inválido. Informe DDD + número.';
      if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(qs('#email').value.trim())) return 'E-mail inválido.';

      if (tipo === 'motorista') {
        if (!/^\d{8}$/.test(onlyDigits(qs('#cep').value))) return 'CEP inválido. Informe 8 números.';
        if (!qs('#logradouro').value.trim()) return 'Informe o endereço.';
        if (!qs('#enderecoNumero').value.trim()) return 'Informe o número do endereço.';
        if (!qs('#bairro').value.trim()) return 'Informe o bairro.';
        if (!qs('#cidade').value.trim()) return 'Informe a cidade.';
        if (!/^[A-Z]{2}$/i.test(qs('#uf').value.trim())) return 'UF invalida.';
      }

      if (senha.length < 8) return 'A senha precisa ter no mínimo 8 caracteres.';
      if (senha !== qs('#repetirSenha').value) return 'As senhas não coincidem.';
      if (!qs('#termos').checked) return 'Você precisa aceitar os Termos de Uso.';
      return null;
    }

    async function verificarIndicador() {
      const codigo = indicador.value.trim().toUpperCase();
      indicador.value = codigo;
      indicadorStatus.className = 'alert';
      indicadorStatus.textContent = '';
      if (!codigo) return;

      try {
        const response = await fetch('../auth/get_indicador_nome.php', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ codigoind: codigo, tipo_indicado: tipo }),
        });
        const data = await response.json();
        indicadorStatus.textContent = data.success === true
          ? `Você está sendo indicado por ${data.nome}.`
          : (data.message || 'Código de indicação não encontrado.');
        indicadorStatus.className = `alert show ${data.success === true ? 'ok' : 'error'}`;
      } catch (_) {
        indicadorStatus.textContent = 'Não foi possível validar o código agora.';
        indicadorStatus.className = 'alert show error';
      }
    }

    async function buscarCep() {
      const cep = onlyDigits(qs('#cep').value);
      if (cep.length !== 8) return;
      try {
        const response = await fetch(`https://viacep.com.br/ws/${cep}/json/`);
        const data = await response.json();
        if (data.erro) return;
        qs('#logradouro').value = data.logradouro || '';
        qs('#bairro').value = data.bairro || '';
        qs('#cidade').value = data.localidade || '';
        qs('#uf').value = data.uf || '';
      } catch (_) {
        showAlert('Não foi possível buscar o CEP agora.');
      }
    }

    function payload(codigoind) {
      const base = {
        cpf: qs('#cpf').value,
        email: qs('#email').value.trim(),
        celular: qs('#celular').value,
        senha: qs('#senha').value,
        indicador: indicador.value.trim() || null,
        codigoind,
        tipo,
      };

      if (tipo === 'motorista') {
        return {
          ...base,
          primeiro_nome: qs('#primeiroNome').value.trim(),
          sobrenome: qs('#sobrenome').value.trim(),
          cep: qs('#cep').value,
          endereco_logradouro: qs('#logradouro').value.trim(),
          endereco_numero: qs('#enderecoNumero').value.trim(),
          endereco_complemento: qs('#complemento').value.trim(),
          endereco_bairro: qs('#bairro').value.trim(),
          endereco_cidade: qs('#cidade').value.trim(),
          endereco_uf: qs('#uf').value.trim().toUpperCase(),
        };
      }

      return {
        ...base,
        nome: qs('#nomeCompleto').value.trim(),
        tipo: 'passageiro',
      };
    }

    form.addEventListener('submit', async (event) => {
      event.preventDefault();
      alertBox.className = 'alert';
      const erro = validar();
      if (erro) {
        showAlert(erro);
        return;
      }

      submit.disabled = true;
      submit.textContent = 'Criando cadastro...';
      try {
        const codigoind = await gerarCodigoDisponivel();
        const endpoint = tipo === 'motorista' ? '../auth/register_motorista.php' : '../auth/register.php';
        const response = await fetch(endpoint, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(payload(codigoind)),
        });
        const data = await response.json();
        if (response.ok && data.success === true) {
          form.reset();
          indicador.value = initialRef || '';
          showAlert('Cadastro criado com sucesso. Agora você já pode entrar pelo app Bulo.', true);
        } else {
          showAlert(data.message || 'Não foi possível criar o cadastro.');
        }
      } catch (error) {
        showAlert(error.message || 'Erro ao enviar cadastro.');
      } finally {
        submit.disabled = false;
        submit.textContent = 'Criar cadastro';
      }
    });

    document.querySelectorAll('.choice button').forEach((button) => {
      button.addEventListener('click', () => setTipo(button.dataset.type));
    });
    indicador.addEventListener('input', () => {
      clearTimeout(indicadorTimer);
      indicadorTimer = setTimeout(verificarIndicador, 420);
    });
    qs('#cep').addEventListener('input', buscarCep);
    qs('#uf').addEventListener('input', (event) => {
      event.target.value = event.target.value.toUpperCase();
    });

    setTipo('passageiro');
    if (initialRef) verificarIndicador();
  </script>
</body>
</html>
