// ============================================
// App — root component
// ============================================

const { useState, useEffect } = React;

function useStore() {
  const [state, setState] = useState(window.tajeonStore.getState());
  useEffect(() => {
    return window.tajeonStore.subscribe(setState);
  }, []);
  return [state, window.tajeonStore];
}

function Header({ state }) {
  const currentCount = state.telegrams.filter((t) => t.vol === state.currentVol).length;
  return (
    <header className="header">
      <div className="header-row">
        <div className="brand">
          <span className="brand-kr">타전</span>
          <span className="brand-dot" />
          <span className="brand-en">Tajeon</span>
        </div>
        <div className="vol-badge">
          <b>VOL.{state.currentVol}</b>
          <span className="vol-badge-sub">{currentCount} 通 · IN TRANSIT</span>
        </div>
      </div>
    </header>
  );
}

function Nav({ view, setView }) {
  const tabs = [
    ['transmit', '타전실'],
    ['inbox', '수신함'],
    ['archive', '서가'],
  ];
  return (
    <nav className="nav">
      {tabs.map(([key, label]) => (
        <button
          key={key}
          className={`nav-btn ${view === key ? 'active' : ''}`}
          onClick={() => setView(key)}
        >
          {label}
        </button>
      ))}
    </nav>
  );
}

function InboxView({ state }) {
  const received = state.telegrams
    .filter((t) => t.from !== state.me && t.vol === state.currentVol);
  return (
    <div className="fade-up">
      <div className="notice">수신된 전보 — 응답 불가</div>
      {received.length === 0 ? (
        <div className="empty">아직 수신된 전보가 없습니다.</div>
      ) : (
        received.map((t, i) => (
          <div key={t.id} className="card from-other" style={{ animationDelay: `${i * 0.06}s` }}>
            <div className="card-meta">
              <b>← 수신</b>
              <span>No.{(t.id || '').slice(-4).toUpperCase()}</span>
            </div>
            <div className="card-text">
              <FormattedText text={t.text} />
            </div>
            <div className="card-time">
              {new Date(t.time).toLocaleString('ko-KR', {
                month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit',
              })}
            </div>
          </div>
        ))
      )}
    </div>
  );
}

function IdentityBar({ state, store }) {
  // Only in local-demo mode (firebase uses real auth uid)
  if (store.mode !== 'local') return null;
  return (
    <div style={{
      textAlign: 'center',
      padding: '8px 0 4px',
      borderBottom: '1px dashed rgba(42,36,29,0.18)',
      marginBottom: 12,
    }}>
      <div className="demo-note">DEMO MODE — 두 사람을 미리보기</div>
      <div className="identity-switch">
        <button
          className={state.me === 'a' ? 'active' : ''}
          onClick={() => store.setMe('a')}
        >나 (A)</button>
        <button
          className={state.me === 'b' ? 'active' : ''}
          onClick={() => store.setMe('b')}
        >친구 (B)</button>
      </div>
    </div>
  );
}

function App() {
  const [state, store] = useStore();
  const [view, setView] = useState('transmit');
  const [ritualOpen, setRitualOpen] = useState(false);

  const handleSend = (text) => {
    store.sendTelegram(text);
  };

  const handleConfirmClose = ({ title, cover }) => {
    return store.closeVol({ title, cover });
  };

  return (
    <div className="app">
      <Header state={state} />
      <Nav view={view} setView={setView} />
      <IdentityBar state={state} store={store} />

      <main className="main">
        {view === 'transmit' && (
          <TransmitView
            state={state}
            onSend={handleSend}
            onOpenRitual={() => setRitualOpen(true)}
          />
        )}
        {view === 'inbox' && <InboxView state={state} />}
        {view === 'archive' && <ArchiveView state={state} />}
      </main>

      <footer className="app-footer">
        일방향 · 응답 불가 · 읽음 없음
      </footer>

      {ritualOpen && (
        <MeetingRitual
          state={state}
          onClose={() => setRitualOpen(false)}
          onConfirmClose={handleConfirmClose}
          onCloseAndGoArchive={() => { setRitualOpen(false); setView('archive'); }}
        />
      )}
    </div>
  );
}

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