'use client';
import {useCallback,useEffect,useMemo,useState} from 'react';
import {AlertTriangle,BedDouble,CalendarDays,Check,ChevronRight,Clock3,CloudUpload,Eye,HardDrive,Images,LayoutDashboard,LayoutTemplate,ListVideo,LoaderCircle,LogOut,MonitorSmartphone,MoreHorizontal,Pencil,Play,Plus,RefreshCw,Save,Search,Send,Settings2,ShieldCheck,Smartphone,Upload,Wifi,WifiOff,X} from 'lucide-react';
import {Toaster,toast} from 'sonner';
import {contentSchema,money,type Device,type Room,type SignageContent,type SignageTemplate,type Snapshot} from '@/lib/content';

const menus=[
  {id:'overview',label:'Dashboard',icon:LayoutDashboard},
  {id:'studio',label:'Konten',icon:Pencil},
  {id:'templates',label:'Template',icon:LayoutTemplate},
  {id:'rooms',label:'Kamar & Harga',icon:BedDouble},
  {id:'playlists',label:'Playlist & Jadwal',icon:ListVideo},
  {id:'devices',label:'Perangkat',icon:MonitorSmartphone},
  {id:'media',label:'Media Library',icon:Images},
  {id:'publish',label:'Publikasi',icon:Send},
  {id:'settings',label:'Pengaturan',icon:Settings2}
] as const;
type View=(typeof menus)[number]['id'];

async function json<T>(response:Response):Promise<T>{const body=await response.json() as T&{error?:string};if(!response.ok)throw new Error(body.error||'Permintaan gagal.');return body}
const formatDate=(value:string)=>new Intl.DateTimeFormat('id-ID',{dateStyle:'medium',timeStyle:'short'}).format(new Date(value));

function Field({label,value,onChange,type='text',multiline=false,min,max,help}:{label:string;value:string|number;onChange:(value:string)=>void;type?:string;multiline?:boolean;min?:number;max?:number;help?:string}){
  return <label className="field"><span>{label}</span>{multiline?<textarea rows={4} value={value} onChange={event=>onChange(event.target.value)}/>:<input type={type} value={value} min={min} max={max} onChange={event=>onChange(event.target.value)}/>} {help&&<small>{help}</small>}</label>;
}

function Toggle({checked,onChange,label}:{checked:boolean;onChange:(value:boolean)=>void;label:string}){
  return <button type="button" className={'switch '+(checked?'on':'')} onClick={()=>onChange(!checked)} aria-pressed={checked}><span/>{label}</button>;
}

function DeviceStatus({status}:{status:Device['status']}){
  const label=status==='online'?'Online':status==='syncing'?'Sinkronisasi':'Offline';
  return <span className={'status '+status}>{status==='online'?<Wifi size={13}/>:status==='syncing'?<RefreshCw size={13}/>:<WifiOff size={13}/>} {label}</span>;
}

function ScreenPreview({content,template,room,compact=false}:{content:SignageContent;template:SignageTemplate;room?:Room;compact?:boolean}){
  const visual=room?.image||template.image||'/images/room.jpg';
  const price=room?.promoPrice||room?.price||0;
  return <div className={'screen-preview '+template.layout+(compact?' compact':'')} style={{'--screen-accent':template.accent} as React.CSSProperties}>
    <img src={visual} alt="Pratinjau signage"/>
    <div className="screen-shade"/>
    <div className="screen-top"><span className="screen-hotel">{content.settings.hotelName}</span><small>{content.settings.location}</small></div>
    <div className="screen-content">
      <span className="screen-kicker">{template.category}</span>
      <h3>{room?.name||template.name}</h3>
      <p>{room?.description||template.description}</p>
      {room&&<><div className="screen-line"/><strong>{money(price,content.settings.currency)} <small>/ malam</small></strong><span className="screen-features">{room.features}</span></>}
      {!room&&template.id==='welcome'&&<strong className="welcome-copy">WELCOME</strong>}
    </div>
    <div className="screen-footer"><span>D&amp;H SMART SIGNAGE</span><span>{new Date().toLocaleTimeString('id-ID',{hour:'2-digit',minute:'2-digit'})}</span></div>
  </div>;
}

