import React,{useState,useEffect} from 'react';
import {createRoot} from 'react-dom/client';
import {Menu,X,User,Check,ArrowUpRight} from 'lucide-react';
import '@fontsource/manrope/400.css';
import '@fontsource/manrope/500.css';
import '@fontsource/manrope/600.css';
import '@fontsource/manrope/700.css';
import {api} from './api';
import {Button} from './components/ui';
import Auth from './components/Auth';
import Home from './pages/Home';
import Forum from './pages/Forum';
import Topic from './pages/Topic';
import Account,{EmailAction} from './pages/Account';
import {Start,Rules,Legal,Contacts} from './pages/Info';
import './style.css';
import './responsive.css';
function App(){
 const [route,setRoute]=useState(location.hash.slice(1)||'/'),[user,setUser]=useState(null),[config,setConfig]=useState(null),[auth,setAuth]=useState(null),[menu,setMenu]=useState(false),[toast,setToast]=useState('');
 useEffect(()=>{const fn=()=>{setRoute(location.hash.slice(1)||'/');setMenu(false);window.scrollTo(0,0)};window.addEventListener('hashchange',fn);Promise.all([api('/me'),api('/config')]).then(([u,c])=>{setUser(u);setConfig(c)}).catch(()=>setToast('Не удалось связаться с сервером. Обновите страницу.'));return()=>window.removeEventListener('hashchange',fn)},[]);
 useEffect(()=>{if(!toast)return;const t=setTimeout(()=>setToast(''),5000);return()=>clearTimeout(t)},[toast]);
 const page=route.split('?')[0],openAuth=(mode='login')=>setAuth(mode);
 useEffect(()=>{const labels={'/forum':'Форум сообщества','/rules':'Правила','/start':'Как начать','/privacy':'Конфиденциальность','/terms':'Условия использования','/account':'Личный кабинет'};document.title=(labels[page]?labels[page]+' · ':'')+'Quiet Law — твоя история';},[page]);
 return <><a className="skip-link" href="#main-content">К содержимому</a><header className="header page-width"><a className="brand" href="#/" aria-label="Quiet Law — главная"><img src="/logo.png" alt="Quiet Law"/><span>QUIET LAW<small>REDM ROLEPLAY COMMUNITY</small></span></a><nav className={menu?'open':''} aria-label="Основная навигация">{[['/','Главная'],['/forum','Форум'],['/rules','Правила']].map(([url,title])=><a key={url} className={page===url||url==='/forum'&&page.startsWith('/topic/')?'active':''} href={'#'+url}>{title}</a>)}</nav><div className="header-actions">{user?<a className="account-link" href="#/account"><User size={17}/><span>{user.name}</span></a>:<Button secondary small onClick={()=>openAuth('login')}>Войти</Button>}<Button small href="#/start" arrow>Начать играть</Button><button className="icon-button menu-toggle" aria-label={menu?'Закрыть меню':'Открыть меню'} aria-expanded={menu} onClick={()=>setMenu(!menu)}>{menu?<X/>:<Menu/>}</button></div></header><main id="main-content">{page==='/'?<Home user={user} openAuth={openAuth}/>:page==='/forum'?<Forum user={user} openAuth={openAuth}/>:page.startsWith('/topic/')?<Topic id={page.split('/')[2]} user={user} openAuth={openAuth} toast={setToast}/>:page==='/account'?<Account user={user} setUser={setUser} openAuth={openAuth} toast={setToast}/>:page==='/start'?<Start config={config}/>:page==='/rules'?<Rules/>:['/privacy','/terms','/cookies','/consent'].includes(page)?<Legal type={page.slice(1)} config={config}/>:page==='/contacts'?<Contacts config={config}/>:['/verify','/reset'].includes(page)?<EmailAction key={page} mode={page.slice(1)} setUser={setUser} openAuth={openAuth}/>:<section className="reading"><h1>Здесь пока<br/>только прерия.</h1><p className="lead">Эта страница не найдена. Давайте вернёмся к людям.</p><Button href="#/" arrow>На главную</Button></section>}</main><footer className="footer page-width"><div className="footer-top"><div className="footer-brand"><span>QUIET LAW</span><p>Больше, чем игра. Место для своих.</p></div><nav aria-label="Документы"><a href="#/terms">Условия использования</a><a href="#/privacy">Конфиденциальность</a><a href="#/cookies">Cookies</a><a href="#/contacts">Контакты <ArrowUpRight size={13}/></a></nav></div><div className="footer-bottom"><span>© {new Date().getFullYear()} Quiet Law. Независимое RedM-сообщество.</span><span>Не связано с Rockstar Games.</span></div></footer>{auth&&<Auth initial={auth} close={()=>setAuth(null)} done={u=>{setUser(u);setAuth(null)}}/>}{toast&&<div className="toast" role="status"><Check size={18}/>{toast}<button aria-label="Закрыть уведомление" onClick={()=>setToast('')}><X size={15}/></button></div>}</>
}
createRoot(document.getElementById('root')).render(<App/>);