'use client';

import { LogOut } from 'lucide-react';
import { useAuthStore, visibleClinics } from '@/stores/auth-store';
import { userDisplayName, roleNameZh } from '@/lib/utils';
import { isEmbedded } from '@/lib/embed';

/**
 * 用户名 + 头像 + 退出三件套(各 header 共用,避免各改各的漂移)。
 *
 * 嵌入(iframe)时整体隐藏 —— 宿主系统已有用户身份与登出入口,PAC 不再重复;
 * 且嵌入态点 PAC 登出只会清 PAC token、把人踹回登录兜底,体验很怪,故一并隐。
 */
export function IdentityCluster() {
  const user = useAuthStore((s) => s.user);
  if (isEmbedded()) return null;
  const name = userDisplayName(user);
  return (
    <>
      <div className="hidden md:block text-right text-[11.5px] leading-tight text-slate-500">
        <div className="font-medium text-slate-700">{name}</div>
        <div className="nums">
          {visibleClinics(user).length} 个诊所 · {roleNameZh(user?.role)}
        </div>
      </div>
      <span className="inline-flex h-8 w-8 flex-none items-center justify-center rounded-full bg-gradient-to-br from-brand-400 to-brand-600 text-[12px] font-bold text-white">
        {name.charAt(0).toUpperCase()}
      </span>
      <button
        type="button"
        title="退出登录"
        aria-label="退出登录"
        onClick={() => useAuthStore.getState().clear()}
        className="inline-flex h-8 w-8 flex-none items-center justify-center rounded-md text-slate-400 transition-colors hover:bg-rose-50 hover:text-rose-600"
      >
        <LogOut className="h-4 w-4" />
      </button>
    </>
  );
}
