import React,{useEffect,useMemo,useState} from 'react';import{createRoot}from'react-dom/client';import{LayoutDashboard,Users,Shield,Radio,Trophy,Wallet,Search,Plus,Gavel,ChevronRight,Clock,LogOut,Menu,X,Settings,UserRound}from'lucide-react';import'./style.css';
const API='/api';
const demoTeams=[{id:1,name:'Royal Strikers',short_name:'RS',purse:50000,spent:31500,players:9},{id:2,name:'Thunder Kings',short_name:'TK',purse:50000,spent:27400,players:8},{id:3,name:'Blazing XI',short_name:'BX',purse:50000,spent:36200,players:10},{id:4,name:'Super Warriors',short_name:'SW',purse:50000,spent:22100,players:7}];
const demoPlayers=[{id:1,name:'Rajan Kumar',role:'All-Rounder',batting_style:'Right Hand',bowling_style:'Medium Pace',base_price:1000,status:'IN_AUCTION',photo:''},{id:2,name:'Arjun R',role:'Batsman',base_price:1500,status:'AVAILABLE'},{id:3,name:'Manoj K',role:'Bowler',base_price:1000,status:'SOLD',sold_price:5200,team_name:'Thunder Kings'},{id:4,name:'Kiran S',role:'Wicket Keeper',base_price:1200,status:'AVAILABLE'}];
async function request(path,opt={}){const token=localStorage.getItem('ca_token');const r=await fetch(API+path,{...opt,headers:{'Content-Type':'application/json',...(token?{Authorization:'Bearer '+token}:{}),...(opt.headers||{})}});if(!r.ok)throw new Error((await r.json().catch(()=>({}))).error||'Request failed');return r.json()}
function App(){const[page,setPage]=useState(location.hash.slice(1)||'dashboard');const[menu,setMenu]=useState(false);const[teams,setTeams]=useState(demoTeams);const[players,setPlayers]=useState(demoPlayers);const[live,setLive]=useState({player:demoPlayers[0],current_bid:5400,leading_team:demoTeams[2],timer:10});const[online,setOnline]=useState(false);
useEffect(()=>{const h=()=>setPage(location.hash.slice(1)||'dashboard');addEventListener('hashchange',h);return()=>removeEventListener('hashchange',h)},[]);
useEffect(()=>{request('/index.php?action=bootstrap').then(d=>{setOnline(true);if(d.teams?.length)setTeams(d.teams);if(d.players?.length)setPlayers(d.players);if(d.live?.player)setLive(d.live)}).catch(()=>setOnline(false))},[]);
const nav=[['dashboard','Dashboard',LayoutDashboard],['teams','Teams',Shield],['players','Players',Users],['auction','Auction Control',Gavel],['live','Live Display',Radio],['settings','Settings',Settings]];
const go=p=>{location.hash=p;setMenu(false)};
return <div className="app"><aside className={menu?'side open':'side'}><div className="brand"><div className="brandmark">CA</div><div><b>CRICKET ARENA</b><span>Tournament OS</span></div><button className="close" onClick={()=>setMenu(false)}><X/></button></div><nav>{nav.map(([k,n,I])=><button key={k} className={page===k?'active':''} onClick={()=>go(k)}><I size={19}/><span>{n}</span></button>)}</nav><div className="sidefoot"><span className={online?'dot on':'dot'}></span>{online?'Database connected':'Demo mode'}<button><LogOut size={17}/></button></div></aside><main><header><button className="hamb" onClick={()=>setMenu(true)}><Menu/></button><div><h1>{nav.find(x=>x[0]===page)?.[1]||'Cricket Arena'}</h1><p>Premier League 2026 • Season 1</p></div><div className="profile"><div className="avatar">A</div><div><b>Super Admin</b><span>Administrator</span></div></div></header><section className="content">{page==='dashboard'&&<Dashboard teams={teams} players={players} live={live} go={go}/>} {page==='teams'&&<Teams teams={teams}/>} {page==='players'&&<Players players={players}/>} {page==='auction'&&<Auction live={live} setLive={setLive} teams={teams}/>} {page==='live'&&<Live live={live}/>} {page==='settings'&&<SettingsPage/>}</section></main></div>}
function Dashboard({teams,players,live,go}){const sold=players.filter(p=>p.status==='SOLD').length;return <><div className="hero"><div><span className="eyebrow">LIVE TOURNAMENT COMMAND CENTER</span><h2>Run your entire cricket league from one place.</h2><p>Manage franchises, player registrations, purse balances and the live auction from any device.</p><div className="actions"><button className="primary" onClick={()=>go('auction')}><Gavel size={18}/> Open Auction Room</button><button onClick={()=>go('live')}><Radio size={18}/> Public Display</button></div></div><div className="hero-score"><span>NOW AUCTIONING</span><b>{live.player?.name||'No player selected'}</b><strong>₹{Number(live.current_bid||0).toLocaleString('en-IN')}</strong><small>{live.leading_team?.name||'Waiting for bid'}</small></div></div><div className="stats"><Stat icon={Shield} label="Franchises" value={teams.length} sub="Active teams"/><Stat icon={Users} label="Registered Players" value={players.length} sub={`${sold} sold`}/><Stat icon={Wallet} label="Total Purse" value={'₹'+teams.reduce((a,t)=>a+Number(t.purse||0),0).toLocaleString('en-IN')} sub="Across all teams"/><Stat icon={Trophy} label="Auction Progress" value={players.length?Math.round(sold/players.length*100)+'%':'0%'} sub="Players completed"/></div><div className="grid2"><Panel title="Team Purse Overview"><div className="teamlist">{teams.map(t=><div className="teamrow" key={t.id}><div className="teamlogo">{t.short_name}</div><div className="grow"><b>{t.name}</b><div className="bar"><i style={{width:Math.min(100,(t.spent/t.purse)*100)+'%'}}/></div></div><div className="money"><b>₹{(t.purse-t.spent).toLocaleString('en-IN')}</b><span>{t.players} players</span></div></div>)}</div></Panel><Panel title="Auction Snapshot"><div className="snapshot"><div><span>Current Player</span><b>{live.player?.name}</b></div><div><span>Current Bid</span><b className="accent">₹{Number(live.current_bid).toLocaleString('en-IN')}</b></div><div><span>Leading Team</span><b>{live.leading_team?.name}</b></div><button className="primary" onClick={()=>go('auction')}>Continue Auction <ChevronRight size={17}/></button></div></Panel></div></>}
function Stat({icon:I,label,value,sub}){return <div className="stat"><div className="ico"><I/></div><div><span>{label}</span><b>{value}</b><small>{sub}</small></div></div>}
function Panel({title,children}){return <div className="panel"><div className="panelhead"><h3>{title}</h3><button>View all <ChevronRight size={15}/></button></div>{children}</div>}
function Teams({teams}){return <><div className="toolbar"><div className="search"><Search size={18}/><input placeholder="Search teams..."/></div><button className="primary"><Plus size={18}/> Add Team</button></div><div className="cards">{teams.map(t=><div className="teamcard" key={t.id}><div className="teamlogo big">{t.short_name}</div><h3>{t.name}</h3><p>Franchise • Season 1</p><div className="split"><div><span>Players</span><b>{t.players}/15</b></div><div><span>Spent</span><b>₹{t.spent.toLocaleString('en-IN')}</b></div><div><span>Balance</span><b className="accent">₹{(t.purse-t.spent).toLocaleString('en-IN')}</b></div></div><div className="bar"><i style={{width:(t.spent/t.purse*100)+'%'}}/></div></div>)}</div></>}
function Players({players}){return <><div className="toolbar"><div className="search"><Search size={18}/><input placeholder="Search player, role or category..."/></div><button className="primary"><Plus size={18}/> Register Player</button></div><div className="tablewrap"><table><thead><tr><th>Player</th><th>Role</th><th>Base Price</th><th>Status</th><th>Sold Price</th></tr></thead><tbody>{players.map(p=><tr key={p.id}><td><div className="player"><div className="pavatar"><UserRound/></div><div><b>{p.name}</b><span>{p.batting_style||'Cricketer'}</span></div></div></td><td>{p.role}</td><td>₹{Number(p.base_price).toLocaleString('en-IN')}</td><td><span className={'badge '+p.status.toLowerCase()}>{p.status.replace('_',' ')}</span></td><td>{p.sold_price?'₹'+Number(p.sold_price).toLocaleString('en-IN'):'—'}</td></tr>)}</tbody></table></div></>}
function Auction({live,setLive,teams}){const inc=n=>setLive(v=>({...v,current_bid:Number(v.current_bid)+n}));const choose=t=>setLive(v=>({...v,leading_team:t}));return <div className="auctiongrid"><div className="auctionplayer"><div className="portrait"><UserRound size={88}/><span>PLAYER</span></div><span className="eyebrow">CURRENT LOT</span><h2>{live.player?.name}</h2><p>{live.player?.role} • {live.player?.batting_style} • {live.player?.bowling_style}</p><div className="base"><span>Base Price</span><b>₹{Number(live.player?.base_price||0).toLocaleString('en-IN')}</b></div></div><div className="bidbox"><div className="timer"><Clock/><span>Auction Timer</span><b>{live.timer}s</b></div><span className="eyebrow">CURRENT BID</span><strong>₹{Number(live.current_bid).toLocaleString('en-IN')}</strong><p>Leading: <b>{live.leading_team?.name||'No bids yet'}</b></p><div className="increments">{[100,200,500,1000].map(n=><button key={n} onClick={()=>inc(n)}>+ ₹{n}</button>)}</div><label>Select leading team</label><div className="teamchips">{teams.map(t=><button key={t.id} className={live.leading_team?.id===t.id?'selected':''} onClick={()=>choose(t)}>{t.short_name}<span>₹{(t.purse-t.spent).toLocaleString('en-IN')}</span></button>)}</div><div className="auctionactions"><button className="unsold">UNSOLD</button><button className="sold"><Gavel/> SOLD ₹{Number(live.current_bid).toLocaleString('en-IN')}</button></div></div></div>}
function Live({live}){return <div className="live"><div className="livehead"><span className="pulse"></span> LIVE AUCTION <small>Cricket Arena Premier League 2026</small></div><div className="livebody"><div className="portrait xl"><UserRound size={120}/></div><div><span className="eyebrow">PLAYER ON AUCTION</span><h2>{live.player?.name}</h2><p>{live.player?.role} • {live.player?.batting_style}</p><div className="livebid"><span>CURRENT BID</span><strong>₹{Number(live.current_bid).toLocaleString('en-IN')}</strong><b>{live.leading_team?.name}</b></div></div></div><div className="liveticker"><span>BASE ₹{Number(live.player?.base_price||0).toLocaleString('en-IN')}</span><span>TIME {live.timer}s</span><span>LIVE • SEASON 1</span></div></div>}
function SettingsPage(){return <div className="panel settings"><h3>Tournament Configuration</h3><div className="formgrid"><label>Tournament Name<input defaultValue="Cricket Arena Premier League 2026"/></label><label>Default Team Purse<input type="number" defaultValue="50000"/></label><label>Maximum Squad<input type="number" defaultValue="15"/></label><label>Default Bid Increment<input type="number" defaultValue="200"/></label><label>Auction Timer (seconds)<input type="number" defaultValue="10"/></label><label>Season<input defaultValue="Season 1"/></label></div><button className="primary">Save Configuration</button></div>}
createRoot(document.getElementById('root')).render(<App/>);