'use client';
/**
 * FlywheelBanner — 飞轮注入提示横幅
 * 飞轮隐形：无"训练AI"按钮，只在生成时显示"本次已注入"
 * 对应 flywheel_injected SSE 事件 + GET /preference/context
 */
import { PreferenceContext } from '@/types/index';

interface FlywheelBannerProps {
  context: PreferenceContext;
}

export function FlywheelBanner({ context }: FlywheelBannerProps) {
  if (!context.injected_count && !context.recent_preference) return null;

  return (
    <div
      role="status"
      aria-live="polite"
      className="bg-brand-green-light border border-brand-green/30 px-4 py-2 text-sm text-brand-green-dark flex items-start gap-2"
    >
      <span aria-hidden="true" className="mt-0.5 flex-shrink-0">🌿</span>
      <div>
        <span className="font-medium">本次已注入：</span>
        {context.recent_preference && (
          <span>{context.recent_preference}</span>
        )}
        {context.reject_reasons?.length > 0 && (
          <span className="ml-2 text-text-secondary">
            · 打回原因：{context.reject_reasons.slice(0, 2).join('；')}
          </span>
        )}
      </div>
    </div>
  );
}

/**
 * FlywheelBannerFromSse — SSE flywheel_injected 事件版本
 */
interface FlywheelBannerFromSseProps {
  recentPreference: string;
  rejectReasons: string[];
}

export function FlywheelBannerFromSse({ recentPreference, rejectReasons }: FlywheelBannerFromSseProps) {
  return (
    <div
      role="status"
      aria-live="polite"
      className="bg-brand-green-light border border-brand-green/30 px-4 py-2 text-sm text-brand-green-dark flex items-start gap-2"
    >
      <span aria-hidden="true" className="mt-0.5 flex-shrink-0">🌿</span>
      <div>
        <span className="font-medium">本次已注入：</span>
        {recentPreference && <span>{recentPreference}</span>}
        {rejectReasons?.length > 0 && (
          <span className="ml-2 text-text-secondary">
            · 打回原因：{rejectReasons.slice(0, 2).join('；')}
          </span>
        )}
      </div>
    </div>
  );
}
