const { Icon } = window.KKPMarineDigitalDesignSystem_4fef83;

const APPS = [
  { t:'OMS Analysis Centre', d:'Ruang kerja analisis terintegrasi untuk data 2D dan 3D, tools geospasial, peta, dan hasil analisis.', category:'Perencanaan', internal:'gis', url:'/oms/gis-workspace', img:'/assets/map-sample-wpp-indonesia.png' },
  { t:'Marine Ecosystem Digital Twin', d:'Kembaran digital 2D/3D untuk menelusuri perubahan historis terumbu karang, mangrove, dan lamun.', category:'Konservasi', internal:'digitaltwin', url:'/oms/marine-digital-twin', img:'/assets/map-sample-wpp-indonesia.png' },
  { t:'Historical Marine Data', d:'Jelajahi survei dan perubahan data kelautan historis dalam WebScene 3D dan lini masa.', category:'Pemantauan', internal:'realtime', url:'/oms/realtime-monitoring', img:'/assets/apps/historical-marine-data.svg?v=20260922' },
  { t:'Dashboard EVIKA', d:'Pemantauan efektivitas pengelolaan kawasan konservasi melalui ArcGIS Experience Builder.', category:'Konservasi', external:true, url:'https://experience.arcgis.com/experience/fa37a1dae62b4b419e679a6d45ca07ab', img:'/assets/apps/evika-underwater-fish.png' },
  { t:'Blue Carbon Intelligence', d:'Informasi dan analisis stok karbon biru mangrove dan lamun.', category:'Konservasi', external:true, url:'https://experience.arcgis.com/experience/b4b49e9566d841c9bf567226730dd690', img:'https://images.unsplash.com/photo-1546026423-cc4642628d2b?auto=format&fit=crop&w=900&q=82' },
  { t:'Dasbor Eksekutif KKP', d:'KPI nasional produksi, ekspor, dan kepatuhan untuk pengambilan keputusan.', category:'Perikanan', url:'https://ease-puzzle-55212184.figma.site/', img:'https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&w=900&q=82' },
];
const CATEGORIES = ['Semua','Pemantauan','Perencanaan','Perikanan','Konservasi'];

