const{useState,useEffect}=React;
const API=(url,opt={})=>{const t=localStorage.getItem('token');opt.headers={...opt.headers,'Content-Type':'application/json'};if(t)opt.headers['Authorization']='Bearer '+t;return fetch(url,opt).then(r=>r.json())};

function LoginPage({onLogin}){
  const[u,setU]=useState('');const[p,setP]=useState('');const[err,setErr]=useState('');
  const submit=async e=>{e.preventDefault();setErr('');const r=await API('/api/login',{method:'POST',body:JSON.stringify({username:u,password:p})});if(r.error){setErr(r.error)}else{localStorage.setItem('token',r.token);onLogin(r)}};
  return(<div style={{minHeight:'100vh',display:'flex',alignItems:'center',justifyContent:'center',background:'#0f172a'}}>
    <div style={{background:'rgba(30,41,59,0.8)',border:'1px solid rgba(255,255,255,0.1)',borderRadius:20,padding:40,width:380,backdropFilter:'blur(12px)'}}>
      <div style={{textAlign:'center',marginBottom:30}}><span style={{fontSize:40}}>⚽</span>
        <h1 style={{fontFamily:'Orbitron',fontSize:22,background:'linear-gradient(90deg,#34d399,#3b82f6)',WebkitBackgroundClip:'text',WebkitTextFillColor:'transparent',margin:'10px 0 4px'}}>SPORT AI</h1>
        <p style={{fontSize:12,color:'#94a3b8',letterSpacing:2}}>INTELLIGENT PREDICTIONS</p></div>
      <form onSubmit={submit}>
        <div style={{marginBottom:16}}><label style={{display:'block',fontSize:12,color:'#94a3b8',marginBottom:6}}>帳號</label>
          <input value={u} onChange={e=>setU(e.target.value)} style={{width:'100%',background:'rgba(0,0,0,0.3)',border:'1px solid rgba(255,255,255,0.1)',color:'#e2e8f0',padding:'12px',borderRadius:8,fontSize:14}} placeholder="請輸入帳號"/></div>
        <div style={{marginBottom:20}}><label style={{display:'block',fontSize:12,color:'#94a3b8',marginBottom:6}}>密碼</label>
          <input type="password" value={p} onChange={e=>setP(e.target.value)} style={{width:'100%',background:'rgba(0,0,0,0.3)',border:'1px solid rgba(255,255,255,0.1)',color:'#e2e8f0',padding:'12px',borderRadius:8,fontSize:14}} placeholder="請輸入密碼"/></div>
        {err&&<div style={{color:'#ef4444',fontSize:13,marginBottom:12,textAlign:'center'}}>{err}</div>}
        <button type="submit" style={{width:'100%',background:'linear-gradient(135deg,#0ea5e9,#2563eb)',color:'white',border:'none',padding:'14px',borderRadius:8,fontWeight:700,fontSize:15,cursor:'pointer'}}>登 入</button>
      </form>
    </div></div>);
}

