export interface TutorialHint {
  targetSelector: string;
  titleKey: string;
  descriptionKey: string;
  position: 'top' | 'bottom' | 'left' | 'right';
  noteKey?: string;
  variant?: 'bubble';
  clickToAdvance?: boolean;
  advanceSelector?: string;
  noSpotlight?: boolean;
  spotlightPadding?: number;
  spotlightPaddingOverride?: { top?: number; right?: number; bottom?: number; left?: number };
}

export interface TutorialStepDef {
  key: string;
  hints: TutorialHint[];
}

export const TUTORIAL_KEYS = {
  LANDING: 'landing',
  ANALYSIS: 'analysis',
  ASSET: 'asset',
  SOUND: 'sound',
  SOUND_LYRICS: 'soundLyrics',
  SOUND_AUDIO: 'soundAudio',
  GENERATING:'generating',
  COMPLETION: 'completion',
  MY_INFO: 'myInfo',
  ADO2_CONTENTS: 'ado2Contents',
  UPLOAD_MODAL: 'uploadModal',
  UPLOAD_FORM: 'uploadForm',
  DASHBOARD: 'dashboard',
  CONTENT_CALENDAR: 'contentCalendar',
  FEEDBACK: 'feedback',
} as const;

// 같은 페이지에 속하는 튜토리얼 키 그룹 — 진행 카운터를 합산해서 표시
export const TUTORIAL_PAGE_GROUPS: string[][] = [
  [TUTORIAL_KEYS.SOUND, TUTORIAL_KEYS.SOUND_LYRICS, TUTORIAL_KEYS.SOUND_AUDIO],
  [TUTORIAL_KEYS.GENERATING, TUTORIAL_KEYS.COMPLETION],
  [TUTORIAL_KEYS.UPLOAD_MODAL, TUTORIAL_KEYS.UPLOAD_FORM],
];

