/** BPKK beginner workshop. DATA SIMULASI sahaja. */
const NEGERI = ['Johor','Kedah','Kelantan','Melaka','Negeri Sembilan','Pahang','Perak','Perlis','Pulau Pinang','Sabah','Sarawak','Selangor','Terengganu','WP Kuala Lumpur','WP Labuan','WP Putrajaya'];
const HEADER = ['id','masa','negeri','bulan','sasaran','disaring'];

function doGet() {
  return HtmlService.createHtmlOutputFromFile('Index')
    .setTitle('BPKK | Portal Latihan Saringan')
    .addMetaTag('viewport', 'width=device-width, initial-scale=1');
}

// Run SEKALI dari editor. Tiada reset atau pemadaman data.
function setupLatihan() {
  const active = Session.getActiveUser().getEmail();
  if (!active || active !== Session.getEffectiveUser().getEmail()) {
    throw new Error('Jalankan setupLatihan dari editor sebagai pemilik projek.');
  }
  const lock = LockService.getScriptLock();
  lock.waitLock(20000);
  try {
    const props = PropertiesService.getScriptProperties();
    let id = props.getProperty('SHEET_ID');
    let ss;
    if (id) ss = SpreadsheetApp.openById(id);
    else {
      ss = SpreadsheetApp.create('BPKK Latihan Saringan — DATA SIMULASI');
      ss.setSpreadsheetTimeZone('Asia/Kuala_Lumpur');
      props.setProperty('SHEET_ID', ss.getId());
    }
    let sheet = ss.getSheetByName('Data');
    if (!sheet) sheet = ss.insertSheet('Data');
    if (sheet.getLastRow() === 0) {
      sheet.getRange(1,1,1,HEADER.length).setValues([HEADER]);
      sheet.setFrozenRows(1);
      sheet.getRange('D:D').setNumberFormat('@');
      const seed = [
        ['Johor','2026-01',100,80], ['Johor','2026-02',100,90],
        ['Sabah','2026-01',200,100], ['Sabah','2026-02',200,120],
        ['Selangor','2026-01',150,120], ['Selangor','2026-02',150,150]
      ].map(r => [Utilities.getUuid(), new Date().toISOString()].concat(r));
      sheet.getRange(2,1,seed.length,HEADER.length).setValues(seed);
      sheet.autoResizeColumns(1,HEADER.length);
      SpreadsheetApp.flush();
    }
    const result = {url:ss.getUrl(), mesej:'Backend sedia. Tiada data sedia ada dipadam.'};
    console.log(JSON.stringify(result));
    return result;
  } finally { lock.releaseLock(); }
}

function sheet_() {
  const id = PropertiesService.getScriptProperties().getProperty('SHEET_ID');
  if (!id) throw new Error('Backend belum disediakan. Run setupLatihan dalam editor.');
  const sheet = SpreadsheetApp.openById(id).getSheetByName('Data');
  if (!sheet) throw new Error('Tab Data tidak ditemui.');
  const actual = sheet.getRange(1,1,1,HEADER.length).getDisplayValues()[0];
  if (actual.join('|') !== HEADER.join('|')) throw new Error('Header tab Data tidak sepadan dengan kontrak.');
  return sheet;
}

function validate_(input) {
  if (!input || typeof input !== 'object') throw new Error('Data tidak sah.');
  const negeri = String(input.negeri || '').trim();
  const bulan = String(input.bulan || '').trim();
  if (!NEGERI.includes(negeri)) throw new Error('Pilih negeri yang sah.');
  if (!/^20\d{2}-(0[1-9]|1[0-2])$/.test(bulan)) throw new Error('Bulan mesti YYYY-MM, tahun 2000–2099.');
  function integer(value, name, min) {
    if (typeof value !== 'number' && typeof value !== 'string') throw new Error(name + ' mesti nombor bulat.');
    if (String(value).trim() === '' || !/^\d+$/.test(String(value).trim())) throw new Error(name + ' mesti nombor bulat.');
    const n = Number(value);
    if (!Number.isSafeInteger(n) || n < min || n > 1000000000) throw new Error(name + ' di luar julat latihan.');
    return n;
  }
  return {negeri, bulan, sasaran:integer(input.sasaran,'Sasaran',1), disaring:integer(input.disaring,'Disaring',0)};
}

