<?php
require_once __DIR__ . '/auth.php';
require_once __DIR__ . '/../includes/layout.php';
admin_require_auth();

$db    = get_db();
$error = '';
$msg   = '';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $title       = trim($_POST['title'] ?? '');
    $description = trim($_POST['description'] ?? '');
    $duration    = (int)($_POST['duration'] ?? 0);
    $sort_order  = (int)($_POST['sort_order'] ?? 0);
    $published   = isset($_POST['published']) ? 1 : 0;

    if (!$title) {
        $error = 'Title is required.';
    } else {
        $slug = make_slug($title);

        // Handle thumbnail upload
        $thumbnail = '';
        if (!empty($_FILES['thumbnail']['tmp_name'])) {
            $ext  = strtolower(pathinfo($_FILES['thumbnail']['name'], PATHINFO_EXTENSION));
            $allowed = ['jpg','jpeg','png','webp','gif'];
            if (in_array($ext, $allowed)) {
                $thumb_dir = MEDIA_DIR . 'thumbs/';
                if (!is_dir($thumb_dir)) mkdir($thumb_dir, 0755, true);
                $fname = $slug . '_thumb_' . time() . '.' . $ext;
                if (move_uploaded_file($_FILES['thumbnail']['tmp_name'], $thumb_dir . $fname)) {
                    $thumbnail = 'thumbs/' . $fname;
                }
            } else {
                $error = 'Thumbnail must be JPG, PNG, WebP, or GIF.';
            }
        }

        if (!$error) {
            // Insert video
            $db->prepare("
                INSERT INTO videos (title, description, slug, thumbnail, duration, sort_order, published)
                VALUES (?, ?, ?, ?, ?, ?, ?)
            ")->execute([$title, $description, $slug, $thumbnail, $duration, $sort_order, $published]);

            $video_id = (int)$db->lastInsertId();

            // Handle video source files
            $source_labels  = $_POST['source_label']   ?? [];
            $source_quality = $_POST['source_quality']  ?? [];
            $source_order   = $_POST['source_sort']     ?? [];
            $source_files   = $_FILES['source_file']    ?? [];

            $videos_dir = MEDIA_DIR . 'videos/';
            if (!is_dir($videos_dir)) mkdir($videos_dir, 0755, true);

            $inserted_sources = 0;
            $allowed_video = ['mp4','webm','ogv','ogg','mov','mkv','avi'];

            if (!empty($source_files['tmp_name'])) {
                foreach ($source_files['tmp_name'] as $i => $tmp) {
                    if (empty($tmp) || !is_uploaded_file($tmp)) continue;
                    $orig_name = $source_files['name'][$i];
                    $ext = strtolower(pathinfo($orig_name, PATHINFO_EXTENSION));
                    if (!in_array($ext, $allowed_video)) continue;

                    $fname = $slug . '_' . ($i+1) . '_' . time() . '.' . $ext;
                    if (move_uploaded_file($tmp, $videos_dir . $fname)) {
                        $label   = trim($source_labels[$i] ?? '');
                        $quality = trim($source_quality[$i] ?? '');
                        $mime    = mime_from_ext($fname);
                        $sort    = (int)($source_order[$i] ?? $i);
                        $db->prepare("
                            INSERT INTO video_sources (video_id, label, file_path, mime_type, quality, sort_order)
                            VALUES (?,?,?,?,?,?)
                        ")->execute([$video_id, $label, 'videos/' . $fname, $mime, $quality, $sort]);
                        $inserted_sources++;
                    }
                }
            }

            header('Location: edit.php?id=' . $video_id . '&saved=1');
            exit;
        }
    }
}

render_head('Add Video — Admin', '
  .form-grid { display:grid; grid-template-columns:1fr; gap:1.2rem; }
  @media(min-width:700px) { .form-grid { grid-template-columns:1fr 1fr; } }
  .form-grid .span2 { grid-column:1/-1; }

  .sources-section { display:flex; flex-direction:column; gap:.85rem; }
  .source-row {
    background:var(--surface-2); border:1px solid var(--border);
    border-radius:var(--r); padding:1rem;
    display:grid; grid-template-columns:1fr 1fr 1fr auto;
    gap:.75rem; align-items:end;
  }
  @media(max-width:700px) { .source-row { grid-template-columns:1fr 1fr; } }
  .add-source-btn { align-self:flex-start; }

  .section-divider {
    border:none; border-top:1px solid var(--border); margin:1.5rem 0 .5rem;
  }
  .section-heading {
    font-family:"Share Tech Mono",monospace; font-size:.65rem;
    letter-spacing:.15em; text-transform:uppercase; color:var(--text-3);
    margin-bottom:.75rem;
  }
  .hint { font-size:.72rem; color:var(--text-3); margin-top:.2rem; }

  .admin-layout { display:grid; grid-template-columns:1fr; gap:1.5rem; }
  @media(min-width:900px) { .admin-layout { grid-template-columns:220px 1fr; } }
  .admin-nav {
    background:var(--surface); border:1px solid var(--border);
    border-radius:calc(var(--r)+2px); padding:1.2rem;
    display:flex; flex-direction:column; gap:.4rem;
    align-self:start; position:sticky; top:1rem;
  }
  .admin-nav-label { font-family:"Share Tech Mono",monospace; font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; color:var(--text-3); margin-bottom:.3rem; padding-left:.5rem; }
  .admin-nav a { display:flex; align-items:center; gap:.6rem; padding:.55rem .75rem; border-radius:var(--r); font-size:.82rem; color:var(--text-2); text-decoration:none; transition:background .15s,color .15s; }
  .admin-nav a:hover { background:rgba(255,255,255,.05); color:var(--text); }
  .admin-nav a.active { background:rgba(176,96,255,.12); color:var(--purple); }
  .nav-divider { border:none; border-top:1px solid var(--border); margin:.4rem 0; }
');
?>
<main class="page" role="main">
  <header class="topbar">
    <div class="topbar-brand">
      <div>
        <div class="brand-name">Ty Clifford</div>
        <div class="brand-sub">admin / add video</div>
      </div>
    </div>
    <nav class="topbar-social">
      <a class="social-pill" href="../index.php" target="_blank">
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"/><polyline points="15,3 21,3 21,9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
        View Site
      </a>
      <a class="social-pill" href="logout.php">
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4"/><polyline points="16,17 21,12 16,7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
        Logout
      </a>
    </nav>
  </header>

  <?php if ($error): ?>
    <div class="notice notice-error"><?= h($error) ?></div>
  <?php endif; ?>

  <div class="admin-layout">
    <aside class="admin-nav">
      <div class="admin-nav-label">Navigation</div>
      <a href="index.php">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
        Videos
      </a>
      <a href="add.php" class="active">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="16"/><line x1="8" y1="12" x2="16" y2="12"/></svg>
        Add Video
      </a>
      <hr class="nav-divider">
      <a href="settings.php">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93l-1.41 1.41M4.93 4.93l1.41 1.41M19.07 19.07l-1.41-1.41M4.93 19.07l1.41-1.41M12 2v2M12 20v2M2 12h2M20 12h2"/></svg>
        Settings
      </a>
    </aside>

    <div>
      <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem;flex-wrap:wrap;gap:.75rem;">
        <div>
          <p class="eyebrow eyebrow-purple" style="margin-bottom:.3rem">New Entry</p>
          <h1 style="font-size:1.05rem;font-weight:700;color:var(--text);">Add Video</h1>
        </div>
        <a href="index.php" class="btn btn-secondary btn-sm">← Back</a>
      </div>

      <form method="post" action="add.php" enctype="multipart/form-data">

        <!-- ── Video details ── -->
        <div class="card" style="margin-bottom:1rem;">
          <p class="section-heading">Video Details</p>
          <div class="form-grid">
            <div class="form-group span2">
              <label class="form-label" for="title">Title *</label>
              <input class="form-input" type="text" id="title" name="title"
                     value="<?= h($_POST['title'] ?? '') ?>" required placeholder="My Awesome Video">
            </div>
            <div class="form-group span2">
              <label class="form-label" for="description">Description</label>
              <textarea class="form-textarea" id="description" name="description" rows="3"><?= h($_POST['description'] ?? '') ?></textarea>
            </div>
            <div class="form-group">
              <label class="form-label" for="duration">Duration (seconds)</label>
              <input class="form-input" type="number" id="duration" name="duration"
                     value="<?= h($_POST['duration'] ?? '0') ?>" min="0" placeholder="0">
              <span class="hint">e.g. 3600 = 1 hour. Leave 0 if unknown.</span>
            </div>
            <div class="form-group">
              <label class="form-label" for="sort_order">Sort Order</label>
              <input class="form-input" type="number" id="sort_order" name="sort_order"
                     value="<?= h($_POST['sort_order'] ?? '0') ?>" min="0">
              <span class="hint">Lower numbers appear first.</span>
            </div>
            <div class="form-group">
              <label class="form-label" for="thumbnail">Thumbnail Image</label>
              <input class="form-input" type="file" id="thumbnail" name="thumbnail"
                     accept="image/jpeg,image/png,image/webp,image/gif" style="padding:.45rem .6rem;">
              <span class="hint">JPG, PNG, WebP or GIF. Shown as 16:9 preview.</span>
            </div>
            <div class="form-group" style="justify-content:flex-end;padding-bottom:.2rem;">
              <label style="display:flex;align-items:center;gap:.6rem;cursor:pointer;">
                <input type="checkbox" name="published" value="1" <?= isset($_POST['published']) || !isset($_POST['title']) ? 'checked' : '' ?>>
                <span class="form-label" style="margin:0">Published</span>
              </label>
              <span class="hint">Uncheck to save as draft.</span>
            </div>
          </div>
        </div>

        <!-- ── Video sources ── -->
        <div class="card">
          <p class="section-heading">Video Sources (Multiple Formats)</p>
          <p class="hint" style="margin-bottom:1rem;">
            Upload the same video in multiple formats/qualities. The browser will automatically pick the best one it can play.
            Accepted: <strong>MP4, WebM, OGV, MOV, MKV, AVI</strong>.
          </p>

          <div class="sources-section" id="sources-container">
            <!-- Row template (JS clones this) -->
            <div class="source-row" data-source-row="0">
              <div class="form-group">
                <label class="form-label">Video File</label>
                <input class="form-input" type="file" name="source_file[]"
                       accept="video/mp4,video/webm,video/ogg,.mp4,.webm,.ogv,.mov,.mkv,.avi"
                       style="padding:.45rem .6rem;">
              </div>
              <div class="form-group">
                <label class="form-label">Quality Label</label>
                <select class="form-select" name="source_quality[]">
                  <option value="1080p">1080p</option>
                  <option value="720p" selected>720p</option>
                  <option value="480p">480p</option>
                  <option value="360p">360p</option>
                  <option value="4K">4K</option>
                  <option value="">—</option>
                </select>
              </div>
              <div class="form-group">
                <label class="form-label">Display Label</label>
                <input class="form-input" type="text" name="source_label[]" placeholder="e.g. HD">
              </div>
              <div class="form-group">
                <label class="form-label">Sort</label>
                <input class="form-input" type="number" name="source_sort[]" value="0" min="0" style="width:70px;">
              </div>
            </div>
          </div>

          <button type="button" class="btn btn-secondary btn-sm add-source-btn" id="add-source" style="margin-top:.75rem;align-self:flex-start;">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
            Add Another Format
          </button>
        </div>

        <div style="display:flex;gap:.75rem;margin-top:1rem;flex-wrap:wrap;">
          <button class="btn btn-primary" type="submit">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h11l5 5v11a2 2 0 01-2 2z"/><polyline points="17,21 17,13 7,13 7,21"/><polyline points="7,3 7,8 15,8"/></svg>
            Save Video
          </button>
          <a href="index.php" class="btn btn-secondary">Cancel</a>
        </div>

      </form>
    </div>
  </div>

  <?php render_footer(); ?>
</main>

<script>
document.getElementById('add-source').addEventListener('click', function() {
  var container = document.getElementById('sources-container');
  var rows = container.querySelectorAll('[data-source-row]');
  var idx  = rows.length;
  var first = rows[0].cloneNode(true);
  first.setAttribute('data-source-row', idx);
  // Clear file inputs (can't clone values for file inputs)
  first.querySelectorAll('input[type="file"]').forEach(function(el){ el.value=''; });
  first.querySelectorAll('input[type="text"]').forEach(function(el){ el.value=''; });
  first.querySelectorAll('input[type="number"]').forEach(function(el){ el.value=idx; });
  // Add remove button if not already there
  if (!first.querySelector('.remove-row')) {
    var btn = document.createElement('button');
    btn.type='button';
    btn.className='btn btn-danger btn-sm remove-row';
    btn.style='align-self:flex-end';
    btn.innerHTML='✕';
    btn.onclick=function(){ this.closest('[data-source-row]').remove(); };
    first.appendChild(btn);
  }
  container.appendChild(first);
});
</script>
</body>
</html>