import React,{useEffect,useMemo,useState} from "react";
import {createRoot} from "react-dom/client";
import {
 ShoppingBag,Gamepad2,MonitorPlay,Wallet,Search,Heart,User,Menu,ChevronRight,
 ShieldCheck,Zap,Gift,Star,Package,LayoutDashboard, CreditCard, Smartphone,
 Landmark,Truck,RotateCcw,Users,Store,BarChart3,Settings,Ticket, Bell,
 ClipboardList, Plus, CheckCircle2, Clock3, XCircle, Eye, LogOut, Home,
 Layers, Tag, LockKeyhole, Headphones, HelpCircle, FileText, RefreshCw
} from "lucide-react";
import "./styles/global.css";

const GAMES=[
 ["Free Fire","Diamonds • Weekly/Monthly Membership"],["Free Fire MAX","Diamonds • Membership • Bundles"],
 ["PUBG Mobile","UC • Royale Pass • Event packages"],["Call of Duty Mobile","CP • Battle Pass • Bundles"],
 ["Mobile Legends","Diamonds • Weekly Pass • Starlight"],["eFootball","Coins • Premium packs"],
 ["Clash of Clans","Gems • Gold Pass"],["Clash Royale","Gems • Pass Royale"],
 ["Roblox","Robux • Premium"],["Valorant","VP • Battle Pass"],
 ["League of Legends","RP • Pass/Event products"],["Fortnite","V-Bucks • Crew • Battle Pass"],
 ["Steam","Wallet • Official digital products"],["PlayStation","PSN Wallet • PS Plus"],
 ["Xbox","Gift Card • Game Pass"],["Nintendo","eShop • Switch Online"]
];
const SERVICES=[
 ["Netflix","Streaming"],["Disney+","Streaming"],["Prime Video","Streaming"],["Max","Streaming"],
 ["Hulu","Streaming"],["Apple TV+","Streaming"],["Paramount+","Streaming"],["Crunchyroll","Anime"],
 ["YouTube Premium","Video & Music"],["Spotify","Music"],["YouTube Music","Music"],["Apple Music","Music"],
 ["AI Tools","AI & Software"],["Design Tools","Design"],["Cloud Storage","Cloud"],["VPN","Security"],
 ["Education","Learning"],["Productivity","Software"],["Developer Tools","Developer"]
];
const PRODUCTS=[
 {id:1,name:"Wireless Headphones Pro",price:2490,old:2990,cat:"Electronics",icon:Headphones},
 {id:2,name:"Smart Watch Pro",price:3890,old:4490,cat:"Wearables",icon:Clock3},
 {id:3,name:"Mechanical Gaming Keyboard",price:4590,old:5290,cat:"Gaming",icon:Layers},
 {id:4,name:"Premium Backpack",price:1890,old:2290,cat:"Lifestyle",icon:Package}
];
const PAYMENT=[
 ["bKash","Mobile payment",Smartphone],["Nagad","Mobile payment",Smartphone],
 ["Card","Visa / Mastercard",CreditCard],["Bank","Bank transfer",Landmark],["COD","Cash on delivery",Truck]
];