function rows_() {
  const sheet = sheet_();
  if (sheet.getLastRow() < 2) return [];
  const seen = new Set();
  return sheet.getRange(2,1,sheet.getLastRow()-1,HEADER.length).getDisplayValues()
    .filter(row => row.some(cell => cell !== ''))
    .map((r,i) => {
      let d;
      try { d = validate_({negeri:r[2],bulan:r[3],sasaran:r[4],disaring:r[5]}); }
      catch(e) { throw new Error('Semak data sumber, baris ' + (i+2) + ': ' + e.message); }
      const key = d.negeri + '|' + d.bulan;
      if (seen.has(key)) throw new Error('Data sumber berulang bagi ' + key + '. Semak Sheets.');
      seen.add(key);
      return Object.assign({id:r[0],masa:r[1]},d);
    });
}

function getData() {
  return {negeri:NEGERI.slice(), rows:rows_(), dikemasKini:new Date().toISOString()};
}

function saveRecord(input) {
  const d = validate_(input);
  const lock = LockService.getScriptLock();
  lock.waitLock(20000);
  try {
    const sheet = sheet_();
    if (rows_().some(r => r.negeri === d.negeri && r.bulan === d.bulan)) {
      throw new Error('Rekod negeri dan bulan ini sudah wujud. Tiada rekod ditambah.');
    }
    const id = Utilities.getUuid();
    const row = sheet.getLastRow()+1;
    sheet.getRange(row,4).setNumberFormat('@');
    sheet.getRange(row,1,1,HEADER.length).setValues([[id,new Date().toISOString(),d.negeri,d.bulan,d.sasaran,d.disaring]]);
    SpreadsheetApp.flush();
    return {ok:true,id:id,mesej:'Rekod berjaya disimpan dalam Google Sheets.'};
  } finally { lock.releaseLock(); }
}