function UserMgmt(){
  const[users,setUsers]=useState({});const[un,setUn]=useState('');const[pw,setPw]=useState('');const[days,setDays]=useState(30);const[msg,setMsg]=useState('');
  const load=()=>API('/api/users').then(d=>{if(!d.error)setUsers(d)});
  useEffect(()=>{load()},[]);
  const create=async()=>{if(!un||!pw)return;const r=await API('/api/users',{method:'POST',body:JSON.stringify({username:un,password:pw,days:Number(days)})});setMsg(r.error||'建立成功');setUn('');setPw('');load()};
  const toggle=async u=>{await API(`/api/users/${u}/toggle`,{method:'POST'});load()};
  const del=async u=>{if(!confirm('確定刪除 '+u+'？'))return;await API(`/api/users/${u}`,{method:'DELETE'});load()};
  const renew=async u=>{const d=prompt('續期天數？','30');if(!d)return;await API(`/api/users/${u}/renew`,{method:'POST',body:JSON.stringify({days:Number(d)})});load()};
  const remaining=exp=>{if(!exp)return'永久';const d=Math.ceil((new Date(exp)-new Date())/86400000);return d>0?d+'天':'已過期'};

  return(<div className="panel" style={{marginTop:20}}>
    <div className="panel-title">👥 使用者管理</div>
    <div style={{display:'flex',gap:8,marginBottom:16,flexWrap:'wrap'}}>
      <input placeholder="帳號" value={un} onChange={e=>setUn(e.target.value)} className="form-input" style={{flex:1,minWidth:100}}/>
      <input placeholder="密碼" value={pw} onChange={e=>setPw(e.target.value)} className="form-input" style={{flex:1,minWidth:100}}/>
      <input type="number" placeholder="天數" value={days} onChange={e=>setDays(e.target.value)} className="form-input" style={{width:80}}/>
      <button onClick={create} className="btn-primary" style={{whiteSpace:'nowrap'}}>＋ 建立帳號</button>
    </div>
    {msg&&<div style={{color:'#34d399',fontSize:12,marginBottom:8}}>{msg}</div>}
    <div style={{overflowX:'auto'}}>
      <table style={{width:'100%',fontSize:13,borderCollapse:'collapse'}}>
        <thead><tr style={{color:'#94a3b8',borderBottom:'1px solid rgba(255,255,255,0.1)'}}>
          <th style={{padding:8,textAlign:'left'}}>帳號</th><th style={{padding:8}}>角色</th><th style={{padding:8}}>剩餘</th><th style={{padding:8}}>狀態</th><th style={{padding:8}}>操作</th>
        </tr></thead>
        <tbody>{Object.entries(users).map(([name,u])=>(
          <tr key={name} style={{borderBottom:'1px solid rgba(255,255,255,0.05)'}}>
            <td style={{padding:8,fontWeight:700}}>{name}</td>
            <td style={{padding:8,textAlign:'center'}}><span style={{background:u.role==='superadmin'?'rgba(239,68,68,0.2)':'rgba(56,189,248,0.1)',color:u.role==='superadmin'?'#ef4444':'#38bdf8',padding:'2px 8px',borderRadius:4,fontSize:11}}>{u.role==='superadmin'?'超管':'用戶'}</span></td>
            <td style={{padding:8,textAlign:'center',color:u.expiresAt&&remaining(u.expiresAt)==='已過期'?'#ef4444':'#34d399'}}>{remaining(u.expiresAt)}</td>
            <td style={{padding:8,textAlign:'center'}}><span style={{background:u.active?'rgba(16,185,129,0.15)':'rgba(239,68,68,0.15)',color:u.active?'#10b981':'#ef4444',padding:'2px 8px',borderRadius:4,fontSize:11}}>{u.active?'啟用':'停權'}</span></td>
            <td style={{padding:8,textAlign:'center'}}>{u.role!=='superadmin'&&<>
              <button onClick={()=>toggle(name)} style={{background:'none',border:'1px solid rgba(255,255,255,0.1)',color:'#e2e8f0',padding:'4px 8px',borderRadius:4,cursor:'pointer',fontSize:11,marginRight:4}}>{u.active?'停權':'啟用'}</button>
              <button onClick={()=>renew(name)} style={{background:'none',border:'1px solid rgba(56,189,248,0.2)',color:'#38bdf8',padding:'4px 8px',borderRadius:4,cursor:'pointer',fontSize:11,marginRight:4}}>續期</button>
              <button onClick={()=>del(name)} style={{background:'none',border:'1px solid rgba(239,68,68,0.2)',color:'#ef4444',padding:'4px 8px',borderRadius:4,cursor:'pointer',fontSize:11}}>刪除</button>
            </>}</td>
          </tr>))}</tbody>
      </table>
    </div></div>);
}

