import { useState, useCallback } from 'react';
import Logo from './components/Logo';
import CreateForm from './components/CreateForm';
import AdminPanel from './components/AdminPanel';
import TokenModal from './components/TokenModal';
import Stats from './components/Stats';
import './App.css';

export default function App() {
  const [isAdmin, setIsAdmin] = useState(() => !!sessionStorage.getItem('admin_token'));
  const [showTokenModal, setShowTokenModal] = useState(false);
  const [logoClickCount, setLogoClickCount] = useState(0);
  const [view, setView] = useState<'home' | 'admin'>('home');

  const handleLogoClick = useCallback(() => {
    if (isAdmin) {
      setView(v => (v === 'admin' ? 'home' : 'admin'));
      return;
    }
    const next = logoClickCount + 1;
    setLogoClickCount(next);
    if (next >= 5) {
      setLogoClickCount(0);
      setShowTokenModal(true);
    }
  }, [logoClickCount, isAdmin]);

  const handleTokenSuccess = () => {
    setIsAdmin(true);
    setShowTokenModal(false);
    setView('admin');
  };

  const handleLogout = () => {
    sessionStorage.removeItem('admin_token');
    setIsAdmin(false);
    setView('home');
  };

  return (
    <div className={`app-layout${view === 'home' ? ' app-layout--home' : ''}`}>
      <header className="site-header">
        <div className="header-inner">
          <Logo onClick={handleLogoClick} />
          <nav className="header-nav" aria-label="主导航">
            {isAdmin && (
              <>
                <button
                  type="button"
                  className={`nav-btn ${view === 'home' ? 'active' : ''}`}
                  onClick={() => setView('home')}
                >
                  创建
                </button>
                <button
                  type="button"
                  className={`nav-btn ${view === 'admin' ? 'active' : ''}`}
                  onClick={() => setView('admin')}
                >
                  管理
                </button>
                <button type="button" className="nav-btn nav-btn-ghost" onClick={handleLogout}>
                  退出
                </button>
              </>
            )}
          </nav>
        </div>
      </header>

      <main className="doc-main">
        {view === 'home' && (
          <div className="doc-container doc-home">
            <div className="doc-home-layout">
              <div className="doc-home-stats" aria-label="全站统计">
                <Stats />
              </div>
              <div className="doc-col-main">
                <h1 className="page-title">新建</h1>
                <CreateForm isAdmin={isAdmin} />
              </div>
            </div>
          </div>
        )}
        {view === 'admin' && isAdmin && (
          <div className="doc-container">
            <h1 className="page-title">管理</h1>
            <AdminPanel />
          </div>
        )}
      </main>

      <footer className="site-footer">
        <p>SproutLink</p>
      </footer>

      {showTokenModal && (
        <TokenModal
          onSuccess={handleTokenSuccess}
          onClose={() => setShowTokenModal(false)}
        />
      )}
    </div>
  );
}