function load(k,d){try{return JSON.parse(localStorage.getItem(k))??d}catch{return d}}
function App(){
 const [page,setPage]=useState("home");
 const [dark,setDark]=useState(load("tl_dark",true));
 const [cart,setCart]=useState(load("tl_cart",[]));
 const [orders,setOrders]=useState(load("tl_orders",[]));
 const [tasks,setTasks]=useState(load("tl_tasks",[]));
 const [wallet,setWallet]=useState(load("tl_wallet",2450));
 const [toast,setToast]=useState("");
 const [query,setQuery]=useState("");
 useEffect(()=>localStorage.setItem("tl_dark",JSON.stringify(dark)),[dark]);
 useEffect(()=>localStorage.setItem("tl_cart",JSON.stringify(cart)),[cart]);
 useEffect(()=>localStorage.setItem("tl_orders",JSON.stringify(orders)),[orders]);
 useEffect(()=>localStorage.setItem("tl_tasks",JSON.stringify(tasks)),[tasks]);
 useEffect(()=>localStorage.setItem("tl_wallet",JSON.stringify(wallet)),[wallet]);
 const notify=m=>{setToast(m);setTimeout(()=>setToast(""),2200)};
 const add=(p)=>{setCart(c=>[...c,p]);notify("Added to cart")};
 const nav=p=>setPage(p);
 const submitOrder=(data)=>{const o={id:"TL-"+Date.now().toString().slice(-8),date:new Date().toLocaleString(),status:"Pending",...data};setOrders(x=>[o,...x]);setTasks(x=>[{id:"TASK-"+Date.now().toString().slice(-6),type:"Order",title:data.title||"New customer order",status:"Pending",created:new Date().toLocaleString()},...x]);notify("Order submitted — awaiting verification")};
 const navItems=[
  ["home","Home",Home],["shop","Shop",Package],["gaming","Game Top Up",Gamepad2],
  ["subscriptions","Subscriptions",MonitorPlay],["wallet","Wallet",Wallet],["cart","Cart",ShoppingBag],
  ["profile","Account",User],["admin","Master Admin",LayoutDashboard]
 ];
 return <div className={dark?"app dark":"app light"}>
  <header className="top">
   <button className="brand" onClick={()=>nav("home")}><div className="brandmark">TL</div><div><b>TL TOP UP</b><span>GAMING • TOP UP • OTT • DIGITAL</span></div></button>
   <div className="search"><Search size={18}/><input value={query} onChange={e=>setQuery(e.target.value)} placeholder="Search products, games, subscriptions..."/></div>
   <div className="head-actions"><button onClick={()=>nav("wishlist")}><Heart/></button><button onClick={()=>nav("notifications")}><Bell/></button><button onClick={()=>setDark(x=>!x)}>{dark?"☀":"☾"}</button><button onClick={()=>nav("profile")}><User/></button><button className="cart" onClick={()=>nav("cart")}><ShoppingBag/><em>{cart.length}</em></button><button><Menu/></button></div>
  </header>
  <nav className="nav">{navItems.map(([id,label,I])=><button key={id} className={page===id?"active":""} onClick={()=>nav(id)}><I size={17}/>{label}</button>)}</nav>
  <main>
   {page==="home"&&<Home nav={nav} add={add}/>}
   {page==="shop"&&<Shop add={add}/>}
   {page==="gaming"&&<Gaming submit={submitOrder}/>}
   {page==="subscriptions"&&<Subscriptions submit={submitOrder}/>}
   {page==="wallet"&&<WalletPage wallet={wallet} setWallet={setWallet} submit={submitOrder} notify={notify}/>}
   {page==="cart"&&<Cart cart={cart} setCart={setCart} submit={submitOrder}/>}
   {page==="profile"&&<Profile nav={nav} orders={orders}/>}
   {page==="wishlist"&&<Empty title="Wishlist" icon={<Heart/>} text="Save products here for later."/>}
   {page==="notifications"&&<Notifications orders={orders}/>}
   {page==="orders"&&<Orders orders={orders}/>}
   {page==="addresses"&&<AddressBook/>}
   {page==="rewards"&&<Rewards/>}
   {page==="returns"&&<Returns/>}
   {page==="reviews"&&<Reviews/>}
   {page==="settings"&&<SettingsPage/>}
   {page==="support"&&<Support/>}
   {page==="faq"&&<FAQ/>}
   {page==="about"&&<Info title="About TL TOP UP" text="A unified marketplace for physical products, gaming top-ups and lawful digital services."/>}
   {page==="contact"&&<Info title="Contact Us" text="Customer support, order help and payment verification are available through the support center."/>}
   {page==="admin"&&<Admin tasks={tasks} setTasks={setTasks} orders={orders} nav={nav}/>}
   {["terms","privacy","refund-policy","shipping-policy"].includes(page)&&<Info title={page.replaceAll("-"," ").toUpperCase()} text="Policy content is editable from Master Admin → Website Settings."/>}
  </main>
  <footer><div><b>TL TOP UP</b><p>Gaming • Top Up • OTT • Digital Services</p></div><div><b>Customer</b><p onClick={()=>nav("orders")}>Orders · Returns · Support · FAQ</p></div><div><b>Policies</b><p>Terms · Privacy · Refund · Shipping</p></div></footer>
  {toast&&<div className="toast"><CheckCircle2 size={17}/> {toast}</div>}
 </div>
}