export const tutorialSteps: TutorialStepDef[] = [
  {
    key: TUTORIAL_KEYS.LANDING,
    hints: [
      {
        targetSelector: '.hero-dropdown-trigger',
        titleKey: 'tutorial.landing.dropdown.title',
        descriptionKey: 'tutorial.landing.dropdown.desc',
        position: 'left',
        clickToAdvance: false,
        noSpotlight: true,
        variant: 'bubble',
      },
      {
        targetSelector: '.hero-input-wrapper',
        titleKey: 'tutorial.landing.field.title',
        descriptionKey: 'tutorial.landing.field.desc',
        position: 'right',
        clickToAdvance: false,
        noSpotlight: true,
        variant: 'bubble',
      },
      {
        targetSelector: '.hero-button',
        titleKey: 'tutorial.landing.button.title',
        descriptionKey: 'tutorial.landing.button.desc',
        position: 'right',
        clickToAdvance: true,
        noSpotlight: true,
        variant: 'bubble',
      },
    ],
  },
  {
    key: TUTORIAL_KEYS.ASSET,
    hints: [
      {
        targetSelector: '.asset-column.asset-column-left',
        titleKey: 'tutorial.asset.image.title',
        descriptionKey: 'tutorial.asset.image.desc',
        position: 'left',
        clickToAdvance: false,
      },
      {
        targetSelector: '.asset-upload-zone',
        titleKey: 'tutorial.asset.upload.title',
        descriptionKey: 'tutorial.asset.upload.desc',
        position: 'left',
        clickToAdvance: false,
      },
      {
        targetSelector: '.asset-ratio-section',
        titleKey: 'tutorial.asset.ratio.title',
        descriptionKey: 'tutorial.asset.ratio.desc',
        position: 'left',
        clickToAdvance: false,
      },
      {
        targetSelector: '.asset-next-button',
        titleKey: 'tutorial.asset.next.title',
        descriptionKey: 'tutorial.asset.next.desc',
        position: 'top',
        clickToAdvance: true,
      },
    ],
  },
  {
    key: TUTORIAL_KEYS.SOUND,
    hints: [
      {
        targetSelector: '.genre-grid',
        titleKey: 'tutorial.sound.genre.title',
        descriptionKey: 'tutorial.sound.genre.desc',
        position: 'top',
        clickToAdvance: false,
      },
      {
        targetSelector: '.language-grid',
        titleKey: 'tutorial.sound.language.title',
        descriptionKey: 'tutorial.sound.language.desc',
        position: 'top',
        clickToAdvance: false,
      },
      {
        targetSelector: '.btn-generate-sound',
        titleKey: 'tutorial.sound.generate.title',
        descriptionKey: 'tutorial.sound.generate.desc',
        position: 'right',
        clickToAdvance: true,
      },
    ],
  },
  {
    key: TUTORIAL_KEYS.SOUND_LYRICS,
    hints: [
      {
        targetSelector: '.lyrics-display',
        titleKey: 'tutorial.sound.lyrics.title',
        descriptionKey: 'tutorial.sound.lyrics.desc',
        position: 'left',
        clickToAdvance: false,
      },
      {
        targetSelector: '.status-message-new',
        titleKey: 'tutorial.sound.lyricsWait.title',
        descriptionKey: 'tutorial.sound.lyricsWait.desc',
        position: 'right',
        clickToAdvance: false,
      },
    ],
  },
  {
    key: TUTORIAL_KEYS.SOUND_AUDIO,
    hints: [
      {
        targetSelector: '.audio-player',
        titleKey: 'tutorial.sound.audioPlayer.title',
        descriptionKey: 'tutorial.sound.audioPlayer.desc',
        position: 'left',
        clickToAdvance: false,
      },
      {
        targetSelector: '.btn-video-generate',
        titleKey: 'tutorial.sound.video.title',
        descriptionKey: 'tutorial.sound.video.desc',
        position: 'top',
        clickToAdvance: true,
      },
    ],
  },
  {
    key: TUTORIAL_KEYS.MY_INFO,
    hints: [
      {
        targetSelector: '.youtube-connect-section',
        titleKey: 'tutorial.myInfo.myInfo.title',
        descriptionKey: 'tutorial.myInfo.myInfo.desc',
        position: 'top',
        clickToAdvance: false,
      },
      {
        targetSelector: '.myinfo-social-btn',
        titleKey: 'tutorial.myInfo.connect.title',
        descriptionKey: 'tutorial.myInfo.connect.desc',
        noteKey: 'tutorial.myInfo.connect.note',
        position: 'top',
        clickToAdvance: true,
      },
      {
        targetSelector: '.myinfo-connected-accounts',
        titleKey: 'tutorial.myInfo.connected.title',
        descriptionKey: 'tutorial.myInfo.connected.desc',
        position: 'top',
        clickToAdvance: false,
      },
      {
        targetSelector: '#sidebar-ado2-contents',
        titleKey: 'tutorial.myInfo.ado2.title',
        descriptionKey: 'tutorial.myInfo.ado2.desc',
        position: 'right',
        clickToAdvance: true,
      },
    ],
  },
  {
    key: TUTORIAL_KEYS.ADO2_CONTENTS,
    hints: [
      {
        targetSelector: '.ado2-content-card',
        titleKey: 'tutorial.ado2.list.title',
        descriptionKey: 'tutorial.ado2.list.desc',
        position: 'right',
        clickToAdvance: false,
      },
      {
        targetSelector: '.content-upload-btn',
        titleKey: 'tutorial.ado2.download.title',
        descriptionKey: 'tutorial.ado2.download.desc',
        position: 'right',
        clickToAdvance: false,
      },
      {
        targetSelector: '.content-delete-btn',
        titleKey: 'tutorial.ado2.delete.title',
        descriptionKey: 'tutorial.ado2.delete.desc',
        position: 'right',
        clickToAdvance: false,
      },
      {
        targetSelector: '.content-download-btn',
        titleKey: 'tutorial.ado2.upload.title',
        descriptionKey: 'tutorial.ado2.upload.desc',
        position: 'right',
        clickToAdvance: true,
      },
    ],
  },
  {
    key: TUTORIAL_KEYS.GENERATING,
    hints:[
      {
        targetSelector: '.comp2-info-section',
        titleKey: 'tutorial.completion.contentInfo.title',
        descriptionKey: 'tutorial.completion.contentInfo.desc',
        position: 'left',
      },
      {
        targetSelector: '.comp2-video-section',
        titleKey: 'tutorial.completion.generating.title',
        descriptionKey: 'tutorial.completion.generating.desc',
        position: 'right',
      }
    ]
  },
  {
    key: TUTORIAL_KEYS.COMPLETION,
    hints: [
      {
        targetSelector: '.comp2-video-section',
        titleKey: 'tutorial.completion.completion.title',
        descriptionKey: 'tutorial.completion.completion.desc',
        position: 'right',
        clickToAdvance: false,
      },
      {
        targetSelector: '#sidebar-my-info',
        titleKey: 'tutorial.completion.myInfo.title',
        descriptionKey: 'tutorial.completion.myInfo.desc',
        position: 'right',
        clickToAdvance: true,
      },
    ],
  },
  {
    key: TUTORIAL_KEYS.UPLOAD_MODAL,
    hints: [
      {
        targetSelector: '.social-posting-content',
        titleKey: 'tutorial.upload.seo.title',
        descriptionKey: 'tutorial.upload.seo.desc',
        position: 'right',
        clickToAdvance: false,
      },
    ],
  },
  {
    key: TUTORIAL_KEYS.UPLOAD_FORM,
    hints: [
      {
        targetSelector: '.social-posting-form',
        titleKey: 'tutorial.upload.required.title',
        descriptionKey: 'tutorial.upload.required.desc',
        position: 'left',
        clickToAdvance: false,
      },
      {
        targetSelector: '.social-posting-radio-group',
        titleKey: 'tutorial.upload.schedule.title',
        descriptionKey: 'tutorial.upload.schedule.desc',
        position: 'left',
        clickToAdvance: false,
      },
      {
        targetSelector: '.social-posting-btn:not(.cancel)',
        titleKey: 'tutorial.upload.submit.title',
        descriptionKey: 'tutorial.upload.submit.desc',
        position: 'top',
        clickToAdvance: true,
      },
    ],
  },
  {
    key: TUTORIAL_KEYS.DASHBOARD,
    hints: [
      {
        targetSelector: '.stats-grid-8',
        titleKey: 'tutorial.dashboard.metrics.title',
        descriptionKey: 'tutorial.dashboard.metrics.desc',
        position: 'bottom',
      },
      {
        targetSelector: '.yoy-chart-card',
        titleKey: 'tutorial.dashboard.chart.title',
        descriptionKey: 'tutorial.dashboard.chart.desc',
        position: 'right',
      },
      {
        targetSelector: '.tutorial-center-anchor',
        titleKey: 'tutorial.dashboard.more.title',
        descriptionKey: 'tutorial.dashboard.more.desc',
        position: 'bottom',
        clickToAdvance: false,
      },
    ],
  },
  {
    key: TUTORIAL_KEYS.CONTENT_CALENDAR,
    hints: [
      {
        targetSelector: '.calendar-grid-area',
        titleKey: 'tutorial.contentCalendar.grid.title',
        descriptionKey: 'tutorial.contentCalendar.grid.desc',
        position: 'top',
        clickToAdvance: false,
      },
      {
        targetSelector: '.calendar-side-panel',
        titleKey: 'tutorial.contentCalendar.panel.title',
        descriptionKey: 'tutorial.contentCalendar.panel.desc',
        position: 'left',
        clickToAdvance: false,
      },
    ],
  },
  {
    key: TUTORIAL_KEYS.FEEDBACK,
    hints: [
      {
        targetSelector: '.tutorial-center-anchor',
        titleKey: 'tutorial.feedback.complete.title',
        descriptionKey: 'tutorial.feedback.complete.desc',
        position: 'bottom',
        clickToAdvance: false,
      },
      {
        targetSelector: '.sidebar-inquiry-btn',
        titleKey: 'tutorial.feedback.title',
        descriptionKey: 'tutorial.feedback.desc',
        position: 'right',
      },
    ],
  },
];