ln-bi/src/auth/PermissionPreview.tsx

import { useEffect, useState, type ReactNode } from 'react';
import { ArrowLeft, Eye, Search, ShieldCheck, X } from 'lucide-react';
import { fetchPreviewControl } from './api-client';
import { useAuth, type AuthUser } from './useAuth';
import './PermissionPreview.css';

const scopes = [
  { level: 'full', title: '全量数据', role: 'BI-Leader', detail: '查看全量业务数据。' },
  { level: 'department', title: '部门数据', role: 'BI-Leader-Dep', detail: '查看当前用户所在部门的数据。' },
  { level: 'personal', title: '本人数据', role: '其他角色默认', detail: '查看本人负责的车辆。' },
];
export function permissionScope(user: AuthUser) {
  return scopes.find(s => s.level === user.permissionLevel)?.title || '本人数据';
}
export default function PermissionPreview({ children }: { children: ReactNode }) {
  const { isAuthenticated, actor, preview, previewNotice, clearPreviewNotice, stopPreview } = useAuth();
  return <div className={preview ? 'permission-preview-active' : undefined}>
    {isAuthenticated && preview && <aside className="permission-preview-banner" aria-label="当前权限视角">
      <Eye size={17} /><div className="permission-preview-identity"><strong>只读预览：{preview.user.userName}</strong><span>{preview.user.depName || '未分配部门'} · {permissionScope(preview.user)}<small>登录人：{actor?.userName}</small></span></div>
      <button onClick={() => window.location.assign('/who')}>切换人员</button><button onClick={() => void stopPreview?.()}>退出预览</button>
    </aside>}
    {previewNotice && <div className="permission-preview-notice" role="status">{previewNotice}<button onClick={clearPreviewNotice} aria-label="关闭权限提示"><X size={14} /></button></div>}
    {children}
  </div>;
}
export function PermissionPreviewPage() {
  const { canPreview } = useAuth();
  return <main className="permission-preview-page">
    {canPreview ? <PreviewPicker onClose={() => window.location.assign('/asset#assets')} /> : <section className="permission-preview-denied"><ShieldCheck size={28} /><h1>无权限访问</h1><p>当前账号未获授权使用权限视角。</p><a href="/asset#assets">返回 BI</a></section>}
  </main>;
}
function PreviewPicker({ onClose }: { onClose: () => void }) {
  const { startPreview, preview } = useAuth();
  const [query, setQuery] = useState('');
  const [level, setLevel] = useState('');
  const [page, setPage] = useState(1);
  const [users, setUsers] = useState<AuthUser[]>([]);
  const [hasMore, setHasMore] = useState(false);
  const [selected, setSelected] = useState<AuthUser | null>(null);
  const [loading, setLoading] = useState(false);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState('');
  const [retry, setRetry] = useState(0);
  const hasQuery = query.trim().length > 0;
  useEffect(() => {
    const controller = new AbortController();
    setError(''); setUsers([]); setSelected(null); setHasMore(false);
    if (!query.trim()) { setLoading(false); return; }
    setLoading(true);
    const timer = window.setTimeout(async () => {
      try {
        const params = new URLSearchParams({ q: query.trim(), page: String(page) });
        if (level) params.set('level', level);
        const result = await fetchPreviewControl<{ users: AuthUser[]; page: number; hasMore: boolean }>(`users?${params}`, { signal: controller.signal });
        if (!controller.signal.aborted) { setUsers(result.users); setHasMore(result.hasMore); }
      } catch (e) {
        if (!controller.signal.aborted) setError(e instanceof Error ? e.message : '加载失败');
      } finally { if (!controller.signal.aborted) setLoading(false); }
    }, 250);
    return () => { clearTimeout(timer); controller.abort(); };
  }, [query, level, page, retry]);
  async function enter() {
    if (!selected || busy) return;
    setBusy(true); setError('');
    try { await startPreview?.(selected.userId); onClose(); }
    catch (e) { setError(e instanceof Error ? e.message : '切换失败，请重试'); setBusy(false); }
  }
  return <section className="permission-preview-dialog permission-preview-page-panel" aria-labelledby="permission-preview-title">
    <header><div><h2 id="permission-preview-title"><ShieldCheck size={19} />权限视角</h2><p>选择人员，查看其实际页面权限与数据范围。</p></div><button disabled={busy} className="permission-preview-back" onClick={onClose}><ArrowLeft size={18} aria-hidden="true" />返回 BI</button></header>
    <div className="permission-preview-body">
      <div className="permission-preview-guide" aria-label="三类数据权限说明">{scopes.map(scope => <div key={scope.level}><strong>{scope.title}</strong><code>{scope.role}</code><p>{scope.detail}</p></div>)}</div>
      <p className="permission-preview-hint">菜单和数据随目标用户权限变化；共享汇总仍按页面注明的公共口径展示。预览期间仅可查看，不能修改业务数据。</p>
      <div className="permission-preview-search"><label><Search size={16} /><input autoFocus type="search" value={query} disabled={busy} onChange={e => { setQuery(e.target.value); setPage(1); }} placeholder="搜索中文姓名、用户名或部门" aria-label="搜索人员" /></label><select aria-label="数据范围筛选" value={level} disabled={busy} onChange={e => { setLevel(e.target.value); setPage(1); }}><option value="">全部数据范围</option>{scopes.map(s => <option key={s.level} value={s.level}>{s.title}</option>)}</select></div>
      {error && <div className="permission-preview-error" role="alert">{error}<button disabled={busy} onClick={() => setRetry(v => v + 1)}>重试</button></div>}
      {!hasQuery ? <p className="permission-preview-empty">输入中文姓名、用户名或部门关键词，模糊搜索人员。</p> : <div className="permission-preview-users" role="radiogroup" aria-label="选择预览用户" aria-busy={loading}>
        {loading ? <p className="permission-preview-empty">正在加载人员…</p> : !users.length ? <p className="permission-preview-empty">未找到匹配人员，请调整搜索条件。</p> : users.map(user => <label key={user.userId} className={selected?.userId === user.userId ? 'is-selected' : ''}>
          <input type="radio" name="preview-user" value={user.userId} checked={selected?.userId === user.userId} disabled={busy} onChange={() => setSelected(user)} />
          <div><strong>{user.userName} {preview?.user.userId === user.userId && <small>当前视角</small>}</strong><span>{user.loginName || user.userId}</span></div><em>{permissionScope(user)}</em>
        </label>)}
      </div>}
      {hasQuery && (hasMore || page > 1) && <div className="permission-preview-pages"><button disabled={page === 1 || loading || busy} onClick={() => setPage(v => v - 1)}>上一页</button><span>第 {page} 页</span><button disabled={!hasMore || loading || busy} onClick={() => setPage(v => v + 1)}>下一页</button></div>}
    </div>
    <footer><div>{selected ? <><strong>即将进入：{selected.userName}</strong><span>{permissionScope(selected)}</span></> : <span>请选择一位用户开始预览</span>}</div><button className="permission-preview-primary" disabled={!selected || busy || loading} onClick={() => void enter()}>{busy ? '正在切换…' : '进入该用户视角'}</button></footer>
  </section>;
}