/* ===== Covera app shell: routing + nav + toast ===== */
const { useState:useStateApp, useEffect:useEffectApp } = React;

const ROUTES = {
  login: LoginEmail,
  otp: LoginOTP,
  notifications: null,
  addCustomer: AddCustomer,
  pdpa: PDPA,
  customer: CustomerDetail,
  addPolicy: AddPolicy,
  policy: PolicyDetail,
  pyramid: PyramidOverview,
  pyramidWizard: PyramidWizard,
  present: Presentation,
  customerView: CustomerView,
  billing: BillingScreen,
  planner: PlannerHub,
  needs: NeedsAnalysis,
  planRetire: RetirementPlan,
  planEdu: EducationPlan,
  planTax: TaxPlan,
  pipeline: PipelineScreen,
  calendar: CalendarScreen,
  referral: ReferralScreen,
  renewal: RenewalScreen,
  premium: PremiumBilling,
  kyc: KycScreen,
  planInvest: InvestmentPlan,
  planLegacy: LegacyPlan,
  triangle: TriangleMap,
};

const TAB_SCREENS = { customers: Dashboard, policies: PoliciesScreen, reports: ReportsScreen, me: MeScreen };

function App(){
  const [stack,setStack]=useStateApp([{name:'login',params:{}}]);
  const [tab,setTab]=useStateApp('customers');
  const [toastMsg,setToastMsg]=useStateApp(null);
  const top=stack[stack.length-1];

  const toast=(m)=>{ setToastMsg(m); clearTimeout(window.__t); window.__t=setTimeout(()=>setToastMsg(null),2200); };
  const go=(name,params={})=>{
    if(name==='login'){ setStack([{name:'login',params:{}}]); return; }
    if(name==='app'){ setStack([{name:'app',params:{}}]); setTab('customers'); return; }
    setStack(s=>{
      const base = params.replace ? s.slice(0,-1) : s;
      return [...base,{name,params}];
    });
  };
  const back=()=>setStack(s=>s.length>1?s.slice(0,-1):s);

  const onTab=(t)=>{ setTab(t); setStack([{name:'app',params:{}}]); };

  // app fills the viewport as a web app — no transform scaling needed
  useEffectApp(()=>{
    const el=document.getElementById('device-scale');
    if(el) el.style.transform='none';
  },[]);

  const props={go,back,toast,setTab:onTab};

  const CHROMELESS = ['login','otp','present','customerView'];

  let content;
  if(CHROMELESS.includes(top.name)){
    const Screen=ROUTES[top.name];
    content=<Screen {...props} params={top.params}/>;
  } else {
    let routeScreen;
    if(top.name==='app'){ const S=TAB_SCREENS[tab]; routeScreen=<S {...props}/>; }
    else if(top.name==='notifications'){ routeScreen=<Notifications {...props}/>; }
    else { const S=ROUTES[top.name]; routeScreen=<S {...props} params={top.params}/>; }
    content=(
      <div className="webapp">
        <Sidebar tab={tab} onTab={onTab} go={go} route={top.name}/>
        <div className="web-main">
          <div className="web-content">{routeScreen}</div>
          {top.name==='app' && <div className="web-mobilenav"><BottomNav tab={tab} onTab={onTab}/></div>}
        </div>
      </div>
    );
  }

  // after login OTP we go to 'app'
  return (
    <div className="device-screen">
      <div className="device-cam"/>
      {content}
      {toastMsg && <Toast>{toastMsg}</Toast>}
    </div>
  );
}

