const { OmsChrome, OmsLanding, OmsLogin, OmsSearch, OmsApps, OmsDataset, OmsApproval, OmsDelivered, RoleAccessDenied } = window;

const OMS_EXTERNAL_APPS={
  evika:'https://experience.arcgis.com/experience/fa37a1dae62b4b419e679a6d45ca07ab',
  bluecarbon:'https://experience.arcgis.com/experience/b4b49e9566d841c9bf567226730dd690',
};

const OMS_ROUTES = {
  landing:'/oms/', login:'/oms/login', assistant:'/oms/assistant', search:'/oms/data-catalog', apps:'/oms/apps',
  digitaltwin:'/oms/marine-digital-twin', realtime:'/oms/realtime-monitoring', gis:'/oms/gis-workspace',
  evika:'/oms/evika', bluecarbon:'/oms/blue-carbon', dataset:'/oms/dataset-builder',
  approval:'/oms/approval', delivered:'/oms/delivered', denied:'/oms/access-denied',
};
const OMS_ROUTE_SCREENS = Object.fromEntries(Object.entries(OMS_ROUTES).map(([screen,path])=>[path.replace(/\/$/,''),screen]));
const OMS_TITLES = {landing:'OMS',login:'SSO KKP',assistant:'Asisten AI',search:'Katalog Data',apps:'Galeri Aplikasi',digitaltwin:'Marine Digital Twin',realtime:'Historical Marine Data',gis:'OMS Analysis Centre',evika:'Dashboard EVIKA',bluecarbon:'Blue Carbon Intelligence',dataset:'Dataset Builder',approval:'Persetujuan',delivered:'Hasil Analisis',denied:'Akses Dibatasi'};
function screenFromLocation(){
  const path=window.location.pathname.replace(/\/$/,'')||'/';
  if(path==='/preview.html'||path==='/')return 'landing';
  return OMS_ROUTE_SCREENS[path]||'landing';
}
function routeForScreen(screen){return OMS_ROUTES[screen]||OMS_ROUTES.landing;}
function sharedMapWorkspaceFromLocation(){
  try{
    const encoded=new URLSearchParams(window.location.search).get('webmap');
    if(!encoded)return null;
    const base64=encoded.replace(/-/g,'+').replace(/_/g,'/').padEnd(Math.ceil(encoded.length/4)*4,'=');
    const parsed=JSON.parse(decodeURIComponent(escape(atob(base64))));
    if(parsed?.v!==1||!Array.isArray(parsed.layers)||!parsed.view)return null;
    return {basemap:parsed.basemap||'oceans',layers:parsed.layers,view:parsed.view};
  }catch(_){return null;}
}

/* Screen graph mirrors the OMS user flow:
   landing → auth → intent → (assistant | search) → need → (dataset | analisis/3D inline in map viewer) → guardrail → delivered */
