dukang/apps/h5-shop/src/pages/MinePage.tsx

import { useCallback, useEffect, useState } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { isWxAuthorizeEnabled } from '@dukang/shared-types';
import PullToRefresh from '@dukang/shared-ui/PullToRefresh';
import { stripOAuthParamsFromLocation } from '@dukang/weixin-sdk';
import { useStoreSession } from '../contexts/StoreSessionContext';
import { getStoreProfile, request } from '../lib/api';
import {
  authorizeShopWechat,
  fetchClientConfig,
  fetchShopAccount,
  handleShopWechatCallback,
  handleShopWechatLoginResult,
} from '../lib/wechat-auth';
import { isWechatEnv } from '../lib/weixin';

export default function MinePage() {
  const navigate = useNavigate();
  const [searchParams, setSearchParams] = useSearchParams();
  const { resetSession, store: sessionStore, applySession } = useStoreSession();
  const profile = sessionStore ?? getStoreProfile();
  const [store, setStore] = useState<Record<string, unknown> | null>(null);
  const [hasWechat, setHasWechat] = useState<boolean | null>(null);
  const [wxAuthorize, setWxAuthorize] = useState(false);
  const [binding, setBinding] = useState(false);
  const [bindMsg, setBindMsg] = useState('');

  const loadMine = useCallback(() => {
    return Promise.all([
      request('SHOP_H5', '/shop/store').then(setStore).catch(() => setStore(null)),
      fetchClientConfig()
        .then((config) => setWxAuthorize(isWxAuthorizeEnabled(config)))
        .catch(() => setWxAuthorize(false)),
      fetchShopAccount()
        .then((me) => setHasWechat(!!(me.hasWechat || me.wxOpenId)))
        .catch(() => setHasWechat(null)),
    ]);
  }, []);

  useEffect(() => {
    void loadMine();
  }, [loadMine]);

  useEffect(() => {
    if (!isWechatEnv() || !wxAuthorize || !searchParams.get('code')) return;
    void handleShopWechatCallback()
      .then((result) => {
        if (!result) return;
        const session = handleShopWechatLoginResult(result);
        if (session) {
          applySession(session);
          setHasWechat(true);
          setBindMsg('微信绑定成功');
        }
        stripOAuthParamsFromLocation();
        setSearchParams({}, { replace: true });
      })
      .catch((e) => setBindMsg(e instanceof Error ? e.message : '微信绑定失败'));
  }, [applySession, searchParams, setSearchParams, wxAuthorize]);

  const openTime = String(store?.openTime || '09:30');
  const closeTime = String(store?.closeTime || '22:00');
  const multiStore = (profile?.stores?.length ?? 0) > 1;
  const showBindWechat = wxAuthorize && hasWechat === false;

  async function bindWechat() {
    if (binding) return;
    setBindMsg('');
    if (!isWechatEnv()) {
      setBindMsg('请在微信内打开门店端以绑定微信');
      return;
    }
    setBinding(true);
    try {
      const result = await authorizeShopWechat();
      if (!result) {
        // 跳转公众号 OAuth，回跳后由上面 useEffect 处理
        return;
      }
      const session = handleShopWechatLoginResult(result);
      if (session) {
        applySession(session);
        setHasWechat(true);
        setBindMsg('微信绑定成功');
      } else {
        setBindMsg('绑定未完成，请重试');
      }
    } catch (e) {
      setBindMsg(e instanceof Error ? e.message : '微信绑定失败');
    } finally {
      setBinding(false);
    }
  }

  return (
    <PullToRefresh onRefresh={loadMine} className="shop-mine-page">
      <header className="shop-mine-header">
        <h1 className="app-page-title">我的</h1>
      </header>

      <div className="shop-mine-content">
        <h3 className="shop-mine-section-title">门店信息</h3>

        <div className="shop-mine-info-card">
          <div className="shop-mine-info-row">
            <div>
              <p className="shop-mine-info-label">门店名称</p>
              <p className="shop-mine-info-value name">{String(store?.name || profile?.storeName || '—')}</p>
            </div>
            <span className="material-symbols-outlined shop-mine-lock">lock</span>
          </div>
          <div className="shop-mine-info-row">
            <div>
              <p className="shop-mine-info-label">地理位置</p>
              <p className="shop-mine-info-value">{String(store?.address || '—')}</p>
            </div>
            <span className="material-symbols-outlined shop-mine-lock">lock</span>
          </div>
          <div className="shop-mine-info-row">
            <div>
              <p className="shop-mine-info-label">联系电话</p>
              <p className="shop-mine-info-value">{String(store?.phone || profile?.phone || '—')}</p>
            </div>
            <span className="material-symbols-outlined shop-mine-lock">lock</span>
          </div>
          <div className="shop-mine-info-row">
            <div>
              <p className="shop-mine-info-label">营业时间</p>
              <p className="shop-mine-info-value">{openTime} - {closeTime}</p>
            </div>
            <span className="material-symbols-outlined shop-mine-lock">lock</span>
          </div>
        </div>

        <div className="shop-mine-actions">
          {multiStore ? (
            <button type="button" className="shop-mine-action" onClick={() => navigate('/select-store')}>
              <span className="material-symbols-outlined" style={{ fontSize: 20 }}>swap_horiz</span>
              切换门店
            </button>
          ) : null}
          {profile?.isPrimary ? (
            <button type="button" className="shop-mine-action" onClick={() => navigate('/staff')}>
              <span className="material-symbols-outlined" style={{ fontSize: 20 }}>group</span>
              子账号管理
            </button>
          ) : null}
        </div>

        <div className="shop-mine-help">
          <span className="material-symbols-outlined" style={{ fontSize: 16 }}>help</span>
          <p>如需修改信息请联系城市合伙人</p>
        </div>

        {bindMsg ? <p className="shop-mine-bind-msg">{bindMsg}</p> : null}

        {showBindWechat ? (
          <button
            type="button"
            className="shop-mine-bind-wechat"
            disabled={binding}
            onClick={() => void bindWechat()}
          >
            <span className="material-symbols-outlined" style={{ fontSize: 20 }}>chat</span>
            {binding ? '绑定中…' : '绑定微信'}
          </button>
        ) : null}

        <button
          type="button"
          className="shop-mine-logout"
          onClick={() => { resetSession(); navigate('/login'); }}
        >
          <span className="material-symbols-outlined" style={{ fontSize: 20 }}>logout</span>
          退出登录
        </button>
      </div>
    </PullToRefresh>
  );
}