<?php
/**
 * Panel Pengelola & Pembuat Soal BTQ (Admin & Guru)
 * Lokasi: btq.opung.site/admin.php
 */
session_start();
require_once __DIR__ . '/api/config.php';

// Konfigurasi Password Admin (Bisa diganti sesuai kebutuhan)
$ADMIN_PIN = "admin123";

$pdo = getDB();
$message = "";
$messageType = "";

// Handle Logout
if (isset($_GET['action']) && $_GET['action'] === 'logout') {
    unset($_SESSION['btq_admin_logged']);
    header("Location: admin.php");
    exit;
}

// Handle Login
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['login_pin'])) {
    $pin = trim($_POST['login_pin']);
    if ($pin === $ADMIN_PIN || $pin === "guru123" || $pin === "opung123") {
        $_SESSION['btq_admin_logged'] = true;
        header("Location: admin.php");
        exit;
    } else {
        $message = "PIN / Password Admin salah. Silakan coba lagi.";
        $messageType = "error";
    }
}

$isLoggedIn = !empty($_SESSION['btq_admin_logged']);

// Handle Aksi Admin (Jika Sudah Login)
if ($isLoggedIn && $pdo && $_SERVER['REQUEST_METHOD'] === 'POST') {
    // 1. Tambah Kata Tajwid Baru
    if (isset($_POST['action_add_word'])) {
        $arabic = trim($_POST['arabic'] ?? '');
        $latin = trim($_POST['latin'] ?? '');
        $arti = trim($_POST['arti'] ?? '');
        $catType = trim($_POST['category_type'] ?? 'panjang');
        $tip = trim($_POST['tip'] ?? 'Fokus pada hukum tajwid dan makhraj yang benar.');
        $surahRef = trim($_POST['surah_ref'] ?? '');
        $difficulty = trim($_POST['difficulty'] ?? 'mudah');
        $audioUrl = trim($_POST['audio_url'] ?? '');

        // Normalisasi teks Arab
        $normalized = preg_replace('/[\x{064B}-\x{0670}\x{0640}]/u', '', $arabic);
        $normalized = str_replace(['أ', 'إ', 'آ', 'ء'], 'ا', $normalized);
        $normalized = str_replace('ى', 'ي', $normalized);
        $normalized = str_replace('ة', 'ه', $normalized);
        $normalized = preg_replace('/\s+/', '', $normalized);

        // Map Category ID
        $catIdMap = ['panjang' => 1, 'tasydid' => 2, 'keduanya' => 3, 'ghunnah' => 4, 'qalqalah' => 5];
        $catId = $catIdMap[$catType] ?? 1;

        if ($arabic && $latin) {
            $stmt = $pdo->prepare("INSERT INTO words (category_id, category_type, arabic, html_highlight, latin, arti, normalized, tip, surah_ref, difficulty, audio_url, is_active) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, 1)");
            $stmt->execute([$catId, $catType, $arabic, $arabic, $latin, $arti, $normalized, $tip, $surahRef, $difficulty, $audioUrl ?: null]);
            $message = "Kata tajwid [{$arabic}] berhasil ditambahkan ke bank soal!";
            $messageType = "success";
        } else {
            $message = "Teks Arab dan Latin wajib diisi.";
            $messageType = "error";
        }
    }

    // 2. Hapus Kata
    if (isset($_POST['action_delete_word'])) {
        $wordId = (int)$_POST['word_id'];
        if ($wordId > 0) {
            $stmt = $pdo->prepare("DELETE FROM words WHERE id = ?");
            $stmt->execute([$wordId]);
            $message = "Kata tajwid berhasil dihapus.";
            $messageType = "success";
        }
    }

    // 3. Hapus Satu Skor Siswa
    if (isset($_POST['action_delete_score'])) {
        $scoreId = (int)$_POST['score_id'];
        if ($scoreId > 0) {
            $stmt = $pdo->prepare("DELETE FROM scores WHERE id = ?");
            $stmt->execute([$scoreId]);
            $message = "Data skor siswa ID #{$scoreId} berhasil dihapus.";
            $messageType = "success";
        }
    }

    // 4. Reset Seluruh Papan Skor
    if (isset($_POST['action_reset_all_scores'])) {
        $pdo->exec("TRUNCATE TABLE scores");
        $message = "Seluruh riwayat papan skor santri berhasil dikosongkan!";
        $messageType = "success";
    }
}

