import React, { useEffect, useMemo, useState } from 'react';
import { createRoot } from 'react-dom/client';
import { createClient } from '@supabase/supabase-js';
import {
  Activity, ArrowDownRight, ArrowUpRight, BadgeCheck, Bell, Check, CheckCircle2,
  ChevronDown, CircleHelp, Copy, CreditCard, ExternalLink, Eye, EyeOff, Fingerprint,
  Home, Link2, LoaderCircle, LockKeyhole, LogOut, Menu, Plus, Search, Settings,
  ShieldCheck, Sparkles, Users, Wallet, X, Zap, Clock3, CircleDollarSign
} from 'lucide-react';
import './style.css';

const envUrl = import.meta.env.VITE_SUPABASE_URL;
const envKey = import.meta.env.VITE_SUPABASE_ANON_KEY;
const supabase = envUrl && envKey ? createClient(envUrl, envKey) : null;
const demoLinks = [
  {id:'RM-2081', title:'Доступ к Refmatrix Pro', customer:'alex.mironov@mail.ru', amount:2490, status:'pending', created_at:new Date().toISOString(), url:'https://refmatrix.example/pay/RM-2081'},
  {id:'RM-2079', title:'Премиум-подписка · 1 месяц', customer:'daria.k@mail.ru', amount:1490, status:'paid', created_at:new Date(Date.now()-86400000).toISOString(), url:'https://refmatrix.example/pay/RM-2079'},
  {id:'RM-2075', title:'Доступ к аналитике', customer:'maxim.s@mail.ru', amount:3990, status:'paid', created_at:new Date(Date.now()-172800000).toISOString(), url:'https://refmatrix.example/pay/RM-2075'},
  {id:'RM-2071', title:'Стартовый тариф', customer:'hello@studio.dev', amount:990, status:'pending', created_at:new Date(Date.now()-259200000).toISOString(), url:'https://refmatrix.example/pay/RM-2071'}
];
const rub = n => new Intl.NumberFormat('ru-RU',{style:'currency',currency:'RUB',maximumFractionDigits:0}).format(n || 0);
const date = v => new Date(v).toLocaleDateString('ru-RU',{day:'2-digit',month:'short',year:'numeric'});
function App(){
  const [session,setSession]=useState(null), [profile,setProfile]=useState(null), [loading,setLoading]=useState(true);
  const [section,setSection]=useState('overview'), [links,setLinks]=useState(demoLinks), [users,setUsers]=useState([]), [toast,setToast]=useState('');
  const [modal,setModal]=useState(false), [query,setQuery]=useState(''), [mobileNav,setMobileNav]=useState(false);
  const [authMode,setAuthMode]=useState('login'), [email,setEmail]=useState(''), [password,setPassword]=useState(''), [fullName,setFullName]=useState(''), [authError,setAuthError]=useState('');
  const [form,setForm]=useState({title:'',amount:'',email:''}), [settings,setSettings]=useState({phone:'',bank:'Сбербанк',owner:''}), [showPass,setShowPass]=useState(false);
  const configured=!!supabase;
  useEffect(()=>{ if(!supabase){setLoading(false);return;} supabase.auth.getSession().then(({data})=>{setSession(data.session); if(data.session) loadProfile(data.session.user); else setLoading(false);}); const {data:{subscription}}=supabase.auth.onAuthStateChange((_e,s)=>{setSession(s); if(s) loadProfile(s.user); else {setProfile(null);setLoading(false);}}); return ()=>subscription.unsubscribe();},[]);
  async function loadProfile(user){ if(!supabase)return; const {data}=await supabase.from('profiles').select('*').eq('id',user.id).maybeSingle(); setProfile(data); setLoading(false); if(data) loadData(data); }
  async function loadData(p){ if(!supabase)return; let q=supabase.from('payment_links').select('*').order('created_at',{ascending:false}); if(p.role!=='admin')q=q.eq('user_id',p.id); const {data}=await q; if(data)setLinks(data); if(p.role==='admin'){const r=await supabase.from('profiles').select('id,email,full_name,role,is_active,created_at').order('created_at',{ascending:false});if(r.data)setUsers(r.data);} const {data:s}=await supabase.from('payment_settings').select('*').eq('user_id',p.id).maybeSingle();if(s)setSettings({phone:s.phone||'',bank:s.bank||'Сбербанк',owner:s.owner_name||''}); }
  function notify(t){setToast(t);setTimeout(()=>setToast(''),3000);}
  async function authSubmit(e){e.preventDefault();setAuthError('');if(!supabase){setAuthError('Сначала подключите Supabase: заполните .env.local по инструкции.');return;}setLoading(true);let result;if(authMode==='login')result=await supabase.auth.signInWithPassword({email,password});else result=await supabase.auth.signUp({email,password,options:{data:{full_name:fullName}}});if(result.error){setAuthError(result.error.message);setLoading(false);}else if(authMode==='signup'&&!result.data.session){setAuthError('Проверьте почту и подтвердите регистрацию.');setLoading(false);}else{setSession(result.data.session);if(result.data.user)await loadProfile(result.data.user);}}
  async function createLink(e){e.preventDefault();const amount=Number(form.amount);if(!form.title.trim()||amount<=0){notify('Укажите название и сумму');return;}if(supabase&&profile){const {data,error}=await supabase.from('payment_links').insert({user_id:profile.id,title:form.title,amount,customer_email:form.email||null,status:'pending'}).select().single();if(error){notify(error.message);return;}setLinks([data,...links]);}else{const id='RM-'+Math.floor(1000+Math.random()*8999);setLinks([{id,title:form.title,amount,customer:form.email||'Не указан',status:'pending',created_at:new Date().toISOString(),url:`${location.origin}/pay/${id}`},...links]);}setForm({title:'',amount:'',email:''});setModal(false);notify('Платёжная ссылка создана');}
  async function approve(link){if(!profile||profile.role!=='admin'){notify('Подтверждать оплату может только администратор');return;}if(supabase){const {error}=await supabase.from('payment_links').update({status:'paid',paid_at:new Date().toISOString()}).eq('id',link.id);if(error){notify(error.message);return;}if(link.user_id)await supabase.from('profiles').update({is_active:true}).eq('id',link.user_id);}setLinks(links.map(l=>l.id===link.id?{...l,status:'paid',paid_at:new Date().toISOString()}:l));notify('Оплата подтверждена');}
  async function saveSettings(e){e.preventDefault();if(supabase&&profile){const {error}=await supabase.from('payment_settings').upsert({user_id:profile.id,phone:settings.phone,bank:settings.bank,owner_name:settings.owner,updated_at:new Date().toISOString()});if(error){notify(error.message);return;}}notify('Настройки сохранены');}
  async function logout(){if(supabase)await supabase.auth.signOut();setSession(null);setProfile(null);}
  const isAdmin=profile?.role==='admin', isActive=profile?.is_active;
  const filtered=useMemo(()=>links.filter(l=>(l.title+' '+(l.customer_email||l.customer||'')+' '+l.id).toLowerCase().includes(query.toLowerCase())),[links,query]);
  const paid=links.filter(l=>l.status==='paid'), pending=links.filter(l=>l.status==='pending');
  const revenue=paid.reduce((s,l)=>s+Number(l.amount||0),0);
  if(loading)return <div className="loading-screen"><div className="brand-mark"><Fingerprint size={26}/></div><LoaderCircle className="spin" size={22}/><span>Подготавливаем пространство</span></div>;
  if(!session)return <div className="auth-page"><div className="auth-glow glow-a"/><div className="auth-glow glow-b"/><div className="auth-top"><Brand/><span className="secure"><ShieldCheck size={14}/> ЗАЩИЩЁННАЯ ПЛАТФОРМА</span></div><div className="auth-wrap"><div className="auth-copy"><div className="eyebrow"><span className="pulse-dot"/> CONTROL YOUR BUSINESS</div><h1>Всё под<br/>твоим <em>контролем.</em></h1><p>Единое пространство для платёжных ссылок, клиентов и управления доступом.</p><div className="auth-points"><div><CheckCircle2/> Управление оплатами</div><div><CheckCircle2/> Личный кабинет клиентов</div><div><CheckCircle2/> Безопасный доступ</div></div></div><form className="auth-card" onSubmit={authSubmit}><div className="card-icon"><LockKeyhole size={22}/></div><h2>{authMode==='login'?'С возвращением':'Создать аккаунт'}</h2><p className="muted">{authMode==='login'?'Войдите в свой аккаунт Refmatrix':'Зарегистрируйтесь, чтобы начать работу'}</p>{authMode==='signup'&&<label>Ваше имя<input value={fullName} onChange={e=>setFullName(e.target.value)} placeholder="Как к вам обращаться" required/></label>}<label>Email<input type="email" value={email} onChange={e=>setEmail(e.target.value)} placeholder="you@example.com" required/></label><label>Пароль<div className="password-wrap"><input type={showPass?'text':'password'} value={password} onChange={e=>setPassword(e.target.value)} placeholder="Не менее 8 символов" minLength={8} required/><button type="button" className="icon-btn pass-toggle" onClick={()=>setShowPass(!showPass)}>{showPass?<EyeOff size={16}/>:<Eye size={16}/>}</button></div></label>{authError&&<div className="error-msg">{authError}</div>}<button className="btn-primary auth-submit" disabled={loading}>{loading?<LoaderCircle className="spin" size={17}/>:<>{authMode==='login'?'Войти в аккаунт':'Зарегистрироваться'} <ArrowUpRight size={17}/></>}</button><div className="auth-switch">{authMode==='login'?'Впервые здесь?':'Уже есть аккаунт?'} <button type="button" onClick={()=>{setAuthMode(authMode==='login'?'signup':'login');setAuthError('')}}>{authMode==='login'?'Создать аккаунт':'Войти'}</button></div><div className="auth-foot"><ShieldCheck size={14}/> Ваши данные защищены</div></form></div><div className="auth-bottom"><span>© 2026 REFMATRIX</span><span>BUILT FOR CLARITY <span className="tiny-dot">✳</span></span></div></div>;
  if(!profile)return <div className="auth-page"><div className="auth-top"><Brand/></div><div className="setup-card"><div className="card-icon"><Clock3/></div><h2>Почти готово</h2><p>Профиль не найден. Выполните SQL-настройку из README и обновите страницу.</p><button className="btn-secondary" onClick={logout}>Выйти</button></div></div>;
  if(!isAdmin&&!isActive){return <div className="auth-page"><div className="auth-top"><Brand/><button className="btn-secondary" onClick={logout}><LogOut size={15}/> Выйти</button></div><div className="setup-card"><div className="pending-icon"><Clock3/></div><div className="eyebrow">ОЖИДАНИЕ ДОСТУПА</div><h2>Доступ пока закрыт</h2><p>После оплаты отправьте подтверждение владельцу Refmatrix. Как только администратор подтвердит платёж, личный кабинет станет доступен.</p><div className="pending-status"><span className="pulse-dot"/> Ожидаем подтверждение оплаты</div></div></div>}
  const nav=[['overview','Обзор',Home],['links','Платёжные ссылки',Link2],...(isAdmin?[['customers','Клиенты',Users]]:[]),['settings','Настройки оплаты',Wallet]];
  return <div className="app-shell"><aside className={`sidebar ${mobileNav?'mobile-open':''}`}><div className="side-brand"><Brand/><button className="icon-btn close-nav" onClick={()=>setMobileNav(false)}><X size={18}/></button></div><div className="workspace-label">WORKSPACE</div><div className="workspace"><div className="workspace-avatar">R</div><div><strong>Refmatrix</strong><small>{isAdmin?'Owner workspace':'Personal workspace'}</small></div><ChevronDown size={15}/></div><div className="nav-label">ПЛАТФОРМА</div><nav>{nav.map(([id,label,Icon])=><button key={id} className={`nav-item ${section===id?'active':''}`} onClick={()=>{setSection(id);setMobileNav(false)}}><Icon size={18}/><span>{label}</span>{id==='links'&&pending.length>0&&<span className="nav-count">{pending.length}</span>}</button>)}</nav><div className="sidebar-bottom"><div className="help-card"><div className="help-icon"><Sparkles size={17}/></div><strong>Нужна помощь?</strong><p>Всё необходимое для старта в одном месте.</p><button onClick={()=>notify('Добавьте ссылку на поддержку в настройках проекта')}>Центр помощи <ArrowUpRight size={14}/></button></div><div className="profile-mini"><div className="avatar">{(profile.full_name||profile.email||'R')[0].toUpperCase()}</div><div className="profile-info"><strong>{profile.full_name||profile.email}</strong><small>{isAdmin?'Главный администратор':'Клиент'}</small></div><button className="icon-btn" title="Выйти" onClick={logout}><LogOut size={16}/></button></div></div></aside><main className="main-area"><header className="topbar"><button className="icon-btn menu-btn" onClick={()=>setMobileNav(!mobileNav)}><Menu/></button><div className="breadcrumbs"><span>Refmatrix</span><span className="crumb-slash">/</span><strong>{nav.find(n=>n[0]===section)?.[1]||'Обзор'}</strong></div><div className="top-actions"><div className="live-status"><span className="pulse-dot"/> Система активна</div><button className="icon-btn notification-btn" onClick={()=>notify(pending.length?`Ожидают подтверждения: ${pending.length}`:'Новых уведомлений нет')}><Bell size={18}/>{pending.length>0&&<i/>}</button><div className="top-avatar">{(profile.full_name||profile.email||'R')[0].toUpperCase()}</div></div></header><div className="content">
  {section==='overview'&&<><div className="page-heading"><div><div className="eyebrow">ВТОРНИК, {new Date().toLocaleDateString('ru-RU',{day:'numeric',month:'long'}).toUpperCase()}</div><h1>Добро пожаловать{profile.full_name?', '+profile.full_name.split(' ')[0]:''} <span className="wave">✳</span></h1><p>Вот что происходит в вашем пространстве сегодня.</p></div><button className="btn-primary" onClick={()=>setModal(true)}><Plus size={17}/> Создать ссылку</button></div><div className="stats-grid"><Stat icon={CircleDollarSign} label="Получено оплат" value={rub(revenue)} trend={paid.length+' успешных оплат'} tone="green"/><Stat icon={Link2} label="Всего ссылок" value={links.length} trend="Все созданные ссылки" tone="purple"/><Stat icon={Clock3} label="Ожидают оплаты" value={pending.length} trend={pending.length?'Требуют внимания':'Всё обработано'} tone="amber"/><Stat icon={Users} label={isAdmin?'Всего клиентов':'Ваш аккаунт'} value={isAdmin?users.length:(isActive?'Активен':'Ожидание')} trend={isAdmin?'Зарегистрировано в системе':'Статус доступа'} tone="blue"/></div><div className="overview-grid"><section className="panel activity-panel"><div className="panel-heading"><div><h3>Последние платежи</h3><p>Активность по вашим ссылкам</p></div><button className="text-btn" onClick={()=>setSection('links')}>Все платежи <ArrowUpRight size={15}/></button></div><LinksTable links={filtered.slice(0,4)} admin={isAdmin} approve={approve} compact notify={notify}/></section><section className="panel quick-panel"><div className="panel-heading"><div><h3>Быстрые действия</h3><p>Самое важное — под рукой</p></div><Zap size={18} className="subtle-icon"/></div><button className="quick-action" onClick={()=>setModal(true)}><span className="quick-symbol violet"><Plus/></span><span><strong>Создать платёжную ссылку</strong><small>Новая ссылка за пару секунд</small></span><ArrowUpRight size={17}/></button><button className="quick-action" onClick={()=>setSection('settings')}><span className="quick-symbol mint"><Wallet/></span><span><strong>Настроить оплату СБП</strong><small>Банк и номер для переводов</small></span><ArrowUpRight size={17}/></button>{isAdmin&&<button className="quick-action" onClick={()=>setSection('customers')}><span className="quick-symbol blue"><Users/></span><span><strong>Управление клиентами</strong><small>Статусы и доступ к кабинету</small></span><ArrowUpRight size={17}/></button>}<div className="tip-box"><Sparkles size={17}/><div><strong>Небольшой совет</strong><p>Подтверждайте оплату только после проверки поступления средств в банковском приложении.</p></div></div></section></div><div className="bottom-banner"><div className="banner-symbol"><ShieldCheck size={23}/></div><div><strong>Ваш бизнес. Ваши правила.</strong><p>Управляйте ссылками и доступом клиентов в одном месте.</p></div><div className="banner-orbit">✳</div></div></>}
  {section==='links'&&<><div className="page-heading"><div><div className="eyebrow">ПЛАТЕЖИ И ТРАНЗАКЦИИ</div><h1>Платёжные ссылки</h1><p>Создавайте ссылки и отслеживайте статусы оплат.</p></div><button className="btn-primary" onClick={()=>setModal(true)}><Plus size={17}/> Новая ссылка</button></div><div className="table-toolbar"><div className="search-box"><Search size={17}/><input value={query} onChange={e=>setQuery(e.target.value)} placeholder="Поиск по ссылкам и клиентам..."/></div><div className="toolbar-meta">{filtered.length} записей</div></div><section className="panel full-table"><LinksTable links={filtered} admin={isAdmin} approve={approve} notify={notify}/></section></>}
  {section==='customers'&&<><div className="page-heading"><div><div className="eyebrow">УПРАВЛЕНИЕ ДОСТУПОМ</div><h1>Клиенты</h1><p>Управляйте аккаунтами и статусами доступа.</p></div></div><section className="panel full-table"><div className="panel-heading"><div><h3>Все пользователи</h3><p>{users.length} аккаунтов в системе</p></div><span className="status-pill paid"><span/> {users.filter(u=>u.is_active).length} активных</span></div><div className="table-wrap"><table><thead><tr><th>ПОЛЬЗОВАТЕЛЬ</th><th>РОЛЬ</th><th>ДОСТУП</th><th>РЕГИСТРАЦИЯ</th></tr></thead><tbody>{users.map(u=><tr key={u.id}><td><div className="customer-cell"><div className="avatar">{(u.full_name||u.email||'?')[0].toUpperCase()}</div><div><strong>{u.full_name||'Без имени'}</strong><small>{u.email}</small></div></div></td><td>{u.role==='admin'?<span className="role-admin"><ShieldCheck size={13}/> Администратор</span>:'Клиент'}</td><td><span className={`status-pill ${u.is_active?'paid':'pending'}`}><span/>{u.is_active?'Активен':'Ожидает оплаты'}</span></td><td>{u.created_at?date(u.created_at):'—'}</td></tr>)}</tbody></table>{users.length===0&&<Empty/>}</div></section></>}
  {section==='settings'&&<><div className="page-heading"><div><div className="eyebrow">ПЛАТЁЖНЫЕ РЕКВИЗИТЫ</div><h1>Настройки оплаты</h1><p>Укажите реквизиты, которые увидит клиент на странице оплаты.</p></div></div><div className="settings-grid"><section className="panel settings-form-panel"><div className="panel-heading"><div><h3>Оплата через СБП</h3><p>Система быстрых платежей</p></div><div className="sbp-logo">СБП</div></div><form onSubmit={saveSettings}><label>Банк получателя<select value={settings.bank} onChange={e=>setSettings({...settings,bank:e.target.value})}>{['Сбербанк','Т-Банк','ВТБ','Альфа-Банк','Газпромбанк','Райффайзенбанк','Другой банк'].map(b=><option key={b}>{b}</option>)}</select></label><label>Номер телефона для СБП<input value={settings.phone} onChange={e=>setSettings({...settings,phone:e.target.value})} placeholder="+7 900 000-00-00"/></label><label>Имя получателя<input value={settings.owner} onChange={e=>setSettings({...settings,owner:e.target.value})} placeholder="Например, Иван И."/></label><div className="settings-note"><ShieldCheck size={17}/><span>Реквизиты доступны только в контексте оплаты. Никогда не указывайте данные карты или коды подтверждения.</span></div><button className="btn-primary" type="submit"><Check size={17}/> Сохранить настройки</button></form></section><section className="panel preview-panel"><div className="panel-heading"><div><h3>Предпросмотр</h3><p>Так клиент увидит реквизиты</p></div><Eye size={17} className="subtle-icon"/></div><div className="payment-preview"><div className="preview-top"><Brand/><span className="secure-mini"><LockKeyhole size={12}/> SECURE</span></div><div className="preview-label">ОПЛАТА ЧЕРЕЗ СБП</div><h2>Оплатите удобным<br/>способом</h2><div className="bank-row"><div className="bank-icon"><Wallet/></div><div><strong>{settings.bank||'Ваш банк'}</strong><small>{settings.owner||'Имя получателя'}</small></div><BadgeCheck size={19} className="verified"/></div><div className="phone-row"><span>Номер телефона</span><strong>{settings.phone||'+7 XXX XXX-XX-XX'}</strong><button className="icon-btn" type="button" onClick={()=>settings.phone&&navigator.clipboard?.writeText(settings.phone).then(()=>notify('Номер скопирован'))}><Copy size={15}/></button></div><div className="preview-warning">После перевода дождитесь подтверждения владельца.</div><button className="btn-primary preview-pay" onClick={()=>notify('Это предпросмотр — платёж не выполняется')}>Я оплатил <ArrowUpRight size={15}/></button></div></section></div></>}
  </div><footer className="app-footer"><span>© 2026 Refmatrix</span><span><span className="pulse-dot"/> Все системы работают</span><span>Сделано с ясностью <span className="tiny-dot">✳</span></span></footer></main>
  {mobileNav&&<div className="mobile-scrim" onClick={()=>setMobileNav(false)}/>}
  {modal&&<div className="modal-backdrop" onClick={()=>setModal(false)}><form className="modal-card" onClick={e=>e.stopPropagation()} onSubmit={createLink}><div className="modal-head"><div><div className="eyebrow">НОВАЯ ТРАНЗАКЦИЯ</div><h2>Создать ссылку</h2><p>Заполните детали будущего платежа.</p></div><button type="button" className="icon-btn" onClick={()=>setModal(false)}><X/></button></div><label>Название услуги<input autoFocus value={form.title} onChange={e=>setForm({...form,title:e.target.value})} placeholder="Например, подписка Pro" required/></label><label>Сумма, ₽<div className="amount-input"><input type="number" min="1" step="1" value={form.amount} onChange={e=>setForm({...form,amount:e.target.value})} placeholder="2490" required/><span>RUB</span></div></label><label>Email клиента <span className="optional">необязательно</span><input type="email" value={form.email} onChange={e=>setForm({...form,email:e.target.value})} placeholder="client@example.com"/></label><div className="modal-info"><Link2 size={16}/><span>Ссылка появится в списке. После оплаты вы сможете подтвердить её вручную.</span></div><div className="modal-actions"><button type="button" className="btn-secondary" onClick={()=>setModal(false)}>Отмена</button><button className="btn-primary"><Plus size={17}/> Создать ссылку</button></div></form></div>}
  {toast&&<div className="toast"><CheckCircle2 size={18}/>{toast}</div>}
  </div>;
}
function Brand(){return <div className="brand"><div className="brand-mark"><Fingerprint size={23} strokeWidth={1.8}/></div><span>ref<span>matrix</span><sup>®</sup></span></div>}
function Stat({icon:Icon,label,value,trend,tone}){return <div className="stat-card"><div className="stat-top"><span>{label}</span><span className={`stat-icon ${tone}`}><Icon size={19}/></span></div><div className="stat-value">{value}</div><div className="stat-foot"><span className={`stat-trend ${tone}`}><span className="tiny-dot">✳</span> {trend}</span></div></div>}
function LinksTable({links,admin,approve,compact,notify}){return <div className="table-wrap"><table><thead><tr><th>ПЛАТЁЖ</th><th>СУММА</th><th>СТАТУС</th><th>ДАТА</th><th>ДЕЙСТВИЯ</th></tr></thead><tbody>{links.map(l=><tr key={l.id}><td><div className="payment-cell"><div className="payment-icon"><Link2 size={17}/></div><div><strong>{l.title}</strong><small>{l.customer_email||l.customer||l.id}</small></div></div></td><td><strong className="amount">{rub(l.amount)}</strong></td><td><span className={`status-pill ${l.status==='paid'?'paid':'pending'}`}><span/>{l.status==='paid'?'Оплачено':'Ожидает'}</span></td><td>{l.created_at?date(l.created_at):'—'}</td><td><div className="row-actions">{l.status!=='paid'&&admin&&<button className="approve-btn" onClick={()=>approve(l)} title="Подтвердить оплату"><Check size={14}/> Подтвердить</button>}<button className="icon-btn" title="Скопировать ссылку" onClick={()=>{const url=l.url||`${location.origin}/pay/${l.id}`;navigator.clipboard?.writeText(url).then(()=>notify('Ссылка скопирована')).catch(()=>notify(url));}}><Copy size={15}/></button></div></td></tr>)}</tbody></table>{links.length===0&&<Empty/>}</div>}
function Empty(){return <div className="empty-state"><div><Search size={21}/></div><strong>Пока ничего нет</strong><span>Здесь появятся новые записи.</span></div>}
createRoot(document.getElementById('root')).render(<App/>);