function AdminView({dbData,triggerSOP,updatePrediction}){
  const{matches,predictions,pipelineStatus}=dbData;const isRunning=pipelineStatus.step>0&&pipelineStatus.step<5;
  return(<div className="dashboard admin">
    <div className="panel">
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:20}}>
        <div className="panel-title" style={{margin:0}}>⚙️ 賽事管理與手動預測</div>
        <button className="btn-primary" onClick={triggerSOP} disabled={isRunning}>{isRunning?'🔄 爬蟲執行中...':'🔄 爬取最新賽事'}</button></div>
      {isRunning&&<div style={{color:'#34d399',fontSize:13,textAlign:'center',marginBottom:20,animation:'pulse-glow 1.5s infinite'}}>系統正在執行爬蟲與資料分析，請稍候...</div>}
      {matches.length===0&&!isRunning?<div style={{color:'#64748b',fontSize:13,textAlign:'center',padding:20}}>尚無賽事資料，請點擊「爬取最新賽事」。</div>:(
        <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(300px,1fr))',gap:20}}>
          {matches.map(m=>{const pred=predictions[m.id]||{mode:'ai',manualData:{prediction:'',confidence:'中',reasoning:''}};const isManual=pred.mode==='manual';
            return(<div key={m.id} className="match-card">
              <div className="match-header"><div><span className="league-tag">{m.league}</span><span className={`status-tag ${m.status==='進行中'?'status-live':m.status==='已結束'?'status-finished':'status-upcoming'}`}>{m.status}</span></div><span>{m.time} | {m.source}</span></div>
              <div className="teams"><div className="team">{m.home}</div><div className="vs">VS</div><div className="team">{m.away}</div></div>
              <div className="toggle-wrap"><div style={{fontSize:12,color:'#94a3b8'}}>智能</div><div className={`toggle ${isManual?'active':''}`} onClick={()=>updatePrediction(m.id,{mode:isManual?'ai':'manual'})}/><div style={{fontSize:12,color:isManual?'#10b981':'#94a3b8'}}>手動</div></div>
              {isManual&&<div className="admin-prediction-form">
                <div className="form-group"><label className="form-label">分析結果</label><input className="form-input" value={pred.manualData.prediction} onChange={e=>updatePrediction(m.id,{manualData:{...pred.manualData,prediction:e.target.value}})}/></div>
                <div className="form-group"><label className="form-label">信心度</label><select className="form-select" value={pred.manualData.confidence} onChange={e=>updatePrediction(m.id,{manualData:{...pred.manualData,confidence:e.target.value}})}><option>高</option><option>中</option><option>低</option></select></div>
                <div className="form-group"><label className="form-label">詳細分析</label><textarea className="form-input" rows="2" value={pred.manualData.reasoning} onChange={e=>updatePrediction(m.id,{manualData:{...pred.manualData,reasoning:e.target.value}})}/></div>
              </div>}
            </div>)})}</div>)}
    </div>
    <UserMgmt/>
  </div>);
}