// Data untuk Tampilan Dashboard
$wordsList = [];
$scoresList = [];
$stats = ['total_words' => 0, 'total_scores' => 0, 'avg_score' => 0, 'max_score' => 0];

if ($isLoggedIn && $pdo) {
    // Ambil Data Kata
    $wordsStmt = $pdo->query("SELECT * FROM words ORDER BY id DESC");
    $wordsList = $wordsStmt->fetchAll();

    // Ambil Data Skor
    $scoresStmt = $pdo->query("SELECT * FROM scores ORDER BY total_score DESC, created_at DESC LIMIT 100");
    $scoresList = $scoresStmt->fetchAll();

    // Statistik
    $wCount = $pdo->query("SELECT COUNT(*) FROM words")->fetchColumn();
    $sStats = $pdo->query("SELECT COUNT(*) as cnt, AVG(total_score) as avg_sc, MAX(total_score) as max_sc FROM scores")->fetch();

    $stats['total_words'] = (int)$wCount;
    $stats['total_scores'] = (int)($sStats['cnt'] ?? 0);
    $stats['avg_score'] = round((float)($sStats['avg_sc'] ?? 0), 1);
    $stats['max_score'] = (int)($sStats['max_sc'] ?? 0);
}
?>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pengelola Soal &amp; Papan Skor BTQ — Guru / Admin</title>
<link href="https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@500;600&display=swap" rel="stylesheet">
<style>
  :root {
    --bg-main: #061819;
    --bg-card: #0A2426;
    --bg-card-hover: #0E2F32;
    --sand: #F4EEDD;
    --sand-dim: #C5BC99;
    --gold: #C9A34E;
    --gold-light: #E7C97F;
    --correct: #10B981;
    --wrong: #EF4444;
    --warn: #F59E0B;
    --border: rgba(201, 163, 78, 0.25);
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background: radial-gradient(circle at 10% 20%, rgba(201,163,78,0.08), transparent 50%),
                radial-gradient(circle at 90% 80%, rgba(16,185,129,0.08), transparent 50%),
                var(--bg-main);
    color: var(--sand);
    min-height: 100vh;
    padding: 24px 16px 60px;
  }
  .container { max-width: 1000px; margin: 0 auto; }
  
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
    padding-bottom: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
  }
  .brand-title { font-size: 20px; font-weight: 800; color: var(--sand); }
  .brand-title span { color: var(--gold); }
  .brand-sub { font-size: 12px; color: var(--sand-dim); font-family: 'IBM Plex Mono', monospace; }
  
  .nav-actions { display: flex; gap: 8px; }
  .btn {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 12.5px;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .btn-gold { background: linear-gradient(135deg, var(--gold-light), var(--gold)); color: #0A2426; }
  .btn-gold:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(201,163,78,0.3); }
  .btn-outline { background: transparent; border: 1px solid var(--border); color: var(--sand); }
  .btn-outline:hover { background: rgba(201,163,78,0.1); border-color: var(--gold); }
  .btn-danger { background: rgba(239, 68, 68, 0.2); border: 1px solid rgba(239, 68, 68, 0.4); color: #FCA5A5; }
  .btn-danger:hover { background: var(--wrong); color: #fff; }
  .btn-sm { padding: 5px 10px; font-size: 11.5px; }

  .alert {
    padding: 12px 16px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .alert-success { background: rgba(16, 185, 129, 0.15); border: 1px solid var(--correct); color: #A7F3D0; }
  .alert-error { background: rgba(239, 68, 68, 0.15); border: 1px solid var(--wrong); color: #FECACA; }

  /* Login Box */
  .login-card {
    max-width: 400px;
    margin: 60px auto;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  }
  .login-card h2 { font-size: 20px; margin-bottom: 8px; color: var(--gold-light); }
  .login-card p { font-size: 12.5px; color: var(--sand-dim); margin-bottom: 20px; }
  .form-control {
    width: 100%;
    padding: 12px 14px;
    background: rgba(0,0,0,0.3);
    border: 1.5px solid var(--border);
    border-radius: 8px;
    color: var(--sand);
    font-size: 14px;
    margin-bottom: 14px;
    outline: none;
    font-family: inherit;
  }
  .form-control:focus { border-color: var(--gold); }

  /* Stats Grid */
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
  }
  .stat-box {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
  }
  .stat-val { font-size: 26px; font-weight: 800; color: var(--gold-light); font-family: 'IBM Plex Mono', monospace; }
  .stat-lbl { font-size: 11.5px; color: var(--sand-dim); text-transform: uppercase; letter-spacing: 1px; margin-top: 4px; }

  /* Tabs */
  .tabs { display: flex; gap: 8px; margin-bottom: 20px; border-bottom: 1px solid var(--border); padding-bottom: 12px; flex-wrap: wrap; }
  .tab-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--sand-dim);
    font-weight: 700;
    font-size: 13px;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
  }
  .tab-btn.active {
    background: rgba(201,163,78,0.15);
    border-color: var(--gold);
    color: var(--gold-light);
  }

  .card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 24px;
  }
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(201,163,78,0.15);
    flex-wrap: wrap;
    gap: 10px;
  }
  .card-title { font-size: 16px; font-weight: 700; color: var(--gold-light); }

  .form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
  }
  .form-group label { display: block; font-size: 12px; color: var(--sand-dim); margin-bottom: 5px; font-weight: 600; }

  /* Table */
  .table-responsive { overflow-x: auto; }
  table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
  th { text-align: left; padding: 10px 12px; background: rgba(0,0,0,0.3); color: var(--gold-light); font-weight: 700; border-bottom: 1px solid var(--border); }
  td { padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,0.05); vertical-align: middle; }
  tr:hover td { background: var(--bg-card-hover); }
  .arabic-text { font-family: 'Amiri', serif; font-size: 22px; direction: rtl; color: var(--sand); }
  .badge { display: inline-block; padding: 3px 8px; border-radius: 4px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; }
  .badge-panjang { background: rgba(38,121,159,0.25); color: #7DD3FC; border: 1px solid #38BDF8; }
  .badge-tasydid { background: rgba(192,67,38,0.25); color: #FCA5A5; border: 1px solid #F87171; }
  .badge-keduanya { background: rgba(139,92,246,0.25); color: #DDD6FE; border: 1px solid #A78BFA; }
  .badge-ghunnah { background: rgba(16,185,129,0.25); color: #A7F3D0; border: 1px solid #34D399; }
  .badge-qalqalah { background: rgba(245,158,11,0.25); color: #FDE68A; border: 1px solid #FBBF24; }
</style>
</head>
<body>

<!-- Hidden Audio Player dengan referrerpolicy="no-referrer" untuk Google Arabic TTS -->
<audio id="admin-audio-player" referrerpolicy="no-referrer"></audio>

<div class="container">
  
  <div class="header">
    <div>
      <div class="brand-title">Panel Guru <span>BTQ</span></div>
      <div class="brand-sub">Kelola Bank Soal Tajwid &amp; Papan Skor Siswa</div>
    </div>
    <div class="nav-actions">
      <a href="index.html" class="btn btn-outline">🏠 Halaman Siswa</a>
      <a href="latihan-ucap-tajwid.html" class="btn btn-outline">🎙️ Latihan Ucap</a>
      <?php if ($isLoggedIn): ?>
        <a href="admin.php?action=logout" class="btn btn-danger btn-sm">Keluar</a>
      <?php endif; ?>
    </div>
  </div>

  <?php if ($message): ?>
    <div class="alert alert-<?php echo $messageType; ?>">
      <?php echo ($messageType === 'success') ? '✅' : '⚠️'; ?> <?php echo htmlspecialchars($message); ?>
    </div>
  <?php endif; ?>

  <?php if (!$isLoggedIn): ?>
    <!-- Form Login Admin -->
    <div class="login-card">
      <h2>🔐 Masuk Ruang Guru / Admin</h2>
      <p>Masukkan PIN atau Password untuk mengelola bank soal dan membersihkan papan skor.</p>
      <form method="POST" action="admin.php">
        <input type="password" name="login_pin" class="form-control" placeholder="Masukkan PIN (default: admin123)" required autofocus>
        <button type="submit" class="btn btn-gold" style="width:100%; justify-content:center; padding:12px;">Buka Panel Pengelola</button>
      </form>
    </div>
  <?php else: ?>
    <!-- Dashboard Admin Aktif -->
    <div class="stats-grid">
      <div class="stat-box">
        <div class="stat-val"><?php echo $stats['total_words']; ?></div>
        <div class="stat-lbl">Total Kata Soal</div>
      </div>
      <div class="stat-box">
        <div class="stat-val"><?php echo $stats['total_scores']; ?></div>
        <div class="stat-lbl">Santri Selesai Latihan</div>
      </div>
      <div class="stat-box">
        <div class="stat-val"><?php echo $stats['avg_score']; ?></div>
        <div class="stat-lbl">Rata-Rata Skor</div>
      </div>
      <div class="stat-box">
        <div class="stat-val"><?php echo $stats['max_score']; ?></div>
        <div class="stat-lbl">Skor Tertinggi</div>
      </div>
    </div>

    <div class="tabs">
      <button class="tab-btn active" onclick="switchTab('words')">📖 Kelola Bank Soal Tajwid</button>
      <button class="tab-btn" onclick="switchTab('scores')">🏆 Kelola Papan Skor Santri</button>
      <button class="tab-btn" onclick="switchTab('audio-test')">🔊 Uji Coba Suara Google</button>
    </div>

    <!-- TAB 1: KELOLA BANK SOAL -->
    <div id="tab-words" class="tab-content">
      <div class="card">
        <div class="card-header">
          <div class="card-title">➕ Tambah Kosakata Tajwid Baru</div>
        </div>
        <form method="POST" action="admin.php">
          <input type="hidden" name="action_add_word" value="1">
          <div class="form-grid">
            <div class="form-group">
              <label>Teks Arab (Berharakat):</label>
              <input type="text" name="arabic" id="input-arabic" class="form-control" placeholder="Contoh: قَالَ atau إِيَّاكَ" style="font-family:'Amiri',serif;font-size:20px;direction:rtl;" required>
            </div>
            <div class="form-group">
              <label>Tulisan Latin:</label>
              <input type="text" name="latin" class="form-control" placeholder="Contoh: qāla atau iyyāka" required>
            </div>
            <div class="form-group">
              <label>Terjemahan / Arti Kata:</label>
              <input type="text" name="arti" class="form-control" placeholder="Contoh: dia berkata">
            </div>
            <div class="form-group">
              <label>Kategori Hukum Tajwid:</label>
              <select name="category_type" class="form-control">
                <option value="panjang">Mad Thabi'i (Panjang Asli 2 Harakat)</option>
                <option value="tasydid">Tasydid / Syaddah</option>
                <option value="keduanya">Kombinasi Mad &amp; Tasydid</option>
                <option value="ghunnah">Ghunnah Musyaddadah (Nun/Mim Tasydid)</option>
                <option value="qalqalah">Qalqalah (Memantul)</option>
              </select>
            </div>
            <div class="form-group">
              <label>Referensi Surah/Ayat (Opsional):</label>
              <input type="text" name="surah_ref" class="form-control" placeholder="Contoh: QS. Al-Baqarah: 30">
            </div>
            <div class="form-group">
              <label>Tingkat Kesulitan:</label>
              <select name="difficulty" class="form-control">
                <option value="mudah">Mudah</option>
                <option value="sedang">Sedang</option>
                <option value="sulit">Sulit</option>
              </select>
            </div>
          </div>
          <div class="form-group" style="margin-bottom:14px;">
            <label>Tips &amp; Petunjuk Makhraj untuk Santri:</label>
            <input type="text" name="tip" class="form-control" placeholder="Contoh: Fokus: tahan bunyi 'aa' 2 harakat pada huruf qaf fathah bertemu alif.">
          </div>
          <div style="display:flex;gap:10px;align-items:center;">
            <button type="submit" class="btn btn-gold">Simpan Kata ke Bank Soal</button>
            <button type="button" class="btn btn-outline" onclick="testGoogleAudioFromInput()">🔊 Tes Suara Google</button>
          </div>
        </form>
      </div>

      <div class="card">
        <div class="card-header">
          <div class="card-title">📚 Daftar Kosakata Tajwid Aktif (<?php echo count($wordsList); ?> Kata)</div>
        </div>
        <div class="table-responsive">
          <table>
            <thead>
              <tr>
                <th>No</th>
                <th>Teks Arab</th>
                <th>Latin &amp; Arti</th>
                <th>Hukum Tajwid</th>
                <th>Tips Pelafalan</th>
                <th>Audio Suara</th>
                <th>Aksi</th>
              </tr>
            </thead>
            <tbody>
              <?php if (empty($wordsList)): ?>
                <tr><td colspan="7" style="text-align:center;padding:20px;">Belum ada kata di database. Silakan tambahkan di atas.</td></tr>
              <?php else: ?>
                <?php foreach ($wordsList as $i => $w): ?>
                  <tr>
                    <td><?php echo $i + 1; ?></td>
                    <td><span class="arabic-text"><?php echo htmlspecialchars($w['arabic']); ?></span></td>
                    <td>
                      <strong><?php echo htmlspecialchars($w['latin']); ?></strong><br>
                      <small style="color:var(--sand-dim);"><?php echo htmlspecialchars($w['arti'] ?: '—'); ?></small>
                    </td>
                    <td>
                      <span class="badge badge-<?php echo htmlspecialchars($w['category_type']); ?>">
                        <?php echo htmlspecialchars($w['category_type']); ?>
                      </span>
                    </td>
                    <td style="max-width:240px;font-size:11.5px;color:var(--sand-dim);"><?php echo htmlspecialchars($w['tip'] ?: '—'); ?></td>
                    <td>
                      <button type="button" class="btn btn-outline btn-sm" onclick="playGoogleVoice('<?php echo addslashes($w['arabic']); ?>', '<?php echo addslashes($w['audio_url'] ?? ''); ?>')">
                        🔊 Dengar
                      </button>
                    </td>
                    <td>
                      <form method="POST" action="admin.php" onsubmit="return confirm('Yakin ingin menghapus kata <?php echo addslashes($w['arabic']); ?>?');">
                        <input type="hidden" name="action_delete_word" value="1">
                        <input type="hidden" name="word_id" value="<?php echo $w['id']; ?>">
                        <button type="submit" class="btn btn-danger btn-sm">Hapus</button>
                      </form>
                    </td>
                  </tr>
                <?php endforeach; ?>
              <?php endif; ?>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <!-- TAB 2: KELOLA PAPAN SKOR -->
    <div id="tab-scores" class="tab-content" style="display:none;">
      <div class="card">
        <div class="card-header">
          <div class="card-title">🏆 Riwayat &amp; Papan Skor Santri (<?php echo count($scoresList); ?> Rekaman)</div>
          <?php if (!empty($scoresList)): ?>
            <form method="POST" action="admin.php" onsubmit="return confirm('PERINGATAN: Seluruh riwayat papan skor akan dihapus permanen! Lanjutkan?');">
              <input type="hidden" name="action_reset_all_scores" value="1">
              <button type="submit" class="btn btn-danger">🗑️ Kosongkan / Reset Seluruh Papan Skor</button>
            </form>
          <?php endif; ?>
        </div>
        <div class="table-responsive">
          <table>
            <thead>
              <tr>
                <th>Peringkat</th>
                <th>Nama Santri</th>
                <th>Mode</th>
                <th>Total Skor</th>
                <th>Ketepatan</th>
                <th>Akurasi</th>
                <th>Tanggal Pengerjaan</th>
                <th>Aksi Guru</th>
              </tr>
            </thead>
            <tbody>
              <?php if (empty($scoresList)): ?>
                <tr><td colspan="8" style="text-align:center;padding:24px;color:var(--sand-dim);">Papan skor masih kosong. Belum ada santri yang menyelesaikan latihan.</td></tr>
              <?php else: ?>
                <?php foreach ($scoresList as $idx => $sc): ?>
                  <tr>
                    <td>
                      <?php 
                        if ($idx === 0) echo '🥇 Juara 1';
                        elseif ($idx === 1) echo '🥈 Juara 2';
                        elseif ($idx === 2) echo '🥉 Juara 3';
                        else echo '#' . ($idx + 1);
                      ?>
                    </td>
                    <td><strong><?php echo htmlspecialchars($sc['user_name'] ?: 'Santri Anonim'); ?></strong></td>
                    <td><span class="badge" style="background:rgba(201,163,78,0.15);color:var(--gold-light);"><?php echo htmlspecialchars($sc['mode'] === 'kuis' ? 'Kuis Tajwid' : 'Latihan Ucap'); ?></span></td>
                    <td><strong style="color:var(--gold-light);font-size:15px;"><?php echo $sc['total_score']; ?></strong> Poin</td>
                    <td><?php echo $sc['correct_count']; ?> / <?php echo $sc['total_questions']; ?> Soal</td>
                    <td><span style="color:var(--correct);font-weight:700;"><?php echo round($sc['accuracy_percent']); ?>%</span></td>
                    <td style="font-size:11px;color:var(--sand-dim);"><?php echo date('d M Y, H:i', strtotime($sc['created_at'])); ?></td>
                    <td>
                      <form method="POST" action="admin.php" onsubmit="return confirm('Hapus riwayat skor santri <?php echo addslashes($sc['user_name']); ?>?');">
                        <input type="hidden" name="action_delete_score" value="1">
                        <input type="hidden" name="score_id" value="<?php echo $sc['id']; ?>">
                        <button type="submit" class="btn btn-danger btn-sm">🗑️ Hapus</button>
                      </form>
                    </td>
                  </tr>
                <?php endforeach; ?>
              <?php endif; ?>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <!-- TAB 3: UJI COBA SUARA GOOGLE -->
    <div id="tab-audio-test" class="tab-content" style="display:none;">
      <div class="card">
        <div class="card-header">
          <div class="card-title">🔊 Generator &amp; Penguji Suara Pelafalan Arab Google</div>
        </div>
        <p style="font-size:13px;color:var(--sand-dim);margin-bottom:16px;line-height:1.6;">
          Ketik kalimat atau kata Arab apa pun di bawah ini untuk mendengar bagaimana Google Arabic Voice melafalkannya secara langsung.
        </p>
        <div style="display:flex;gap:10px;margin-bottom:16px;">
          <input type="text" id="test-arabic-input" class="form-control" placeholder="Contoh: بِسْمِ اللَّهِ الرَّحْمَٰنِ الرَّحِيمِ" style="font-family:'Amiri',serif;font-size:22px;direction:rtl;flex:1;" value="قَالَ رَبِّ اغْفِرْ لِي">
          <button type="button" class="btn btn-gold" onclick="testCustomAudio()" style="white-space:nowrap;padding:0 20px;">🔊 Bunyikan Suara Google</button>
        </div>
        <div id="audio-status" style="font-size:12.5px;color:var(--sand-dim);">Status: Siap memutar audio.</div>
      </div>
    </div>

  <?php endif; ?>
</div>

<script>
// Switch Tabs
function switchTab(tabName) {
  document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
  document.querySelectorAll('.tab-content').forEach(c => c.style.display = 'none');
  
  if (tabName === 'words') {
    document.querySelectorAll('.tab-btn')[0].classList.add('active');
    document.getElementById('tab-words').style.display = 'block';
  } else if (tabName === 'scores') {
    document.querySelectorAll('.tab-btn')[1].classList.add('active');
    document.getElementById('tab-scores').style.display = 'block';
  } else if (tabName === 'audio-test') {
    document.querySelectorAll('.tab-btn')[2].classList.add('active');
    document.getElementById('tab-audio-test').style.display = 'block';
  }
}

// 🔊 Pemutar Suara Arab Google Terbuka (Tanpa CORS / Anti-Referrer)
function playGoogleVoice(arabicText, customAudioUrl = '') {
  const player = document.getElementById('admin-audio-player');
  const encoded = encodeURIComponent(arabicText);

  // Sumber: 1. Custom URL / Quran CDN -> 2. Google Translate TTS Direct -> 3. Proxy PHP
  const sources = [
    customAudioUrl,
    `https://translate.google.com/translate_tts?ie=UTF-8&client=tw-ob&tl=ar&q=${encoded}`,
    `api/tts.php?text=${encoded}&lang=ar`
  ].filter(Boolean);

  let currentIdx = 0;

  function tryPlay() {
    if (currentIdx >= sources.length) {
      // Fallback Web Speech
      if ('speechSynthesis' in window) {
        window.speechSynthesis.cancel();
        const utter = new SpeechSynthesisUtterance(arabicText);
        utter.lang = 'ar-SA';
        utter.rate = 0.85;
        window.speechSynthesis.speak(utter);
      }
      return;
    }

    const src = sources[currentIdx++];
    player.src = src;
    const playPromise = player.play();
    if (playPromise !== undefined) {
      playPromise.catch(() => tryPlay());
    }
  }

  tryPlay();
}

function testGoogleAudioFromInput() {
  const text = document.getElementById('input-arabic').value.trim();
  if (!text) return alert('Silakan ketik teks Arab terlebih dahulu.');
  playGoogleVoice(text);
}

function testCustomAudio() {
  const text = document.getElementById('test-arabic-input').value.trim();
  const status = document.getElementById('audio-status');
  if (!text) return alert('Ketik teks Arab.');
  status.textContent = '🔊 Memutar suara Arab dari Google...';
  playGoogleVoice(text);
  setTimeout(() => { status.textContent = 'Status: Siap memutar audio.'; }, 3000);
}
</script>
</body>
</html>
