/* global React, ReactDOM, Icon, UI, LessonHighData, Shell, AdminPages1, AdminPages2, SchedulePage, Mobile, JournalPage */
(function () {
const { useState, useEffect } = React;
const D0 = LessonHighData;

const LABEL_PRESETS = [
  { id: 'vocal', label: '연습실', sub: '보컬 / 음악' },
  { id: 'art',   label: '작업실', sub: '미술 / 공예' },
  { id: 'dance', label: '스튜디오', sub: '댄스 / 발레' },
];

function App() {
  const [view, setView] = useState('dashboard');
  const [navData, setNavData] = useState(null);
  const [openMember, setOpenMember] = useState(null);
  const [cmdOpen, setCmdOpen] = useState(false);
  const [notifOpen, setNotifOpen] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);
  const [labelIdx, setLabelIdx] = useState(0);
  const [navOpen, setNavOpen] = useState(false);
  const [registerOpen, setRegisterOpen] = useState(false);
  const [sendLinkFor, setSendLinkFor] = useState(null);
  const [noteFor, setNoteFor] = useState(null);
  const [journalFor, setJournalFor] = useState(null);
  const [consultJournalFor, setConsultJournalFor] = useState(null);

  const spaceLabel = LABEL_PRESETS[labelIdx].label;

  // Cmd+K shortcut
  useEffect(() => {
    const onKey = (e) => {
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
        e.preventDefault();
        setCmdOpen(true);
      }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  const handleNav = (target) => {
    if (typeof target === 'string') {
      setView(target);
      setNavData(null);
    } else if (target && target.view) {
      setView(target.view);
      setNavData(target);
      if (target.memberId) setOpenMember(target.memberId);
    }
    setNavOpen(false);
  };

  const onOpenMember = (id) => {
    setOpenMember(id);
  };

  const cycleLabel = () => setLabelIdx(i => (i + 1) % LABEL_PRESETS.length);

  return (
    <React.Fragment>
      <div className={`app ${navOpen ? 'is-nav-open' : ''}`}>
        <Shell.TopBar
          onOpenCmdK={() => setCmdOpen(true)}
          onOpenMobile={() => setMobileOpen(true)}
          onOpenNotif={() => setNotifOpen(o => !o)}
          spaceLabel={spaceLabel}
          onCycleLabel={cycleLabel}
          onOpenNav={() => setNavOpen(true)}
        />
        <div className="nav-scrim" onClick={() => setNavOpen(false)}/>
        <Shell.Sidebar active={view} onNav={handleNav} spaceLabel={spaceLabel} onClose={() => setNavOpen(false)}/>
        <main className="app__main" key={view}>
          <div className="app__main-inner">
            {view === 'dashboard' && <AdminPages1.Dashboard onNav={handleNav} spaceLabel={spaceLabel} onOpenNote={(id) => setJournalFor(id)}/>}
            {view === 'members'   && <AdminPages1.Members onOpenMember={onOpenMember} initialMember={openMember} onOpenRegister={() => setRegisterOpen(true)}/>}
            {view === 'consults'  && (window.ConsultsPro
              ? <window.ConsultsPro
                  onOpenMember={onOpenMember}
                  onOpenRegister={() => setRegisterOpen(true)}
                  onOpenConsultJournal={(id) => setConsultJournalFor(id || 'new')}
                />
              : <AdminPages2.Consults onOpenMember={onOpenMember} onOpenRegister={() => setRegisterOpen(true)}/>)}
            {view === 'schedule'  && <SchedulePage.Schedule spaceLabel={spaceLabel} onOpenMember={onOpenMember}/>}
            {view === 'attendance' && window.Attendance && <window.Attendance.AttendancePage onOpenMember={onOpenMember}/>}
            {view === 'spaces'    && <AdminPages2.Spaces spaceLabel={spaceLabel} onOpenMember={onOpenMember} onNav={handleNav}/>}
            {view === 'payments'  && <AdminPages2.Payments onOpenMember={onOpenMember}/>}
            {view === 'announcements' && window.Announcements && <window.Announcements.AnnouncementsPage onOpenMember={onOpenMember}/>}
            {view === 'analytics' && window.AnalyticsPage && <window.AnalyticsPage.AnalyticsPage onOpenMember={onOpenMember} onNav={handleNav}/>}
            {view === 'instructors' && window.InstructorsPage && <window.InstructorsPage.InstructorsPage onOpenMember={onOpenMember} initialTeacherId={navData?.teacherId}/>}
            {view === 'notes'     && <AdminPages2.Notes onOpenMember={onOpenMember} onOpenNote={(id) => setJournalFor(id)}/>}
            {view === 'settings'  && <AdminPages2.Settings spaceLabel={spaceLabel}/>}
          </div>
        </main>
      </div>

      {/* Member detail drawer */}
      <UI.Drawer
        open={!!openMember && view !== 'dashboard'}
        onClose={() => setOpenMember(null)}
        title={<span className="t-micro">회원 상세</span>}
        footer={
          <React.Fragment>
            <UI.Button variant="ghost">상태 변경 (휴원 ↔ 활동)</UI.Button>
            <div style={{ flex: 1 }}/>
            <UI.Button icon={Icon.Edit}>편집</UI.Button>
            <UI.Button variant="primary" icon={Icon.Send} onClick={() => setSendLinkFor(openMember)}>링크 발송</UI.Button>
          </React.Fragment>
        }
      >
        {openMember && <AdminPages1.MemberDetail memberId={openMember} onClose={() => setOpenMember(null)} onSendLink={() => setSendLinkFor(openMember)} onOpenJournal={(id) => setJournalFor(id)}/>}
      </UI.Drawer>

      {/* Modals */}
      <Modals.RegisterMemberModal open={registerOpen} onClose={() => setRegisterOpen(false)}/>
      <Modals.SendLinkModal open={!!sendLinkFor} onClose={() => setSendLinkFor(null)} memberId={sendLinkFor}/>
      <Modals.LessonNoteModal open={!!noteFor} onClose={() => setNoteFor(null)} memberId={noteFor}/>

      {/* 일지 작성 페이지 (별도 풀스크린 라우트) */}
      {journalFor && (
        <JournalPage.Journal
          memberId={journalFor}
          onClose={() => setJournalFor(null)}
          onOpenMember={(id) => { setJournalFor(null); setOpenMember(id); if (view === 'dashboard') setView('members'); }}
          onSendLink={() => setSendLinkFor(journalFor)}
        />
      )}

      {/* 상담일지 작성 페이지 (별도 풀스크린 라우트) */}
      {consultJournalFor && window.ConsultJournalPage && (
        <window.ConsultJournalPage.Open
          consultId={consultJournalFor === 'new' ? null : consultJournalFor}
          onClose={() => setConsultJournalFor(null)}
          onOpenRegister={() => { setConsultJournalFor(null); setRegisterOpen(true); }}
        />
      )}

      {/* Notifications panel */}
      <Shell.NotificationPanel open={notifOpen} onClose={() => setNotifOpen(false)}/>

      {/* Command Palette */}
      <Shell.CommandPalette
        open={cmdOpen}
        onClose={() => setCmdOpen(false)}
        onNav={handleNav}
      />

      {/* Floating mobile preview */}      <button className="phone-fab" onClick={() => setMobileOpen(true)} title="회원이 보는 화면을 미리보기 — QR/링크로 회원에게 발송되는 모바일 페이지입니다">
        <span style={{ width: 24, height: 24, background: 'var(--accent-default)', color: 'var(--text-on-accent)', borderRadius: '50%', display: 'grid', placeItems: 'center' }}>
          <Icon.Mobile size={13}/>
        </span>
        <span className="col" style={{ gap: 0, alignItems: 'flex-start', lineHeight: 1.1 }}>
          <span style={{ fontWeight: 600 }}>회원 화면 미리보기</span>
          <span style={{ color: 'var(--text-tertiary)', fontSize: 11, fontWeight: 500 }}>QR·링크로 발송되는 모바일</span>
        </span>
      </button>

      <div className={`phone-overlay ${mobileOpen ? 'is-open' : ''}`} onClick={() => setMobileOpen(false)}>
        <div className="phone" onClick={(e) => e.stopPropagation()}>
          <div className="phone__notch"></div>
          <button className="phone__close" onClick={() => setMobileOpen(false)} title="닫기">
            <Icon.X size={18}/>
          </button>
          <Mobile.MobileApp initialMemberId={openMember || 'm14'}/>
        </div>
      </div>

      {/* Global toast host */}
      {UI.ToastHost && <UI.ToastHost />}
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(
  window.PrototypeShell
    ? <window.PrototypeShell><App /></window.PrototypeShell>
    : <App />
);
})();