<?php
// views/pages/grupos_whatsapp.php

// Boot & middlewares
require_once __DIR__ . '/../../app/config.php';
require_once __DIR__ . '/../../app/db.php';
require_once __DIR__ . '/../../app/auth_middleware.php';
require_once __DIR__ . '/components/tutorial.php';

require_auth_or_redirect();

// Dados do usuário logado
$userId    = $_SESSION['user']['id']    ?? null;
$userEmail = isset($_SESSION['user']['email']) ? trim((string)$_SESSION['user']['email']) : null;

// Busca licença do Extrator de Grupos em public.auth_users
$licencaGrupos = '';
$row = null;

try {
  $pdo = db();

  // 1) Tenta por ID (int ou uuid)
  if (!empty($userId)) {
    $q = $pdo->prepare("SELECT licenca_grupos_extrator FROM public.auth_users WHERE id::text = :id::text LIMIT 1");
    $q->execute([':id' => (string)$userId]);
    $row = $q->fetch(PDO::FETCH_ASSOC);
  }

  // 2) Fallback por e-mail
  if (empty($row) && !empty($userEmail)) {
    $q = $pdo->prepare("SELECT licenca_grupos_extrator FROM public.auth_users WHERE email = :email LIMIT 1");
    $q->execute([':email' => $userEmail]);
    $row = $q->fetch(PDO::FETCH_ASSOC);
  }

  if (!empty($row['licenca_grupos_extrator'])) {
    $licencaGrupos = (string)$row['licenca_grupos_extrator'];
  }
} catch (Throwable $e) {
  // error_log('grupos_whatsapp.php: '.$e->getMessage());
}

$safeLicense = htmlspecialchars($licencaGrupos, ENT_QUOTES, 'UTF-8');

// URLs (ajuste conforme suas rotas reais)
$copyPageUrl   = 'index.php?page=copiar_extensao_grupos_whatsapp'; // se tiver uma página interna
$tutorialVideo = 'https://youtu.be/3lHLPH0zoTQ';                // troque pelo seu
$pageLink      = 'https://iaevolua.com/copiar-extensao-extrator-grupos/';  // troque pelo seu link real
?>

<!-- Componente Tutorial -->
<div class="mb-4 sm:mb-6">
<?= tutorial_component([
  'id'        => 'grupos_whatsapp',
  'title'     => 'Extrator de Grupos WhatsApp',
  'button'    => 'Ver tutorial',
  'video'     => $tutorialVideo,
  'spotlight' => true
]); ?>
</div>

<div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-6">
  <div class="flex items-center justify-between">
    <div>
      <h2 class="text-xl font-semibold">Extrator de Grupos WhatsApp</h2>
      <p class="text-sm text-gray-500 dark:text-gray-400">
        Acesse a página para copiar o instalador e usar o extrator.
      </p>
    </div>
  </div>

  <!-- Botão central -->
  <div class="mt-6">
    <div class="flex justify-center">
      <a href="<?= htmlspecialchars($pageLink, ENT_QUOTES, 'UTF-8'); ?>"
         target="_blank" rel="noopener noreferrer"
         class="inline-flex items-center justify-center rounded-xl px-5 py-3 text-sm font-medium
                bg-emerald-600 hover:bg-emerald-700 text-white">
        Acessar página para copiar extensão
      </a>
    </div>

    <!-- Se você quiser também mostrar o link interno (opcional) -->
    <!--
    <div class="mt-3 flex justify-center">
      <a href="<?= htmlspecialchars($copyPageUrl, ENT_QUOTES, 'UTF-8'); ?>"
         class="text-xs text-indigo-600 hover:text-indigo-700 dark:text-indigo-400 dark:hover:text-indigo-300">
        Abrir página interna de cópia
      </a>
    </div>
    -->
  </div>

  <!-- Bloco da licença -->
  <div class="mt-6 rounded-xl border border-gray-200 dark:border-gray-800 p-4 bg-gray-50 dark:bg-gray-950">
    <h3 class="font-medium mb-2">Sua chave de licença</h3>

    <div class="grid gap-2">
      <label class="text-xs text-gray-500 dark:text-gray-400">Extrator de Grupos</label>

      <?php if ($safeLicense !== ''): ?>
        <div class="flex flex-col sm:flex-row gap-2 items-stretch sm:items-center">
          <div class="relative flex-1">
            <input id="licenseInput"
                   type="text"
                   value="<?= $safeLicense; ?>"
                   readonly
                   class="w-full rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-950 px-3 py-2 pr-24 text-sm select-all">
            <button id="btnToggleMask"
                    type="button"
                    class="absolute right-2 top-1/2 -translate-y-1/2 text-xs rounded-md border border-gray-300 dark:border-gray-700 px-2 py-1 bg-white dark:bg-gray-900">
              Ocultar
            </button>
          </div>

          <button id="btnCopy"
                  type="button"
                  class="rounded-lg bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 text-sm">
            Copiar chave
          </button>
        </div>
        <p id="copyMsg" class="text-xs text-gray-500 mt-1"></p>
      <?php else: ?>
        <div class="rounded-lg border border-amber-300 bg-amber-50 text-amber-900 px-3 py-2 text-sm">
          Nenhuma chave cadastrada para o Extrator de Grupos.
        </div>
      <?php endif; ?>
    </div>
  </div>
</div>

<script>
// Copiar
const btnCopy = document.getElementById('btnCopy');
const copyMsg = document.getElementById('copyMsg');
const input   = document.getElementById('licenseInput');
const btnMask = document.getElementById('btnToggleMask');

if (btnCopy && input) {
  btnCopy.addEventListener('click', async () => {
    try {
      input.select();
      input.setSelectionRange(0, input.value.length);

      // tenta clipboard API
      await navigator.clipboard.writeText(input.value);

      if (copyMsg) {
        copyMsg.textContent = 'Chave copiada!';
        setTimeout(() => copyMsg.textContent = '', 1500);
      }
    } catch {
      // fallback simples
      try {
        document.execCommand('copy');
        if (copyMsg) {
          copyMsg.textContent = 'Chave copiada!';
          setTimeout(() => copyMsg.textContent = '', 1500);
        }
      } catch {
        if (copyMsg) {
          copyMsg.textContent = 'Não foi possível copiar automaticamente. Selecione e copie manualmente.';
          setTimeout(() => copyMsg.textContent = '', 2500);
        }
      }
    }
  });
}

// Ocultar/mostrar
if (btnMask && input) {
  let masked = false;
  const original = input.value;

  function mask(str) {
    if (!str) return '';
    if (str.length <= 8) return '*'.repeat(Math.max(0, str.length - 2));
    const start = str.slice(0, 4);
    const end   = str.slice(-4);
    return `${start}${'*'.repeat(Math.max(0, str.length - 8))}${end}`;
  }

  btnMask.addEventListener('click', () => {
    masked = !masked;
    if (masked) {
      input.value = mask(original);
      btnMask.textContent = 'Mostrar';
    } else {
      input.value = original;
      btnMask.textContent = 'Ocultar';
    }
  });
}
</script>