/* ============================================================
   SELARAS — app shell, routing, responsive nav
   ============================================================ */
const {useState, useEffect} = React;

const TITLES = {
  jobs:['Workspace','Lowongan kamu'],
  'jobs-empty':['Workspace','Lowongan kamu'],
  create:['Lowongan baru','Buat lowongan'],
  distribute:['Resepsionis Hotel','Sebar tes'],
  dashboard:['Resepsionis Hotel','Dashboard kandidat'],
  'dashboard-empty':['Resepsionis Hotel','Dashboard kandidat'],
  detail:['Resepsionis Hotel','Detail kandidat'],
  compare:['Resepsionis Hotel','Bandingkan kandidat'],
  billing:['Akun','Tagihan & kredit'],
  settings:['Akun','Pengaturan'],
  candidate:['Pratinjau','Sisi kandidat'],
};

const NAV = [
  ['Rekrut',[['jobs','Lowongan','briefcase'],['create','Buat lowongan','plus'],['distribute','Sebar tes','send']]],
  ['Kandidat',[['dashboard','Dashboard','grid'],['compare','Bandingkan','compare'],['candidate','Sisi kandidat','phone']]],
  ['Akun',[['billing','Tagihan & kredit','card'],['settings','Pengaturan','settings']]],
];

function Sidebar({route, go, open, setOpen, logout}){
  const active = route.replace('-empty','');
  return (
    <>
      <div className={'scrim'+(open?' open':'')} onClick={()=>setOpen(false)}></div>
      <aside className={'side'+(open?' open':'')}>
        <div className="brand">
          <div className="brandmark"><Mark s={22}/></div>
          <div><b>Selaras</b><span>The Ubud Villa</span></div>
        </div>
        <nav className="nav">
          {NAV.map(([grp,items])=>(
            <React.Fragment key={grp}>
              <div className="navlbl">{grp}</div>
              {items.map(([k,l,ic])=>(
                <button key={k} className={active===k?'on':''} onClick={()=>{go(k);setOpen(false);}}>
                  <Icon n={ic} s={18}/> {l}
                  {k==='dashboard' && <span className="cnt">31</span>}
                </button>
              ))}
            </React.Fragment>
          ))}
        </nav>
        <div className="foot">
          <div className="who">
            <Avatar name="Indah Permata" color="var(--brand-500)" size={36}/>
            <div className="grow"><div className="nm">Indah Permata</div><div className="sub">HR Lead · Paket Pro</div></div>
            <button className="iconbtn" style={{width:32,height:32,background:'transparent',border:'none',color:'#9cc3b3'}} onClick={logout} title="Keluar"><Icon n="logout" s={17}/></button>
          </div>
        </div>
      </aside>
    </>
  );
}