function OmsApps({ go }){
  const [query,setQuery] = React.useState('');
  const [category,setCategory] = React.useState('Semua');
  const [embedApp,setEmbedApp] = React.useState(null);
  const rows = APPS.filter(a => (category==='Semua'||a.category===category) && (a.t+' '+a.d+' '+a.category).toLocaleLowerCase('id').includes(query.trim().toLocaleLowerCase('id')));
  const open = a => {
    if(a.external){window.open(a.url,'_blank','noopener,noreferrer');return;}
    if(a.internal){go(a.internal);return;}
    setEmbedApp(a);
  };
  return <div className="oms-apps-page">
    <style>{`
      .oms-apps-page{background:#fff;color:#162431;font-family:var(--kkp-font-sans),Arial,sans-serif}.oms-apps-page *{box-sizing:border-box}.oms-apps-wrap{width:min(100% - 48px,1120px);margin:auto}
      .oms-apps-hero{min-height:274px;background:linear-gradient(90deg,rgba(0,32,52,.9),rgba(3,60,90,.69)),url('https://images.unsplash.com/photo-1546026423-cc4642628d2b?auto=format&fit=crop&w=1800&q=85') center 48%/cover;display:flex;align-items:center}
      .oms-apps-hero h1{font-size:clamp(34px,4vw,46px);line-height:1.1;color:#fff;margin:0 0 16px;font-weight:800}.oms-apps-hero p{font-size:14px;line-height:1.6;color:#f3f9fc;margin:0 0 22px}
      .oms-apps-search{display:flex;gap:12px;max-width:730px}.oms-apps-search label{height:42px;display:flex;align-items:center;gap:10px;flex:1;padding:0 13px;border:1px solid rgba(255,255,255,.42);border-radius:9px;background:rgba(168,208,230,.24);color:#fff}
      .oms-apps-search input,.oms-apps-search select{font:inherit;color:#fff;outline:none}.oms-apps-search input{width:100%;min-width:0;background:transparent;border:0;font-size:13px}.oms-apps-search input::placeholder{color:#ecf4f8}.oms-apps-search select{width:210px;padding:0 12px;border:1px solid rgba(255,255,255,.42);border-radius:9px;background:#275d7c;font-size:13px}.oms-apps-search option{color:#142c3a;background:#fff}
      .oms-apps-feature{padding:76px 0 82px;display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.oms-apps-feature h2{font-size:26px;line-height:1.2;margin:0 0 12px;color:#181c24}.oms-apps-feature p{font-size:14px;line-height:1.65;color:#58636c;margin:0 0 22px}.oms-apps-feature ul{list-style:none;padding:0;margin:0 0 26px}.oms-apps-feature li{display:flex;gap:12px;margin:10px 0;font-size:14px;line-height:1.45}.oms-apps-feature li:before{content:'✓';color:#0879b5;font-weight:800}
      .oms-apps-primary{border:0;border-radius:5px;background:#087db8;color:#fff;padding:11px 19px;min-height:40px;font:inherit;font-weight:700;font-size:13px;cursor:pointer}.oms-apps-primary:hover{background:#05699d}.oms-apps-feature-visual{height:300px;border-radius:12px;overflow:hidden;position:relative;background:#03435e}.oms-apps-feature-visual>img{width:100%;height:100%;object-fit:cover}.oms-apps-feature-ai{position:absolute;top:22%;left:35%;width:190px;padding:17px;border:1px solid #83c7d9;border-radius:12px;background:rgba(0,91,135,.8);backdrop-filter:blur(8px);color:#fff;box-shadow:0 8px 25px #00344d77}.oms-apps-feature-ai img{display:block;width:38px;height:38px;margin:0 auto 14px}.oms-apps-feature-ai strong,.oms-apps-feature-ai small{display:block}.oms-apps-feature-ai strong{font-size:13px}.oms-apps-feature-ai small{font-size:9px;margin:4px 0 11px;line-height:1.4}.oms-apps-feature-ai span{display:block;background:#fff;color:#2b5366;border-radius:20px;padding:6px;margin-top:6px;font-size:8px}
      .oms-apps-list{background:#f5f7fa;padding:56px 0 76px}.oms-apps-list-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:28px;flex-wrap:wrap}.oms-apps-list h2{margin:0;font-size:28px;color:#171c23}.oms-apps-list h2 small{font-size:15px;font-weight:400;color:#7b838b}.oms-apps-tabs{display:flex;gap:7px;flex-wrap:wrap}.oms-apps-tabs button{border:1px solid #d1d7dc;border-radius:999px;padding:8px 15px;background:#fff;color:#505b63;font:inherit;font-size:12px;cursor:pointer}.oms-apps-tabs button[aria-pressed=true]{background:#0780bb;color:#fff;border-color:#0780bb}
      .oms-apps-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.oms-apps-card{min-width:0;overflow:hidden;background:#fff;border:1px solid #e0e5e9;border-radius:10px;box-shadow:0 3px 9px #11344d0b;display:flex;flex-direction:column}.oms-apps-card>img{width:100%;height:195px;object-fit:cover;background:#d8eaf2}.oms-apps-card-body{padding:20px;display:flex;flex-direction:column;flex:1}.oms-apps-category{align-self:flex-start;background:#e6f4fa;color:#17688a;border-radius:20px;padding:5px 10px;font-size:11px;font-weight:600}.oms-apps-card h3{font-size:17px;margin:10px 0 9px;color:#1d2329}.oms-apps-card p{font-size:14px;line-height:1.55;color:#56636e;margin:0 0 20px;flex:1}.oms-apps-card button{align-self:flex-start;border:1px solid #c8d1d8;border-radius:4px;background:#fff;color:#273744;font:inherit;font-size:12px;padding:8px 14px;cursor:pointer}.oms-apps-card button:hover{border-color:#087db8;color:#087db8}.oms-apps-empty{padding:45px;text-align:center;color:#596673;background:#fff;border:1px dashed #ccd6db;border-radius:10px}
      @media(max-width:760px){.oms-apps-wrap{width:min(100% - 32px,1120px)}.oms-apps-hero{padding:36px 0}.oms-apps-search{flex-direction:column}.oms-apps-search label{flex:auto}.oms-apps-search select{width:100%;height:42px}.oms-apps-feature{grid-template-columns:1fr;gap:26px;padding:48px 0}.oms-apps-feature-visual{height:230px}.oms-apps-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
      @media(max-width:520px){.oms-apps-grid{grid-template-columns:1fr}.oms-apps-card>img{height:190px}.oms-apps-list{padding:42px 0}}
    `}</style>
    <section className="oms-apps-hero"><div className="oms-apps-wrap"><h1>Katalog Aplikasi</h1><p>Temukan aplikasi dan layanan geospasial resmi Kementerian Kelautan dan Perikanan.</p><div className="oms-apps-search"><label><Icon name="search" size={16} style={{filter:'brightness(0) invert(1)'}}/><input type="search" placeholder="Cari aplikasi..." aria-label="Cari aplikasi" value={query} onChange={e=>setQuery(e.target.value)}/></label><select aria-label="Filter kategori aplikasi" value={category} onChange={e=>setCategory(e.target.value)}>{CATEGORIES.map(c=><option key={c} value={c}>{c}</option>)}</select></div></div></section>
    <section className="oms-apps-wrap oms-apps-feature"><div><h2>Spatial Analytics (SIG)</h2><p>Ruang analisis geospasial untuk memantau wilayah laut, data perikanan, dan kondisi oseanografi di seluruh Indonesia.</p><ul>{['Analisis ad hoc dengan data dan pertanyaan sendiri','Analisis terpandu langkah demi langkah','Pemantauan kondisi laut dan kawasan','Skenario untuk membandingkan kemungkinan perubahan','Analisis berbantuan AI dengan konteks spasial'].map(t=><li key={t}>{t}</li>)}</ul><button className="oms-apps-primary" onClick={()=>open(APPS[0])}>Buka OMS GIS Workspace</button></div><div className="oms-apps-feature-visual"><img src="/assets/map-sample-wpp-indonesia.png" alt="Peta analisis spasial Indonesia"/><div className="oms-apps-feature-ai"><img src="/assets/ai-assistant-logo.svg" alt=""/><strong>AI Assistant</strong><small>Dapatkan wawasan dari peta dan data laut.</small><span>Bagaimana kondisi kawasan konservasi?</span><span>Bandingkan tutupan habitat pesisir</span></div></div></section>
    <section className="oms-apps-list"><div className="oms-apps-wrap"><div className="oms-apps-list-head"><h2>Aplikasi <small>({rows.length})</small></h2><div className="oms-apps-tabs" role="group" aria-label="Kategori aplikasi">{CATEGORIES.map(c=><button key={c} aria-pressed={category===c} onClick={()=>setCategory(c)}>{c}</button>)}</div></div>{rows.length?<div className="oms-apps-grid">{rows.map(a=><article className="oms-apps-card" key={a.t}><img src={a.img} alt="" loading="lazy"/><div className="oms-apps-card-body"><span className="oms-apps-category">{a.category}</span><h3>{a.t}</h3><p>{a.d}</p><button onClick={()=>open(a)}>{a.internal==='gis'?'Buka OMS GIS Workspace':'Buka aplikasi'}</button></div></article>)}</div>:<div className="oms-apps-empty">Tidak ada aplikasi yang cocok dengan pencarian ini.</div>}</div></section>
    {embedApp?<div role="dialog" aria-modal="true" aria-label={embedApp.t} style={{position:'fixed',inset:0,zIndex:300,background:'#001f39bb',display:'grid',placeItems:'center',padding:20}}><div style={{width:'min(1100px,100%)',height:'min(720px,90vh)',background:'#fff',borderRadius:10,overflow:'hidden',display:'flex',flexDirection:'column'}}><div style={{display:'flex',alignItems:'center',justifyContent:'space-between',padding:'10px 16px'}}><strong>{embedApp.t}</strong><button onClick={()=>setEmbedApp(null)} aria-label="Tutup aplikasi" style={{border:0,background:'transparent',fontSize:22,cursor:'pointer'}}>×</button></div><iframe src={embedApp.url} title={embedApp.t} style={{border:0,width:'100%',flex:1}}/></div></div>:null}
  </div>;
}
Object.assign(window,{OmsApps});