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');

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

console.log(TapKit.version);  // "2.1.0"

console.log(TapKit.buildEnv);  // "prod"

kit.apiUrl = 'https://tapapistaging.coxwave.link';

kit.environment = 'staging';

// ❌ 더 이상 사용하지 마세요
kit.root = document.getElementById('chat-container');

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 IframeRetryEvent {
  attempt: number;      // 현재 재시도 횟수
  error: Error;         // 발생한 에러
  nextDelay: number;    // 다음 재시도까지 대기 시간 (ms)
}

kit.addEventListener('tap-kit:iframe-retry', (e) => {
  console.log(`iframe 재시도 중... (${e.detail.attempt}번째, ${e.detail.nextDelay}ms 후 재시도)`);
  console.error('에러:', e.detail.error.message);
});

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 VideoPlayerAdapter {
  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;
}

interface CreateTapKitOptions {
  // Required
  apiKey: string;

  // Course Information
  userId?: string;
  courseId?: string;
  clipId?: string;
  clipPlayHead?: number;

  // Display Options
  language?: 'ko' | 'en';
  mode?: 'inline' | 'floating' | 'sidebar';
  allowLayoutToggle?: boolean;
  videoTarget?: HTMLVideoElement | VideoPlayerAdapter;
  buttonId?: string;
  debug?: boolean;

  // Advanced Options (테스트/개발용)
  apiUrl?: string;
  tapUrl?: string;
  environment?: 'dev' | 'prod' | 'staging' | 'demo';

  // Event Handlers
  onReady?: () => void;
  onError?: (error: Error) => void;
  onTimelineSeek?: (clipPlayHead: number, clipId: string) => void;
  onAlarmFadeIn?: (messageInfo: AlarmMessageInstanceType) => void;
}

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 | VideoPlayerAdapter;
  buttonId?: string;
  debug: boolean;

  // Advanced Properties
  apiUrl?: string;
  tapUrl?: string;
  environment?: 'dev' | 'prod' | 'staging' | 'demo';
  /** @deprecated This property no longer affects positioning */
  root?: HTMLElement;

  // 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: AlarmMessageInstanceType) => void): () => void;
  };

  /** @deprecated Use videoTarget property instead */
  readonly video: {
    bind(config: HTMLVideoElement | VideoPlayerAdapter, clipId?: string): void;
    unbind(): void;
  };
}

interface AlarmMessageInstanceType {
  type: 'basic:welcome' | 'basic:default' | 'feat:quiz' | 'feat:guide' | 'feat:progress' | 'custom:cheer';
  content: AlarmElement;
}

interface AlarmElement {
  tag: string;
  props?: Record<string, unknown>;
  children?: (AlarmElement | string)[];
  payload?: {
    type: 'startChat';
    message: string;
    pingMessageId?: string;
  };
}

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

/** HTMLVideoElement 또는 커스텀 어댑터 */
type VideoPlayerConfig = HTMLVideoElement | VideoPlayerAdapter;

<!-- TapKit과 함께 사용 (자동 토글) -->
<tap-kit user-id="user-123" course-id="course-456" clip-id="clip-789"></tap-kit>
<tap-button position="bottom-right" size="large"></tap-button>

<script>
  const kit = document.querySelector('tap-kit');
  kit.apiKey = 'your-api-key';
</script>

<tap-button position="bottom-left"></tap-button>

<!-- custom 위치 예시 -->
<tap-button position="custom" style="top: 100px; right: 50px;"></tap-button>

<tap-button size="small"></tap-button>

<!-- 플로팅 모드 (기본) -->
<tap-button></tap-button>

<!-- 정적 모드: 일반 요소처럼 배치 -->
<tap-button floating="false"></tap-button>

<tap-button language="en"></tap-button>

<tap-button tutor-name="에듀탭 선생님"></tap-button>

<tap-button position="bottom-right">
  <img src="/my-tutor-icon.svg" alt="AI 튜터" />
</tap-button>

tap-button::part(button) {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border-radius: 50%;
}

tap-button::part(tooltip) {
  background: #1f2937;
  color: white;
}

const button = document.querySelector('tap-button');
button.addEventListener('tap-button:click', (e) => {
  console.log('버튼 클릭됨', e.detail);
});