function Home({nav,add}){
 return <section className="newHome">
  <div className="homeHero">
   <div className="heroCopy">
    <div className="eyebrow"><span className="liveDot"></span> TL TOP UP MARKETPLACE</div>
    <h1>Everything digital.<br/><strong>One place.</strong></h1>
    <p>Gaming top-ups, subscriptions, digital services and everyday products — designed for fast discovery and simple checkout.</p>
    <div className="heroActions"><button className="primary big" onClick={()=>nav("gaming")}>Top Up a Game <ChevronRight/></button><button className="ghost big" onClick={()=>nav("subscriptions")}>Explore Subscriptions</button></div>
    <div className="trustRow"><span><ShieldCheck/> Secure checkout</span><span><Zap/> Fast fulfillment-ready</span><span><CreditCard/> Multiple payment methods</span></div>
   </div>
   <div className="heroVisual">
    <div className="visualCard vcMain"><div className="visualTop"><span>TL TOP UP</span><span>LIVE STORE</span></div><div className="visualIcon"><Gamepad2 size={58}/></div><b>GAME ZONE</b><small>Free Fire • PUBG • CODM • MLBB</small><div className="miniPrice">TOP UP <ChevronRight/></div></div>
    <div className="visualCard vcOtt"><MonitorPlay/><div><b>OTT & MUSIC</b><small>Netflix • Spotify • Crunchyroll</small></div></div>
    <div className="visualCard vcPay"><CreditCard/><div><b>PAY YOUR WAY</b><small>bKash · Nagad · Card · Bank</small></div></div>
    <div className="visualGlow"></div>
   </div>
  </div>

  <div className="quickCategories">
   {[["Products",Package,"shop","Shop physical products"],["Game Top Up",Gamepad2,"gaming","Diamonds, UC, CP & more"],["OTT",MonitorPlay,"subscriptions","Streaming memberships"],["Music",Headphones,"subscriptions","Music plans"],["AI & Software",Zap,"subscriptions","Digital tools"],["Gift Cards",Gift,"shop","Digital gift cards"]].map(([x,I,p,t])=><button className="quickCat" onClick={()=>nav(p)} key={x}><div><I/></div><b>{x}</b><small>{t}</small><ChevronRight/></button>)}
  </div>

  <div className="homeSectionHead"><div><span>SHOP BY NEED</span><h2>What are you looking for?</h2></div></div>
  <div className="needGrid">
   <button onClick={()=>nav("gaming")} className="needCard gameNeed"><div className="needIcon"><Gamepad2/></div><div><small>INSTANT-READY CATALOG</small><h3>Game Top Up</h3><p>Free Fire, PUBG Mobile, CODM, MLBB, Roblox, Valorant and more.</p><b>Explore games <ChevronRight/></b></div></button>
   <button onClick={()=>nav("subscriptions")} className="needCard subNeed"><div className="needIcon"><MonitorPlay/></div><div><small>DIGITAL MEMBERSHIPS</small><h3>OTT & Subscriptions</h3><p>Streaming, music, AI, cloud, VPN, education and productivity.</p><b>Explore subscriptions <ChevronRight/></b></div></button>
   <button onClick={()=>nav("shop")} className="needCard productNeed"><div className="needIcon"><ShoppingBag/></div><div><small>EVERYDAY SHOPPING</small><h3>Products & Deals</h3><p>Electronics, gaming gear, lifestyle products and more.</p><b>Shop products <ChevronRight/></b></div></button>
  </div>

  <div className="homeSectionHead"><div><span>POPULAR NOW</span><h2>Trending Game Top Ups</h2></div><button onClick={()=>nav("gaming")}>View all <ChevronRight/></button></div>
  <div className="gameStrip">{GAMES.slice(0,8).map(([name,text],i)=><button className="gameTile" onClick={()=>nav("gaming")} key={name}><div className="gameBadge"><Gamepad2/></div><div><b>{name}</b><small>{text}</small></div><span>Top up</span></button>)}</div>

  <div className="offerBanner"><div><span>LIMITED-TIME DIGITAL DEALS</span><h2>Power up your account.</h2><p>Discover selected top-up packages and subscription offers. Prices, availability and fulfillment are controlled from Master Admin.</p><button className="primary" onClick={()=>nav("subscriptions")}>See Deals <ChevronRight/></button></div><div className="offerNumbers"><b>01</b><b>03</b><b>07</b><small>DAY · DAYS · DAYS</small></div></div>

  <div className="homeSectionHead"><div><span>SHOPPING</span><h2>Featured Products</h2></div><button onClick={()=>nav("shop")}>View all <ChevronRight/></button></div>
  <div className="productgrid">{PRODUCTS.map(p=><Product p={p} add={add} key={p.id}/>)}</div>

  <div className="homeTrust">
   <div><ShieldCheck/><b>Protected checkout</b><small>Payment verification workflow</small></div>
   <div><Truck/><b>Delivery ready</b><small>Courier & tracking architecture</small></div>
   <div><RefreshCw/><b>Order support</b><small>Returns, refunds & tickets</small></div>
   <div><Headphones/><b>Customer care</b><small>Help center & support</small></div>
  </div>
 </section>
}
function Promo({icon,title,text,action,nav}){return <div className="promo">{icon}<div><small>READY TO ORDER</small><h2>{title}</h2><p>{text}</p><button onClick={()=>nav(action)}>Browse</button></div></div>}
function Product({p,add}){const I=p.icon;return <article className="product"><div className="productImg"><I size={62}/><span>-{Math.round((1-p.price/p.old)*100)}%</span><button><Heart size={17}/></button></div><small>{p.cat}</small><h3>{p.name}</h3><div className="stars"><Star size={12}/> 4.9 <span>(128)</span></div><div className="price">৳{p.price.toLocaleString()} <del>৳{p.old.toLocaleString()}</del></div><button className="add" onClick={()=>add(p)}>Add to cart</button></article>}