function App(){
  const [authenticated,setAuthenticated] = React.useState(()=>localStorage.getItem('oms-authenticated')==='1');
  const [screen,setScreen] = React.useState(()=>{
    const initial=screenFromLocation();
    return localStorage.getItem('oms-authenticated')==='1'||initial==='landing'||initial==='login' ? initial : 'login';
  });
  const [request,setRequest] = React.useState(null);
  const [roleId,setRoleId] = React.useState(()=>localStorage.getItem('oms-role')||'analyst');
  const role=window.getOmsRole(roleId);
  const [reduceTransparency,setReduceTransparency] = React.useState(()=>localStorage.getItem('oms-reduce-transparency')==='1');
  const [mapWorkspace,setMapWorkspace] = React.useState(()=>{
    try{return sharedMapWorkspaceFromLocation()||JSON.parse(localStorage.getItem('oms-global-map-workspace-v1'))||{basemap:'oceans',layers:[],view:{center:[121.9,-0.4],zoom:4,mode:'2d'}};}
    catch(_){return {basemap:'oceans',layers:[],view:{center:[121.9,-0.4],zoom:4,mode:'2d'}};}
  });
  const navigate = (s,{replace=false,state=null}={}) => {
    const url=routeForScreen(s);
    window.history[replace?'replaceState':'pushState']({screen:s,request:state},'',url);
    document.title='KKP | '+(OMS_TITLES[s]||'Ocean Monitoring System');
    setScreen(s);
  };
  const go = (s, req) => { if(localStorage.getItem('oms-authenticated')!=='1'&&!['landing','login'].includes(s)){setRequest({returnTo:s,payload:req||null});navigate('login');return;} if(OMS_EXTERNAL_APPS[s]){window.open(OMS_EXTERNAL_APPS[s],'_blank','noopener,noreferrer');return;} if (req) setRequest(req); else if(s==='landing'||s==='login') setRequest(null); if(!['landing','login'].includes(s)&&!window.canRoleAccess(role,s)){const denied={deniedTarget:s};setRequest(denied);navigate('denied',{state:denied});return;} navigate(s,{state:req||null}); };
  const onAuthenticated = () => {localStorage.setItem('oms-authenticated','1');setAuthenticated(true);};
  const logout = () => {
    localStorage.removeItem('oms-authenticated');
    sessionStorage.removeItem('oms-chat-session-id');
    sessionStorage.removeItem('oms-chat-messages-v1');
    try{document.querySelector('iframe[title="Ask AI Agentic OMS"]')?.contentWindow?.sessionStorage?.removeItem('oms-chat-session-id');document.querySelector('iframe[title="Ask AI Agentic OMS"]')?.contentWindow?.sessionStorage?.removeItem('oms-chat-messages-v1');}catch(_){}
    setAuthenticated(false);setRequest(null);navigate('landing',{replace:true});
  };
  const changeRole = id => {const next=window.getOmsRole(id);localStorage.setItem('oms-role',id);setRoleId(id);if(!window.canRoleAccess(next,screen))navigate('apps');};
  const toggleReduceTransparency = () => setReduceTransparency(v=>{ localStorage.setItem('oms-reduce-transparency', v?'0':'1'); return !v; });
  React.useEffect(()=>{ document.documentElement.setAttribute('data-reduce-transparency', reduceTransparency?'true':'false'); }, [reduceTransparency]);
  React.useEffect(()=>{try{localStorage.setItem('oms-global-map-workspace-v1',JSON.stringify(mapWorkspace));}catch(_){}},[mapWorkspace]);
  React.useEffect(()=>{
    const initial=screenFromLocation();
    if(!authenticated&&!['landing','login'].includes(initial)){setRequest({returnTo:initial});navigate('login',{replace:true});}
    else if(OMS_EXTERNAL_APPS[initial]){window.location.replace(OMS_EXTERNAL_APPS[initial]);return;}
    else if(window.location.pathname==='/preview.html'||window.location.pathname==='/')navigate(initial,{replace:true});
    else document.title='KKP | '+(OMS_TITLES[initial]||'Ocean Monitoring System');
    const onPop=(event)=>{const next=screenFromLocation();if(!authenticated&&!['landing','login'].includes(next)){setRequest({returnTo:next});navigate('login',{replace:true});return;}const restored=event.state?.request||null;setRequest(restored);setScreen(next);document.title='KKP | '+(OMS_TITLES[next]||'Ocean Monitoring System');};
    window.addEventListener('popstate',onPop);return()=>window.removeEventListener('popstate',onPop);
  },[authenticated]);
  React.useEffect(()=>{
    if(screen==='landing'||screen==='login'||screen==='denied'||window.canRoleAccess(role,screen))return;
    const denied={deniedTarget:screen};setRequest(denied);navigate('denied',{replace:true,state:denied});
  },[screen,role.id]);

  const body = {
    landing:   <OmsLanding go={go} role={role} onRoleChange={changeRole} onLogout={logout} authenticated={authenticated} reduceTransparency={reduceTransparency} onToggleTransparency={toggleReduceTransparency} />,
    login:     <OmsLogin go={go} role={role} onRoleChange={changeRole} onAuthenticated={onAuthenticated} request={request} />,
    assistant: <div style={{height:'calc(100vh - 60px)',background:'#071c2d',overflow:'hidden'}}>
      <iframe
        title="Ask AI Agentic OMS"
        src="/ui_kits/oms/agentic-assistant/index.html?embedded=1"
        allow="clipboard-read; clipboard-write"
        style={{display:'block',width:'100%',height:'100%',border:0,background:'#071c2d'}}
      />
    </div>,
    search:    <OmsSearch go={go} request={request} mapWorkspace={mapWorkspace} setMapWorkspace={setMapWorkspace} />,
    apps:      <OmsApps go={go} role={role} />,
    digitaltwin: <div style={{height:'100dvh',background:'#071c2d',overflow:'hidden'}}>
      <iframe title="Immersive Marine Digital Twin" src="/ui_kits/oms/immersive-digital-twin/" allow="fullscreen" style={{display:'block',width:'100%',height:'100%',border:0}} />
    </div>,
    realtime: <div style={{height:'calc(100dvh - 60px)',background:'#071c2d',overflow:'hidden'}}>
      <iframe title="Historical Marine Data" src="/ui_kits/oms/historical-marine-data/" allow="fullscreen" style={{display:'block',width:'100%',height:'100%',border:0}} />
    </div>,
    gis: <div style={{height:'calc(100dvh - 60px)',background:'#071c2d',overflow:'hidden'}}>
      <iframe title="OMS Analysis Centre" src="/ui_kits/ocean_gis/index.html?embedded=1&v=20261001-bookmark-bottom" allow="fullscreen" style={{display:'block',width:'100%',height:'100%',border:0}} />
    </div>,
    dataset:   <OmsDataset go={go} request={request} />,
    approval:  <OmsApproval go={go} request={request} role={role} />,
    delivered: <OmsDelivered go={go} request={request} />,
    denied: <RoleAccessDenied role={role} target={request?.deniedTarget||'aplikasi'} go={go}/>,
  }[screen];

  if (screen === 'landing' || screen === 'digitaltwin') return body;
  return <OmsChrome screen={screen} go={go} role={role} onRoleChange={changeRole} onLogout={logout} reduceTransparency={reduceTransparency} onToggleTransparency={toggleReduceTransparency}>{body}</OmsChrome>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);