import React,{useEffect,useState} from 'react'; import {createRoot} from 'react-dom/client'; import './style.css';
type Dashboard={active_orders:number;need_attention:number;orders_by_status:Record<string,number>};
const initData=(window as any).Telegram?.WebApp?.initData||'dry-run-admin';
async function api(path:string){const r=await fetch(`/api${path}`,{headers:{'X-Telegram-Init-Data':initData}});if(!r.ok)throw Error('Не удалось загрузить данные');return r.json()}
function App(){const [data,setData]=useState<Dashboard>();const [page,setPage]=useState('dashboard');const [error,setError]=useState('');useEffect(()=>{api(page==='orders'?'/orders':'/dashboard').then(setData).catch(e=>setError(e.message))},[page]);return <main><header><b>💙 SMM Control</b><small>Безопасная панель</small></header><nav>{[['dashboard','📊 Главная'],['orders','📦 Заказы'],['lots','🔗 Лоты'],['statistics','📈 Статистика'],['settings','⚙️ Настройки']].map(([p,n])=><button onClick={()=>setPage(p)}>{n}</button>)}</nav>{error?<p className="error">{error}</p>:page==='orders'?<Orders/>:<Dashboard data={data}/>}</main>}
function Dashboard({data}:{data?:Dashboard}){return <section><h1>Dashboard</h1><div className="cards"><Card icon="📦" title="Активные" value={data?.active_orders}/><Card icon="⚠️" title="Внимание" value={data?.need_attention}/><Card icon="🟢" title="Выполнено" value={data?.orders_by_status?.COMPLETED||0}/><Card icon="💵" title="Доход сегодня" value="—"/></div><h2>Статусы заказов</h2><pre>{JSON.stringify(data?.orders_by_status||{},null,2)}</pre></section>}
function Card({icon,title,value}:{icon:string,title:string,value:any}){return <article><span>{icon}</span><small>{title}</small><strong>{value??'…'}</strong></article>}
function Orders(){const [orders,setOrders]=useState<any[]>([]);useEffect(()=>{api('/orders').then(setOrders)},[]);return <section><h1>Заказы</h1>{orders.map(x=><article className="order"><b>#{x.funpay_order_id}</b><span>{x.buyer||'—'}</span><span>{x.quantity}</span><em>{x.status}</em></article>)}{!orders.length&&<p>Заказов пока нет.</p>}</section>};createRoot(document.getElementById('root')!).render(<App/>);