'use client';

import { useState } from 'react';
import { cn } from '@/lib/utils';
import { useRealtimeCoach } from './use-realtime-coach';
import { RealtimeCoachButton } from './realtime-coach-button';
import { CoachOverlay } from './coach-overlay';

type Provider = 'qwen' | 'gemini';
const PROVIDERS: { key: Provider; label: string }[] = [
  { key: 'qwen', label: 'Qwen' },
  { key: 'gemini', label: 'Gemini' },
];

/**
 * 实时坐席辅助教练(独立功能,详情页单一挂载点)。
 * 正中底部麦克风钮 + 字幕式浮层;空闲时可选实时模型(Qwen-Omni / Gemini Live)。
 */
export function RealtimeCoach({ planId }: { planId: string }) {
  const { state, start, stop, analyserRef } = useRealtimeCoach(planId);
  const [provider, setProvider] = useState<Provider>('qwen');
  const active = state.status !== 'idle';

  return (
    <>
      {/* 开启教练:背景磨砂虚化,突出字幕(pointer-events-none 不挡操作) */}
      {active && (
        <div className="absolute inset-0 z-10 bg-white/45 backdrop-blur-sm pointer-events-none animate-slideInUp" />
      )}
      {active && <CoachOverlay state={state} analyserRef={analyserRef} />}

      {/* 模型选择(仅空闲时,在麦克风钮上方) */}
      {!active && (
        <div className="absolute bottom-[4.25rem] left-1/2 -translate-x-1/2 z-20 inline-flex items-center rounded-full bg-slate-100/90 backdrop-blur-sm p-0.5 text-[11px] shadow-sm">
          {PROVIDERS.map((p) => (
            <button
              key={p.key}
              type="button"
              onClick={() => setProvider(p.key)}
              className={cn(
                'px-2.5 py-0.5 rounded-full transition-colors',
                provider === p.key
                  ? 'bg-white font-semibold text-slate-800 shadow-sm'
                  : 'text-slate-500 hover:text-slate-700',
              )}
            >
              {p.label}
            </button>
          ))}
        </div>
      )}

      <RealtimeCoachButton active={active} onClick={() => (active ? stop() : void start(provider))} />
    </>
  );
}
