<!DOCTYPE html>
<html lang="zh-CN">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>花园世界</title>
<style>
*{margin:0;padding:0;box-sizing:border-box;font-family:-apple-system, BlinkSystemFont, sans-serif}
body{background:#f2f2f7;color:#1d1111;padding-bottom:60px}
.container{max-width:420px;margin:0 auto;padding:20px}
.page-title{font-size:32px;font-weight:700;margin:24px 0;text-align:center}
.login-wrap{min-height:85vh;display:flex;flex-direction:column;justify-content:center;padding:20px}
.login-logo{text-align:center;margin-bottom:40px}
.login-logo h1{font-size:36px;font-weight:800;color:#007aff;margin-bottom:8px}
.login-logo p{font-size:15px;color:#8e939a}
.card{background:#fff;border-radius:20px;padding:28px;margin-bottom:18px;box-shadow:0 4px 20px rgba(0,0,0,0.08)}
.card-title{font-size:20px;font-weight:700;margin-bottom:24px;text-align:center}
input{width:100%;padding:18px 16px;border-radius:14px;border:1px solid #e5e7eb;font-size:16px;margin-bottom:16px;outline:0;background:#f9fafb}
input:focus{border-color:#007aff;background:#fff;box-shadow:0 0 0 3px rgba(0,122,255,0.15)}
.btn{width:100%;padding:18px;border-radius:14px;border:none;background:#007aff;color:#fff;font-size:17px;font-weight:600;margin-top:12px;cursor:pointer}
.btn:active{opacity:.8}
.btn-success{background:#34c759}
.btn-danger{background:#ff3b30}
.btn-outline{background:transparent;color:#007aff;border:1px solid #007aff}
.tag-group{display:flex;gap:10px;margin-bottom:16px}
.tag-item{padding:10px 16px;border-radius:10px;background:#f2f2f2;cursor:pointer}
.tag-item.active{background:#007aff;color:#fff}
.notice{display:flex;align-items:center;gap:10px;background:#f8f9fa;border-radius:12px;padding:10px 14px;margin-bottom:16px}
.notice-icon{font-size:16px;color:#ff9500}
.notice-text{white-space:nowrap;animation:scroll 12s linear infinite}
@keyframes scroll{0%{transform:translateX(100%)}100%{transform:translateX(-100%)}}
.flower-wrap{display:flex;gap:10px;margin-bottom:12px}
.flower-main{width:110px;display:flex;flex-direction:column;gap:8px}
.flower-main-item{padding:12px 10px;border-radius:10px;background:#f2f2f2;text-align:center;cursor:pointer}
.flower-main-item.active{background:#007aff;color:#fff}
.flower-sub{flex:1;display:flex;flex-direction:column;gap:8px;max-height:220px;overflow-y:auto}
.flower-item{padding:10px 12px;border-radius:10px;background:#f2f2f2;text-align:center;cursor:pointer}
.flower-item.owned{background:#34c759;color:#fff}
.team-member{padding:14px 0;border-bottom:1px solid #f2f2f2;display:flex;justify-content:space-between;align-items:center}
.member-info{display:flex;align-items:center;gap:10px}
.member-name{font-weight:600;cursor:pointer;color:#007aff}
.member-job{color:#007aff}
.kick-btn{padding:6px 10px;border-radius:8px;background:#ff3b30;color:#fff;border:none;font-size:12px}
.page{display:none}
.page.active{display:block}
.gray-tip{font-size:14px;color:#8e939a}
.nav-bar{display:flex;gap:8px;margin-bottom:20px}
.nav-bar button{flex:1;padding:12px;border-radius:12px;border:none;background:#fff}
.nav-bar button.active{background:#007aff;color:#fff}
.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);display:none;align-items:center;justify-content:center}
.modal-content{background:#fff;border-radius:20px;padding:20px;width:90%;max-width:400px}
.flower-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.flower-grid-item{padding:8px 12px;border-radius:8px;background:#f2f2f2}
.flower-grid-item.owned{background:#34c759;color:#fff}
.link-text{color:#007aff;text-align:center;margin-top:20px;cursor:pointer}
</style>

<div class="container">
  <div class="nav-bar" id="mainNav" style="display:none">
    <button onclick="goPage('flower')">我的花花</button>
    <button onclick="goPage('team')">团队</button>
    <button onclick="goPage('profile')">个人中心</button>
  </div>

  <div id="login" class="page active">
    <div class="login-wrap">
      <div class="login-logo"><h1>花园世界</h1><p>欢迎登录</p></div>
      <div class="card">
        <div class="card-title">登录</div>
        <input id="user" placeholder="用户名">
        <input id="pwd" type="password" placeholder="密码">
        <button class="btn" onclick="login()">登录</button>
        <div class="link-text" onclick="goPage('register')">注册账号</div>
      </div>
    </div>
  </div>

  <div id="register" class="page">
    <div class="login-wrap">
      <div class="login-logo"><h1>花园世界</h1><p>创建账号</p></div>
      <div class="card">
        <div class="card-title">注册</div>
        <input id="reg_user" placeholder="用户名">
        <input id="reg_pwd" type="password" placeholder="密码（≥8位）">
        <button class="btn" onclick="register()">注册</button>
        <div class="link-text" onclick="goPage('login')">返回登录</div>
      </div>
    </div>
  </div>

  <div id="flower" class="page">
    <div class="card">
      <div class="notice">
        <div class="notice-icon">📢</div>
        <div class="notice-text" id="noticeText">加载中...</div>
      </div>
      <div class="card-title">我的花花</div>
      <div class="flower-wrap">
        <div class="flower-main" id="flowerTypes"></div>
        <div class="flower-sub" id="flowerItems"></div>
      </div>
      <button class="btn btn-success" onclick="saveFlowers()">保存</button>
    </div>
  </div>

  <div id="team" class="page">
    <div class="card">
      <div class="card-title">团队</div>
      <input id="teamId" placeholder="团队ID">
      <div class="tag-group">
        <div class="tag-item active" data-server="官服">官服</div>
        <div class="tag-item" data-server="支付宝">支付宝</div>
        <div class="tag-item" data-server="抖音">抖音</div>
      </div>
      <button class="btn btn-outline" onclick="createTeam()">创建</button>
      <button class="btn" onclick="joinTeam()">加入</button>
      <button class="btn btn-danger" id="dissolveBtn" style="display:none" onclick="dissolveTeam()">解散</button>
      <button class="btn btn-outline" id="quitBtn" style="display:none" onclick="quitTeam()">退出</button>
      <div id="teamMemberList"></div>
    </div>
  </div>

  <div id="profile" class="page">
    <div class="card">
      <div class="card-title">个人中心</div>
      <input id="nickname" placeholder="昵称">
      <button class="btn" onclick="updateNick()">保存昵称</button>
      <input id="oldPwd" placeholder="原密码" type="password">
      <input id="newPwd" placeholder="新密码" type="password">
      <button class="btn" onclick="updatePwd()">修改密码</button>
      <button class="btn btn-outline" onclick="logout()">退出登录</button>
    </div>
  </div>

  <div class="modal" id="modal">
    <div class="modal-content">
      <div class="card-title">成员花花</div>
      <div id="modalFlowers"></div>
      <button class="btn" onclick="closeModal()">关闭</button>
    </div>
  </div>
</div>

<script>
let username = localStorage.getItem('username');
let myFlowers = [];
let currentType = 'red';
let teamInfo = null;

async function api(url, data){
    let fd = new FormData();
    for(let k in data) fd.append(k, data[k]);
    let res = await fetch('/api/'+url, {method:'POST', body:fd});
    return await res.json();
}

function goPage(p){
    document.querySelectorAll('.page').forEach(x=>x.classList.remove('active'));
    document.getElementById(p).classList.add('active');
    if(p==='flower') loadFlowerTypes();
    if(p==='team') refreshTeam();
}

async function loadNotice(){
    let d = await api('notice.php', {act:'get'});
    document.getElementById('noticeText').innerText = d.notice;
}

async function login(){
    let user = document.getElementById('user').value;
    let pwd = document.getElementById('pwd').value;
    let d = await api('login.php', {username:user, password:pwd});
    if(d.code!==0) return alert('用户名或密码错误');
    localStorage.setItem('username', user);
    username = user;
    goPage('flower');
}

async function register(){
    let user = document.getElementById('reg_user').value;
    let pwd = document.getElementById('reg_pwd').value;
    if(pwd.length<8) return alert('密码至少8位');
    let d = await api('register.php', {username:user, password:pwd});
    alert(d.code===0 ? '注册成功' : '用户名已存在');
    if(d.code===0) goPage('login');
}

function logout(){
    localStorage.clear();
    location.reload();
}

async function updateNick(){
    let nick = document.getElementById('nickname').value;
    await api('updateNick.php', {username, nickname:nick});
    alert('修改成功');
}

async function updatePwd(){
    let old = document.getElementById('oldPwd').value;
    let now = document.getElementById('newPwd').value;
    if(now.length<8) return alert('新密码至少8位');
    let d = await api('updatePwd.php', {username, old, new:now});
    alert(d.code===0 ? '修改成功' : '原密码错误');
}

async function loadFlowerTypes(){
    let list = await api('flower.php', {act:'types'});
    let dom = document.getElementById('flowerTypes');
    dom.innerHTML = '';
    list.forEach(t=>{
        let div = document.createElement('div');
        div.className = 'flower-main-item';
        if(t.type_key===currentType) div.classList.add('active');
        div.innerText = t.name;
        div.onclick = ()=>{
            currentType = t.type_key;
            loadFlowerItems();
        };
        dom.appendChild(div);
    });
    loadFlowerItems();
}

async function loadFlowerItems(){
    let items = await api('flower.php', {act:'items', type:currentType});
    let my = await api('flower.php', {act:'my', username});
    myFlowers = my.list;
    let dom = document.getElementById('flowerItems');
    dom.innerHTML = '';
    items.forEach(i=>{
        let div = document.createElement('div');
        div.className = 'flower-item';
        if(myFlowers.includes(i.name)) div.classList.add('owned');
        div.innerText = i.name;
        div.onclick = ()=>{
            if(myFlowers.includes(i.name)){
                myFlowers = myFlowers.filter(x=>x!==i.name);
            }else{
                myFlowers.push(i.name);
            }
            loadFlowerItems();
        };
        dom.appendChild(div);
    });
}

async function saveFlowers(){
    await api('flower.php', {act:'save', username, list:JSON.stringify(myFlowers)});
    alert('保存成功');
}

async function createTeam(){
    let tid = document.getElementById('teamId').value;
    let sv = document.querySelector('.tag-item.active').dataset.server;
    let nick = document.getElementById('nickname').value;
    await api('team.php', {act:'create', team_id:tid, server:sv, username, nickname:nick});
    alert('创建成功');
    refreshTeam();
}

async function joinTeam(){
    let tid = document.getElementById('teamId').value;
    let sv = document.querySelector('.tag-item.active').dataset.server;
    let nick = document.getElementById('nickname').value;
    await api('team.php', {act:'join', team_id:tid, server:sv, username, nickname:nick});
    alert('加入成功');
    refreshTeam();
}

async function dissolveTeam(){
    if(!confirm('确定解散？')) return;
    await api('team.php', {act:'dissolve', team_id:teamInfo.team_id});
    alert('已解散');
    refreshTeam();
}

async function quitTeam(){
    if(!confirm('确定退出？')) return;
    await api('team.php', {act:'quit', team_id:teamInfo.team_id});
    alert('已退出');
    refreshTeam();
}

async function refreshTeam(){
    let my = await api('team.php', {act:'my', username});
    teamInfo = my;
    if(!my.team_id){
        document.getElementById('dissolveBtn').style.display='none';
        document.getElementById('quitBtn').style.display='none';
        return;
    }
    if(my.owner===username) document.getElementById('dissolveBtn').style.display='block';
    else document.getElementById('quitBtn').style.display='block';
    let members = await api('team.php', {act:'members', team_id:my.team_id});
    let dom = document.getElementById('teamMemberList');
    dom.innerHTML = '';
    members.list.forEach(m=>{
        let div = document.createElement('div');
        div.className = 'team-member';
        div.innerHTML = `
            <div class="member-info">
                <div class="member-name" onclick="showFlowers('${m.username}')">${m.nickname}</div>
                <div class="member-job">${m.username===my.owner?'队长':'队员'}</div>
            </div>
            ${my.owner===username && m.username!==username ? '<button class="kick-btn" onclick="kick(\''+m.username+'\')">踢</button>' : ''}
        `;
        dom.appendChild(div);
    });
}

async function kick(target){
    if(!confirm('确定踢出？')) return;
    await api('team.php', {act:'kick', team_id:teamInfo.team_id, target});
    refreshTeam();
}

async function showFlowers(user){
    let d = await api('flower.php', {act:'my', username:user});
    let dom = document.getElementById('modalFlowers');
    dom.innerHTML = '';
    d.list.forEach(f=>{
        let div = document.createElement('div');
        div.className = 'flower-grid-item owned';
        div.innerText = f;
        dom.appendChild(div);
    });
    document.getElementById('modal').style.display='flex';
}

function closeModal(){
    document.getElementById('modal').style.display='none';
}

window.onload = async ()=>{
    await loadNotice();
    if(username) goPage('flower');
    else goPage('login');
};
</script>
</html>