function Shop({add}){const [cat,setCat]=useState("All"),[sort,setSort]=useState("featured");let ps=cat==="All"?PRODUCTS:PRODUCTS.filter(x=>x.cat===cat);if(sort==="low")ps=[...ps].sort((a,b)=>a.price-b.price);if(sort==="high")ps=[...ps].sort((a,b)=>b.price-a.price);return <section><Title small="MARKETPLACE" title="Shop All Products" text="Search, filter, compare, wishlist and checkout-ready product catalog."/><div className="toolbar"><div className="filter">{["All","Electronics","Wearables","Gaming","Lifestyle"].map(x=><button className={cat===x?"active":""} onClick={()=>setCat(x)} key={x}>{x}</button>)}</div><select value={sort} onChange={e=>setSort(e.target.value)}><option value="featured">Featured</option><option value="low">Price low-high</option><option value="high">Price high-low</option></select></div><div className="productgrid">{ps.concat(ps).map((p,i)=><Product p={{...p,id:p.id+"-"+i}} add={add} key={i}/>)}</div></section>}

function Gaming({submit}){const [game,setGame]=useState("Free Fire"),[pkg,setPkg]=useState("100 Diamonds"),[uid,setUid]=useState(""),[server,setServer]=useState(""),[pay,setPay]=useState("bKash");return <section><Title small="DIGITAL SERVICES" title="Game Top Up" text="Select service → package → player ID/region → payment. Orders are created for fulfillment and verification."/><div className="serviceLayout"><div className="serviceList">{GAMES.map(([n,t])=><button className={game===n?"selected":""} onClick={()=>setGame(n)} key={n}><div className="serviceIcon"><Gamepad2/></div><div><b>{n}</b><small>{t}</small></div><ChevronRight/></button>)}</div><div className="formCard"><h2>{game}</h2><label>Package</label><select value={pkg} onChange={e=>setPkg(e.target.value)}><option>100 Diamonds / Credits</option><option>310 Diamonds / Credits</option><option>520 Diamonds / Credits</option><option>Weekly Membership</option><option>Monthly Membership</option><option>Battle Pass / Event Package</option></select><label>Player UID / ID</label><input value={uid} onChange={e=>setUid(e.target.value)} placeholder="Enter player ID"/><label>Server / Region (if required)</label><input value={server} onChange={e=>setServer(e.target.value)} placeholder="Optional"/><PaymentSelect pay={pay} setPay={setPay}/><button className="primary wide" onClick={()=>uid?submit({type:"Game Top Up",title:`${game} — ${pkg}`,amount:500,payment:pay,meta:{uid,server}}):alert("Player ID required")}>Place Top-Up Order</button><p className="hint">Real-time delivery requires an authorized provider/API or admin fulfillment. No passwords are requested.</p></div></div></section>}

