const { Icon } = window.KKPMarineDigitalDesignSystem_4fef83;

/* Central place to wire up real application URLs once they exist.
   Leave an entry's `url` empty to fall back to the placeholder frame. */
const EMBED_CONFIG = {
  'Dasbor Eksekutif KKP': { url: 'https://ease-puzzle-55212184.figma.site/', label: 'Executive Dashboard · Figma Sites' },
  'OMS Analysis Centre': { url: 'https://www.openstreetmap.org/export/embed.html?bbox=118.4%2C-4.2%2C124.6%2C1.6&layer=mapnik', label: 'OpenStreetMap (contoh)' },
  'map-viewer': { url: 'https://www.openstreetmap.org/export/embed.html?bbox=118.4%2C-4.2%2C124.6%2C1.6&layer=mapnik', label: 'OpenStreetMap (contoh)' },
};

function embedPlaceholderDoc(title){
  const safe = String(title).replace(/[&<>]/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;'}[c]));
  return '<!doctype html><html><head><meta charset="utf-8"><style>'
    + 'html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;'
    + 'background:linear-gradient(135deg,#12154a,#1c2461 60%,#0b1220);color:#fff;display:flex;align-items:center;justify-content:center}'
    + '.box{text-align:center;padding:32px;max-width:360px}'
    + '.frame{width:56px;height:56px;margin:0 auto 16px;border-radius:16px;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center}'
    + 'h1{font-size:15px;margin:0 0 8px;font-weight:700}'
    + 'p{font-size:12.5px;color:rgba(255,255,255,.68);margin:0;line-height:1.55}'
    + '.badge{display:inline-block;margin-top:16px;padding:4px 11px;border-radius:999px;background:rgba(175,212,34,.16);color:#afd422;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}'
    + '</style></head><body><div class="box">'
    + '<svg class="frame" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.6"><rect x="3" y="4" width="18" height="13" rx="2"/><path d="M8 20h8M12 17v3"/></svg>'
    + '<h1>' + safe + '</h1>'
    + '<p>Slot embed sudah siap. Saat URL aplikasi sesungguhnya tersedia, sambungkan di konfigurasi embed agar aplikasi ini tampil langsung di sini.</p>'
    + '<div class="badge">Placeholder embed</div>'
    + '</div></body></html>';
}

function EmbedFrame({ src, title }){
  const [loaded, setLoaded] = React.useState(false);
  return (
    <div style={{position:'relative',width:'100%',height:'100%',background:'#0b1220'}}>
      {!loaded ? (
        <div style={{position:'absolute',inset:0,display:'flex',alignItems:'center',justifyContent:'center',gap:8,color:'rgba(255,255,255,.6)',fontSize:12}}>
          <span style={{width:14,height:14,border:'2px solid rgba(255,255,255,.25)',borderTopColor:'#fff',borderRadius:'50%',animation:'oms-spin .8s linear infinite'}} />
          Memuat aplikasi…
        </div>
      ) : null}
      <style>{'@keyframes oms-spin{to{transform:rotate(360deg)}}'}</style>
      <iframe
        title={title}
        src={src || undefined}
        srcDoc={src ? undefined : embedPlaceholderDoc(title)}
        onLoad={() => setLoaded(true)}
        style={{position:'absolute',inset:0,width:'100%',height:'100%',border:'none',opacity:loaded?1:0,transition:'opacity .25s'}}
        sandbox="allow-scripts allow-same-origin allow-popups allow-forms"
        loading="lazy" />
    </div>
  );
}

function EmbedModal({ app, onClose }){
  const cfg = EMBED_CONFIG[app.t];
  return (
    <div style={{position:'fixed',inset:0,zIndex:'var(--z-modal)',background:'rgba(11,18,32,.6)',backdropFilter:'blur(6px)',WebkitBackdropFilter:'blur(6px)',display:'flex',padding:'var(--space-5)'}}
      onClick={onClose}>
      <div style={{flex:1,display:'flex',flexDirection:'column',minWidth:0,background:'var(--kkp-indigo-900)',borderRadius:'var(--radius-lg)',overflow:'hidden',boxShadow:'0 24px 64px rgba(0,0,0,.4)'}}
        onClick={e => e.stopPropagation()}>
        <div style={{display:'flex',alignItems:'center',gap:'var(--space-3)',padding:'var(--space-4) var(--space-5)',borderBottom:'1px solid rgba(255,255,255,.12)'}}>
          <span style={{width:28,height:28,flex:'none',borderRadius:'var(--radius-sm)',background:'rgba(255,255,255,.12)',display:'flex',alignItems:'center',justifyContent:'center'}}>
            <span style={{filter:'invert(1)',display:'flex'}}><Icon name={app.i} size={14} /></span>
          </span>
          <div style={{flex:1,minWidth:0}}>
            <div style={{color:'#fff',fontWeight:700,fontSize:13}}>{app.t}</div>
            <div style={{color:'rgba(255,255,255,.55)',fontSize:11}}>{cfg ? cfg.label : 'Belum ada URL aplikasi — menampilkan placeholder'}</div>
          </div>
          {cfg ? <a href={cfg.url} target="_blank" rel="noreferrer" style={{color:'rgba(255,255,255,.7)',fontSize:12,textDecoration:'none'}}>Buka di tab baru</a> : null}
          <button onClick={onClose} aria-label="Tutup" style={{width:30,height:30,flex:'none',border:'none',borderRadius:'var(--radius-sm)',background:'rgba(255,255,255,.12)',color:'#fff',cursor:'pointer',display:'flex',alignItems:'center',justifyContent:'center'}}>
            <Icon name="x" size={14} style={{filter:'invert(1)'}} />
          </button>
        </div>
        <div style={{flex:1,minWidth:0}}>
          <EmbedFrame src={cfg && cfg.url} title={app.t} />
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { EmbedFrame, EmbedModal, EMBED_CONFIG, embedPlaceholderDoc });
