import React, { useEffect, useState } from 'react';
import { createRoot } from 'react-dom/client';
import { Activity, ArrowRight, Bell, Blocks, Check, ChevronDown, CircleHelp, Code2, Command, Database, ExternalLink, Eye, EyeOff, Fingerprint, Gauge, Globe2, LayoutDashboard, LockKeyhole, LogOut, Menu, Moon, PanelLeftClose, Search, Settings, ShieldCheck, Sparkles, Sun, Users, X, Zap } from 'lucide-react';
import './style.css';
type User={id:string;email:string;name:string;role:'user'|'admin';createdAt:string};
type ApiError={error?:string};
async function api<T>(path:string, options:RequestInit={}):Promise<T>{
  const r=await fetch('/api'+path,{credentials:'same-origin',...options,headers:{...(options.body?{'Content-Type':'application/json'}:{}),...(options.headers??{})}});
  const data=await r.json() as T & ApiError;
  if(!r.ok)throw new Error(data.error??'Ошибка запроса');
  return data;
}
const features=[{icon:Fingerprint,title:'Готовая авторизация',detail:'Регистрация, вход, безопасные сессии'},{icon:Database,title:'Cloudflare D1',detail:'База данных и SQL-миграции'},{icon:ShieldCheck,title:'Роли и доступ',detail:'Пользователь и администратор'},{icon:Blocks,title:'React + TypeScript',detail:'Современный расширяемый интерфейс'}];
function App(){
 const [user,setUser]=useState<User|null>(null),[loaded,setLoaded]=useState(false),[section,setSection]=useState('overview'),[theme,setTheme]=useState<'dark'|'light'>('dark');
 const [auth,setAuth]=useState<'login'|'register'|null>(null),[busy,setBusy]=useState(false),[notice,setNotice]=useState(''),[sidebar,setSidebar]=useState(false);
 const [adminUsers,setAdminUsers]=useState<User[]>([]),[total,setTotal]=useState(0);
 const [name,setName]=useState(''),[email,setEmail]=useState(''),[password,setPassword]=useState(''),[adminKey,setAdminKey]=useState(''),[visible,setVisible]=useState(false),[profile,setProfile]=useState('');
 useEffect(()=>{api<{user:User|null}>('/me').then(d=>{setUser(d.user);setProfile(d.user?.name??'')}).catch(()=>{}).finally(()=>setLoaded(true));},[]);
 useEffect(()=>{document.documentElement.dataset.theme=theme},[theme]);
 useEffect(()=>{if(section==='admin'&&user?.role==='admin')api<{users:User[];count:number}>('/admin/users',{method:'POST'}).then(d=>{setAdminUsers(d.users);setTotal(d.count)}).catch(e=>setNotice(e.message))},[section,user]);
 function openAuth(mode:'login'|'register'){setAuth(mode);setNotice('');setPassword('');setAdminKey('')}
 async function submitAuth(e:React.FormEvent){e.preventDefault();if(!auth)return;setBusy(true);setNotice('');try{const data=await api<{user:User}>('/'+(auth==='login'?'login':'register'),{method:'POST',body:JSON.stringify({name,email,password,adminKey})});setUser(data.user);setProfile(data.user.name);setAuth(null);setSection('overview');setNotice('Добро пожаловать в LIXIANG Starter Kit')}catch(e){setNotice((e as Error).message)}finally{setBusy(false)}}
 async function logout(){try{await api('/logout',{method:'POST'});setUser(null);setAdminUsers([]);setSection('overview');setNotice('Вы вышли из аккаунта')}catch(e){setNotice((e as Error).message)}}
 async function saveProfile(e:React.FormEvent){e.preventDefault();setBusy(true);try{const d=await api<{user:User}>('/profile',{method:'PATCH',body:JSON.stringify({name:profile})});setUser(d.user);setNotice('Профиль обновлён')}catch(e){setNotice((e as Error).message)}finally{setBusy(false)}}
 const nav=[{id:'overview',title:'Обзор',icon:LayoutDashboard},{id:'components',title:'Возможности',icon:Blocks},{id:'settings',title:'Настройки',icon:Settings},...(user?.role==='admin'?[{id:'admin',title:'Пользователи',icon:Users}]:[])];
 return <div className="app">
  <aside className={'sidebar '+(sidebar?'mobile-open':'')}>
   <div className="logo"><span className="logo-mark"><Command size={19}/></span><span className="logo-word">LIXIANG<span className="logo-dot">.</span><small>STARTER KIT / V0.1</small></span><button className="icon-btn close-mobile" onClick={()=>setSidebar(false)}><X size={19}/></button></div>
   <div className="workspace"><span className="workspace-avatar">L</span><span><strong>Моё пространство</strong><small>Рабочая среда</small></span><ChevronDown size={14} className="muted"/></div>
   <div className="nav-label">РАБОЧЕЕ ПРОСТРАНСТВО</div>
   <nav>{nav.map(item=><button className={'nav-item '+(section===item.id?'active':'')} key={item.id} onClick={()=>{setSection(item.id);setSidebar(false)}}><item.icon size={17}/>{item.title}{section===item.id&&<span className="nav-indicator"/>}</button>)}</nav>
   <div className="nav-label nav-label-second">РЕСУРСЫ</div>
   <nav><a className="nav-item" target="_blank" rel="noreferrer" href="https://developers.cloudflare.com/workers/"><Code2 size={17}/>Документация<ExternalLink size={13} className="end muted"/></a><a className="nav-item" target="_blank" rel="noreferrer" href="https://developers.cloudflare.com/d1/"><Database size={17}/>Cloudflare D1<ExternalLink size={13} className="end muted"/></a></nav>
   <div className="side-bottom"><div className="help-card"><span className="help-spark"><Sparkles size={17}/></span><strong>Всё готово к старту</strong><p>Настройте свой проект и запустите первый SaaS на этой основе.</p><a href="https://developers.cloudflare.com/workers/" target="_blank" rel="noreferrer">Начать работу <ArrowRight size={14}/></a></div><div className="side-profile"><span className="profile-avatar">{user?.name.slice(0,1).toUpperCase()??'?'}</span><span><strong>{user?.name??'Гостевой доступ'}</strong><small>{user?.email??'Демонстрационный режим'}</small></span><button title={user?'Выйти':'Войти'} className="icon-btn" onClick={()=>user?void logout():openAuth('login')}>{user?<LogOut size={16}/>:<ArrowRight size={16}/>}</button></div></div>
  </aside>
  <main className="main"><header className="topbar"><div className="crumb"><button className="icon-btn mobile-menu" onClick={()=>setSidebar(true)}><Menu size={21}/></button><span className="crumb-root">Рабочее пространство</span><span className="crumb-separator">/</span><strong>{nav.find(n=>n.id===section)?.title??'Обзор'}</strong></div><div className="top-actions"><span className="status"><i/> Система доступна</span><button className="icon-btn" title="Сменить тему" onClick={()=>setTheme(theme==='dark'?'light':'dark')}>{theme==='dark'?<Sun size={18}/>:<Moon size={18}/>}</button><button className="icon-btn" title="Уведомления" onClick={()=>setNotice('Новых уведомлений нет')}><Bell size={18}/></button><span className="top-avatar">{user?.name[0].toUpperCase()??'L'}</span></div></header>
  <div className="content">
   {!loaded?<div className="loading">Загрузка...</div>:section==='overview'?<>
   <div className="eyebrow"><span className="eyebrow-dot"/> LIXIANG / ПРОСТРАНСТВО</div>
   <div className="heading-row"><div><h1>{user?'С возвращением, '+user.name.split(' ')[0]:'Создавайте больше. Быстрее.'}<span className="heading-star">✳</span></h1><p className="subtitle">Ваша основа для запуска современных цифровых продуктов.</p></div><span className="version">ВЕРСИЯ 0.1.0 <span>•</span> MVP</span></div>
   <section className="hero"><div className="hero-copy"><div className="hero-label"><Sparkles size={14}/> READY TO BUILD</div><h2>От идеи до запуска.<br/><span>Без лишнего кода.</span></h2><p>Авторизация, база данных, интерфейс и администрирование — уже объединены в одном аккуратном проекте.</p><button className="primary-btn" onClick={()=>user?setSection('components'):openAuth('register')}>{user?'Изучить возможности':'Создать аккаунт'} <ArrowRight size={17}/></button></div><div className="hero-art" aria-hidden="true"><div className="orbit o1"/><div className="orbit o2"/><div className="orbit o3"/><div className="art-core"><Command size={78} strokeWidth={1.25}/></div><div className="art-point p1"/><div className="art-point p2"/><div className="art-point p3"/></div></section>
   <div className="section-heading"><div><h3>Обзор проекта</h3><p>Всё, что необходимо для уверенного старта</p></div><div className="section-pill"><Activity size={14}/> ОСНОВНЫЕ МОДУЛИ</div></div>
   <div className="stat-grid"><div className="stat"><div className="stat-head"><span>Статус проекта</span><span className="stat-icon"><Gauge size={19}/></span></div><div className="stat-value">Активен <span className="stat-check"><Check size={14}/></span></div><p>Сервер и интерфейс готовы</p></div><div className="stat"><div className="stat-head"><span>Модули</span><span className="stat-icon"><Blocks size={19}/></span></div><div className="stat-value">04 <span className="stat-hint">/ основных</span></div><p>Подключены к проекту</p></div><div className="stat"><div className="stat-head"><span>Инфраструктура</span><span className="stat-icon"><Globe2 size={19}/></span></div><div className="stat-value">Cloudflare</div><p>Workers + D1 + Assets</p></div></div>
   <div className="section-heading second-section"><div><h3>Основные возможности</h3><p>Набор для разработки без лишней настройки</p></div><button className="text-link" onClick={()=>setSection('components')}>Все возможности <ArrowRight size={15}/></button></div>
   <div className="features-grid">{features.map((f)=><div className="feature" key={f.title}><span className="feature-icon"><f.icon size={21}/></span><strong>{f.title}</strong><p>{f.detail}</p><span className="feature-tag"><Check size={12}/> ВКЛЮЧЕНО</span></div>)}</div>
   <div className="bottom-banner"><div><Zap size={20}/><span><strong>Создано для быстрого запуска.</strong><small>Настройте бренд и развивайте продукт под свои задачи.</small></span></div><button onClick={()=>setSection('settings')}>Настройки проекта <ArrowRight size={15}/></button></div>
   </>:section==='components'?<><div className="eyebrow">КОМПОНЕНТЫ / СТАРТЕР</div><h1>Возможности проекта</h1><p className="subtitle">Рабочие модули, которые можно расширять в своих проектах.</p><div className="features-grid feature-page">{features.map(f=><div className="feature" key={f.title}><span className="feature-icon"><f.icon size={21}/></span><strong>{f.title}</strong><p>{f.detail}</p><span className="feature-tag"><Check size={12}/> ГОТОВО</span></div>)}</div><div className="info-panel"><strong>Что входит в пакет</strong><p>Исходный код React, TypeScript, Cloudflare Worker, SQL-миграция, стили, инструкции для локального запуска и публикации.</p><p>Оплата, электронная почта, восстановление пароля и аналитика не входят в версию 0.1.0.</p></div></>:section==='settings'?<><div className="eyebrow">АККАУНТ / НАСТРОЙКИ</div><h1>Настройки</h1><p className="subtitle">Персонализация интерфейса и параметры вашего аккаунта.</p><div className="settings-panel"><h3>Оформление</h3><p>Выберите цветовую схему интерфейса.</p><div className="theme-choices"><button className={theme==='dark'?'picked':''} onClick={()=>setTheme('dark')}><Moon size={18}/> Тёмная тема</button><button className={theme==='light'?'picked':''} onClick={()=>setTheme('light')}><Sun size={18}/> Светлая тема</button></div></div><div className="settings-panel"><h3>Мой профиль</h3>{user?<form onSubmit={saveProfile}><label>Отображаемое имя<input value={profile} onChange={e=>setProfile(e.target.value)} minLength={2} maxLength={70} required/></label><label>Электронная почта<input value={user.email} disabled/></label><button className="primary-btn" disabled={busy}>Сохранить изменения <ArrowRight size={16}/></button></form>:<div><p>Войдите, чтобы редактировать профиль.</p><button className="primary-btn" onClick={()=>openAuth('login')}>Войти <ArrowRight size={16}/></button></div>}</div></>:section==='admin'?<><div className="eyebrow">УПРАВЛЕНИЕ / ПОЛЬЗОВАТЕЛИ</div><h1>Пользователи</h1><p className="subtitle">Просмотр зарегистрированных пользователей. Раздел доступен администратору.</p>{user?.role==='admin'?<div className="users-panel"><div className="users-heading"><strong>Всего пользователей: {total}</strong><span>Показаны последние 100</span></div><div className="users-scroll"><table><thead><tr><th>Имя</th><th>Почта</th><th>Роль</th><th>Создан</th></tr></thead><tbody>{adminUsers.map(u=><tr key={u.id}><td>{u.name}</td><td>{u.email}</td><td><span className={'role '+u.role}>{u.role==='admin'?'Администратор':'Пользователь'}</span></td><td>{u.createdAt.slice(0,10)}</td></tr>)}</tbody></table></div></div>:<div className="info-panel">Недостаточно прав</div>}</>:null}
  </div><footer className="footer"><span>© 2026 LIXIANG. СОЗДАНО С ЦЕЛЬЮ.</span><span>REACT / TYPESCRIPT / CLOUDFLARE</span></footer></main>
  {notice&&<div className="toast" role="status"><span>{notice}</span><button onClick={()=>setNotice('')} aria-label="Закрыть"><X size={15}/></button></div>}
  {auth&&<div className="modal-backdrop" onMouseDown={e=>{if(e.target===e.currentTarget)setAuth(null)}}><div className="auth-modal" role="dialog" aria-modal="true" aria-label="Авторизация"><button className="modal-close" onClick={()=>setAuth(null)} aria-label="Закрыть"><X size={19}/></button><div className="auth-logo"><Command size={25}/></div><h2>{auth==='login'?'Добро пожаловать':'Создать аккаунт'}</h2><p>{auth==='login'?'Войдите в своё рабочее пространство':'Начните работу с LIXIANG Starter Kit'}</p><form onSubmit={submitAuth}>{auth==='register'&&<label>Ваше имя<input value={name} onChange={e=>setName(e.target.value)} minLength={2} maxLength={70} autoComplete="name" placeholder="Александр" required/></label>}<label>Электронная почта<input type="email" value={email} onChange={e=>setEmail(e.target.value)} autoComplete="email" placeholder="name@example.com" required/></label><label>Пароль<div className="password-field"><input type={visible?'text':'password'} value={password} onChange={e=>setPassword(e.target.value)} minLength={auth==='register'?12:1} maxLength={128} autoComplete={auth==='login'?'current-password':'new-password'} placeholder={auth==='register'?'Не менее 12 символов':'Введите пароль'} required/><button type="button" onClick={()=>setVisible(!visible)} title={visible?'Скрыть':'Показать'}>{visible?<EyeOff size={17}/>:<Eye size={17}/>}</button></div></label>{auth==='register'&&<details className="admin-details"><summary>У меня есть ключ администратора</summary><label>Ключ первоначальной настройки<input type="password" value={adminKey} onChange={e=>setAdminKey(e.target.value)} placeholder="Необязательно"/></label></details>}<button className="primary-btn submit-auth" disabled={busy}>{busy?'Обработка...':auth==='login'?'Войти':'Зарегистрироваться'} <ArrowRight size={17}/></button></form><div className="auth-switch">{auth==='login'?'Нет аккаунта?':'Уже есть аккаунт?'} <button onClick={()=>openAuth(auth==='login'?'register':'login')}>{auth==='login'?'Создать':'Войти'}</button></div><div className="auth-foot"><LockKeyhole size={13}/> Ваш пароль не сохраняется в открытом виде</div></div></div>}
  {sidebar&&<button className="mobile-overlay" aria-label="Закрыть меню" onClick={()=>setSidebar(false)}/>}
 </div>
}
createRoot(document.getElementById('root')!).render(<App/>);