<?php
require_once __DIR__ . '/includes/bootstrap.php';
$config = load_config();
?><!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title><?= e($config['siteTitle'] ?? 'City Boy Movement Photo Frame') ?></title>
  <link rel="stylesheet" href="assets/app.css" />
</head>
<body>
  <div class="app">
    <div class="topbar">
      <div>
        <h1><?= e($config['siteTitle'] ?? 'City Boy Movement Photo Frame') ?></h1>
        <p>Upload photo, use phone camera, drag, zoom, and download PNG.</p>
      </div>
      <a class="admin-link" href="admin/">Developer Admin</a>
    </div>

    <div class="layout">
      <div class="panel">
        <div class="panel-header">
          <h2>Upload & Customize</h2>
          <p>Use upload or open your phone camera to capture a live picture.</p>
        </div>
        <div class="panel-body">
          <div class="grid-2">
            <label class="file-btn" for="mediaUpload">Upload Photo</label>
            <label class="file-btn secondary" for="cameraCapture">Use Camera</label>
          </div>
          <input id="mediaUpload" class="hidden-input" type="file" accept="image/*" />
          <input id="cameraCapture" class="hidden-input" type="file" accept="image/*" capture />

          <div class="progress"><span id="uploadProgressBar"></span></div>
          <div class="status" id="uploadStatus">No photo selected yet.</div>

          <div class="section-title">Frame Template</div>
          <div class="template-grid" id="templateGrid"></div>

          <div class="section-title">Position &amp; Scale</div>
          <div class="field">
            <label for="zoomRange">Zoom</label>
            <input id="zoomRange" type="range" min="0.6" max="3" step="0.01" value="1" />
          </div>
          <div class="field">
            <label for="xRange">Move Left / Right</label>
            <input id="xRange" type="range" min="-700" max="700" step="1" value="0" />
          </div>
          <div class="field">
            <label for="yRange">Move Up / Down</label>
            <input id="yRange" type="range" min="-800" max="800" step="1" value="0" />
          </div>

          <div class="grid-2">
            <button class="btn secondary" id="resetBtn">Reset Position</button>
            <button class="btn secondary" id="fitBtn">Default Fit</button>
          </div>

          <div class="section-title">Export</div>
          <button class="btn success" id="downloadPngBtn">Download PNG</button>
          <div class="progress"><span id="exportProgressBar"></span></div>
          <div class="status" id="exportStatus">Ready for download.</div>
        </div>
      </div>

      <div class="panel">
        <div class="panel-header">
          <h2>Live Preview</h2>
          <p>Drag directly on the preview to reposition your photo.</p>
        </div>
        <div class="preview-shell">
          <div class="preview-stage">
            <canvas id="previewCanvas" width="1080" height="1350"></canvas>
          </div>
        </div>
      </div>
    </div>

    <footer class="footer-text"><?= e($config['footerText'] ?? '') ?></footer>
  </div>

  <script>
    window.CITY_BOY_CONFIG = <?= json_encode([
      'frames' => array_values(array_filter($config['frames'] ?? [], fn($f) => !empty($f['active']))),
    ], JSON_UNESCAPED_SLASHES) ?>;
  </script>
  <script src="assets/app.js"></script>
</body>
</html>