<!DOCTYPE html>
<html lang="ms">
<head>
  <base target="_top">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <style>
    :root{--ink:#20231f;--gold:#d99a22;--bg:#f7f5ef;--line:#deddd4}
    *{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 Arial,sans-serif}
    header,main,footer{max-width:1100px;margin:auto;padding:20px}header{display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap;border-bottom:1px solid var(--line)}
    h1,h2,h3{font-family:Georgia,'Times New Roman',serif;line-height:1.2}h1{font-size:clamp(32px,5vw,56px);max-width:850px}h2{font-size:30px}.tag{font-size:12px;font-weight:bold;letter-spacing:1px;color:#715006}
    button{background:var(--ink);color:white;border:1px solid var(--ink);border-radius:8px;padding:10px 16px;cursor:pointer;font:inherit}button:hover{opacity:.85}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--gold);outline-offset:3px}button:disabled{opacity:.5;cursor:wait}nav{display:flex;gap:8px;flex-wrap:wrap}nav button{background:transparent;color:var(--ink)}nav button[aria-current=page]{background:var(--ink);color:white}.gold{background:var(--gold);color:var(--ink);border-color:var(--gold)}
    .card{background:white;border:1px solid var(--line);border-radius:12px;padding:22px;margin:18px 0}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.grid .card{margin:0}.value{font-size:32px;font-weight:bold}.muted{color:#5d635a}.notice{border-left:4px solid var(--gold);padding:12px 16px;background:#fff8e7}.filters{display:flex;gap:16px;flex-wrap:wrap;align-items:end}label{display:block;font-weight:bold;margin-bottom:6px}input,select{width:100%;padding:10px;border:1px solid #858a80;border-radius:7px;background:white;color:var(--ink);font:inherit}.field{margin:16px 0;min-width:180px}.filters .field{flex:1;margin:0}.form{max-width:600px}.status{padding:12px 0;min-height:40px;white-space:pre-wrap}.error{color:#a12222}.ok{color:#24633c}.table-wrap{overflow:auto}table{border-collapse:collapse;width:100%;white-space:nowrap}th,td{text-align:left;padding:10px;border-bottom:1px solid var(--line)}th{background:#f3f3ec}.chart-row{display:grid;grid-template-columns:140px 1fr 115px;gap:12px;align-items:center;margin:14px 0}.track{height:20px;background:#eeeee6;border-radius:5px;overflow:hidden}.bar{height:100%;background:var(--gold)}textarea{width:100%;min-height:180px;font:13px/1.5 monospace}footer{font-size:13px;border-top:1px solid var(--line)}[hidden]{display:none!important}@media(max-width:650px){.grid{grid-template-columns:1fr}.chart-row{grid-template-columns:100px 1fr 85px;font-size:13px}main{padding:16px}.value{font-size:28px}}
  </style>
</head>
<body>
<header><strong>BPKK · Portal Latihan</strong><nav aria-label="Navigasi utama"><button data-view="utama" aria-current="page">Utama</button><button data-view="borang">Borang</button><button data-view="dashboard">Dashboard</button></nav></header>
<main>
<p class="notice"><strong>DATA SIMULASI.</strong> Projek pembelajaran. Jangan masukkan nama, nombor pengenalan atau maklumat pesakit.</p>
<section id="utama" tabindex="-1">
  <p class="tag">DATA SIMULASI</p>
  <h1>Portal Latihan Program Saringan Kesihatan X HQ BPKK</h1>
  <p>Platform latihan digital untuk peserta beginner menguasai pengurusan data saringan secara praktikal menggunakan maklumat simulasi bulanan yang selamat dan berstruktur.</p>
  <p><button class="gold" data-view="borang">Isi borang</button> <button data-view="dashboard">Lihat dashboard</button></p>
  <div class="grid"><article class="card"><h3>1. Isi borang</h3><p>Masukkan data simulasi bulanan mengikut negeri, sasaran, dan bilangan disaring dengan tepat.</p></article><article class="card"><h3>2. Semak dashboard</h3><p>Terokai rumusan pencapaian keseluruhan serta carta prestasi menggunakan pilihan penapis.</p></article><article class="card"><h3>3. Bentangkan dapatan</h3><p>Gunakan ringkasan data yang dijana untuk perbincangan latihan kesihatan awam.</p></article></div>
</section>
<section id="borang" hidden tabindex="-1">
  <h2>Borang data bulanan</h2><p>Satu negeri + satu bulan hanya boleh dihantar sekali. Pembetulan dibuat oleh pemilik di Google Sheets.</p>
  <form id="entryForm" class="card form">
    <div class="field"><label for="negeri">Negeri</label><select id="negeri" required><option value="">Pilih negeri</option></select></div>
    <div class="field"><label for="bulan">Bulan</label><input id="bulan" type="month" min="2000-01" max="2099-12" required></div>
    <div class="field"><label for="sasaran">Sasaran latihan</label><input id="sasaran" type="number" min="1" max="1000000000" step="1" required></div>
    <div class="field"><label for="disaring">Bilangan disaring</label><input id="disaring" type="number" min="0" max="1000000000" step="1" required><small>Nilai melebihi sasaran dibenarkan. Nilai ini ialah bilangan bagi bulan tersebut, bukan kumulatif tahunan.</small></div>
    <button id="submitBtn" type="submit" disabled>Simpan rekod</button>
    <p id="formStatus" class="status" role="status" aria-live="polite"></p>
  </form>
</section>
<section id="dashboard" hidden tabindex="-1">
  <h2>Dashboard pemantauan</h2><p>Pencapaian sasaran latihan; bukan ukuran liputan populasi atau standard klinikal.</p>
  <div class="filters card"><div class="field"><label for="filterNegeri">Tapis negeri</label><select id="filterNegeri"><option value="">Semua negeri</option></select></div><div class="field"><label for="filterBulan">Tapis bulan</label><select id="filterBulan"><option value="">Semua bulan</option></select></div><button id="refreshBtn">Muat semula</button></div>
  <p id="dashStatus" class="status" role="status" aria-live="polite"></p>
  <div class="grid"><div class="card">Jumlah sasaran<div class="value" id="kpiSasaran">—</div></div><div class="card">Jumlah disaring<div class="value" id="kpiDisaring">—</div></div><div class="card">Pencapaian sasaran<div class="value" id="kpiPct">—</div></div></div>
  <p class="muted">Formula: jumlah disaring ÷ jumlah sasaran × 100. Semua paparan mengikut penapis yang dipilih.</p>
  <article class="card"><h3>Bilangan disaring mengikut negeri</h3><div id="chartNegeri" role="img" aria-label="Carta bar bilangan disaring mengikut negeri"></div></article>
  <article class="card"><h3>Bilangan disaring mengikut bulan</h3><div id="chartBulan" role="img" aria-label="Carta bar trend bulanan bilangan disaring"></div></article>
  <article class="card"><h3>Rekod sumber</h3><div class="table-wrap"><table><thead><tr><th>Negeri</th><th>Bulan</th><th>Sasaran</th><th>Disaring</th><th>Pencapaian</th></tr></thead><tbody id="records"></tbody></table></div></article>
  <article class="card"><h3>Ringkasan untuk Gemini / NotebookLM</h3><p>Salin teks di bawah sebagai sumber baharu. Ini snapshot pada masa muat semula, bukan sambungan langsung kepada NotebookLM.</p><textarea id="summary" readonly aria-label="Ringkasan data simulasi"></textarea><p><button id="copyBtn">Salin ringkasan</button></p><p id="copyStatus" role="status"></p></article>
</section>
</main><footer>Latihan BPKK · Google Sheets + Google Apps Script · DATA SIMULASI sahaja.</footer>
<script>
'use strict';
let model = {rows:[],negeri:[]};
let loadVersion = 0;
let sending = false;
const $ = id => document.getElementById(id);
const fmt = n => n.toLocaleString('en-MY');
const pct = (a,b) => b > 0 ? (a/b*100).toFixed(2)+'%' : '—';
function message(id,text,error=false){$(id).textContent=text;$(id).className='status '+(error?'error':'ok');}
function showView(view){
  ['utama','borang','dashboard'].forEach(id => $(id).hidden = id !== view);
  document.querySelectorAll('nav button').forEach(b => {if(b.dataset.view===view)b.setAttribute('aria-current','page');else b.removeAttribute('aria-current');});
  $(view).focus();
  if(view==='dashboard') loadData();
}
document.querySelectorAll('[data-view]').forEach(b => b.addEventListener('click',()=>showView(b.dataset.view)));
function options(id,values,label){const old=$(id).value;$(id).replaceChildren(new Option(label,''));values.forEach(v=>$(id).add(new Option(v,v)));if(values.includes(old))$(id).value=old;}
function loadData(){
  const version=++loadVersion;
  $('refreshBtn').disabled=true;
  message('dashStatus','Sedang membaca Google Sheets...');
  if(!(window.google && google.script && google.script.run)){
    message('dashStatus','Buka URL web app /exec daripada Apps Script. Fail HTML tempatan tidak bersambung kepada Sheets.',true);
    message('formStatus','Sambungan Apps Script tidak tersedia.',true);$('refreshBtn').disabled=false;return;
  }
  google.script.run.withSuccessHandler(data=>{
    if(version!==loadVersion)return;
    model=data;
    options('negeri',data.negeri,'Pilih negeri');
    options('filterNegeri',data.negeri,'Semua negeri');
    options('filterBulan',[...new Set(data.rows.map(r=>r.bulan))].sort(),'Semua bulan');
    $('submitBtn').disabled=sending;
    $('refreshBtn').disabled=false;
    render();
    message('dashStatus','Data dibaca: '+data.rows.length+' rekod. Snapshot '+data.dikemasKini);
  }).withFailureHandler(e=>{
    if(version!==loadVersion)return;
    $('refreshBtn').disabled=false;$('submitBtn').disabled=true;
    message('dashStatus',e.message||String(e),true);
    message('formStatus','Data belum dapat dibaca. Semak Dashboard dan muat semula.',true);
    ['kpiSasaran','kpiDisaring','kpiPct'].forEach(id=>$(id).textContent='—');
    ['chartNegeri','chartBulan','records'].forEach(id=>$(id).replaceChildren());$('summary').value='';
  }).getData();
}
function filtered(){return model.rows.filter(r=>(!$('filterNegeri').value||r.negeri===$('filterNegeri').value)&&(!$('filterBulan').value||r.bulan===$('filterBulan').value));}
function chart(id,rows,key){
  const groups=new Map();rows.forEach(r=>groups.set(r[key],(groups.get(r[key])||0)+r.disaring));
  const target=$(id);target.replaceChildren();
  if(!rows.length){target.textContent='Tiada data untuk penapis ini.';return;}
  const max=Math.max(1,...groups.values());
  [...groups].sort((a,b)=>a[0].localeCompare(b[0])).forEach(([label,n])=>{
    const row=document.createElement('div');row.className='chart-row';
    const name=document.createElement('span');name.textContent=label;
    const track=document.createElement('div');track.className='track';
    const bar=document.createElement('div');bar.className='bar';bar.style.width=(n/max*100)+'%';track.append(bar);
    const value=document.createElement('span');value.textContent=fmt(n);
    row.append(name,track,value);target.append(row);
  });
}
function render(){
  const rows=filtered();const s=rows.reduce((n,r)=>n+r.sasaran,0);const d=rows.reduce((n,r)=>n+r.disaring,0);
  $('kpiSasaran').textContent=fmt(s);$('kpiDisaring').textContent=fmt(d);$('kpiPct').textContent=pct(d,s);
  chart('chartNegeri',rows,'negeri');chart('chartBulan',rows,'bulan');$('records').replaceChildren();
  rows.slice().sort((a,b)=>(a.bulan+a.negeri).localeCompare(b.bulan+b.negeri)).forEach(r=>{
    const tr=document.createElement('tr');[r.negeri,r.bulan,fmt(r.sasaran),fmt(r.disaring),pct(r.disaring,r.sasaran)].forEach(value=>{const td=document.createElement('td');td.textContent=value;tr.append(td);});$('records').append(tr);
  });
  if(!rows.length){const tr=document.createElement('tr');const td=document.createElement('td');td.colSpan=5;td.textContent='Tiada rekod.';tr.append(td);$('records').append(tr);}
  const byState=[...new Set(rows.map(r=>r.negeri))].sort().map(n=>{const rr=rows.filter(r=>r.negeri===n);const ss=rr.reduce((a,r)=>a+r.sasaran,0);const dd=rr.reduce((a,r)=>a+r.disaring,0);return n+': sasaran '+ss+', disaring '+dd+', pencapaian '+pct(dd,ss);});
  $('summary').value=['RINGKASAN DATA SIMULASI BPKK','Snapshot: '+model.dikemasKini,'Penapis negeri: '+($('filterNegeri').value||'Semua'),'Penapis bulan: '+($('filterBulan').value||'Semua'),'Bilangan rekod: '+rows.length,'Jumlah sasaran: '+s,'Jumlah disaring: '+d,'Pencapaian sasaran: '+pct(d,s),'Formula: jumlah disaring / jumlah sasaran * 100.',...byState,'Rekod bulanan (negeri | bulan | sasaran | disaring):',...rows.map(r=>[r.negeri,r.bulan,r.sasaran,r.disaring].join(' | ')),'Limitasi: data simulasi agregat; bilangan saringan tidak semestinya individu unik merentas bulan. Pencapaian sasaran bukan liputan populasi. Data tidak menerangkan punca perbezaan dan bukan bukti hubungan sebab-akibat.'].join('\n');
}
$('filterNegeri').addEventListener('change',render);$('filterBulan').addEventListener('change',render);$('refreshBtn').addEventListener('click',loadData);
$('entryForm').addEventListener('submit',event=>{
  event.preventDefault();if(sending||!$('entryForm').reportValidity())return;
  sending=true;$('submitBtn').disabled=true;message('formStatus','Sedang menyimpan...');
  const input={negeri:$('negeri').value,bulan:$('bulan').value,sasaran:$('sasaran').value,disaring:$('disaring').value};
  google.script.run.withSuccessHandler(result=>{
    sending=false;message('formStatus',result.mesej+' ID: '+result.id);$('entryForm').reset();loadData();
  }).withFailureHandler(e=>{
    sending=false;$('submitBtn').disabled=false;message('formStatus',(e.message||String(e))+' Jika sambungan terputus, semak Google Sheets sebelum cuba lagi.',true);
  }).saveRecord(input);
});
$('copyBtn').addEventListener('click',async()=>{
  try{await navigator.clipboard.writeText($('summary').value);$('copyStatus').textContent='Ringkasan disalin.';}
  catch(e){$('summary').focus();$('summary').select();$('copyStatus').textContent='Tekan Ctrl+C atau Cmd+C untuk menyalin teks yang dipilih.';}
});
loadData();
</script>
</body>
</html>

{
  "timeZone": "Asia/Kuala_Lumpur",
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8",
  "oauthScopes": ["https://www.googleapis.com/auth/spreadsheets", "https://www.googleapis.com/auth/userinfo.email"],
  "webapp": {"executeAs": "USER_DEPLOYING", "access": "MYSELF"}
}