<?php
require_once __DIR__ . '/config/bootstrap.php';
$pdo = db();

$brandName = app_config_get($pdo, 'brand_name', 'FrameBuilder');
$brandUrl  = app_config_get($pdo, 'brand_url', '');
$brandLogo = app_config_get($pdo, 'brand_logo', '');
?>
<!doctype html>
<html lang="pt-br">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title><?= htmlspecialchars($brandName); ?></title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="assets/css/style.css" rel="stylesheet">
</head>
<body class="bg-light">
<div class="container py-4">
  <div class="d-flex align-items-center justify-content-between mb-3 header-brand">
    <div class="d-flex align-items-center gap-3">
      <?php if (!empty($brandLogo)): ?>
        <div class="lh-sm">
          <?php if (!empty($brandUrl)): ?>
            <a href="<?= htmlspecialchars($brandUrl); ?>" target="_blank" class="brand-logo-link">
              <img src="<?= htmlspecialchars($brandLogo); ?>" class="brand-logo" alt="Logo">
            </a>
          <?php else: ?>
            <img src="<?= htmlspecialchars($brandLogo); ?>" class="brand-logo" alt="Logo">
          <?php endif; ?>
          <div class="text-muted small mt-1">Gerador de Frames (Status/Stories)</div>
        </div>
      <?php else: ?>
        <div class="lh-sm">
          <h3 class="m-0"><?= htmlspecialchars($brandName); ?></h3>
          <div class="text-muted small">Gerador de Frames (Status/Stories)</div>
        </div>
      <?php endif; ?>
    </div>

    <a href="admin/login.php" class="btn btn-outline-dark btn-sm">Administrativo</a>
  </div>

  <div id="clientNoToken" class="d-none">
    <div class="alert alert-warning">
      Link do evento não informado. Abra esta página usando o token fornecido pelo administrador.
    </div>
  </div>

  <div id="clientFormWrap" class="row g-4">
    <div class="col-lg-5">
      <div class="card shadow-sm">
        <div class="card-body">
          <h5 id="eventTitle" class="mb-1">Evento</h5>
          <div id="eventMeta" class="text-muted small mb-3">—</div>

          <div class="mb-3">
            <label class="form-label">Nome</label>
            <input type="text" id="nome" class="form-control" placeholder="Seu nome" autocomplete="name">
            <div id="nomeHelp" class="form-text">—</div>
          </div>

          <div class="mb-3">
            <label class="form-label">Sua foto (JPG/PNG)</label>
            <input type="file" id="foto" class="form-control" accept="image/*">
          </div>

          <button id="btnGerar" class="btn btn-primary w-100">Gerar e salvar</button>

          <div id="serverLink" class="mt-3 d-none">
            <a id="serverLinkA" class="btn btn-outline-success w-100" target="_blank">Abrir imagem gerada</a>
          </div>

          <hr class="my-4">
          <div class="small text-muted">
            <ul class="mb-0">
              <li>Foto recortada em círculo automaticamente</li>
              <li>Imagem final em PNG</li>
              <li>Tamanho 1080×1920 (Status/Stories)</li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <div class="col-lg-7">
      <div class="card shadow-sm">
        <div class="card-body">
          <div class="d-flex justify-content-between align-items-center mb-3">
            <h5 class="m-0">Preview</h5>
            <div class="d-flex gap-2">
              <a id="downloadLink" class="btn btn-success btn-sm" download="frame.png">Baixar PNG (preview)</a>
            </div>
          </div>
          <div class="preview-area">
            <img id="previewImg" class="img-fluid rounded" alt="Preview do Frame">
          </div>
          <canvas id="canvas" class="d-none"></canvas>
        </div>
      </div>
    </div>
  </div>

</div>

<script src="assets/js/renderer.js"></script>
<script src="assets/js/client.js"></script>
</body>
</html>