function Subscriptions({submit}){const [service,setService]=useState("Netflix"),[duration,setDuration]=useState("30 Days"),[region,setRegion]=useState("Bangladesh"),[pay,setPay]=useState("bKash");return <section><Title small="MEMBERSHIP MARKETPLACE" title="OTT & Subscriptions" text="Plans can be created by Admin for streaming, music, AI, software, cloud, VPN, education and other lawful digital services."/><div className="serviceLayout"><div className="serviceList">{SERVICES.map(([n,t])=><button className={service===n?"selected":""} onClick={()=>setService(n)} key={n}><div className="serviceIcon"><MonitorPlay/></div><div><b>{n}</b><small>{t}</small></div><ChevronRight/></button>)}</div><div className="formCard"><h2>{service}</h2><label>Plan / Duration</label><select value={duration} onChange={e=>setDuration(e.target.value)}>{["1 Day","3 Days","7 Days","14 Days","30 Days","3 Months","6 Months","1 Year","Custom"].map(x=><option key={x}>{x}</option>)}</select><label>Country / Region</label><select value={region} onChange={e=>setRegion(e.target.value)}><option>Bangladesh</option><option>Global</option><option>Other</option></select><div className="priceBox"><span>Plan price</span><b>৳500</b></div><PaymentSelect pay={pay} setPay={setPay}/><button className="primary wide" onClick={()=>submit({type:"Subscription",title:`${service} — ${duration}`,amount:500,payment:pay,meta:{region}})}>Purchase Subscription</button><p className="hint">Only official/authorized or legally permitted fulfillment should be connected. Customer passwords are never stored.</p></div></div></section>}

function PaymentSelect({pay,setPay}){return <div><label>Payment Method</label><div className="paygrid">{PAYMENT.map(([n,t,I])=><button className={pay===n?"pay selected":"pay"} onClick={()=>setPay(n)} key={n}><I/><b>{n}</b><small>{t}</small></button>)}</div><div className="paymentNote"><ShieldCheck/> Payment architecture supports transaction ID, verification, pending/success/failed/refund states.</div></div>}

function WalletPage({wallet,setWallet,submit,notify}){const [amount,setAmount]=useState(1000),[pay,setPay]=useState("bKash"),[tx,setTx]=useState("");return <section><Title small="MY MONEY" title="Wallet & Mobile Top Up" text="Add money, recharge a mobile number, view transactions and use wallet balance for products/digital services."/><div className="wallet"><div><small>AVAILABLE BALANCE</small><strong>৳ {wallet.toLocaleString()}</strong><p>Reward points: 180</p></div><Wallet size={46}/></div><div className="twoCol"><div className="formCard"><h2>Add Money</h2><label>Amount</label><input type="number" value={amount} onChange={e=>setAmount(+e.target.value)}/><PaymentSelect pay={pay} setPay={setPay}/><label>Transaction ID</label><input value={tx} onChange={e=>setTx(e.target.value)} placeholder="Required for manual verification"/><button className="primary wide" onClick={()=>{submit({type:"Wallet",title:"Wallet Add Money",amount,payment:pay,meta:{tx}});notify("Wallet funding request submitted")}}>Submit Payment</button></div><div className="formCard"><h2>Mobile Recharge</h2><label>Operator</label><select><option>Grameenphone</option><option>Robi</option><option>Banglalink</option><option>Airtel</option><option>Teletalk</option></select><label>Mobile Number</label><input placeholder="01XXXXXXXXX"/><label>Amount</label><input type="number" defaultValue="100"/><button className="primary wide" onClick={()=>notify("Recharge order created — provider integration required")}>Recharge Now</button></div></div><div className="table"><b>Recent Transactions</b><p>Wallet Add Money · bKash · Pending verification</p><p>Game Top Up · Free Fire · Completed</p><p>Reward Bonus · Promotional · +50 points</p></div></section>}

