/* App – Root Component */
(function () {
  const { useState, useEffect } = React;
  const { loadState, saveState } = window.AppStore;
  const { Toast, showToast } = window.Common;
  const { Dashboard } = window.Dashboard;
  const { ConcertsView } = window.ConcertsView;
  const { EventsView } = window.EventsView;
  const { TemplatesView } = window.TemplatesView;

  /* ---- Sidebar Item ---- */
  function NavItem({ icon, label, active, onClick, badge }) {
    return (
      <button className={'sidebar-item' + (active ? ' active' : '')} onClick={onClick}>
        <span>{icon}</span>
        <span>{label}</span>
        {badge != null && badge > 0 && <span className="badge">{badge}</span>}
      </button>
    );
  }

  /* ---- Theme Toggle ---- */
  function ThemeToggle({ theme, onToggle }) {
    const isDark = theme === 'dark';
    return (
      <button
        className="theme-toggle-btn"
        onClick={onToggle}
        aria-label={isDark ? 'ライトモードへ切り替え' : 'ダークモードへ切り替え'}
        title={isDark ? 'ライトモードへ切り替え' : 'ダークモードへ切り替え'}
      >
        <span className="theme-toggle-icon">{isDark ? '☀️' : '🌙'}</span>
      </button>
    );
  }

  /* ---- Loading Screen ---- */
  function LoadingScreen() {
    return (
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100vh', gap: 12, color: 'var(--text-secondary, #888)', fontSize: 14 }}>
        <div>読み込み中...</div>
      </div>
    );
  }

  /* ---- Error Screen ---- */
  function ErrorScreen({ message, onRetry }) {
    return (
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100vh', gap: 16, color: 'var(--text-secondary, #888)', fontSize: 14 }}>
        <div style={{ fontSize: 32 }}>⚠️</div>
        <div>{message}</div>
        <button className="btn btn-primary" onClick={onRetry}>再読み込み</button>
      </div>
    );
  }

  /* ---- App ---- */
  function App() {
    const [state, setState] = useState(null);
    const [loadError, setLoadError] = useState(null);
    const [activeView, setActiveView] = useState('dashboard');
    const [viewMode, setViewMode] = useState('list');
    const [drawerOpen, setDrawerOpen] = useState(false);
      const importRef = React.useRef(null);

    function doLoad() {
      setLoadError(null);
      loadState()
        .then((data) => { setState(data); })
        .catch((err) => setLoadError(err.message));
    }

    useEffect(() => { doLoad(); }, []);

    useEffect(() => {
      if (!state) return;
      document.documentElement.setAttribute('data-theme', state.settings.theme || 'dark');
      saveState(state).catch((err) => showToast(err.message, 'error'));
    }, [state]);

    function handleChange(next) {
      setState(next);
    }

    function navigate(view) {
      setActiveView(view);
      setDrawerOpen(false);
    }

    function handleSelectConcert() { navigate('concerts'); }

    function handleThemeToggle() {
      const next = state.settings.theme === 'dark' ? 'light' : 'dark';
      handleChange({ ...state, settings: { ...state.settings, theme: next } });
    }

    function handleExport() {
      const blob = new Blob([JSON.stringify(state, null, 2)], { type: 'application/json' });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      const d = new Date();
      a.href = url;
      a.download = 'concert-flyer-backup-' + d.getFullYear() + String(d.getMonth() + 1).padStart(2, '0') + String(d.getDate()).padStart(2, '0') + '.json';
      document.body.appendChild(a); a.click();
      document.body.removeChild(a); URL.revokeObjectURL(url);
      showToast('バックアップをダウンロードしました', 'success');
    }

    function handleImport(file) {
      const reader = new FileReader();
      reader.onload = (e) => {
        try {
          const parsed = JSON.parse(e.target.result);
          if (!parsed.concerts || !parsed.events) throw new Error('不正な形式');
          if (!window.confirm('データを復元します。現在のデータは上書きされます。よろしいですか？')) return;
          setState(parsed);
          showToast('復元しました', 'success');
        } catch (err) {
          showToast('インポートに失敗しました: ' + err.message, 'error');
        }
      };
      reader.readAsText(file);
    }

    if (loadError) return <ErrorScreen message={loadError} onRetry={doLoad} />;
    if (!state) return <LoadingScreen />;

    const pendingCount = state.concerts.filter((c) => c.status === 'proposed').length;

    const NAV = [
      { id: 'dashboard', icon: '🏠', label: 'ダッシュボード' },
      { id: 'concerts', icon: '🎵', label: 'イベント' },
      { id: 'events', icon: '📅', label: 'コンサート', badge: pendingCount },
      { id: 'templates', icon: '✉️', label: 'テンプレート' },
    ];

    function SidebarContent({ inDrawer }) {
      return (
        <>
          <div className="sidebar-logo">
            <span>🎼</span>チラシ管理
          </div>
          <div className="sidebar-section">
            {NAV.map((n) => (
              <NavItem key={n.id} icon={n.icon} label={n.label} active={activeView === n.id && !inDrawer ? true : activeView === n.id} onClick={() => navigate(n.id)} badge={n.badge} />
            ))}
          </div>
          <div className="sidebar-footer">
            <NavItem icon="⬇️" label="バックアップ" onClick={handleExport} />
            <NavItem icon="⬆️" label="復元" onClick={() => importRef.current?.click()} />
          </div>
        </>
      );
    }

    return (
      <div className="app-wrapper">
        <nav className="sidebar">
          <SidebarContent />
        </nav>

        <div className={'drawer-overlay' + (drawerOpen ? ' open' : '')} onClick={() => setDrawerOpen(false)} />
        <nav className={'drawer' + (drawerOpen ? ' open' : '')}>
          <SidebarContent inDrawer />
        </nav>

        <div className="main-area">
          <header className="mobile-header">
            <button className="menu-btn" onClick={() => setDrawerOpen(true)} aria-label="メニュー">☰</button>
            <span className="mobile-header-title">🎼 チラシ管理</span>
            <ThemeToggle theme={state.settings.theme} onToggle={handleThemeToggle} />
          </header>

          <div className="desktop-topbar">
            <ThemeToggle theme={state.settings.theme} onToggle={handleThemeToggle} />
          </div>

          <main className="main-content">
            {activeView === 'dashboard' && <Dashboard state={state} onSelectConcert={handleSelectConcert} />}
            {activeView === 'concerts' && <ConcertsView state={state} onChange={handleChange} />}
            {activeView === 'events' && (
              <EventsView state={state} onChange={handleChange} viewMode={viewMode} onViewModeChange={setViewMode} />
            )}
            {activeView === 'templates' && <TemplatesView state={state} onChange={handleChange} />}
          </main>

          <nav className="bottom-nav">
            <div className="bottom-nav-inner">
              {NAV.map((n) => (
                <button key={n.id} className={'bottom-nav-item' + (activeView === n.id ? ' active' : '')} onClick={() => navigate(n.id)}>
                  {n.badge > 0 && <span className="nav-badge">{n.badge}</span>}
                  <span className="nav-icon">{n.icon}</span>
                  <span>{n.label}</span>
                </button>
              ))}
            </div>
          </nav>
        </div>

        <Toast />

        <input
          ref={importRef}
          type="file"
          accept=".json"
          style={{ display: 'none' }}
          onChange={(e) => { if (e.target.files[0]) handleImport(e.target.files[0]); e.target.value = ''; }}
        />


      </div>
    );
  }

  window.App = App;

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