<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Admin Dashboard • RTP</title>
<meta name="theme-color" content="#0b0f16"/>
<style>
  :root{--bg:#0b0f16;--card:#111827;--line:#1f2937;--txt:#e5edff;--muted:#9fb0c8;--acc:#3b82f6;--bad:#ef4444;--good:#10b981}
  *{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--txt);font-family:Inter,system-ui,Segoe UI,Roboto,Arial}
  a{color:var(--acc)} input,select,textarea{width:100%;padding:10px;border-radius:10px;border:1px solid var(--line);background:#0f1627;color:var(--txt)}
  .wrap{max-width:1100px;margin:0 auto;padding:18px}
  .card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px}
  .grid{display:grid;gap:12px}
  @media(min-width:860px){.grid-2{grid-template-columns:1fr 1fr}.grid-3{grid-template-columns:1fr 1fr 1fr}}
  h1,h2,h3{margin:0 0 10px} h1{font-size:26px} h2{font-size:20px} h3{font-size:16px;color:var(--muted)}
  .row{display:flex;gap:10px;flex-wrap:wrap}
  .btn{border:1px solid var(--line);background:#0f172a;padding:9px 12px;border-radius:12px;color:var(--txt);cursor:pointer}
  .btn.acc{background:var(--acc);border-color:transparent}
  .btn.good{background:var(--good);border-color:transparent}
  .btn.bad{background:#b91c1c;border-color:transparent}
  .btn.ghost{background:transparent}
  .topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
  .tabs{display:flex;gap:8px;margin:12px 0}
  .tab{padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:#0d1424;cursor:pointer}
  .tab.active{background:#172036}
  table{width:100%;border-collapse:collapse}
  th,td{border-bottom:1px solid var(--line);padding:8px;text-align:left;font-size:14px}
  .hint{color:var(--muted);font-size:13px}
  .badge{display:inline-block;background:#203052;border:1px solid var(--line);color:#c9d6ee;padding:2px 8px;border-radius:999px;font-size:11px}
  .hr{height:1px;background:var(--line);margin:12px 0}
  .hidden{display:none}
</style>
</head>
<body>
<div class="wrap">
  <div class="topbar">
    <h1>Admin Dashboard • RTP</h1>
    <div id="authBox">
      <button class="btn acc" id="btnShowLogin">Login</button>
    </div>
  </div>

  <!-- LOGIN CARD -->
  <div class="card" id="loginCard">
    <h2>Masuk Admin</h2>
    <p class="hint">Pake email & password dari <b>Supabase Auth</b> (Authentication → Users).</p>
    <div class="grid grid-2">
      <div>
        <label>Email</label>
        <input id="email" type="email" placeholder="admin@domain.com"/>
      </div>
      <div>
        <label>Password</label>
        <input id="password" type="password" placeholder="••••••••"/>
      </div>
    </div>
    <div class="row" style="margin-top:10px">
      <button class="btn acc" id="btnLogin">Login</button>
      <button class="btn ghost" id="btnClear">Clear</button>
    </div>
    <div id="loginMsg" class="hint" style="margin-top:8px"></div>
  </div>

  <!-- MAIN TABS -->
  <div id="app" class="hidden">
    <div class="tabs">
      <div class="tab active" data-tab="settings">Settings</div>
      <div class="tab" data-tab="promos">Promos</div>
      <div class="tab" data-tab="rtp">RTP Items</div>
    </div>

    <!-- SETTINGS -->
    <div class="card" id="tab-settings">
      <h2>Brand & Link</h2>
      <p class="hint">Semua tombol di halaman publik narik data dari sini.</p>
      <div class="grid grid-3">
        <div><label>Brand Name</label><input id="set_brand" placeholder="CYBER SLOT"/></div>
        <div><label>Hero Title</label><input id="set_title" placeholder="RTP Slot Gacor Hari Ini"/></div>
        <div><label>Hero Subtitle</label><input id="set_subtitle" placeholder="Update elegan, mobile-first."/></div>
        <div><label>Login URL</label><input id="set_login" placeholder="https://..."/></div>
        <div><label>Daftar URL</label><input id="set_daftar" placeholder="https://..."/></div>
        <div><label>WhatsApp URL</label><input id="set_wa" placeholder="https://wa.me/..."/></div>
        <div><label>Telegram URL</label><input id="set_tg" placeholder="https://t.me/..."/></div>
        <div><label>Livechat URL</label><input id="set_lc" placeholder="https://..."/></div>
        <div><label>Hero BG Image</label><input id="set_bg" placeholder="https://.../bg.jpg"/></div>
      </div>
      <div class="row" style="margin-top:12px">
        <button class="btn good" id="btnSaveSettings">Simpan</button>
        <span id="setMsg" class="hint"></span>
      </div>
    </div>

    <!-- PROMOS -->
    <div class="card hidden" id="tab-promos">
      <div class="row" style="justify-content:space-between;align-items:center">
        <h2>Promos</h2>
        <button class="btn acc" id="btnAddPromo">+ Tambah</button>
      </div>
      <div class="hr"></div>
      <table id="promoTable">
        <thead><tr><th>Title</th><th>Link</th><th>Pin</th><th>Aksi</th></tr></thead>
        <tbody></tbody>
      </table>
    </div>

    <!-- RTP ITEMS -->
    <div class="card hidden" id="tab-rtp">
      <div class="row" style="justify-content:space-between;align-items:center">
        <h2>RTP Items</h2>
        <button class="btn acc" id="btnAddRTP">+ Tambah</button>
      </div>
      <p class="hint">Untuk tampilan “provider + foto”: isi <b>provider</b>, <b>game_name</b>, dan <b>image_url</b>. Kolom RTP/Status opsional.</p>
      <div class="hr"></div>
      <table id="rtpTable">
        <thead><tr><th>Provider</th><th>Game</th><th>Image</th><th>RTP</th><th>Status</th><th>Aksi</th></tr></thead>
        <tbody></tbody>
      </table>
    </div>
  </div>
</div>

<script type="module">
  // ===================== CONFIG — GANTI DENGAN PUNYAMU =====================
const SUPABASE_URL = "https://qisdheuvymdddbaaolzf.supabase.co";
const SUPABASE_ANON_KEY = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InFpc2RoZXV2eW1kZGRiYWFvbHpmIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTQ5NDk3OTAsImV4cCI6MjA3MDUyNTc5MH0.P_-NGdW9uu5uHCv999s2wA9K0wokyiAjNyzSUt0WuNs";
  // ========================================================================

  import { createClient } from "https://esm.sh/@supabase/supabase-js@2";
  const sb = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);

  const $ = (s) => document.querySelector(s);
  const els = {
    authBox: $('#authBox'), loginCard: $('#loginCard'), app: $('#app'),
    email: $('#email'), password: $('#password'), loginMsg: $('#loginMsg'),
    btnLogin: $('#btnLogin'), btnClear: $('#btnClear'), btnShowLogin: $('#btnShowLogin'),
    tabs: document.querySelectorAll('.tab'),
    // settings
    set_brand: $('#set_brand'), set_title: $('#set_title'), set_subtitle: $('#set_subtitle'),
    set_login: $('#set_login'), set_daftar: $('#set_daftar'), set_wa: $('#set_wa'),
    set_tg: $('#set_tg'), set_lc: $('#set_lc'), set_bg: $('#set_bg'),
    btnSaveSettings: $('#btnSaveSettings'), setMsg: $('#setMsg'),
    // promos
    promoTable: $('#promoTable tbody'), btnAddPromo: $('#btnAddPromo'),
    // rtp
    rtpTable: $('#rtpTable tbody'), btnAddRTP: $('#btnAddRTP')
  };

  // ---------- Auth UI ----------
  function showLoggedIn(email){
    els.authBox.innerHTML = `
      <span class="badge">Logged in as ${email}</span>
      <button class="btn bad" id="btnLogout">Logout</button>`;
    $('#btnLogout').onclick = async () => {
      await sb.auth.signOut();
      location.reload();
    };
    els.loginCard.classList.add('hidden');
    els.app.classList.remove('hidden');
  }
  function showLoggedOut(){
    els.authBox.innerHTML = `<button class="btn acc" id="btnShowLogin">Login</button>`;
    $('#btnShowLogin').onclick = ()=> els.loginCard.classList.remove('hidden');
    els.app.classList.add('hidden');
  }

  // ---------- Tabs ----------
  els.tabs.forEach(t=>{
    t.onclick = ()=>{
      els.tabs.forEach(x=>x.classList.remove('active'));
      t.classList.add('active');
      ['settings','promos','rtp'].forEach(id=>{
        $('#tab-'+id).classList.toggle('hidden', t.dataset.tab!==id);
      });
    };
  });

  // ---------- Login ----------
  els.btnClear.onclick = ()=>{ els.email.value=''; els.password.value=''; els.loginMsg.textContent=''; };
  els.btnLogin.onclick = async ()=>{
    els.loginMsg.textContent = 'Logging in...';
    const { data, error } = await sb.auth.signInWithPassword({
      email: els.email.value.trim(), password: els.password.value
    });
    if(error){ els.loginMsg.textContent = '❌ ' + error.message; return; }
    showLoggedIn(data.user.email);
    await loadAll();
  };
  els.btnShowLogin.onclick = ()=> els.loginCard.classList.remove('hidden');

  // ---------- On load: restore session ----------
  (async ()=>{
    const { data } = await sb.auth.getSession();
    if(data.session){ showLoggedIn(data.session.user.email); await loadAll(); }
    else { showLoggedOut(); }
  })();

  // ================== DATA LOADERS ==================
  async function loadAll(){ await Promise.all([loadSettings(), loadPromos(), loadRTP()]); }

  // SETTINGS
  let settingsRowId = null;
  async function loadSettings(){
    const { data, error } = await sb.from('settings').select('*').limit(1);
    if(error){ els.setMsg.textContent = '❌ '+error.message; return; }
    const s = data?.[0] || {};
    settingsRowId = s.id || null;
    els.set_brand.value = s.brand_name || '';
    els.set_title.value = s.hero_title || '';
    els.set_subtitle.value = s.hero_subtitle || '';
    els.set_login.value = s.login_url || '';
    els.set_daftar.value = s.daftar_url || '';
    els.set_wa.value = s.wa_url || '';
    els.set_tg.value = s.telegram_url || '';
    els.set_lc.value = s.livechat_url || '';
    els.set_bg.value = s.bg_image || '';
  }
  els.btnSaveSettings.onclick = async ()=>{
    const payload = {
      brand_name: els.set_brand.value, hero_title: els.set_title.value,
      hero_subtitle: els.set_subtitle.value, login_url: els.set_login.value,
      daftar_url: els.set_daftar.value, wa_url: els.set_wa.value,
      telegram_url: els.set_tg.value, livechat_url: els.set_lc.value,
      bg_image: els.set_bg.value, updated_at: new Date().toISOString()
    };
    let res;
    if(settingsRowId){
      res = await sb.from('settings').update(payload).eq('id', settingsRowId).select().single();
    }else{
      res = await sb.from('settings').insert(payload).select().single();
      settingsRowId = res.data?.id || null;
    }
    els.setMsg.textContent = res.error ? '❌ '+res.error.message : '✅ Tersimpan!';
    if(!res.error) setTimeout(()=> els.setMsg.textContent='', 1500);
  };

  // PROMOS
  async function loadPromos(){
    const { data, error } = await sb.from('promos').select('*').order('created_at', {ascending:false});
    if(error){ console.error(error); return; }
    els.promoTable.innerHTML = '';
    (data||[]).forEach(p=>{
      const tr = document.createElement('tr');
      tr.innerHTML = `
        <td>${escapeHtml(p.title||'')}</td>
        <td><a href="${p.href||'#'}" target="_blank">${p.href||''}</a></td>
        <td>${p.pin ? '📌' : '-'}</td>
        <td>
          <button class="btn" data-edit="${p.id}">Edit</button>
          <button class="btn bad" data-del="${p.id}">Hapus</button>
        </td>`;
      els.promoTable.append(tr);
    });
    // actions
    els.promoTable.querySelectorAll('button[data-edit]').forEach(btn=>{
      btn.onclick = async ()=>{
        const id = btn.getAttribute('data-edit');
        const { data } = await sb.from('promos').select('*').eq('id', id).single();
        const title = prompt('Title:', data.title); if(title===null) return;
        const href = prompt('Link (URL):', data.href); if(href===null) return;
        const pin = confirm('Pin promo ini? (OK = pin, Cancel = tidak)');
        const res = await sb.from('promos').update({ title, href, pin }).eq('id', id);
        if(res.error) alert(res.error.message); else loadPromos();
      };
    });
    els.promoTable.querySelectorAll('button[data-del]').forEach(btn=>{
      btn.onclick = async ()=>{
        if(!confirm('Yakin hapus promo ini?')) return;
        const id = btn.getAttribute('data-del');
        const res = await sb.from('promos').delete().eq('id', id);
        if(res.error) alert(res.error.message); else loadPromos();
      };
    });
  }
  els.btnAddPromo.onclick = async ()=>{
    const title = prompt('Title promo:'); if(!title) return;
    const href = prompt('URL promo:'); if(!href) return;
    const pin = confirm('Pin promo ini? (OK = pin)');
    const { error } = await sb.from('promos').insert({ title, href, pin });
    if(error) alert(error.message); else loadPromos();
  };

  // RTP ITEMS
  async function loadRTP(){
    const { data, error } = await sb.from('rtp_items')
      .select('*').order('updated_at', {ascending:false}).limit(200);
    if(error){ console.error(error); return; }
    els.rtpTable.innerHTML='';
    (data||[]).forEach(r=>{
      const tr = document.createElement('tr');
      tr.innerHTML = `
        <td><span class="badge">${escapeHtml(r.provider||'')}</span></td>
        <td>${escapeHtml(r.game_name||'')}</td>
        <td>${r.image_url ? `<a href="${r.image_url}" target="_blank">Lihat</a>` : '-'}</td>
        <td>${r.rtp ?? '-'}</td>
        <td>${r.status ?? '-'}</td>
        <td>
          <button class="btn" data-edit="${r.id}">Edit</button>
          <button class="btn bad" data-del="${r.id}">Hapus</button>
        </td>`;
      els.rtpTable.append(tr);
    });
    els.rtpTable.querySelectorAll('button[data-edit]').forEach(btn=>{
      btn.onclick = async ()=>{
        const id = btn.getAttribute('data-edit');
        const { data } = await sb.from('rtp_items').select('*').eq('id', id).single();
        if(!data) return;

        const provider = prompt('Provider:', data.provider) ?? data.provider;
        const game_name = prompt('Game name:', data.game_name) ?? data.game_name;
        const image_url = prompt('Image URL:', data.image_url || '') ?? data.image_url;
        const rtpStr = prompt('RTP (0-100):', (data.rtp ?? '').toString()) ?? data.rtp;
        const status = prompt("Status (gacor/normal/hindari):", data.status || 'normal') ?? data.status;

        const rtp = rtpStr === '' ? null : parseInt(rtpStr,10);
        const res = await sb.from('rtp_items').update({
          provider, game_name, image_url, rtp, status, updated_at: new Date().toISOString()
        }).eq('id', id);
        if(res.error) alert(res.error.message); else loadRTP();
      };
    });
    els.rtpTable.querySelectorAll('button[data-del]').forEach(btn=>{
      btn.onclick = async ()=>{
        if(!confirm('Yakin hapus game ini?')) return;
        const id = btn.getAttribute('data-del');
        const res = await sb.from('rtp_items').delete().eq('id', id);
        if(res.error) alert(res.error.message); else loadRTP();
      };
    });
  }
  els.btnAddRTP.onclick = async ()=>{
    const provider = prompt('Provider (mis. PRAGMATICPLAY / PG SOFT):'); if(!provider) return;
    const game_name = prompt('Nama game:'); if(!game_name) return;
    const image_url = prompt('Image URL (opsional):','') || null;
    const rtpStr = prompt('RTP (0-100, opsional):',''); const rtp = rtpStr? parseInt(rtpStr,10): null;
    const status = prompt('Status (gacor/normal/hindari, opsional):','normal') || 'normal';
    const { error } = await sb.from('rtp_items').insert({
      provider, game_name, image_url, rtp, status, updated_at: new Date().toISOString()
    });
    if(error) alert(error.message); else loadRTP();
  };

  // Helpers
  function escapeHtml(s){ return (s??'').toString().replace(/[&<>"']/g, m=>({ "&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;" }[m])); }
</script>
</body>
</html>