export default function CMS(){
  const [view,setView]=useState<View>('overview');
  const [state,setState]=useState<Snapshot|null>(null);
  const [content,setContent]=useState<SignageContent|null>(null);
  const [loading,setLoading]=useState(true);
  const [busy,setBusy]=useState(false);
  const [error,setError]=useState('');
  const [selectedTemplate,setSelectedTemplate]=useState('room-price');
  const [selectedRoom,setSelectedRoom]=useState('deluxe-garden');
  const [query,setQuery]=useState('');
  const [mobileNav,setMobileNav]=useState(false);

  const load=useCallback(async()=>{setLoading(true);setError('');try{const next=await json<Snapshot>(await fetch('/api/cms',{cache:'no-store'}));setState(next);setContent(next.draft)}catch(reason){setError((reason as Error).message)}finally{setLoading(false)}},[]);
  useEffect(()=>{void load();const hash=location.hash.slice(1) as View;if(menus.some(menu=>menu.id===hash))setView(hash)},[load]);
  const navigate=(next:View)=>{setView(next);setMobileNav(false);setQuery('');history.replaceState(null,'','#'+next);window.scrollTo({top:0,behavior:'smooth'})};
  const dirty=!!content&&!!state&&JSON.stringify(content)!==JSON.stringify(state.draft);
  useEffect(()=>{const guard=(event:BeforeUnloadEvent)=>{if(dirty){event.preventDefault();event.returnValue=''}};addEventListener('beforeunload',guard);return()=>removeEventListener('beforeunload',guard)},[dirty]);

  async function save(next=content){if(!next||!state)return null;const parsed=contentSchema.safeParse(next);if(!parsed.success){toast.error(parsed.error.issues.slice(0,2).map(issue=>issue.path.join('.')+': '+issue.message).join(' · '));return null}setBusy(true);try{const result=await json<Snapshot>(await fetch('/api/cms',{method:'PUT',headers:{'Content-Type':'application/json'},body:JSON.stringify({revision:state.revision,content:parsed.data})}));setState(result);setContent(result.draft);toast.success('Draf berhasil disimpan.');return result}catch(reason){setError((reason as Error).message);toast.error((reason as Error).message);return null}finally{setBusy(false)}}
  async function publish(){if(!state)return;setBusy(true);try{let current=state;if(dirty){const saved=await save();if(!saved)return;current=saved}const result=await json<Snapshot>(await fetch('/api/cms',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({action:'publish',revision:current.revision})}));setState(result);setContent(result.draft);toast.success('Konten dikirim ke semua Player.')}catch(reason){toast.error((reason as Error).message)}finally{setBusy(false)}}
  async function logout(){await fetch('/api/auth',{method:'DELETE'});location.href='/login'}

  const template=content?.templates.find(item=>item.id===selectedTemplate)||content?.templates[0];
  const room=content?.rooms.find(item=>item.id===selectedRoom)||content?.rooms[0];
  const activeMenu=menus.find(menu=>menu.id===view)!;
  const online=content?.devices.filter(device=>device.status==='online').length||0;
  const published=!!state?.publishedAt&&state.publishedRevision===state.revision;
  const filteredMedia=content?.media.filter(item=>item.name.toLowerCase().includes(query.toLowerCase()))||[];
  const totalSlides=content?.playlists.reduce((sum,list)=>sum+list.items.length,0)||0;

  function updateRoom(id:string,patch:Partial<Room>){setContent(current=>current?{...current,rooms:current.rooms.map(item=>item.id===id?{...item,...patch}:item)}:null)}
  function updateTemplate(id:string,patch:Partial<SignageTemplate>){setContent(current=>current?{...current,templates:current.templates.map(item=>item.id===id?{...item,...patch}:item)}:null)}
  function addRoom(){if(!content)return;const id='room-'+Date.now();setContent({...content,rooms:[...content.rooms,{id,name:'Tipe Kamar Baru',price:1000000,promoPrice:0,description:'Tambahkan deskripsi kamar.',features:'King bed · Wi-Fi · Sarapan',image:'/images/room.jpg',available:true}]});setSelectedRoom(id);navigate('rooms')}
  function addDevice(){if(!content)return;const id='display-'+Date.now();const code='DH-'+Math.floor(100+Math.random()*900)+'-'+Math.floor(100+Math.random()*900);setContent({...content,devices:[...content.devices,{id,name:'Display Baru',code,location:'Lokasi belum diatur',orientation:'portrait',resolution:'1080 × 1920',playlistId:content.playlists[0]?.id||'',status:'offline',lastSeen:new Date().toISOString()}]});toast.success('Perangkat dibuat. Simpan draf untuk mempertahankannya.')}
  async function uploadMedia(file:File){if(!content)return;setBusy(true);try{const form=new FormData();form.append('file',file);const result=await json<{url:string;name:string;type:'image'|'video'}>(await fetch('/api/media',{method:'POST',body:form}));setContent({...content,media:[{id:crypto.randomUUID(),name:file.name.replace(/\.[^.]+$/,''),type:result.type,url:result.url,size:(file.size/1024/1024).toFixed(1)+' MB',createdAt:new Date().toISOString()},...content.media]});toast.success('Media siap. Simpan draf untuk menyelesaikan.')}catch(reason){toast.error((reason as Error).message)}finally{setBusy(false)}}

  if(loading)return <main className="app-loading"><div className="dh-symbol">D<span>&</span>H</div><LoaderCircle className="spin"/><p>Menyiapkan Smart Signage Workspace…</p></main>;
  if(!content||!state)return <main className="app-loading"><AlertTriangle/><h1>Workspace belum tersedia</h1><p>{error}</p><button className="btn gold" onClick={()=>void load()}>Coba lagi</button></main>;

  return <div className="cms-shell"><Toaster theme="dark" richColors position="bottom-right"/>
    <aside className={'main-sidebar '+(mobileNav?'open':'')}>
      <button className="mobile-close" onClick={()=>setMobileNav(false)}><X/></button>
      <button className="product-brand" onClick={()=>navigate('overview')}><div className="dh-symbol small">D<span>&</span>H</div><div><strong>SMART SIGNAGE</strong><small>CONTROL CENTER</small></div></button>
      <div className="hotel-switcher"><span>{content.settings.hotelName.charAt(0)}</span><div><strong>{content.settings.hotelName}</strong><small>{content.settings.location}</small></div><MoreHorizontal size={18}/></div>
      <nav><p>WORKSPACE</p>{menus.map(menu=><button key={menu.id} className={view===menu.id?'active':''} onClick={()=>navigate(menu.id)}><menu.icon size={18}/><span>{menu.label}</span>{menu.id==='devices'&&<small>{online}/{content.devices.length}</small>}</button>)}</nav>
      <div className="sidebar-system"><div><span className="pulse"/><p><strong>Cloud tersambung</strong><small>{online} perangkat aktif</small></p></div><button onClick={()=>void logout()} title="Keluar"><LogOut size={17}/></button></div>
      <p className="developer-credit">DEVELOPED BY<br/><strong>D&amp;H SMART SYSTEM</strong></p>
    </aside>

    <main className="cms-main">
      <header className="cms-topbar"><button className="menu-trigger" onClick={()=>setMobileNav(true)}><span/><span/><span/></button><div className="crumb"><span>Workspace</span><ChevronRight size={14}/><strong>{activeMenu.label}</strong></div><div className="topbar-actions"><span className={'sync-state '+(dirty?'dirty':'')}><span/>{dirty?'Perubahan belum disimpan':'Tersinkronisasi'}</span><a className="icon-button" href="/preview" target="_blank" title="Pratinjau"><Eye size={18}/></a><button className="btn gold" disabled={busy} onClick={()=>void publish()}>{busy?<LoaderCircle className="spin" size={16}/>:<CloudUpload size={16}/>} Publikasikan</button></div></header>
      {error&&<div className="global-error"><AlertTriangle size={17}/>{error}<button onClick={()=>setError('')}><X size={15}/></button></div>}
      <div className="cms-body">
        <section className="page-title"><div><p className="eyebrow">{view==='overview'?'SYSTEM OVERVIEW':'D&H SMART SIGNAGE'}</p><h1>{view==='overview'?'Selamat datang kembali.':activeMenu.label}</h1><p>{({overview:'Pantau konten dan seluruh display hotel dari satu tempat.',studio:'Edit konten dan lihat hasilnya langsung dalam format 9:16.',templates:'Delapan desain siap pakai untuk kebutuhan hotel.',rooms:'Satu sumber data harga yang dapat digunakan di semua template.',playlists:'Atur urutan, durasi, dan waktu tayang konten.',devices:'Kelola Player, status koneksi, dan playlist setiap display.',media:'Simpan foto dan aset visual hotel.',publish:'Periksa draf dan kirim versi terbaru ke display.',settings:'Identitas hotel dan pengaturan sistem Player.'} as Record<View,string>)[view]}</p></div>{view!=='publish'&&<div className="title-actions"><button className="btn outline" disabled={busy||!dirty} onClick={()=>void save()}><Save size={16}/> Simpan draf</button>{view==='rooms'&&<button className="btn subtle-gold" onClick={addRoom}><Plus size={16}/> Kamar baru</button>}{view==='devices'&&<button className="btn subtle-gold" onClick={addDevice}><Plus size={16}/> Perangkat</button>}</div>}</section>

        {view==='overview'&&<>
          <section className="metric-grid">
            <article><span className="metric-icon cyan"><MonitorSmartphone/></span><div><small>DISPLAY AKTIF</small><strong>{online}<em>/{content.devices.length}</em></strong><p><span className="up">●</span> Terhubung sekarang</p></div></article>
            <article><span className="metric-icon gold"><ListVideo/></span><div><small>PLAYLIST</small><strong>{content.playlists.length}</strong><p>{totalSlides} konten terjadwal</p></div></article>
            <article><span className="metric-icon violet"><LayoutTemplate/></span><div><small>TEMPLATE</small><strong>{content.templates.length}</strong><p>Siap digunakan</p></div></article>
            <article><span className="metric-icon green"><HardDrive/></span><div><small>MEDIA</small><strong>{content.media.length}</strong><p>R2 cloud storage</p></div></article>
          </section>
          <section className="overview-grid">
            <article className="panel live-panel"><div className="panel-head"><div><p className="eyebrow">LIVE OUTPUT</p><h2>Lobby Utama</h2></div><DeviceStatus status={content.devices[0]?.status||'offline'}/></div><div className="live-layout"><ScreenPreview content={content} template={template!} room={room} compact/><div className="live-info"><span className="now-playing"><Play size={14} fill="currentColor"/> NOW PLAYING</span><h3>{content.playlists[0]?.items[1]?.title}</h3><p>{content.playlists[0]?.name} · Slide 2 dari {content.playlists[0]?.items.length}</p><div className="progress-track"><span style={{width:'64%'}}/></div><div className="live-meta"><span><Clock3/>15 detik</span><span><MonitorSmartphone/>1080 × 1920</span></div><button className="text-button" onClick={()=>navigate('studio')}>Buka editor <ChevronRight/></button></div></div></article>
            <article className="panel device-health"><div className="panel-head"><div><p className="eyebrow">DEVICE HEALTH</p><h2>Status perangkat</h2></div><button className="text-button" onClick={()=>navigate('devices')}>Lihat semua</button></div>{content.devices.map(device=><div className="health-row" key={device.id}><span className={'device-dot '+device.status}><MonitorSmartphone/></span><div><strong>{device.name}</strong><small>{device.location}</small></div><DeviceStatus status={device.status}/></div>)}</article>
          </section>
          <section className="panel activity-panel"><div className="panel-head"><div><p className="eyebrow">ACTIVITY</p><h2>Aktivitas terbaru</h2></div><span className="secure"><ShieldCheck/> Workspace terlindungi</span></div><div className="activity-list">{state.activity.slice(0,5).map((item,index)=><div key={item.time+index}><span><Check/></span><p><strong>{item.label}</strong><small>{formatDate(item.time)}</small></p></div>)}</div></section>
        </>}

        {view==='studio'&&<section className="studio-layout">
          <article className="panel editor-panel"><div className="panel-head"><div><p className="eyebrow">CONTENT EDITOR</p><h2>Room &amp; Price</h2></div><span className="draft-badge">DRAF LOKAL</span></div>
            <div className="form-grid"><label className="field"><span>Template</span><select value={selectedTemplate} onChange={event=>setSelectedTemplate(event.target.value)}>{content.templates.map(item=><option value={item.id} key={item.id}>{item.name}</option>)}</select></label><label className="field"><span>Tipe kamar</span><select value={selectedRoom} onChange={event=>setSelectedRoom(event.target.value)}>{content.rooms.map(item=><option value={item.id} key={item.id}>{item.name}</option>)}</select></label></div>
            {room&&<><Field label="Nama kamar" value={room.name} onChange={value=>updateRoom(room.id,{name:value})}/><div className="form-grid"><Field label="Harga normal" type="number" min={0} value={room.price} onChange={value=>updateRoom(room.id,{price:Number(value)})}/><Field label="Harga promo" type="number" min={0} value={room.promoPrice} onChange={value=>updateRoom(room.id,{promoPrice:Number(value)})}/></div><Field label="Deskripsi" multiline value={room.description} onChange={value=>updateRoom(room.id,{description:value})}/><Field label="Fasilitas singkat" value={room.features} onChange={value=>updateRoom(room.id,{features:value})}/></>}
            {template&&<div className="accent-editor"><label><span>Warna aksen</span><input type="color" value={template.accent} onChange={event=>updateTemplate(template.id,{accent:event.target.value})}/><code>{template.accent}</code></label><Toggle label="Template aktif" checked={template.enabled} onChange={enabled=>updateTemplate(template.id,{enabled})}/></div>}
          </article>
          <article className="panel preview-panel"><div className="panel-head"><div><p className="eyebrow">LIVE PREVIEW</p><h2>Portrait 9:16</h2></div><span className="resolution">1080 × 1920</span></div>{template&&<ScreenPreview content={content} template={template} room={room}/>}<div className="preview-toolbar"><span><span className="pulse"/> Preview langsung</span><a href="/preview" target="_blank"><Eye/> Buka fullscreen</a></div></article>
        </section>}

        {view==='templates'&&<section className="template-grid">{content.templates.map((item,index)=><article key={item.id} className={'template-card '+(item.id===selectedTemplate?'selected':'')} onClick={()=>{setSelectedTemplate(item.id);setView('studio')}}><div className="template-thumb"><img src={item.image} alt=""/><span>{String(index+1).padStart(2,'0')}</span><div className="mini-layout" style={{'--mini-accent':item.accent} as React.CSSProperties}><i/><b/><em/></div></div><div><span className="category">{item.category}</span><h3>{item.name}</h3><p>{item.description}</p><div className="card-foot"><span className={item.enabled?'enabled':'disabled'}>{item.enabled?'Aktif':'Nonaktif'}</span><ChevronRight/></div></div></article>)}</section>}

        {view==='rooms'&&<section className="room-workspace"><div className="room-list panel"><div className="list-search"><Search/><input placeholder="Cari tipe kamar…" value={query} onChange={event=>setQuery(event.target.value)}/></div>{content.rooms.filter(item=>item.name.toLowerCase().includes(query.toLowerCase())).map(item=><button key={item.id} className={selectedRoom===item.id?'active':''} onClick={()=>setSelectedRoom(item.id)}><img src={item.image} alt=""/><div><strong>{item.name}</strong><small>{money(item.promoPrice||item.price,content.settings.currency)}</small></div><ChevronRight/></button>)}</div>{room&&<article className="panel room-editor"><div className="panel-head"><div><p className="eyebrow">ROOM DATA</p><h2>{room.name}</h2></div><Toggle label="Tersedia" checked={room.available} onChange={available=>updateRoom(room.id,{available})}/></div><div className="room-hero"><img src={room.image} alt=""/><button onClick={()=>navigate('media')}><Images/> Pilih dari Media</button></div><div className="form-grid"><Field label="Nama kamar" value={room.name} onChange={value=>updateRoom(room.id,{name:value})}/><Field label="URL gambar" value={room.image} onChange={image=>updateRoom(room.id,{image})}/></div><div className="form-grid"><Field label="Harga normal" type="number" value={room.price} onChange={value=>updateRoom(room.id,{price:Number(value)})}/><Field label="Harga promo" type="number" value={room.promoPrice} onChange={value=>updateRoom(room.id,{promoPrice:Number(value)})}/></div><Field label="Deskripsi" multiline value={room.description} onChange={description=>updateRoom(room.id,{description})}/><Field label="Fasilitas" value={room.features} onChange={features=>updateRoom(room.id,{features})}/></article>}</section>}

        {view==='playlists'&&<section className="playlist-grid">{content.playlists.map(list=><article className="panel playlist-card" key={list.id}><div className="panel-head"><div><span className="playlist-icon"><ListVideo/></span><div><h2>{list.name}</h2><p>{list.description}</p></div></div><Toggle label="Aktif" checked={list.enabled} onChange={enabled=>setContent({...content,playlists:content.playlists.map(item=>item.id===list.id?{...item,enabled}:item)})}/></div><div className="schedule-strip"><span><CalendarDays/> Setiap hari</span><span><Clock3/> {list.startTime}—{list.endTime}</span><span>{list.items.length} konten</span></div><div className="slide-list">{list.items.map((slide,index)=>{const itemTemplate=content.templates.find(item=>item.id===slide.templateId),selectedMedia=content.media.find(item=>item.id===slide.mediaId);return <div key={slide.id}><span className="drag">⋮⋮</span><strong>{String(index+1).padStart(2,'0')}</strong>{selectedMedia?.type==='video'?<span className="video-thumb"><Play/></span>:<img src={selectedMedia?.url||itemTemplate?.image} alt=""/>}<p><b>{slide.title}</b><small>{itemTemplate?.name}</small><select value={slide.mediaId||''} onChange={event=>setContent({...content,playlists:content.playlists.map(item=>item.id===list.id?{...item,items:item.items.map(row=>row.id===slide.id?{...row,mediaId:event.target.value}:row)}:item)})}><option value="">Media dari template</option>{content.media.map(media=><option key={media.id} value={media.id}>{media.name}</option>)}</select></p><label><input type="number" min={5} max={300} value={slide.duration} onChange={event=>setContent({...content,playlists:content.playlists.map(item=>item.id===list.id?{...item,items:item.items.map(row=>row.id===slide.id?{...row,duration:Number(event.target.value)}:row)}:item)})}/><small>detik</small></label></div>})}</div><button className="add-slide"><Plus/> Tambah konten ke playlist</button></article>)}</section>}

        {view==='devices'&&<section className="device-grid">{content.devices.map(device=><article className="device-card panel" key={device.id}><div className="device-visual"><MonitorSmartphone/><span className={device.status}/></div><div className="device-title"><div><h2>{device.name}</h2><p>{device.location}</p></div><DeviceStatus status={device.status}/></div><dl><div><dt>Kode perangkat</dt><dd>{device.code}</dd></div><div><dt>Resolusi</dt><dd>{device.resolution}</dd></div><div><dt>Playlist</dt><dd>{content.playlists.find(item=>item.id===device.playlistId)?.name||'Belum dipilih'}</dd></div><div><dt>Terakhir terhubung</dt><dd>{formatDate(device.lastSeen)}</dd></div></dl><div className="device-actions"><a className="btn outline" href={'/player/'+device.id} target="_blank"><Eye/> Buka Player</a><button className="icon-button"><Settings2/></button></div></article>)}</section>}

        {view==='media'&&<><div className="media-toolbar"><div className="search-box"><Search/><input value={query} onChange={event=>setQuery(event.target.value)} placeholder="Cari foto atau video…"/></div><label className="btn subtle-gold"><Upload/> Unggah media<input type="file" accept="image/jpeg,image/png,image/webp,video/mp4" onChange={event=>{const file=event.target.files?.[0];if(file)void uploadMedia(file);event.target.value=''}}/></label></div><section className="media-grid">{filteredMedia.map(item=><article key={item.id}><div>{item.type==='video'?<video src={item.url} muted preload="metadata"/>:<img src={item.url} alt={item.name}/>}<span>{item.type.toUpperCase()}</span></div><h3>{item.name}</h3><p>{item.size} · {formatDate(item.createdAt)}</p></article>)}</section></>}

        {view==='publish'&&<section className="publish-layout"><article className="panel publish-card"><span className={'publish-orb '+(published?'done':'')}><CloudUpload/></span><p className="eyebrow">RELEASE CENTER</p><h2>{published?'Semua display sudah menggunakan versi terbaru.':'Draf siap diperiksa dan diterbitkan.'}</h2><p>Publikasi mengirim manifest baru ke seluruh Player. Media akan diunduh dan disimpan pada perangkat sebelum versi aktif diganti.</p><div className="release-flow"><div className="done"><span><Check/></span><p><strong>Draf lokal</strong><small>Versi {state.revision}</small></p></div><i/><div className={dirty?'current':'done'}><span>{dirty?<Pencil/>:<Check/>}</span><p><strong>Validasi</strong><small>{dirty?'Simpan perubahan':'Siap dipublikasikan'}</small></p></div><i/><div className={published?'done':'current'}><span>{published?<Check/>:<CloudUpload/>}</span><p><strong>Online</strong><small>{state.publishedAt?formatDate(state.publishedAt):'Belum diterbitkan'}</small></p></div></div><div className="release-summary"><div><span>Template aktif</span><strong>{content.templates.filter(item=>item.enabled).length}/8</strong></div><div><span>Playlist aktif</span><strong>{content.playlists.filter(item=>item.enabled).length}</strong></div><div><span>Target perangkat</span><strong>{content.devices.length}</strong></div></div><button className="btn gold publish-button" onClick={()=>void publish()} disabled={busy}>{busy?<LoaderCircle className="spin"/>:<Send/>} Simpan &amp; publikasikan sekarang</button></article><article className="panel publish-side"><p className="eyebrow">PLAYER DELIVERY</p><h2>Distribusi aman</h2><ul><li><ShieldCheck/> Player memverifikasi manifest terbaru</li><li><HardDrive/> Konten tersimpan untuk mode offline</li><li><RefreshCw/> Sinkronisasi ulang otomatis</li><li><MonitorSmartphone/> Versi lama tetap tayang selama unduhan</li></ul><div className="version-box"><span>VERSI ONLINE</span><strong>v{state.publishedRevision||0}</strong><small>{state.publishedAt?formatDate(state.publishedAt):'Belum ada versi online'}</small></div></article></section>}

        {view==='settings'&&<section className="settings-layout"><article className="panel settings-card"><div className="panel-head"><div><p className="eyebrow">HOTEL IDENTITY</p><h2>Identitas pelanggan</h2></div><span className="settings-icon"><Settings2/></span></div><div className="form-grid"><Field label="Nama hotel" value={content.settings.hotelName} onChange={hotelName=>setContent({...content,settings:{...content.settings,hotelName}})}/><Field label="Lokasi" value={content.settings.location} onChange={location=>setContent({...content,settings:{...content.settings,location}})}/></div><div className="form-grid"><Field label="Zona waktu" value={content.settings.timezone} onChange={timezone=>setContent({...content,settings:{...content.settings,timezone}})}/><Field label="Mata uang" value={content.settings.currency} onChange={currency=>setContent({...content,settings:{...content.settings,currency}})}/></div><Field label="Email dukungan" type="email" value={content.settings.supportEmail} onChange={supportEmail=>setContent({...content,settings:{...content.settings,supportEmail}})}/><div className="accent-setting"><div><span>Warna utama hotel</span><small>Digunakan pada Player dan template baru.</small></div><input type="color" value={content.settings.accent} onChange={event=>setContent({...content,settings:{...content.settings,accent:event.target.value}})}/><code>{content.settings.accent}</code></div></article><article className="panel settings-card"><div className="panel-head"><div><p className="eyebrow">PLAYER SYSTEM</p><h2>Sinkronisasi Player</h2></div><span className="settings-icon"><Smartphone/></span></div><Field label="Interval pemeriksaan (detik)" type="number" min={15} max={3600} value={content.settings.playerRefresh} onChange={value=>setContent({...content,settings:{...content.settings,playerRefresh:Number(value)}})} help="Player tetap menerima notifikasi langsung; interval ini digunakan sebagai cadangan."/><div className="system-note"><ShieldCheck/><p><strong>Mode offline aktif</strong><small>Player menggunakan versi terakhir jika koneksi terputus.</small></p></div><div className="system-note"><RefreshCw/><p><strong>Auto recovery aktif</strong><small>Player memuat ulang konten jika terjadi gangguan.</small></p></div></article></section>}
      </div>
      {dirty&&<div className="floating-save"><p><span/> Perubahan belum disimpan</p><button className="btn outline" onClick={()=>setContent(state.draft)}>Batalkan</button><button className="btn gold" disabled={busy} onClick={()=>void save()}>{busy?<LoaderCircle className="spin"/>:<Save/>} Simpan draf</button></div>}
    </main>
  </div>;
}