(() => {
const {useState,useEffect}=React;
const categories={'kesehatan-domba':'Kesehatan Domba','domba-garut':'Domba Garut'};
const date=v=>v?new Date(v).toLocaleDateString('id-ID',{day:'numeric',month:'long',year:'numeric'}):'Belum diterbitkan';
async function api(url,options={}){const r=await fetch(url,options);const b=await r.json();if(!r.ok)throw new Error(b.error||'Permintaan gagal.');return b;}
const json=(method,body)=>({method,headers:{'Content-Type':'application/json'},body:JSON.stringify(body)});
function Cover({item}){return item.image_url?<img className="cover" src={item.image_url} alt={item.alt_text||item.title} loading="lazy"/>:<div className="cover placeholder">Kambing Bismillah · Artikel</div>}
function ArticleList(){const [items,setItems]=useState([]),[category,setCategory]=useState(()=>{const v=new URLSearchParams(location.search).get('category');return categories[v]?v:''}),[page,setPage]=useState(1),[total,setTotal]=useState(0),[error,setError]=useState(''),[loading,setLoading]=useState(true);
 useEffect(()=>{let active=true;setLoading(true);setError('');api(`/api/public/articles?category=${category}&page=${page}`).then(b=>{if(active){setItems(b.data);setTotal(b.total);}}).catch(e=>active&&setError(e.message)).finally(()=>active&&setLoading(false));return()=>{active=false}},[category,page]);
 return <><section className="hero"><span className="pill">Catatan dari peternakan</span><h1>Artikel & Informasi</h1><p>Pengetahuan kesehatan domba dan kabar seputar Domba Garut.</p></section><div className="toolbar"><label>Kategori<select value={category} onChange={e=>{setCategory(e.target.value);setPage(1)}}><option value="">Semua artikel</option>{Object.entries(categories).map(([k,v])=><option key={k} value={k}>{v}</option>)}</select></label></div>{error?<p role="alert" className="notice">{error}</p>:loading?<p role="status">Memuat artikel…</p>:<><div className="grid">{items.map(a=><article key={a.id} className="card"><a href={'/artikel/'+a.slug}><Cover item={a}/></a><div className="pad"><span className="pill">{categories[a.category]}</span><h2><a href={'/artikel/'+a.slug}>{a.title}</a></h2><time>{date(a.published_at)}</time><p>{a.excerpt}</p><a href={'/artikel/'+a.slug}>Baca selengkapnya →</a></div></article>)}</div>{!items.length&&<p className="notice">Belum ada artikel yang diterbitkan dalam kategori ini.</p>}<div className="toolbar"><button disabled={page===1} onClick={()=>setPage(page-1)}>Sebelumnya</button><span>Halaman {page}</span><button disabled={page*12>=total} onClick={()=>setPage(page+1)}>Berikutnya</button></div></>}</>;
}
function ArticleDetail(){const [item,setItem]=useState(null),[error,setError]=useState('');useEffect(()=>{api('/api/public/articles/'+encodeURIComponent(decodeURIComponent(location.pathname.split('/')[2]))).then(b=>{setItem(b.data);document.title=b.data.title+' | Kambing Bismillah'}).catch(e=>setError(e.message));},[]);return <article className="detail"><a href="/artikel">← Semua artikel</a>{error?<p className="notice" role="alert">{error}</p>:!item?<p>Memuat artikel…</p>:<><p><span className="pill">{categories[item.category]}</span></p><h1>{item.title}</h1><p className="muted">{item.author_name} · {date(item.published_at)}</p><Cover item={item}/><p><strong>{item.excerpt}</strong></p>{item.content_format==='html'?<div className="prose rich-prose" dangerouslySetInnerHTML={{__html:item.content}}/>:<div className="prose">{item.content}</div>}<p><a href={'/artikel?category='+item.category}>Jelajahi artikel lainnya</a></p></>}</article>}
function CCTV(){const [data,setData]=useState(null),[error,setError]=useState(''),[key,setKey]=useState(0);useEffect(()=>{api('/api/public/cctv').then(b=>setData(b.data)).catch(e=>setError(e.message));},[]);return <><section className="hero"><span className="pill">Pantau peternakan</span><h1>Live Streaming CCTV</h1><p>Lihat aktivitas domba di area peternakan yang dibuka untuk pengunjung.</p></section>{error?<p className="notice" role="alert">{error}</p>:!data?<p>Memuat kamera…</p>:!data.enabled?<div className="card pad"><h2>Kamera belum tersedia</h2><p>Siaran peternakan belum diaktifkan. Silakan kunjungi kembali halaman ini nanti.</p></div>:<><h2>{data.name}</h2><iframe key={key} className="stream" src={data.player_url} title={'Siaran CCTV '+data.name} allow="autoplay; fullscreen; picture-in-picture" allowFullScreen/><p className="muted">Siaran dapat mengalami jeda. Status pemutaran ditampilkan di pemutar video.</p><button onClick={()=>setKey(key+1)}>Hubungkan ulang</button><p>Jika video belum muncul, tunggu beberapa saat atau hubungkan ulang.</p></>}</>}

window.PublicArticles={List:ArticleList,Detail:ArticleDetail,CCTV};
})();