import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import PageHeader from '@dukang/shared-ui/PageHeader';
import PullToRefresh from '@dukang/shared-ui/PullToRefresh';
import type { PartnerAssocUserItem } from '@dukang/shared-types';
import { request } from '../lib/api';
import { toastError } from '../lib/toast';
import { usePartnerPageView } from '../lib/usePageView';

type ListRes = { items: PartnerAssocUserItem[]; total: number; page: number; pageSize: number };

export default function AssocUsersPage() {
  usePartnerPageView('partner_assoc_users_view');
  const navigate = useNavigate();
  const [items, setItems] = useState<PartnerAssocUserItem[]>([]);
  const [total, setTotal] = useState(0);
  const [loading, setLoading] = useState(true);

  async function load() {
    setLoading(true);
    try {
      const res = await request<ListRes>('PARTNER_H5', '/partner/assoc/users?page=1&pageSize=50');
      setItems(res.items ?? []);
      setTotal(res.total ?? 0);
    } catch (e) {
      toastError(e instanceof Error ? e.message : '加载失败');
      setItems([]);
    } finally {
      setLoading(false);
    }
  }

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

  return (
    <PullToRefresh onRefresh={load}>
      <PageHeader title="关联用户" onBack={() => navigate(-1)} />
      <div style={{ padding: '0 20px 24px' }}>
        <p className="label-md text-muted" style={{ margin: '12px 0' }}>
          {loading ? '加载中…' : `共 ${total} 人`}
        </p>
        {!loading && items.length === 0 && <div className="empty">暂无关联用户</div>}
        {items.map((u) => (
          <div key={u.id} className="partner-store-card" style={{ marginBottom: 12 }}>
            <div className="partner-store-card-header" style={{ marginBottom: 0 }}>
              <div>
                <p className="body-md">{u.nickname || u.userNo}</p>
                <p className="label-md text-muted">{u.phone || '未绑定手机'}</p>
                <p className="label-md text-muted">{u.boundAt ? u.boundAt.slice(0, 16).replace('T', ' ') : ''}</p>
              </div>
              <span className="label-md">{u.orderCount} 单</span>
            </div>
          </div>
        ))}
      </div>
    </PullToRefresh>
  );
}