<?php
// index.php — Jalankan: php -S localhost:3000
// Requirement: PHP 8.0+ dengan ekstensi pdo_sqlite & fileinfo

declare(strict_types=1);
session_start();

const UPLOAD_DIR = __DIR__ . '/uploads';
const MAX_SIZE_MB = 1024;
const DB_FILE = __DIR__ . '/media.db';

if (!is_dir(UPLOAD_DIR)) mkdir(UPLOAD_DIR, 0755, true);

// ===== Database =====
$db = new PDO('sqlite:' . DB_FILE);
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$db->exec('PRAGMA journal_mode = WAL');
$db->exec("
  CREATE TABLE IF NOT EXISTS users (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    username TEXT UNIQUE NOT NULL,
    password TEXT NOT NULL,
    created_at INTEGER NOT NULL
  );
  CREATE TABLE IF NOT EXISTS media (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    owner_id INTEGER NOT NULL,
    owner_name TEXT NOT NULL,
    visibility TEXT NOT NULL CHECK(visibility IN ('public','private')),
    filename TEXT NOT NULL,
    original_name TEXT NOT NULL,
    mime_type TEXT NOT NULL,
    size INTEGER NOT NULL,
    created_at INTEGER NOT NULL,
    FOREIGN KEY (owner_id) REFERENCES users(id)
  );
  CREATE INDEX IF NOT EXISTS idx_owner ON media(owner_id);
  CREATE INDEX IF NOT EXISTS idx_visibility ON media(visibility);
");

// ===== Helpers =====
function json_out($data, int $code = 200): void {
    http_response_code($code);
    header('Content-Type: application/json; charset=utf-8');
    echo json_encode($data);
    exit;
}
function current_user(): ?array {
    if (empty($_SESSION['user_id'])) return null;
    return ['id' => (int)$_SESSION['user_id'], 'username' => $_SESSION['username']];
}
function auth_required(): array {
    $u = current_user();
    if (!$u) json_out(['error' => 'Belum login'], 401);
    return $u;
}
function format_size(int $b): string {
    if ($b < 1024 * 1024) return number_format($b / 1024, 1) . ' KB';
    return number_format($b / (1024 * 1024), 2) . ' MB';
}

$path = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH);
$method = $_SERVER['REQUEST_METHOD'];

// ===== Serve uploaded file (private check) =====
if (preg_match('#^/uploads/([a-f0-9]+\.[A-Za-z0-9]+)$#', $path, $m)) {
    $file = UPLOAD_DIR . '/' . $m[1];
    if (!is_file($file)) { http_response_code(404); exit('Not found'); }
    $row = $db->prepare('SELECT * FROM media WHERE filename = ?');
    $row->execute([$m[1]]);
    $item = $row->fetch(PDO::FETCH_ASSOC);
    if (!$item) { http_response_code(404); exit('Not found'); }
    if ($item['visibility'] === 'private') {
        $u = current_user();
        if (!$u || $u['id'] !== (int)$item['owner_id']) {
            http_response_code(403); exit('Forbidden');
        }
    }
    $mime = $item['mime_type'] ?: 'application/octet-stream';
    header('Content-Type: ' . $mime);
    header('Content-Length: ' . filesize($file));
    header('Accept-Ranges: bytes');
    readfile($file);
    exit;
}