function Cart({cart,setCart,submit}){const [pay,setPay]=useState("bKash"),[address,setAddress]=useState("");const total=cart.reduce((s,x)=>s+x.price,0);return <section><Title small="CHECKOUT" title="Cart & Checkout" text={`${cart.length} item(s). Guest checkout is supported; account checkout can keep orders, invoices and rewards together.`}/><div className="checkout">{<div className="table">{cart.length?cart.map((p,i)=><div className="cartLine" key={i}><b>{p.name}</b><span>৳{p.price.toLocaleString()}</span></div>):<Empty title="Cart is empty" icon={<ShoppingBag/>} text="Add a product from Shop."/ >}<button onClick={()=>setCart([])}>Clear Cart</button></div>}<div className="summary"><small>ORDER TOTAL</small><strong>৳{total.toLocaleString()}</strong><label>Delivery address</label><textarea value={address} onChange={e=>setAddress(e.target.value)} placeholder="Name, phone, address"></textarea><PaymentSelect pay={pay} setPay={setPay}/><button className="primary" disabled={!cart.length} onClick={()=>{submit({type:"Product",title:`${cart.length} product item(s)`,amount:total,payment:pay,meta:{address}});setCart([])}}>Confirm Order</button><span>Invoice + order status + payment verification included</span></div></div></section>}