function ScreenMap({go, close}){
  const groups=[
    ['Masuk & mulai',[['login','Login'],['signup','Daftar'],['onboarding','Onboarding HR']]],
    ['Workspace',[['jobs','Lowongan'],['jobs-empty','Lowongan (kosong)'],['create','Buat lowongan'],['distribute','Sebar tes']]],
    ['Kandidat',[['dashboard','Dashboard'],['dashboard-empty','Dashboard (menunggu)'],['detail-lock','Detail (terkunci)'],['detail-full','Detail (laporan)'],['compare','Bandingkan'],['candidate','Sisi kandidat']]],
    ['Akun',[['billing','Tagihan & kredit'],['settings','Pengaturan']]],
  ];
  return (
    <div className="mapwrap" onClick={close}>
      <div className="mapcard" onClick={e=>e.stopPropagation()}>
        <div className="row between" style={{marginBottom:6}}>
          <div><div className="eyebrow">Prototipe Selaras</div><h3 className="serif" style={{fontSize:22}}>Peta layar</h3></div>
          <button className="iconbtn" onClick={close}><Icon n="x" s={18}/></button>
        </div>
        <p className="note" style={{marginBottom:18}}>Lompat ke layar mana pun. Semua bisa diklik dan saling terhubung.</p>
        {groups.map(([g,items])=>(
          <div key={g} className="mapgroup">
            <div className="mapgroup-h">{g}</div>
            <div className="mapgrid">
              {items.map(([k,l])=>(
                <button key={k} className="mapbtn" onClick={()=>{go(k);close();}}>{l} <Icon n="arrowR" s={14}/></button>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function App(){
  const [route,setRoute]=useState('login');
  const [open,setOpen]=useState(false);
  const [candId,setCandId]=useState('pa');
  const [unlocked,setUnlocked]=useState(false);
  const [mapOpen,setMapOpen]=useState(false);
  const [decisions,setDecisions]=useState({});
  const [toast,setToast]=useState(null);
  const toastTimer=React.useRef(null);
  const decide=(updates)=>setDecisions(d=>({...d,...updates}));
  const showToast=(msg)=>{ setToast(msg); clearTimeout(toastTimer.current); toastTimer.current=setTimeout(()=>setToast(null),3800); };
  const scrollRef = React.useRef(null);

  useEffect(()=>{ if(scrollRef.current) scrollRef.current.scrollTop=0; window.scrollTo(0,0); },[route]);

  const go = (k)=>{
    try{ history.replaceState(null,'','#'+k); }catch(e){}
    if(k==='detail-lock'){ setUnlocked(false); setRoute('detail'); return; }
    if(k==='detail-full'){ setUnlocked(true); setRoute('detail'); return; }
    setRoute(k);
  };
  const openCandidate=(id)=>{ setCandId(id); setUnlocked(false); setRoute('detail'); };

  // deep-link: honor URL hash on first load (#dashboard, #detail-full, etc) — enables shareable links + screenshots
  useEffect(()=>{
    const h=(window.location.hash||'').replace(/^#/,'');
    if(h) go(h);
  },[]);

  // full-screen routes (no shell)
  if(route==='login') return (<><LoginScreen go={go} onLogin={()=>go('onboarding')}/><MapLauncher open={()=>setMapOpen(true)}/>{mapOpen&&<ScreenMap go={go} close={()=>setMapOpen(false)}/>}</>);
  if(route==='signup') return (<><SignupScreen go={go} onSignup={()=>go('onboarding')}/><MapLauncher open={()=>setMapOpen(true)}/>{mapOpen&&<ScreenMap go={go} close={()=>setMapOpen(false)}/>}</>);
  if(route==='onboarding') return (<><Onboarding onDone={()=>go('jobs')}/><MapLauncher open={()=>setMapOpen(true)}/>{mapOpen&&<ScreenMap go={go} close={()=>setMapOpen(false)}/>}</>);

  const [crumb,title]=TITLES[route]||['',''];

  let body=null;
  switch(route){
    case 'jobs': body=<JobsList nav={go}/>; break;
    case 'jobs-empty': body=<JobsList nav={go} empty/>; break;
    case 'create': body=<CreateJob nav={go}/>; break;
    case 'distribute': body=<Distribute nav={go}/>; break;
    case 'dashboard': body=<Dashboard nav={go} openCandidate={openCandidate} decisions={decisions} decide={decide} showToast={showToast}/>; break;
    case 'dashboard-empty': body=<Dashboard nav={go} openCandidate={openCandidate} empty/>; break;
    case 'detail': body=<DetailScreen candId={candId} unlocked={unlocked} unlock={()=>setUnlocked(true)} nav={go} decisions={decisions} decide={decide} showToast={showToast}/>; break;
    case 'compare': body=<Compare nav={go}/>; break;
    case 'billing': body=<Billing nav={go}/>; break;
    case 'settings': body=<Settings nav={go}/>; break;
    case 'candidate': body=<CandidatePreview nav={go}/>; break;
    default: body=<JobsList nav={go}/>;
  }
  const narrow = ['create','settings','billing'].includes(route);

  return (
    <div className="shell">
      <Sidebar route={route} go={go} open={open} setOpen={setOpen} logout={()=>{setOpen(false);setRoute('login');}}/>
      <div className="main">
        <header className="topbar">
          <div className="row gap10">
            <button className="iconbtn menubtn" onClick={()=>setOpen(true)}><Icon n="menu" s={18}/></button>
            <div><div className="crumb">{crumb}</div><h1>{title}</h1></div>
          </div>
          <div className="tools">
            <button className="iconbtn"><Icon n="search" s={18}/></button>
            <button className="iconbtn"><Icon n="bell" s={18}/></button>
            <button className="credits" onClick={()=>go('billing')}><Icon n="zap" s={15}/> 173 <span className="lbl">kredit</span></button>
          </div>
        </header>
        <div className="content-scroll" ref={scrollRef}>
          <main className={'content'+(narrow?' narrow':'')+' fade'} key={route}>{body}</main>
        </div>
      </div>
      <MapLauncher open={()=>setMapOpen(true)}/>
      {mapOpen && <ScreenMap go={go} close={()=>setMapOpen(false)}/>}
      {toast && <div className="toast"><Icon n="checkCircle" s={18}/> <span>{toast}</span></div>}
    </div>
  );
}

function MapLauncher({open}){
  return <button className="maplaunch" onClick={open} title="Peta layar"><Icon n="grid" s={18}/> <span>Peta layar</span></button>;
}

if(location.search.includes('present')) document.documentElement.classList.add('present');
ReactDOM.createRoot(document.getElementById('root')).render(<App/>);