function UserView({dbData,triggerSOP}){
  const{matches,predictions,records,pipelineStatus}=dbData;const isRunning=pipelineStatus.step>0&&pipelineStatus.step<5;
  const steps=[{n:1,l:"資料爬蟲"},{n:2,l:"資料清理"},{n:3,l:"統計分析"},{n:4,l:"AI預測"},{n:5,l:"完成"}];
  return(<div className="dashboard user">
    <div style={{display:'flex',flexDirection:'column',gap:20}}>
      <div className="panel"><div className="panel-title">📄 執行狀態</div><div className="sop-container">
        <div className="status-cards">
          <div className="status-card"><h3>爬蟲</h3><div className={`status-indicator ${pipelineStatus.step===1?'active':''}`}/></div>
          <div className="status-card"><h3>統計</h3><div className={`status-indicator ${pipelineStatus.step===3?'active':''}`}/></div>
          <div className="status-card"><h3>AI</h3><div className={`status-indicator ${pipelineStatus.step===4?'active':''}`}/></div></div>
        <div className="pipeline">{steps.map(s=>{const done=pipelineStatus.step>s.n||pipelineStatus.step===5;const act=pipelineStatus.step===s.n;
          return(<div key={s.n} className="pipeline-step"><div className={`step-circle ${done?'done':''} ${act?'active':''}`}>{s.n}</div><div className="step-label">{s.l}</div><div className="step-status">{done?'完成':act?'等待中':'-'}</div></div>)})}</div>
        <div className="controls-row"><button className="btn-primary" onClick={triggerSOP} disabled={isRunning}>▶ {isRunning?'SOP 執行中...':'執行全套 SOP'}</button>
          <button className="btn-danger" onClick={()=>location.reload()}>■ 重新整理</button></div></div></div>
      <div className="panel"><div className="panel-title">🔥 今日精選預測</div>
        {matches.length===0?<div style={{color:'#64748b',fontSize:13,textAlign:'center',padding:40}}>請點擊上方按鈕開始分析...</div>:(
          <div style={{display:'flex',flexDirection:'column',gap:16}}>{matches.map(m=>{
            const pred=predictions[m.id];const isM=pred?.mode==='manual';
            let dp=null;if(isM&&pred.manualData.prediction)dp={l:pred.manualData.prediction,r:pred.manualData.reasoning,t:'專家推薦'};
            else if(!isM)dp={l:`${m.home} 不敗`,r:`AI 分析 ${m.home} 近期主場勝率 68%`,t:'AI 智能預測'};
            return(<div key={m.id} className="match-card">
              <div className="match-header"><div><span className="league-tag">{m.league}</span><span className={`status-tag ${m.status==='進行中'?'status-live':m.status==='已結束'?'status-finished':'status-upcoming'}`}>{m.status}</span></div><span>{m.time}</span></div>
              <div className="teams"><div className="team">{m.home}</div><div className="vs">VS</div><div className="team">{m.away}</div></div>
              <div className="odds-row"><div className="odd-box"><div className="odd-label">主勝</div><div className="odd-val">{m.homeOdds||'-'}</div></div>
                {m.drawOdds&&<div className="odd-box"><div className="odd-label">平局</div><div className="odd-val">{m.drawOdds}</div></div>}
                <div className="odd-box"><div className="odd-label">客勝</div><div className="odd-val">{m.awayOdds||'-'}</div></div></div>
              {dp&&<div className="prediction-result"><div className="pred-badge">{dp.t}</div><div style={{fontSize:14,fontWeight:700,color:'#f8fafc',marginBottom:6}}>推：{dp.l}</div><div className="pred-reason">{dp.r}</div></div>}
            </div>)})}</div>)}</div></div>
    <div className="widget-grid" style={{alignSelf:'start'}}>
      <div className="panel widget"><div className="w-title">📊 信心度</div>
        <div className="conf-bar-wrap"><div className="conf-header"><span>高信心</span><span>82%</span></div><div className="conf-bg"><div className="conf-fill" style={{width:'82%',background:'#10b981'}}/></div></div>
        <div className="conf-bar-wrap"><div className="conf-header"><span>中信心</span><span>65%</span></div><div className="conf-bg"><div className="conf-fill" style={{width:'65%',background:'#f59e0b'}}/></div></div>
        <div className="conf-bar-wrap"><div className="conf-header"><span>爆冷</span><span>28%</span></div><div className="conf-bg"><div className="conf-fill" style={{width:'28%',background:'#ef4444'}}/></div></div></div>
      <div className="panel widget"><div className="w-title">📈 數據</div>
        <div style={{display:'flex',gap:12,marginTop:10}}>
          <div style={{flex:1,background:'rgba(0,0,0,0.3)',padding:12,borderRadius:8,textAlign:'center'}}><div style={{fontSize:24,fontWeight:700,color:'#38bdf8'}}>1,204</div><div style={{fontSize:10,color:'#94a3b8',marginTop:4}}>本月賽事</div></div>
          <div style={{flex:1,background:'rgba(0,0,0,0.3)',padding:12,borderRadius:8,textAlign:'center'}}><div style={{fontSize:24,fontWeight:700,color:'#34d399'}}>71.4%</div><div style={{fontSize:10,color:'#94a3b8',marginTop:4}}>準確率</div></div></div></div>
      <div className="panel widget"><div className="w-title">🗓️ 紀錄</div><div style={{fontSize:12}}>
        {records.length===0?<div style={{color:'#64748b'}}>暫無</div>:records.slice(-5).reverse().map((r,i)=>(
          <div key={i} style={{display:'flex',justifyContent:'space-between',padding:'8px 0',borderBottom:'1px solid rgba(255,255,255,0.05)'}}><span style={{color:'#cbd5e1'}}>{r.date}</span><span style={{color:'#94a3b8'}}>{r.matchesScraped} 場</span></div>))}</div></div>
    </div></div>);
}