// ===== API Routes =====
if (str_starts_with($path, '/api/')) {

    // --- Auth ---
    if ($path === '/api/register' && $method === 'POST') {
        $body = json_decode(file_get_contents('php://input'), true) ?: [];
        $username = trim($body['username'] ?? '');
        $password = $body['password'] ?? '';
        if (!$username || !$password) json_out(['error' => 'Username & password wajib'], 400);
        if (mb_strlen($username) < 3) json_out(['error' => 'Username minimal 3 karakter'], 400);
        if (strlen($password) < 4) json_out(['error' => 'Password minimal 4 karakter'], 400);
        try {
            $stmt = $db->prepare('INSERT INTO users (username, password, created_at) VALUES (?, ?, ?)');
            $stmt->execute([$username, password_hash($password, PASSWORD_BCRYPT), time()]);
            $id = (int)$db->lastInsertId();
            $_SESSION['user_id'] = $id;
            $_SESSION['username'] = $username;
            json_out(['id' => $id, 'username' => $username]);
        } catch (PDOException $e) {
            if (str_contains($e->getMessage(), 'UNIQUE')) json_out(['error' => 'Username sudah dipakai'], 409);
            json_out(['error' => 'Gagal daftar'], 500);
        }
    }

    if ($path === '/api/login' && $method === 'POST') {
        $body = json_decode(file_get_contents('php://input'), true) ?: [];
        $username = trim($body['username'] ?? '');
        $password = $body['password'] ?? '';
        if (!$username || !$password) json_out(['error' => 'Username & password wajib'], 400);
        $stmt = $db->prepare('SELECT * FROM users WHERE username = ?');
        $stmt->execute([$username]);
        $user = $stmt->fetch(PDO::FETCH_ASSOC);
        if (!$user || !password_verify($password, $user['password']))
            json_out(['error' => 'Username atau password salah'], 401);
        $_SESSION['user_id'] = (int)$user['id'];
        $_SESSION['username'] = $user['username'];
        json_out(['id' => (int)$user['id'], 'username' => $user['username']]);
    }

    if ($path === '/api/logout' && $method === 'POST') {
        session_destroy();
        json_out(['ok' => true]);
    }

    if ($path === '/api/me' && $method === 'GET') {
        $u = auth_required();
        json_out($u);
    }

    // --- Media upload ---
    if ($path === '/api/upload' && $method === 'POST') {
        $u = auth_required();
        if (empty($_FILES['files']) || !is_array($_FILES['files']['name'])) {
            json_out(['error' => 'Tidak ada file'], 400);
        }
        $visibility = ($_POST['visibility'] ?? 'public') === 'private' ? 'private' : 'public';
        $maxBytes = MAX_SIZE_MB * 1024 * 1024;
        $finfo = new finfo(FILEINFO_MIME_TYPE);
        $uploaded = 0;

        $files = $_FILES['files'];
        for ($i = 0; $i < count($files['name']); $i++) {
            if ($files['error'][$i] === UPLOAD_ERR_INI_SIZE || $files['error'][$i] === UPLOAD_ERR_FORM_SIZE) {
                json_out(['error' => 'File terlalu besar (maks ' . MAX_SIZE_MB . ' MB)'], 413);
            }
            if ($files['error'][$i] !== UPLOAD_ERR_OK) continue;
            if ($files['size'][$i] > $maxBytes) {
                json_out(['error' => 'File terlalu besar (maks ' . MAX_SIZE_MB . ' MB)'], 413);
            }
            $tmp = $files['tmp_name'][$i];
            $mime = $finfo->file($tmp) ?: 'application/octet-stream';
            if (!str_starts_with($mime, 'image/') && !str_starts_with($mime, 'video/')) {
                json_out(['error' => 'Hanya file gambar/video yang diizinkan'], 400);
            }
            $ext = pathinfo($files['name'][$i], PATHINFO_EXTENSION);
            $newName = bin2hex(random_bytes(16)) . ($ext ? '.' . strtolower($ext) : '');
            $dest = UPLOAD_DIR . '/' . $newName;
            if (!move_uploaded_file($tmp, $dest)) continue;

            $stmt = $db->prepare('
                INSERT INTO media (owner_id, owner_name, visibility, filename, original_name, mime_type, size, created_at)
                VALUES (?, ?, ?, ?, ?, ?, ?, ?)
            ');
            $stmt->execute([
                $u['id'], $u['username'], $visibility,
                $newName, $files['name'][$i], $mime, $files['size'][$i], time()
            ]);
            $uploaded++;
        }
        json_out(['ok' => true, 'uploaded' => $uploaded]);
    }

    // --- My media ---
    if ($path === '/api/my-media' && $method === 'GET') {
        $u = auth_required();
        $stmt = $db->prepare('SELECT id, owner_id, owner_name, visibility, filename, original_name, mime_type, size, created_at FROM media WHERE owner_id = ? ORDER BY created_at DESC');
        $stmt->execute([$u['id']]);
        json_out($stmt->fetchAll(PDO::FETCH_ASSOC));
    }

    // --- Public media ---
    if ($path === '/api/public-media' && $method === 'GET') {
        $stmt = $db->query("SELECT id, owner_id, owner_name, visibility, filename, original_name, mime_type, size, created_at FROM media WHERE visibility = 'public' ORDER BY created_at DESC");
        json_out($stmt->fetchAll(PDO::FETCH_ASSOC));
    }

    // --- Delete media ---
    if (preg_match('#^/api/media/(\d+)$#', $path, $m) && $method === 'DELETE') {
        $u = auth_required();
        $id = (int)$m[1];
        $stmt = $db->prepare('SELECT * FROM media WHERE id = ?');
        $stmt->execute([$id]);
        $item = $stmt->fetch(PDO::FETCH_ASSOC);
        if (!$item) json_out(['error' => 'Tidak ditemukan'], 404);
        if ((int)$item['owner_id'] !== $u['id']) json_out(['error' => 'Bukan milikmu'], 403);
        @unlink(UPLOAD_DIR . '/' . $item['filename']);
        $db->prepare('DELETE FROM media WHERE id = ?')->execute([$id]);
        json_out(['ok' => true]);
    }

    json_out(['error' => 'Endpoint tidak ditemukan'], 404);
}

// ===== Frontend =====
$user = current_user();
?>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media Hosting</title>
<style>
  * { box-sizing: border-box; }
  body { font-family: Arial, sans-serif; background: #121212; color: #fff; margin: 0; padding: 20px; -webkit-tap-highlight-color: transparent; }
  .container { max-width: 900px; margin: auto; }
  h1 { text-align: center; font-size: 22px; }
  .auth-box { background: #1e1e1e; padding: 25px; border-radius: 8px; margin-bottom: 25px; display: flex; flex-direction: column; gap: 12px; max-width: 400px; margin-left: auto; margin-right: auto; }
  .auth-box h2 { text-align: center; margin: 0 0 10px 0; font-size: 18px; }
  .auth-box input { padding: 12px; background: #333; border: 1px solid #555; border-radius: 5px; color: white; font-size: 14px; }
  .auth-tabs { display: flex; gap: 8px; margin-bottom: 10px; }
  .auth-tabs button { flex: 1; padding: 8px; background: #333; color: #aaa; border: none; border-radius: 5px; cursor: pointer; font-size: 13px; }
  .auth-tabs button.active { background: #007bff; color: #fff; }
  .user-bar { background: #1e1e1e; padding: 12px 15px; border-radius: 8px; margin-bottom: 15px; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
  .user-bar .user-info { font-size: 13px; }
  .user-bar .user-info b { color: #007bff; }
  .btn-logout { background: #dc3545; padding: 8px 14px; font-size: 12px; color: #fff; border: none; border-radius: 5px; cursor: pointer; }
  .btn-logout:hover { background: #a71d2a; }
  .tab-bar { display: flex; gap: 8px; margin-bottom: 15px; background: #1e1e1e; padding: 8px; border-radius: 8px; }
  .tab-bar button { flex: 1; padding: 10px; background: transparent; color: #aaa; border: none; border-radius: 5px; cursor: pointer; font-size: 13px; }
  .tab-bar button.active { background: #007bff; color: #fff; }
  .upload-box { background: #1e1e1e; padding: 20px; border-radius: 8px; margin-bottom: 30px; display: flex; flex-direction: column; gap: 10px; }
  input[type="file"] { padding: 10px; background: #333; border: 1px solid #555; border-radius: 5px; color: white; width: 100%; font-size: 14px; }
  button { padding: 12px 20px; background: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer; font-weight: bold; font-size: 15px; transition: background 0.2s; }
  button:hover { background: #0056b3; }
  button:disabled { background: #555; cursor: not-allowed; }
  .progress { width: 100%; background: #333; border-radius: 5px; overflow: hidden; display: none; }
  .progress-bar { width: 0%; height: 20px; background: #28a745; text-align: center; line-height: 20px; color: white; font-size: 12px; transition: width 0.3s; }
  .visibility-select { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
  .visibility-select label { display: flex; align-items: center; gap: 5px; font-size: 13px; cursor: pointer; padding: 6px 10px; background: #333; border-radius: 5px; }
  .stats { background: #1e1e1e; padding: 10px 15px; border-radius: 8px; margin-bottom: 15px; font-size: 13px; color: #aaa; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
  .video-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
  .video-card { background: #1e1e1e; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 6px rgba(0,0,0,0.3); transition: transform 0.2s; }
  .video-card:hover { transform: translateY(-2px); }
  .media-wrap { position: relative; }
  .video-card video, .video-card img { width: 100%; height: 200px; object-fit: cover; background: #000; display: block; cursor: pointer; }
  .video-info { padding: 10px; }
  .video-info p { margin: 0 0 4px 0; font-size: 12px; color: #aaa; word-break: break-all; }
  .badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: bold; margin-bottom: 6px; margin-right: 4px; }
  .badge-video { background: #007bff; color: #fff; }
  .badge-image { background: #28a745; color: #fff; }
  .badge-public { background: #17a2b8; color: #fff; }
  .badge-private { background: #ffc107; color: #000; }
  .fs-btn { position: absolute; bottom: 8px; right: 8px; background: rgba(0,0,0,0.65); color: #fff; border: none; width: 36px; height: 36px; border-radius: 6px; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 5; padding: 0; }
  .fs-btn:hover { background: rgba(0,0,0,0.9); }
  .del-btn { background: #dc3545; padding: 6px 12px; font-size: 11px; margin-top: 6px; width: 100%; }
  .del-btn:hover { background: #a71d2a; }
  .lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.96); display: none; align-items: center; justify-content: center; z-index: 9999; padding: 20px; }
  .lightbox.show { display: flex; }
  .lightbox img, .lightbox video { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 6px; box-shadow: 0 0 30px rgba(0,0,0,0.8); }
  .lightbox-close { position: absolute; top: 15px; right: 20px; background: rgba(255,255,255,0.15); color: #fff; border: none; font-size: 28px; width: 46px; height: 46px; border-radius: 50%; cursor: pointer; line-height: 1; display: flex; align-items: center; justify-content: center; }
  .lightbox-close:hover { background: rgba(255,255,255,0.3); }
  .hidden { display: none !important; }
  .toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: #28a745; color: #fff; padding: 12px 24px; border-radius: 6px; font-size: 14px; z-index: 10000; display: none; }
  .toast.show { display: block; animation: fadeIn 0.3s; }
  .toast.error { background: #dc3545; }
  @keyframes fadeIn { from { opacity: 0; transform: translateX(-50%) translateY(20px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
  @media (max-width: 600px) {
    body { padding: 12px; }
    h1 { font-size: 18px; }
    .upload-box { padding: 15px; }
    .video-gallery { grid-template-columns: 1fr; gap: 15px; }
    .video-card video, .video-card img { height: 220px; }
    .lightbox { padding: 10px; }
    .lightbox-close { top: 10px; right: 10px; width: 40px; height: 40px; font-size: 24px; }
    .stats { font-size: 12px; padding: 8px 12px; }
    .auth-box { padding: 20px 15px; }
  }
  @media (max-width: 360px) {
    h1 { font-size: 16px; }
    .video-card video, .video-card img { height: 200px; }
  }
</style>
</head>
<body>
<div class="container">
  <h1>&#127916; MEDIA HOSTING</h1>

  <div id="authSection" class="<?= $user ? 'hidden' : '' ?>">
    <div class="auth-box">
      <h2 id="authTitle">Login</h2>
      <div class="auth-tabs">
        <button id="tabLogin" class="active" onclick="switchAuth('login')">Login</button>
        <button id="tabRegister" onclick="switchAuth('register')">Daftar</button>
      </div>
      <input type="text" id="authUsername" placeholder="Username" autocomplete="username">
      <input type="password" id="authPassword" placeholder="Password" autocomplete="current-password">
      <button id="btnAuth" onclick="doAuth()">Login</button>
    </div>
  </div>

  <div id="appSection" class="<?= $user ? '' : 'hidden' ?>">
    <div class="user-bar">
      <div class="user-info">&#128100; Login sebagai <b id="currentUserLabel"><?= $user ? htmlspecialchars($user['username']) : '-' ?></b></div>
      <button class="btn-logout" onclick="doLogout()">Logout</button>
    </div>

    <div class="tab-bar">
      <button id="tabMine" class="active" onclick="switchTab('mine')">&#128193; Media Saya</button>
      <button id="tabPublic" onclick="switchTab('public')">&#127757; Publik</button>
    </div>

    <div class="upload-box" id="uploadBox">
      <h3 style="margin:0 0 5px 0;">Upload Media Baru</h3>
      <input type="file" id="mediaFile" accept="video/*,image/*" multiple>
      <div class="visibility-select">
        <span style="font-size:13px;color:#aaa;">Visibilitas:</span>
        <label><input type="radio" name="visibility" value="public" checked> &#127757; Publik</label>
        <label><input type="radio" name="visibility" value="private"> &#128274; Privat</label>
      </div>
      <button id="btnUpload" onclick="uploadMedia()">&#128228; Upload Media</button>
      <div class="progress" id="progressContainer">
        <div class="progress-bar" id="progressBar">0%</div>
      </div>
    </div>

    <div class="stats">
      <span>&#128230; Total: <b id="totalItems">0</b> item</span>
      <span>&#128190; Ukuran: <b id="totalSize">0 MB</b></span>
    </div>

    <h3 id="galleryTitle">Media Saya</h3>
    <div class="video-gallery" id="videoGallery"></div>
  </div>
</div>

<div class="lightbox" id="lightbox">
  <button class="lightbox-close" onclick="closeLightbox()" title="Tutup">&times;</button>
  <div id="lightboxContent" style="display:flex; align-items:center; justify-content:center; width:100%; height:100%;"></div>
</div>

<div class="toast" id="toast"></div>

<script>
  let currentUser = <?= $user ? json_encode($user) : 'null' ?>;
  let currentTab = 'mine';
  let authMode = 'login';

  function toast(msg, isError = false) {
    const t = document.getElementById('toast');
    t.textContent = msg;
    t.classList.toggle('error', isError);
    t.classList.add('show');
    setTimeout(() => t.classList.remove('show'), 2500);
  }

  async function api(url, opts = {}) {
    const res = await fetch(url, { credentials: 'include', ...opts });
    const data = await res.json().catch(() => ({}));
    if (!res.ok) throw new Error(data.error || 'Request gagal');
    return data;
  }

  function switchAuth(mode) {
    authMode = mode;
    document.getElementById('tabLogin').classList.toggle('active', mode === 'login');
    document.getElementById('tabRegister').classList.toggle('active', mode === 'register');
    document.getElementById('authTitle').textContent = mode === 'login' ? 'Login' : 'Daftar Akun';
    document.getElementById('btnAuth').textContent = mode === 'login' ? 'Login' : 'Daftar';
  }

  async function doAuth() {
    const username = document.getElementById('authUsername').value.trim();
    const password = document.getElementById('authPassword').value;
    if (!username || !password) return toast('Username & password wajib', true);
    try {
      const endpoint = authMode === 'login' ? '/api/login' : '/api/register';
      const data = await api(endpoint, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ username, password })
      });
      currentUser = data;
      showApp();
      toast(authMode === 'login' ? 'Login berhasil!' : 'Daftar berhasil!');
    } catch (e) { toast(e.message, true); }
  }

  function showApp() {
    document.getElementById('authSection').classList.add('hidden');
    document.getElementById('appSection').classList.remove('hidden');
    document.getElementById('currentUserLabel').textContent = currentUser.username;
    document.getElementById('authUsername').value = '';
    document.getElementById('authPassword').value = '';
    switchTab('mine');
  }

  async function doLogout() {
    if (!confirm('Yakin logout?')) return;
    try { await api('/api/logout', { method: 'POST' }); } catch {}
    currentUser = null;
    document.getElementById('authSection').classList.remove('hidden');
    document.getElementById('appSection').classList.add('hidden');
    document.getElementById('videoGallery').innerHTML = '';
    toast('Logout berhasil');
  }

  function switchTab(tab) {
    currentTab = tab;
    document.getElementById('tabMine').classList.toggle('active', tab === 'mine');
    document.getElementById('tabPublic').classList.toggle('active', tab === 'public');
    document.getElementById('uploadBox').classList.toggle('hidden', tab === 'public');
    document.getElementById('galleryTitle').textContent = tab === 'mine' ? '&#128193; Media Saya' : '&#127757; Media Publik (semua user)';
    renderGallery();
  }

  function openLightbox(type, url) {
    const lightbox = document.getElementById('lightbox');
    const content = document.getElementById('lightboxContent');
    content.innerHTML = type === 'image'
      ? `<img src="${url}" alt="Preview">`
      : `<video src="${url}" controls autoplay playsinline></video>`;
    lightbox.classList.add('show');
    document.body.style.overflow = 'hidden';
  }

  function closeLightbox() {
    const content = document.getElementById('lightboxContent');
    const v = content.querySelector('video');
    if (v) { v.pause(); v.removeAttribute('src'); v.load(); }
    content.innerHTML = '';
    document.getElementById('lightbox').classList.remove('show');
    document.body.style.overflow = '';
  }

  document.addEventListener('keydown', (e) => { if (e.key === 'Escape') closeLightbox(); });
  document.getElementById('lightbox').addEventListener('click', (e) => {
    if (e.target.id === 'lightbox') closeLightbox();
  });

  function formatSize(bytes) {
    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
    return (bytes / (1024 * 1024)).toFixed(2) + ' MB';
  }

  async function renderGallery() {
    const gallery = document.getElementById('videoGallery');
    gallery.innerHTML = '<p style="color:#888;">Memuat...</p>';
    try {
      const endpoint = currentTab === 'mine' ? '/api/my-media' : '/api/public-media';
      const items = await api(endpoint);
      gallery.innerHTML = '';
      if (items.length === 0) {
        gallery.innerHTML = `<p style="color:#888;text-align:center;">${currentTab === 'mine' ? 'Kamu belum upload media.' : 'Belum ada media publik.'}</p>`;
        document.getElementById('totalItems').textContent = '0';
        document.getElementById('totalSize').textContent = '0 MB';
        return;
      }
      let totalSize = 0;
      items.forEach(item => {
        totalSize += item.size;
        const isImage = item.mime_type.startsWith('image/');
        const url = '/uploads/' + item.filename;
        const card = document.createElement('div');
        card.className = 'video-card';
        const mediaEl = isImage
          ? `<img src="${url}" alt="${item.original_name}" loading="lazy">`
          : `<video controls preload="metadata" playsinline src="${url}"></video>`;
        const visBadge = item.visibility === 'public'
          ? '<span class="badge badge-public">&#127757; PUBLIK</span>'
          : '<span class="badge badge-private">&#128274; PRIVAT</span>';
        const delBtn = currentUser && item.owner_id === currentUser.id
          ? `<button class="del-btn" data-id="${item.id}">&#128465;&#65039; Hapus</button>` : '';
        const ownerLabel = currentTab === 'public' ? `<p style="font-size:11px;color:#666;">oleh ${item.owner_name}</p>` : '';
        card.innerHTML = `
          <div class="media-wrap">
            ${mediaEl}
            <button class="fs-btn" title="Fullscreen">&#9974;</button>
          </div>
          <div class="video-info">
            <span class="badge ${isImage ? 'badge-image' : 'badge-video'}">${isImage ? 'FOTO' : 'VIDEO'}</span>
            ${visBadge}
            <p>${item.original_name}</p>
            <p>${formatSize(item.size)}</p>
            ${ownerLabel}
            ${delBtn}
          </div>
        `;
        const mediaNode = card.querySelector('img, video');
        const fsBtn = card.querySelector('.fs-btn');
        if (isImage) mediaNode.addEventListener('click', () => openLightbox('image', url));
        fsBtn.addEventListener('click', (e) => {
          e.stopPropagation();
          if (!isImage) mediaNode.pause();
          openLightbox(isImage ? 'image' : 'video', url);
        });
        const del = card.querySelector('.del-btn');
        if (del) {
          del.addEventListener('click', async () => {
            if (!confirm('Hapus media ini?')) return;
            try {
              await api('/api/media/' + del.dataset.id, { method: 'DELETE' });
              toast('Media dihapus');
              renderGallery();
            } catch (e) { toast(e.message, true); }
          });
        }
        gallery.appendChild(card);
      });
      document.getElementById('totalItems').textContent = items.length;
      document.getElementById('totalSize').textContent = formatSize(totalSize);
    } catch (e) {
      gallery.innerHTML = `<p style="color:#dc3545;">Gagal memuat: ${e.message}</p>`;
    }
  }

  async function uploadMedia() {
    if (!currentUser) return;
    const fileInput = document.getElementById('mediaFile');
    const files = Array.from(fileInput.files);
    const btnUpload = document.getElementById('btnUpload');
    const visibility = document.querySelector('input[name="visibility"]:checked').value;
    if (files.length === 0) return toast('Pilih file dulu!', true);

    const formData = new FormData();
    files.forEach(f => formData.append('files[]', f));
    formData.append('visibility', visibility);

    btnUpload.disabled = true;
    btnUpload.innerText = '&#9203; Mengupload...';
    const progressContainer = document.getElementById('progressContainer');
    const progressBar = document.getElementById('progressBar');
    progressContainer.style.display = 'block';
    progressBar.style.width = '0%';
    progressBar.textContent = '0%';

    try {
      await new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.open('POST', '/api/upload');
        xhr.withCredentials = true;
        xhr.upload.onprogress = (e) => {
          if (e.lengthComputable) {
            const pct = Math.round((e.loaded / e.total) * 100);
            progressBar.style.width = pct + '%';
            progressBar.textContent = pct + '%';
          }
        };
        xhr.onload = () => {
          if (xhr.status >= 200 && xhr.status < 300) resolve();
          else {
            try { reject(new Error(JSON.parse(xhr.responseText).error)); }
            catch { reject(new Error('Upload gagal')); }
          }
        };
        xhr.onerror = () => reject(new Error('Network error'));
        xhr.send(formData);
      });
      toast('Upload berhasil!');
      progressBar.style.width = '100%';
      progressBar.textContent = '100%';
      setTimeout(() => {
        progressContainer.style.display = 'none';
        fileInput.value = '';
        btnUpload.disabled = false;
        btnUpload.innerText = '&#128228; Upload Media';
        renderGallery();
      }, 500);
    } catch (e) {
      toast(e.message, true);
      progressContainer.style.display = 'none';
      btnUpload.disabled = false;
      btnUpload.innerText = '&#128228; Upload Media';
    }
  }

  if (currentUser) renderGallery();
</script>
</body>
</html>