function Profile({nav,orders}){return <section><Title small="ACCOUNT" title="My Account"/><div className="profile"><div className="avatar">TL</div><div><h2>TL User</h2><p>Customer ID #10000000001</p></div><button onClick={()=>nav("support")}>Support</button></div><div className="statgrid">{[["Orders",orders.length,"orders"],["Wishlist",8,"wishlist"],["Subscriptions",3,"subscriptions"],["Reward points",180,"rewards"]].map(x=><button className="stat" onClick={()=>nav(x[2])} key={x[0]}><b>{x[1]}</b><span>{x[0]}</span></button>)}</div><div className="quickGrid">{[["Orders",ClipboardList,"orders"],["Addresses",Truck,"addresses"],["Wallet",Wallet,"wallet"],["Rewards",Gift,"rewards"],["Returns",RotateCcw,"returns"],["Help Center",HelpCircle,"support"],["My Reviews",Star,"reviews"],["Settings",Settings,"settings"]].map(([x,I,p])=><button onClick={()=>nav(p)} className="quick" key={x}><I/><b>{x}</b><ChevronRight/></button>)}</div></section>}

function Orders({orders}){return <section><Title small="ACCOUNT" title="Order History" text="Every product, top-up and subscription order uses a unified status workflow."/><div className="orderList">{orders.length?orders.map(o=><div className="order" key={o.id}><div><b>{o.id}</b><h3>{o.title}</h3><small>{o.date} · {o.payment}</small></div><strong>৳{o.amount}</strong><Status s={o.status}/></div>):<Empty title="No orders yet" icon={<ClipboardList/>} text="Your completed and pending orders will appear here."/>}</div></section>}
function Status({s}){return <span className={"status "+s.toLowerCase()}>{s}</span>}
function Notifications({orders}){return <section><Title small="ACCOUNT" title="Notifications"/><div className="noticeList"><div><Bell/><b>Order updates</b><p>{orders.length?`You have ${orders.length} recent order(s).`:"No new order updates."}</p></div><div><CreditCard/><b>Payment verification</b><p>Pending payments remain visible until verified by the payment/admin workflow.</p></div><div><Gift/><b>Promotions</b><p>New top-up, subscription and product offers can be published by Admin.</p></div></div></section>}
function AddressBook(){return <section><Title small="ACCOUNT" title="Address Book"/><div className="formCard"><label>Full name</label><input placeholder="Customer name"/><label>Phone</label><input placeholder="01XXXXXXXXX"/><label>Address</label><textarea placeholder="Delivery address"/><button className="primary">Save Address</button></div></section>}
function Rewards(){return <section><Title small="LOYALTY" title="Rewards & Referral"/><div className="rewardBox"><Gift/><b>180 points</b><p>Earn points from purchases, campaigns and referrals. Admin can configure loyalty levels and rewards.</p></div></section>}
function Reviews(){return <section><Title small="ACCOUNT" title="My Reviews"/><div className="noticeList"><div><Star/><b>Review your purchased products</b><p>Rate products and write feedback after delivery. Admin moderation controls are included.</p><button>Write Review</button></div></div></section>}
function SettingsPage(){return <section><Title small="ACCOUNT" title="Settings"/><div className="formCard"><h2>Account & Preferences</h2><label>Display name</label><input defaultValue="TL User"/><label>Language</label><select><option>English</option><option>বাংলা</option></select><label>Notifications</label><select><option>Enabled</option><option>Disabled</option></select><button className="primary">Save Settings</button></div></section>}
function Returns(){return <section><Title small="AFTER SALES" title="Returns & Refunds"/><div className="noticeList"><div><RotateCcw/><b>Return request</b><p>Select an order and submit a reason. Admin can approve, reject or request more information.</p><button>Start Request</button></div><div><RefreshCw/><b>Refund status</b><p>Pending → Approved → Processing → Refunded / Failed.</p></div></div></section>}
function Support(){return <section><Title small="HELP CENTER" title="Support & Contact"/><div className="twoCol"><div className="formCard"><h2>Create Support Ticket</h2><label>Subject</label><input/><label>Category</label><select><option>Payment</option><option>Order</option><option>Top Up</option><option>Subscription</option><option>Refund</option><option>Technical</option></select><label>Message</label><textarea/><button className="primary">Submit Ticket</button></div><div className="noticeList"><div><Headphones/><b>Customer Care</b><p>Support tickets can be assigned to staff and tracked until resolved.</p></div><div><HelpCircle/><b>FAQ</b><p>Common payment, order, delivery and digital-service questions.</p></div></div></div></section>}
function FAQ(){return <section><Title small="HELP" title="FAQ"/>{["How does payment verification work?","How long does a top-up take?","Can I request a refund?","How are subscriptions activated?","Can I use COD for digital services?"].map(q=><details key={q}><summary>{q}</summary><p>Answer content is editable from Master Admin and can be customized for the store's actual provider and policy.</p></details>)}</section>}
function Info({title,text}){return <section><Title small="INFORMATION" title={title}/><div className="info"><FileText/><p>{text}</p></div></section>}
function Empty({title,icon,text}){return <div className="empty">{icon}<h2>{title}</h2><p>{text}</p></div>}
function Title({small,title,text}){return <div className="pageTitle"><small>{small}</small><h1>{title}</h1>{text&&<p>{text}</p>}</div>}

function Admin({tasks,setTasks,orders,nav}){
 const [tab,setTab]=useState("Dashboard"),[newTask,setNewTask]=useState(""),[service,setService]=useState("Free Fire");
 const modules=["Dashboard","Users","Sellers","Products","Categories","Orders","Payments","Refunds","Returns","Coupons","Promotions","Flash Sales","Game Top Up","Subscriptions","Wallet","Inventory","Shipping","Reviews","Support","Notifications","Reports","Analytics","Roles & Permissions","Security","Website Settings","SEO","Maintenance"];
 const addTask=()=>{if(!newTask.trim())return;setTasks(x=>[{id:"TASK-"+Date.now().toString().slice(-6),type:"Admin Task",title:newTask,status:"Pending",created:new Date().toLocaleString()},...x]);setNewTask("")};
 return <section><Title small="PRIVATE CONTROL CENTER" title="Master Admin" text="Private master control for customer orders, seller marketplace, payments, delivery, gaming, subscriptions and website operations."/>
 <div className="adminShell"><aside>{modules.map(x=><button className={tab===x?"active":""} onClick={()=>setTab(x)} key={x}><LayoutDashboard size={15}/>{x}</button>)}</aside><div className="adminMain">
  {tab==="Dashboard"&&<><div className="kpis">{[["Sales","৳125,400",BarChart3],["Orders",orders.length,ClipboardList],["Customers","1,284",Users],["Pending Tasks",tasks.filter(t=>t.status==="Pending").length,Clock3]].map(([a,b,I])=><div className="kpi" key={a}><I/><small>{a}</small><b>{b}</b></div>)}</div><TaskCenter tasks={tasks} setTasks={setTasks} newTask={newTask} setNewTask={setNewTask} addTask={addTask}/></>}
  {tab==="Orders"&&<AdminTable title="Orders" rows={orders.map(o=>[o.id,o.title,o.payment,`৳${o.amount}`,o.status])}/>}
  {tab==="Payments"&&<PaymentAdmin/>}
  {tab==="Game Top Up"&&<ServiceAdmin title="Game Top Up" service={service} setService={setService} options={GAMES}/>}
  {tab==="Subscriptions"&&<ServiceAdmin title="Subscriptions" service={service} setService={setService} options={SERVICES}/>}
  {tab==="Shipping"&&<AdminTable title="Delivery & Shipping" rows={[["Courier","Pathao / Steadfast / Custom","Integration-ready"],["Zones","Inside Dhaka / Outside","Configurable"],["COD","Enabled","Verification-ready"]]}/>}
  {tab==="Reports"||tab==="Analytics"&&<Analytics/>}
  {["Users","Sellers","Products","Categories","Refunds","Returns","Coupons","Promotions","Flash Sales","Wallet","Inventory","Reviews","Support","Notifications","Roles & Permissions","Security","Website Settings","SEO","Maintenance"].includes(tab)&&<AdminModule title={tab}/>}
 </div></div></section>
}
function TaskCenter({tasks,setTasks,newTask,setNewTask,addTask}){return <div className="taskPanel"><div className="sectionHead"><div><small>WORK QUEUE</small><h2>Task Center</h2></div></div><div className="taskCreate"><input value={newTask} onChange={e=>setNewTask(e.target.value)} placeholder="Give a task, e.g. verify bKash order / process top-up / approve seller"/><button className="primary" onClick={addTask}><Plus/>Create Task</button></div>{tasks.length?tasks.map(t=><div className="task" key={t.id}><ClipboardList/><div><b>{t.title}</b><small>{t.id} · {t.created}</small></div><Status s={t.status}/><button onClick={()=>setTasks(x=>x.map(a=>a.id===t.id?{...a,status:a.status==="Pending"?"Processing":a.status==="Processing"?"Completed":"Completed"}:a))}>{t.status==="Completed"?"Done":"Process"}</button></div>):<Empty title="No tasks" icon={<ClipboardList/>} text="Customer orders and admin-created tasks will appear here."/>}</div>}
function AdminTable({title,rows}){return <div className="adminTable"><h2>{title}</h2><table><tbody>{rows.map((r,i)=><tr key={i}>{r.map((c,j)=><td key={j}>{j===r.length-1&&["Pending","Completed","Processing","Failed"].includes(c)?<Status s={c}/>:c}</td>)}</tr>)}</tbody></table></div>}
function PaymentAdmin(){return <div className="adminModule"><h2>Payment Control</h2><div className="paygrid">{PAYMENT.map(([n,t,I])=><div className="pay" key={n}><I/><b>{n}</b><small>{t}</small><span>Enabled · verification-ready</span></div>)}</div><div className="notice"><ShieldCheck/><div><b>Payment gateway architecture</b><p>bKash/Nagad/Card/Bank/COD UI is included. Live gateway processing needs merchant credentials, server-side verification and provider APIs; this demo never pretends to process real money.</p></div></div></div>}
function ServiceAdmin({title,service,setService,options}){return <div className="adminModule"><h2>{title} Catalog Control</h2><label>Service</label><select value={service} onChange={e=>setService(e.target.value)}>{options.map(x=><option key={x[0]}>{x[0]}</option>)}</select><div className="formGrid"><input placeholder="Logo URL / upload slot"/><input placeholder="Banner URL / upload slot"/><input placeholder="Package name"/><input placeholder="Customer price"/><input placeholder="Supplier cost"/><input placeholder="Profit / commission"/><select><option>Manual fulfillment</option><option>Authorized API fulfillment</option></select><select><option>Bangladesh</option><option>Global</option></select></div><div className="actionRow"><button className="primary"><Plus/> Add package</button><button>Save service</button><button>Enable / Disable</button></div></div>}
function Analytics(){return <div className="adminModule"><h2>Analytics & Reports</h2><div className="chart"><div style={{height:"35%"}}></div><div style={{height:"62%"}}></div><div style={{height:"48%"}}></div><div style={{height:"78%"}}></div><div style={{height:"55%"}}></div><div style={{height:"88%"}}></div><div style={{height:"70%"}}></div></div><p className="hint">Production analytics should connect to real order/payment/database events. Export-ready reporting can be added through the backend.</p></div>}
function AdminModule({title}){return <div className="adminModule"><h2>{title}</h2><p>Full management screen placeholder with CRUD-ready structure. Configure fields, permissions, status workflows, search, filters and audit logs from this module.</p><div className="formGrid"><input placeholder={`${title} search`}/><select><option>Active</option><option>Pending</option><option>Disabled</option></select><input placeholder="Name / title"/><input placeholder="Description / notes"/></div><button className="primary"><Plus/> Create / Save</button></div>}

createRoot(document.getElementById("root")).render(<App/>);