kit.apiKey = 'your-api-key';  // O
// <tap-kit api-key="..."> 사용 금지

kit.userId = 'user-123';
// 또는 <tap-kit user-id="user-123">

kit.courseId = 'course-456';

kit.clipId = 'clip-789';

kit.clipPlayHead = 100;

kit.language = 'en';
// 또는 <tap-kit language="en">

kit.mode = 'floating';
// 또는 <tap-kit mode="sidebar">

kit.allowLayoutToggle = false;  // 레이아웃 토글 버튼 숨김

// HTMLVideoElement
kit.videoTarget = document.querySelector('video');

// VideoAdapter (YouTube, Vimeo 등)
kit.videoTarget = {
  getCurrentTime: () => player.getCurrentTime(),
  setCurrentTime: (time, clipId) => player.seekTo(time),  // clipId는 cross-clip seeking용 (optional)
};

await kit.ready;
kit.show();

interface SetCourseParams {
  userId?: string;
  courseId: string;    // 필수
  clipId: string;      // 필수
  clipPlayHead?: number;
}

kit.setCourse({
  courseId: 'course-999',
  clipId: 'clip-001',
  clipPlayHead: 50
});

kit.addEventListener('tap-kit:ready', () => {
  console.log('TapKit이 준비되었습니다!');
});

kit.addEventListener('tap-kit:error', (e) => {
  console.error('TapKit 오류:', e.detail.error);
});

interface SeekTimelineParams {
  clipPlayHead: number;  // 이동할 위치 (초 단위)
  clipId: string;
}

kit.events.seekTimeline({ clipPlayHead: 100, clipId: 'clip-789' });

const unsubscribe = kit.events.onTimelineSeek((playHead, clipId) => {
  console.log(`${playHead}초로 이동: ${clipId}`);
  videoElement.currentTime = playHead;
});

// 구독 해제
unsubscribe();

const unsubscribe = kit.events.onAlarmFadeIn((alarm) => {
  console.log('새 알림:', alarm.message);
});

interface VideoAdapter {
  getCurrentTime: () => number;
  setCurrentTime: (time: number, clipId?: string) => void;  // clipId는 cross-clip seeking용
}

kit.video.bind(videoElement);

// 나중에 강의 변경 시 자동으로 새 clipId 사용
kit.setCourse({ courseId: 'new-course', clipId: 'new-clip' });

kit.video.bind({
  getCurrentTime: () => player.getCurrentTime(),
  // clipId는 optional - cross-clip seeking 시 활용
  setCurrentTime: (time, clipId) => player.seekTo(time, true),
});

kit.video.unbind();

// npm 패키지
import { createTapKit } from '@coxwave/tap-kit';

const tapkit = createTapKit(options);
tapkit.mount();        // DOM에 추가 (필수)
await tapkit.ready;    // 초기화 완료 대기
tapkit.show();         // 채팅 창 표시

import { createTapKit } from '@coxwave/tap-kit';

const tapkit = createTapKit({
  apiKey: 'your-api-key',
  userId: 'user-123',
  courseId: 'course-456',
  clipId: 'clip-789',

  // 환경 설정 (테스트용)
  apiUrl: 'https://tapapistaging.coxwave.link',
  environment: 'staging',

  // 이벤트 핸들러
  onReady: () => console.log('Ready!'),
  onTimelineSeek: (time, clipId) => {
    videoElement.currentTime = time;
  },
});

// DOM에 추가 (필수)
tapkit.mount();

// 또는 특정 컨테이너에 추가
tapkit.mount(document.getElementById('chat-container'));

// 초기화 완료 대기
await tapkit.ready;

// 채팅 창 표시
tapkit.show();

// 정리
tapkit.destroy();

<script src="https://files.edutap.ai/tap-sdk/loader.js"></script>
<script>
  const kit = window.createTapKit({
    apiKey: 'your-api-key',
    userId: 'user-123',
    courseId: 'course-456',
    clipId: 'clip-789'
  });

  document.body.appendChild(kit);
  kit.ready.then(() => kit.show());
</script>

interface TapKitConfig {
  apiKey: string;
  userId?: string;
  courseId?: string;
  clipId?: string;
  clipPlayHead?: number;
  language?: 'ko' | 'en';
  mode?: 'inline' | 'floating' | 'sidebar';
  allowLayoutToggle?: boolean;
  videoTarget?: HTMLVideoElement | VideoAdapter;
  buttonId?: string;
  debug?: boolean;
}

interface TapKitElement extends HTMLElement {
  // Properties
  apiKey: string;
  userId?: string;
  courseId?: string;
  clipId?: string;
  clipPlayHead?: number;
  language?: 'ko' | 'en';
  mode?: 'inline' | 'floating' | 'sidebar';
  allowLayoutToggle: boolean;
  videoTarget?: HTMLVideoElement | VideoAdapter;
  buttonId?: string;
  debug: boolean;

  // Read-only
  readonly isOpen: boolean;
  readonly isInitialized: boolean;
  readonly ready: Promise<void>;

  // Methods
  show(): void;
  hide(): void;
  setCourse(params: SetCourseParams): void;

  // Sub-APIs
  readonly events: {
    seekTimeline(params: { clipPlayHead: number; clipId: string }): void;
    onTimelineSeek(handler: (playHead: number, clipId: string) => void): () => void;
    onAlarmFadeIn(handler: (messageInfo: AlarmMessageInfo) => void): () => void;
  };

  readonly video: {
    bind(config: HTMLVideoElement | VideoAdapter, clipId?: string): void;
    unbind(): void;
  };
}

interface VideoAdapter {
  getCurrentTime: () => number;
  /**
   * @param time - 이동할 시간 (초)
   * @param clipId - cross-clip seeking 시 대상 클립 ID (optional)
   */
  setCurrentTime: (time: number, clipId?: string) => void;
}