// App shell — design canvas with top toolbar + many screens for prototyping

const SERVICE_KEY = "qa.app.service";

function App(){
  // 딥링크: app/index.html#page=<id> 로 특정 화면을 바로 열 수 있음 (기획서에서 '실제 화면 열기'로 진입)
  const readHashPage = ()=>{ try{ return new URLSearchParams((location.hash||"").replace(/^#/,"")).get("page"); }catch(e){ return null; } };
  const hp = readHashPage();
  const [service, setService] = React.useState(()=> localStorage.getItem(SERVICE_KEY) || (hp && hp!=="onboarding" ? "academy" : null));
  const [page, setPage] = React.useState(()=> hp || (localStorage.getItem(SERVICE_KEY) ? "home" : "login"));
  const [stack, setStack] = React.useState([]);
  const [payload, setPayload] = React.useState(null);
  const [sub, setSub] = React.useState(null);   // 구독 상태: null(미구독) | {plan,method,since,nextBill}

  // 구독 시작 — 플랜별 다음 결제일(오늘 기준) 계산
  const startSub = ({plan, method})=>{
    const t = new Date();
    const fmt = (d)=>`${d.getFullYear()}.${String(d.getMonth()+1).padStart(2,"0")}.${String(d.getDate()).padStart(2,"0")}`;
    const nb = new Date(t); if(plan==="yearly") nb.setFullYear(nb.getFullYear()+1); else nb.setMonth(nb.getMonth()+1);
    setSub({plan, method, since:fmt(t), nextBill:fmt(nb)});
  };

  React.useEffect(()=>{
    const onHash = ()=>{ const p = readHashPage(); if(p){ setStack([]); setService(s=> s || "academy"); setPage(p); } };
    window.addEventListener("hashchange", onHash);
    return ()=> window.removeEventListener("hashchange", onHash);
  }, []);

  // 스택에 {page, payload}를 함께 저장 → 뒤로가기 시 그 화면의 payload까지 복원 (빈 화면/크래시 방지)
  const go = (p, data)=>{ setStack(s=>[...s, {page, payload}]); setPayload(data||null); setPage(p); };
  const back = ()=>{ setStack(s=>{ if(!s.length){ setPage("home"); setPayload(null); return s; } const prev=s[s.length-1]; setPage(prev.page); setPayload(prev.payload||null); return s.slice(0,-1); }); };
  const goHome = ()=>{ setStack([]); setPayload(null); setPage("home"); };

  const onSelectService = (s)=>{
    localStorage.setItem(SERVICE_KEY, s);
    setService(s);
    setStack([]);
    setPage("home");
  };
  const onSwitchService = ()=>{
    localStorage.removeItem(SERVICE_KEY);
    setService(null);
    setStack([]);
    setPayload(null);
    setPage("onboarding");
  };

  const onNav = (tab)=>{
    const map = {home:"home",report:"report",qr:"qr",store:"store",swing:"swing"};
    setStack([]);
    setPage(map[tab] || "home");
  };

  const current = (()=>{
    switch(page){
      case "login":    return <LoginScreen onKakao={()=>setPage("permission")} onManual={()=>setPage("login-manual")} onSignup={()=>setPage("signup")}/>;
      case "login-manual": return <LoginManualScreen onBack={()=>setPage("login")} onLogin={()=>setPage("permission")} onFind={(tab)=>go("find-account",{tab})} onDormant={()=>go("dormant")}/>;
      case "find-account": return <FindAccountFlow initialTab={payload?.tab||"id"} onBack={back} onGoLogin={()=>{ setStack([]); setPage("login-manual"); }}/>;
      case "dormant":  return <DormantReleaseScreen onBack={back} onDone={()=>{ setStack([]); setPage("permission"); }}/>;
      case "signup":   return <SignUpFlow onBack={()=>setPage("login")} onDone={()=>setPage("permission")}/>;
      case "permission": return <PermissionOnboarding onAgree={()=>setPage("onboarding")}/>;
      case "onboarding": return <OnboardingScreen onSelect={onSelectService}/>;
      case "home":     return <HomeScreen onNav={onNav} service={service} onSetService={onSelectService}
        onOpenQR={()=>setPage("qr")}
        onOpenNoti={()=>go("notifications")}
        onOpenBooking={()=>setPage("unified-booking")}
        onOpenScorecard={()=>go("scorecard")}
        onOpenClub={()=>go("club")}
        onOpenReservations={()=>go("booking")}
        onOpenReservationDetail={(res)=>go("booking-detail", { d:res.date, t:res.time, pro:res.bay, tag:res.kind, status:"예약완료", store:res.store })}
        onOpenUnmanned={()=>setPage("store")}
        onOpenMenu={()=>setPage("menu")}
        onOpenNotice={()=>go("notice")}
        onOpenAttendance={()=>go("attendance")}
        onOpenCourse={()=>go("course")}
        onOpenChampionship={()=>go("championship")}
        onOpenEvent={()=>go("event", {tab: service==="screen"?"screen":"academy"})}
        onOpenSubscribe={()=>go("subscribe")}
        subActive={!!sub}
        onOpenTraining={()=>setPage("training")}
        onOpenLesson={()=>go("pro-list")}
        onOpenTicket={()=>go("ticket")}
        onOpenStores={()=>setPage("store")}
        onOpenReport={()=>setPage("report")}
        onBookScreen={(s)=>go("unified-booking", (s&&s.name) ? {type:"screen", store:s} : {type:"screen"})}
        onBookTraining={()=>go("unified-booking", {type:"training"})}
        onBookLesson={()=>go("lesson-tickets")}/>;
      case "notice":   return <NoticeScreen onBack={back} onOpenDetail={(n)=>go("notice-detail", n)}/>;
      case "notice-detail": return <NoticeDetail onBack={back} notice={payload}/>;
      case "course":   return <CourseIntro onBack={back} onOpenDetail={(c)=>go("course-detail", c)}/>;
      case "course-detail": return <CourseDetail onBack={back} course={payload}/>;
      case "event":    return <EventList onBack={back} initialTab={payload?.tab} onOpenScreen={(e)=>go("event-screen", e)} onOpenAcademy={(e)=>go("event-academy", e)}/>;
      case "event-screen":   return <EventScreenDetail event={payload} onBack={back}/>;
      case "event-academy":  return <EventAcademyDetail event={payload} onBack={back} onOpenSwing={(c)=>go("swing-video", c)}/>;
      case "subscribe":     return <SubscribeScreen sub={sub} justSubscribed={payload&&payload.done} onBack={back} onCheckout={(plan)=>go("subscribe-pay",{plan})} onCancel={()=>setSub(null)}/>;
      case "subscribe-pay": return <SubscribePay plan={payload&&payload.plan} onBack={back} onDone={(info)=>{ startSub(info); setStack([]); setPayload({done:true}); setPage("subscribe"); }}/>;
      case "championship": return <ChampionshipList onBack={back} initialTab={payload?.tab} onOpenDetail={(c)=>go("championship-detail", c)} onCreate={()=>go("championship-create")}/>;
      case "championship-detail": return <ChampionshipDetail onBack={back} champ={payload}/>;
      case "championship-create": return <ChampionshipCreate onBack={back} onDone={()=>go("championship", {tab:"created"})}/>;
      case "report":   return <ReportScreen onNav={onNav}
        onBack={stack.length ? back : (()=>onNav("home"))}
        onOpenDetail={(r)=>go("score-detail", r)}
        onOpenShare={()=>go("score-share")}
        onOpenScorecard={()=>go("scorecard")}
        onOpenAnalysis={(m)=>go("analysis-detail", m)}
        onOpenSwing={(c)=>go("swing-video", c)}
        onOpenAiSwing={(a)=>go("ai-swing", a)}
        onOpenClub={()=>go("club")}/>;
      case "ai-swing": return <AiSwingAnalysis rec={payload} onBack={back}/>;
      case "analysis-detail": return <AnalysisDetail metric={payload||"score"} onBack={back}/>;
      case "scorecard": return <ScorecardListScreen onBack={back} onOpenDetail={(r)=>go("score-detail", r)}/>;
      case "score-detail": return <ScorecardDetail onBack={back} onShare={()=>go("score-share")}/>;
      case "score-share":  return <ScorecardShare onBack={back}/>;
      case "store":    return <StoreScreen onNav={onNav} onReserve={(s)=>go("unified-booking", {store:s})}/>;
      case "swing":    return <SwingScreen onNav={onNav} onOpenDetail={(c)=>go("swing-video", c)}/>;
      case "swing-video": return <SwingVideoDetail clip={payload} onBack={back} onOpenUpload={()=>go("swing-upload", payload)} onOpenDraw={()=>go("swing-draw", payload)} onOpenAi={(a)=>go("ai-swing", a)}/>;
      case "swing-upload": return <SwingUpload clip={payload} onBack={back} onDone={()=>{ back(); }}/>;
      case "swing-draw":   return <SwingDraw onBack={back}/>;
      case "swing-detail": return <SwingDetail onBack={back} clip={payload} onOpenAll={()=>go("club-shot-data", {club: payload?.club || "드라이버"})}/>;
      case "club":     return <ClubMeasure onBack={back} onOpenDetail={(c)=>go("swing-detail", c)}/>;
      case "club-shot-data": return <ClubShotData onBack={back} club={payload?.club || "드라이버"}/>;
      case "qr":       return <QRScreen onClose={goHome}/>;
      case "training": return <TrainingFlow onClose={goHome} goHome={goHome}/>;
      case "unified-booking": return <BookingFlow onClose={goHome} goHome={goHome} onOpenReservation={(row)=>go("booking-detail", row)} initialType={payload?.type} initialStore={payload?.store} onLesson={()=>go("lesson-tickets")}/>;
      // 통합예약(BookingFlow)을 타입별 진입점으로 분리 — 상단 메뉴의 스크린/트레이닝 예약
      // (레슨 예약은 lesson-tickets → LessonFlow 경로가 정본이라 그쪽으로 연결한다)
      case "book-screen":     return <BookingFlow onClose={goHome} goHome={goHome} onOpenReservation={(row)=>go("booking-detail", row)} initialType="screen"   initialStore={payload?.store}/>;
      case "book-training":   return <BookingFlow onClose={goHome} goHome={goHome} onOpenReservation={(row)=>go("booking-detail", row)} initialType="training" initialStore={payload?.store}/>;
      case "booking-edit": return <BookingEdit onBack={back}/>;
      case "lesson":   return <LessonFlow onClose={back} goHome={goHome} initialTicket={payload?.ticket} onBuyPass={()=>go("buy-ticket", {initialType:"training"})}/>;
      case "pro-list": return <ProList onBack={back} onOpenDetail={(p)=>go("pro-detail", p)}/>;
      case "pro-detail": return <ProDetail onBack={back} pro={payload} onBuy={(p)=>go("buy-ticket", {initialType:"lesson", initialStore:{name:p.store}, initialPro:p})}/>;
      case "lesson-tickets": return <LessonTickets onBack={back}
        onPickTicket={(t)=>go("lesson", { ticket: t })}
        onBuy={()=>go("buy-ticket", {initialType:"lesson"})}/>;
      case "buy-ticket": return <TicketBuyFlow onClose={back} goHome={goHome} goTickets={()=>{ setStack([]); setPage("ticket"); }} initialType={payload?.initialType} initialStore={payload?.initialStore} initialPro={payload?.initialPro}/>;
      case "ticket":   return <TicketFlow onClose={back} goHome={goHome} onGift={()=>go("gift")}/>;
      case "gift":     return <GiftFlow onClose={back} goHome={goHome}/>;
      case "menu":     return <MenuScreen onBack={goHome}
        onOpenBooking={()=>go("booking")}
        onOpenTicket={()=>go("ticket")}
        onOpenGift={()=>go("gift")}
        onOpenPoints={()=>go("points")}
        onOpenNoShow={()=>go("noshow-status")}
        onOpenReport={()=>go("report")}
        onOpenCert={()=>go("cert")}
        onOpenBuyTicket={()=>go("buy-ticket")}
        onOpenLocker={()=>go("locker")}
        onOpenClub={()=>go("club")}
        onOpenAttendance={()=>go("attendance")}
        onOpenGameSettings={()=>go("game-settings")}
        onOpenAppSettings={()=>go("app-settings")}
        onOpenSubscribe={()=>go("subscribe")}
        subActive={!!sub}
        onOpenProfile={()=>go("profile")}/>;
      case "notifications": return <Notifications onBack={back} onOpenDetail={(r)=>go("booking-detail", r)}/>;
      case "attendance": return <Attendance onBack={back}/>;
      case "noshow-status": return <NoShowStatus onBack={back}/>;
      case "booking":  return <BookingList onBack={back} onOpenDetail={(r)=>go("booking-detail", r)}/>;
      case "booking-detail": return <BookingDetail onBack={back} row={payload} onModify={()=>{ setStack([]); setPage("unified-booking"); }} onOpenCancel={(r)=>go("booking-cancel", r)}/>;
      case "booking-cancel": return <BookingCancel onBack={back} row={payload} onDone={()=>go("booking")}/>;
      case "points":   return <PointsCash onBack={back}/>;
      case "cert":     return <Certificates onBack={back} onOpenDetail={(c)=>go("cert-detail", c)}/>;
      case "cert-detail": return <CertificateDetail cert={payload} onBack={back}/>;
      case "locker":   return <Lockers onBack={back}/>;
      case "game-settings": return <GameSettings onBack={back}/>;
      case "app-settings":  return <AppSettings onBack={back} onLogout={()=>{ setStack([]); setPage("login"); }} onSwitchService={onSwitchService}/>;
      case "profile":  return <ProfileEdit onBack={back} onOpenAddress={()=>go("address")} onWithdraw={()=>go("withdraw")} onOpenPassword={()=>go("password")}/>;
      case "address":  return <AddressSearch onBack={back}/>;
      case "password": return <PasswordChange onBack={back}/>;
      case "withdraw": return <Withdraw onBack={back}/>;
      default:         return <HomeScreen onNav={onNav}/>;
    }
  })();

  const pages = [
    ["login","로그인"],
    ["onboarding","온보딩"],
    ["home","홈"],
    ["notifications","알림"],
    ["qr","QR"],
    ["book-screen","스크린 예약"],
    ["book-training","트레이닝 예약"],
    ["lesson-tickets","레슨 예약"],
    ["booking-edit","└ 예약자편집"],
    ["report","스코어카드"],
    ["score-detail","└ 상세"],
    ["score-share","└ 공유"],
    ["store","매장찾기"],
    ["swing","스윙영상"],
    ["swing-detail","└ 상세"],
    ["ticket","이용권"],
    ["gift","선물하기"],
    ["attendance","출석체크"],
    ["noshow-status","노쇼현황"],
    ["booking","예약내역"],
    ["booking-detail","└ 상세"],
    ["menu","전체메뉴"],
    ["address","주소검색"],
    ["password","비밀번호"],
    ["withdraw","탈퇴"],
  ];

  return (
    <div style={{width:"100%",maxWidth:1400,margin:"0 auto",padding:"24px 20px"}}>
      <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:20,flexWrap:"wrap",gap:12}}>
        <div>
          <div style={{fontSize:11,color:"#6B7280",letterSpacing:".12em",fontWeight:600,fontFamily:"DM Mono,monospace",textTransform:"uppercase"}}>
            Quantum Range · Mobile Prototype
          </div>
          <div style={{fontSize:22,fontWeight:800,letterSpacing:"-.02em",marginTop:4,color:"#1A1C1F"}}>
            골프 아카데미 + 스크린 골프 통합 앱
          </div>
        </div>

        <div style={{display:"flex",gap:6,flexWrap:"wrap",maxWidth:800,justifyContent:"flex-end"}}>
          {pages.map(([k,v])=>(
            <button key={k} onClick={()=>{ setStack([]); setPage(k); }}
              style={{
                padding:"7px 12px",borderRadius:8,fontSize:12,fontWeight:600,
                background: page===k?"#22C55E":"#FFFFFF",
                color: page===k?"#FFFFFF":"#4B5563",
                border:"1px solid " + (page===k?"#22C55E":"#E5E7EB")
              }}>
              {v}
            </button>
          ))}
        </div>
      </div>

      <div style={{display:"flex",justifyContent:"center",paddingBottom:20}}>
        <Phone label={"CURRENT · " + page.toUpperCase()}>
          {/* page를 key로 줘서 같은 컴포넌트(예: BookingFlow 스크린↔트레이닝)로 바뀔 때도 새로 마운트되게 함 */}
          {React.cloneElement(current, { key: page })}
        </Phone>
      </div>

      <div style={{textAlign:"center",fontSize:11,color:"#6B7280",fontFamily:"DM Mono,monospace",letterSpacing:".08em",marginTop:8}}>
        상단 버튼으로 화면 이동 · 하단 탭바로 메인 탭 전환 · 앱바 ←로 뒤로가기
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App/>);