"use client";

import { AlertTriangle, Info } from "lucide-react";

/**
 * SUPER_ADMIN cross-tenant 응답에 truncated/failed 정보가 있을 때 보여주는 안내 배너.
 *
 * 동작:
 *   - meta 가 없거나 truncated/failed 둘 다 0 이면 아무것도 렌더링 안 함 (자리 안 잡음)
 *   - truncated_company_codes 가 있으면 amber 톤 안내 ("N개 회사가 cap 에 걸려 일부만 표시")
 *   - failed_company_codes 가 있으면 red 톤 경고 ("N개 회사 조회 실패")
 *   - 두 가지 동시에 있을 수 있어 각각 독립 배너로 노출
 *
 * v5 디자인 토큰만 사용 — primary-color glow + amber/red 액센트, 솔리드 배경 (blur 금지).
 *
 * @see notes/hjjeong/2026-04-28-cross-tenant-execution-log.md §3.5
 */
export function CrossTenantBanner({ meta }: { meta?: Record<string, any> | null }) {
  if (!meta) return null;

  const truncated: string[] = Array.isArray(meta.truncated_company_codes) ? meta.truncated_company_codes : [];
  const failed: string[] = Array.isArray(meta.failed_company_codes) ? meta.failed_company_codes : [];
  const cap: number | undefined = meta.per_company_limit;

  if (truncated.length === 0 && failed.length === 0) return null;

  return (
    <div className="flex flex-col gap-1.5 mb-2">
      {truncated.length > 0 && (
        <div
          className="flex items-start gap-2 px-3 py-2 rounded-[10px] border text-[0.8125rem]"
          style={{
            background: "var(--v5-surface-solid)",
            borderColor: "rgba(var(--v5-amber-rgb),0.4)",
            boxShadow: "0 0 16px rgba(var(--v5-amber-rgb),0.15)",
            color: "var(--v5-text)",
          }}
        >
          <Info size={14} style={{ color: "rgb(var(--v5-amber-rgb))", marginTop: 2, flexShrink: 0 }} />
          <div className="flex-1 leading-snug">
            <span style={{ fontWeight: 600 }}>
              {truncated.length}개 회사가 회사당 {cap ?? 200}건 cap 에 걸려 일부만 표시 중
            </span>
            <span style={{ color: "var(--v5-text-sec)", marginLeft: 6 }}>
              ({truncated.join(", ")}) — 더 보려면 검색을 좁히거나 회사 도메인으로 전환
            </span>
          </div>
        </div>
      )}
      {failed.length > 0 && (
        <div
          className="flex items-start gap-2 px-3 py-2 rounded-[10px] border text-[0.8125rem]"
          style={{
            background: "var(--v5-surface-solid)",
            borderColor: "rgba(var(--v5-red-rgb),0.4)",
            boxShadow: "var(--v5-glow-danger)",
            color: "var(--v5-text)",
          }}
        >
          <AlertTriangle size={14} style={{ color: "rgb(var(--v5-red-rgb))", marginTop: 2, flexShrink: 0 }} />
          <div className="flex-1 leading-snug">
            <span style={{ fontWeight: 600 }}>{failed.length}개 회사 조회 실패</span>
            <span style={{ color: "var(--v5-text-sec)", marginLeft: 6 }}>
              ({failed.join(", ")}) — 다른 회사 결과는 정상 표시. 백엔드 로그 확인 필요
            </span>
          </div>
        </div>
      )}
    </div>
  );
}
