'use client';

/**
 * 全局横幅：用户已登录但**没有任何组织归属**时显示。
 *
 * 触发条件（全部满足）：
 *   1. auth 已完成（不在 loading）
 *   2. 用户已登录（user.id 存在）
 *   3. OrganizationContext loading 完成
 *   4. organizations.length === 0
 *
 * 原因：FFAI 是 multi-org 内部工具，几乎所有 API 都需要 `X-Organization-Id` header。
 * 没有 org 归属的 user → 前端无法注入 header → 后端 400 「organizationId required」
 * → 用户看到"按钮没反应"的灾难体验。这条 banner 把根因明确告诉用户。
 *
 * 详见 .learnings/ERRORS/ERR-20260518-004-reset-db-missing-organization-seed.md
 */

import { useAuth } from '@/lib/auth';
import { useOrganization } from '@/contexts/OrganizationContext';
import { useTranslation } from '@/hooks/useTranslation';
import { AlertTriangle } from 'lucide-react';

export function NoOrganizationBanner() {
  const { user, loading: authLoading } = useAuth();
  const { organizations, loading: orgLoading } = useOrganization();
  const { t } = useTranslation();

  if (authLoading || orgLoading) return null;
  if (!user?.id) return null;
  if (organizations.length > 0) return null;

  return (
    <div
      role="alert"
      data-testid="no-organization-banner"
      className="sticky top-0 z-50 flex items-center justify-center gap-2 border-b border-red-200 bg-red-50 px-4 py-2 text-xs text-red-800 dark:border-red-900 dark:bg-red-950 dark:text-red-200"
    >
      <AlertTriangle className="h-3.5 w-3.5 shrink-0" aria-hidden />
      <span>{t.common.noOrganizationBanner}</span>
    </div>
  );
}