/* eslint-disable */
// =============================================================
// 云版入口 —— 在本地 App 外面套 AuthGate
// 流程:登录 → 拉取数据 → 替换 window.MEMBERS/TASKS → 渲染原 App
// =============================================================

function Login({ onDone }) {
  const [pick, setPick] = useState(null);
  const [pwd, setPwd] = useState('');
  const [busy, setBusy] = useState(false);
  const [err, setErr] = useState(null);
  const [members, setMembers] = useState(window.MEMBERS || []);

  // 拉 16 人头像列表(用 fallback data.js 已经有的,但优先从 DB 拉以保准确)
  useEffect(() => {
    SB.client.from('members').select('*').order('id').then(({data, error}) => {
      if (!error && data && data.length) setMembers(data);
    });
  }, []);

  async function submit() {
    if (!pick) { setErr('请先选择你的名字'); return; }
    if (!pwd)  { setErr('请输入团队密码'); return; }
    setBusy(true); setErr(null);
    try {
      await SB.login(pick, pwd);
      onDone();
    } catch (e) {
      setErr(e.code === 'BAD_PASSWORD' ? '密码错误,问负责人要' : ('登录失败:' + e.message));
      setBusy(false);
    }
  }

  return (
    <div className="cw-login">
      <div className="cw-login-card">
        <div className="cw-login-head">
          <div className="cw-login-brand"></div>
          <div>
            <h1>团队任务看板</h1>
            <p>地化所喀斯特研究团队 · 请选择你的名字进入</p>
          </div>
        </div>

        <div className="cw-login-grid">
          {members.map(m => (
            <button key={m.id}
              className={'cw-pick ' + (pick === m.id ? 'on' : '')}
              onClick={() => setPick(m.id)}>
              <span className="cw-pick-av" style={{background: m.color}}>{m.short || m.name?.slice(-2)}</span>
              <span className="cw-pick-name">{m.name}</span>
            </button>
          ))}
        </div>

        <div className="cw-login-form">
          <input className="cw-pwd"
            type="password"
            placeholder="团队共享密码(问负责人)"
            value={pwd}
            onChange={e=>setPwd(e.target.value)}
            onKeyDown={e=>e.key==='Enter' && submit()}
            disabled={busy} />
          <button className="cw-submit" onClick={submit} disabled={busy}>
            {busy ? '正在进入…' : '进入看板'}
          </button>
        </div>
        {err && <div className="cw-err">{err}</div>}
        <div className="cw-foot">
          已选:<b>{pick ? (members.find(m=>m.id===pick)?.name || pick) : '—'}</b>
          {pick && <span className="cw-clear" onClick={()=>setPick(null)}> · 重选</span>}
        </div>
      </div>
    </div>
  );
}

function Loading({ msg }) {
  return <div className="cw-loading"><div className="cw-spin"></div><div>{msg || '加载中…'}</div></div>;
}

function ErrScreen({ err, onRetry }) {
  return (
    <div className="cw-err-screen">
      <h2>加载失败</h2>
      <pre>{String(err.message || err)}</pre>
      <button onClick={onRetry}>重试</button>
      <button onClick={() => SB.logout()}>退出登录</button>
    </div>
  );
}

function CloudApp() {
  const [phase, setPhase] = useState('check'); // check | login | loading | ready | error
  const [err, setErr] = useState(null);
  const [, force] = useState(0);

  const reload = async () => {
    setPhase('loading'); setErr(null);
    try {
      const { members, tasks } = await SB.fetchAll();
      window.MEMBERS = members;
      window.TASKS = tasks.map(SB.dbTaskToView);
      window.CURRENT_USER = SB.getSession()?.memberId;
      setPhase('ready');
    } catch (e) {
      setErr(e); setPhase('error');
    }
  };

  useEffect(() => {
    const s = SB.getSession();
    if (!s) { setPhase('login'); return; }
    reload();
  }, []);

  // Realtime:数据变化 → 重新拉(简单粗暴,16 人量级无压力)
  useEffect(() => {
    if (phase !== 'ready') return;
    const unsub = SB.subscribe(() => {
      SB.fetchAll().then(({members, tasks}) => {
        window.MEMBERS = members;
        window.TASKS = tasks.map(SB.dbTaskToView);
        force(x => x + 1);
      });
    });
    return unsub;
  }, [phase]);

  if (phase === 'check')   return <Loading msg="正在检查登录态…"/>;
  if (phase === 'login')   return <Login onDone={reload}/>;
  if (phase === 'loading') return <Loading msg="正在拉取最新任务…"/>;
  if (phase === 'error')   return <ErrScreen err={err} onRetry={reload}/>;

  // ready → 渲染原 App,顶部加一个登录态徽章
  const App = window.__App;
  const me = window.MEMBERS.find(m => m.id === window.CURRENT_USER);
  return (
    <div className="cw-shell">
      <div className="cw-userbar">
        <span className="cw-userbar-dot"></span>
        <span>已登录:<b>{me?.name || window.CURRENT_USER}</b></span>
        <span className="cw-userbar-sp">·</span>
        <button className="cw-logout" onClick={() => SB.logout()}>退出</button>
      </div>
      <App key={Math.random()}/>
      <CloudNewTask/>
    </div>
  );
}

// 接管 mount;阻止原 app.jsx 自动 mount
window.SKIP_LOCAL_MOUNT = true;

// 等原 app.jsx 被 babel 处理完(它会赋值 window.__App)
function tryMount() {
  if (!window.__App) { setTimeout(tryMount, 50); return; }
  ReactDOM.createRoot(document.getElementById('root')).render(<CloudApp/>);
}
tryMount();