function App(){
  const[auth,setAuth]=useState(null);const[checking,setChecking]=useState(true);
  const[dbData,setDbData]=useState({matches:[],predictions:{},pipelineStatus:{step:0,status:'idle'},records:[]});
  const isAdmin=location.hash==='#/admin';

  useEffect(()=>{const t=localStorage.getItem('token');if(!t){setChecking(false);return}
    API('/api/me').then(r=>{if(r.error){localStorage.removeItem('token');setAuth(null)}else{setAuth(r)}setChecking(false)})},[] );

  useEffect(()=>{const h=()=>setAuth(a=>({...a}));addEventListener('hashchange',h);return()=>removeEventListener('hashchange',h)},[]);

  useEffect(()=>{if(!auth)return;const f=()=>API('/api/data').then(d=>{if(!d.error)setDbData(d)});f();const i=setInterval(f,2000);return()=>clearInterval(i)},[auth]);

  const doLogout=()=>{API('/api/logout',{method:'POST'});localStorage.removeItem('token');setAuth(null);location.hash='';};
  const triggerSOP=async()=>{await API('/api/scrape',{method:'POST'})};
  const updatePred=async(id,d)=>{await API(`/api/predictions/${id}`,{method:'POST',body:JSON.stringify(d)})};

  if(checking)return <div style={{minHeight:'100vh',display:'flex',alignItems:'center',justifyContent:'center',background:'#0f172a',color:'#94a3b8'}}>載入中...</div>;
  if(!auth)return <LoginPage onLogin={r=>setAuth({username:r.username,role:r.role})}/>;

  return(<div className="app-container">
    <header className="header">
      <div className="brand"><span className="logo-icon">⚽</span><div className="brand-text"><h1>SPORT AI</h1><p>{isAdmin?'ADMIN CONSOLE':'INTELLIGENT PREDICTIONS'}</p></div></div>
      <div style={{display:'flex',alignItems:'center',gap:12}}>
        <span style={{color:'#94a3b8',fontSize:12}}>👤 {auth.username}</span>
        {auth.role==='superadmin'&&!isAdmin&&<a href="#/admin" style={{color:'#38bdf8',fontSize:11,textDecoration:'none'}}>⚙️ 管理</a>}
        {isAdmin&&<a href="#/" style={{color:'#64748b',fontSize:11,textDecoration:'none'}}>🏠 前台</a>}
        {auth.role==='superadmin'&&isAdmin&&<span className="admin-badge">ADMIN</span>}
        <button onClick={doLogout} style={{background:'rgba(239,68,68,0.15)',color:'#ef4444',border:'1px solid rgba(239,68,68,0.3)',padding:'6px 12px',borderRadius:6,cursor:'pointer',fontSize:11}}>登出</button>
      </div>
    </header>
    {isAdmin&&auth.role==='superadmin'?<AdminView dbData={dbData} triggerSOP={triggerSOP} updatePrediction={updatePred}/>:<UserView dbData={dbData} triggerSOP={triggerSOP}/>}
  </div>);
}
ReactDOM.createRoot(document.getElementById('root')).render(<App/>);