// simple notifications screen
function Notifications({back,go}){
  const items=[
    {i:'clock',c:'#f59e0b',bg:'var(--warn-50)',t:'กรมธรรม์ครบกำหนดชำระ',s:'สมชาย วัฒนกุล · ครบกำหนด 15 มิ.ย. 2568'},
    {i:'alert',c:'#dc2626',bg:'var(--danger-50)',t:'ลูกค้าค้างติดตาม 7 วัน',s:'ปิยะดา ศรีสุข · ยังไม่ตอบกลับข้อเสนอ'},
    {i:'shieldCheck',c:'#16a34a',bg:'var(--ok-50)',t:'ความยินยอม PDPA ใกล้หมดอายุ',s:'วราภรณ์ จันทร์เพ็ญ · ต่ออายุภายใน 30 วัน'},
    {i:'star',c:'#2547c4',bg:'var(--navy-50)',t:'โอกาสปิดการขาย',s:'ธนกร อินทรพานิช · สนใจประกันบำนาญ'},
  ];
  return (
    <div className="screen">
      <StatusBar/>
      <AppBar onBack={back} title="การแจ้งเตือน"/>
      <div className="scroll"><div className="pad read-col" style={{paddingTop:4}}>
        <div className="stack" style={{gap:12}}>
          {items.map((it,i)=>(
            <div key={i} className="card flat" style={{display:'flex',gap:14,alignItems:'flex-start'}}>
              <div style={{width:42,height:42,borderRadius:12,background:it.bg,color:it.c,display:'flex',alignItems:'center',justifyContent:'center',flex:'0 0 auto'}}><Icon name={it.i} size={22}/></div>
              <div style={{flex:1}}><div style={{fontSize:15.5,fontWeight:700}}>{it.t}</div><div className="muted" style={{fontSize:13,marginTop:2,lineHeight:1.45}}>{it.s}</div></div>
            </div>
          ))}
        </div>
      </div></div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('device-screen-root')).render(<App/>);

/* ===== Tweaks (mounted outside the scaled device) ===== */
const TWEAK_DEFAULTS = {
  palette: 'navy',
  gold: 'amber',
  radius: 22,
};
const PALETTES = {
  navy:   {n900:'#1e3a8a',n800:'#1e40af',n700:'#2547c4',n600:'#2f5ae0',n50:'#eef2ff',n100:'#e0e7ff',label:'น้ำเงิน'},
  indigo: {n900:'#312e81',n800:'#4338ca',n700:'#4f46e5',n600:'#6366f1',n50:'#eef2ff',n100:'#e0e7ff',label:'อินดิโก'},
  teal:   {n900:'#0e5f57',n800:'#0d7a6f',n700:'#0f9488',n600:'#14b8a6',n50:'#effdfa',n100:'#ccfbf1',label:'เขียวมรกต'},
  plum:   {n900:'#581c87',n800:'#6b21a8',n700:'#7e22ce',n600:'#9333ea',n50:'#faf5ff',n100:'#f3e8ff',label:'ม่วงองุ่น'},
};
const GOLDS = {
  amber:  {g:'#fbbf24',g6:'#f59e0b',g50:'#fffbeb',label:'ทอง'},
  orange: {g:'#fb923c',g6:'#ea580c',g50:'#fff7ed',label:'ส้ม'},
  emerald:{g:'#34d399',g6:'#059669',g50:'#ecfdf5',label:'มรกต'},
};

function TweaksHost(){
  const [t,setTweak]=React.useState(TWEAK_DEFAULTS);
  const set=(k,v)=>setTweak(s=>({...s,[k]:v}));
  React.useEffect(()=>{
    const r=document.documentElement.style;
    const p=PALETTES[t.palette]||PALETTES.navy;
    r.setProperty('--navy-900',p.n900); r.setProperty('--navy-800',p.n800);
    r.setProperty('--navy-700',p.n700); r.setProperty('--navy-600',p.n600);
    r.setProperty('--navy-50',p.n50);   r.setProperty('--navy-100',p.n100);
    const g=GOLDS[t.gold]||GOLDS.amber;
    r.setProperty('--gold',g.g); r.setProperty('--gold-600',g.g6); r.setProperty('--gold-50',g.g50);
    r.setProperty('--r-card',t.radius+'px');
  },[t]);
  if(typeof TweaksPanel==='undefined') return null;
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="โทนสี" />
      <TweakSelect label="สีหลัก" value={t.palette}
        options={Object.keys(PALETTES).map(k=>({value:k,label:PALETTES[k].label}))}
        onChange={v=>set('palette',v)} />
      <TweakSelect label="สีเน้น" value={t.gold}
        options={Object.keys(GOLDS).map(k=>({value:k,label:GOLDS[k].label}))}
        onChange={v=>set('gold',v)} />
      <TweakSection label="รูปทรง" />
      <TweakSlider label="ความโค้งการ์ด" value={t.radius} min={10} max={30} unit="px"
        onChange={v=>set('radius',v)} />
    </TweaksPanel>
  );
}
const tweaksMount=document.getElementById('tweaks-root');
if(tweaksMount) ReactDOM.createRoot(tweaksMount).render(<TweaksHost/>);