import { driver } from 'driver.js';
import { useGuideTourStore } from '@/stores';
import 'driver.js/dist/driver.css';

// 引导步骤接口
interface TourStep {
  element: string;
  popover: {
    title: string;
    description: string;
    side?: 'top' | 'right' | 'bottom' | 'left';
    align?: 'start' | 'center' | 'end';
  };
  onHighlightStarted?: () => void;
  onDeselected?: () => void;
}

export function useGuideTour() {
  const guideTourStore = useGuideTourStore();

  // 创建 driver 实例
  const driverInstance = ref<ReturnType<typeof driver> | null>(null);

  // 初始化 driver
  function initDriver() {
    driverInstance.value = driver({
      showProgress: true,
      animate: true,
      allowClose: true,
      overlayClickNext: false,
      stagePadding: 10,
      stageRadius: 8,
      popoverClass: 'guide-tour-popover',
      nextBtnText: '下一步',
      prevBtnText: '上一步',
      doneBtnText: '完成',
      progressText: '{{current}} / {{total}}',
      onDestroyed: () => {
        guideTourStore.setCurrentPhase('idle');
      },
    });
  }

  // Header 区域引导步骤（包含聊天功能）
  const headerSteps: TourStep[] = [
    {
      element: '[data-tour="tutorial-btn"]',
      popover: {
        title: '新手教程',
        description: '欢迎使用意心AI-YiXinAI！点击这里可以随时重新查看新手引导教程，帮助您快速了解系统功能。',
        side: 'bottom',
        align: 'center',
      },
    },
    {
      element: '[data-tour="model-select"]',
      popover: {
        title: '模型选择',
        description: '点击这里可以切换不同的AI模型，每个模型有不同的特点和能力。VIP用户可以更多高级模型。',
        side: 'top',
        align: 'start',
      },
    },
    {
      element: '[data-tour="chat-sender"]',
      popover: {
        title: '对话输入框',
        description: '在这里输入您的问题或指令，按回车或点击发送按钮即可与AI对话。支持语音输入',
        side: 'top',
        align: 'center',
      },
    },
    {
      element: '[data-tour="announcement-btn"]',
      popover: {
        title: '公告/活动',
        description: '这里会显示系统公告和最新活动信息，请及时查看以获取重要通知和福利活动。',
        side: 'bottom',
        align: 'center',
      },
    },
    {
      element: '[data-tour="ai-tutorial-link"]',
      popover: {
        title: 'AI使用教程',
        description: '点击这里可以跳转到YiXinAI玩法指南专栏，学习更多AI使用技巧和最佳实践。',
        side: 'bottom',
        align: 'center',
      },
    },
    {
      element: '[data-tour="buy-btn"]',
      popover: {
        title: '立即购买',
        description: '点击这里可以成为VIP会员和升级尊享服务，享受更多专属服务和权益。',
        side: 'bottom',
        align: 'center',
      },
    },
    {
      element: '[data-tour="user-avatar"]',
      popover: {
        title: '控制台',
        description: '点击头像可以进入控制台，管理您的账户信息、查看使用统计、API密钥等。接下来将为您详细介绍用户中心的各项功能。',
        side: 'bottom',
        align: 'end',
      },
    },
  ];

  // 用户中心弹窗引导步骤
  const userCenterSteps: TourStep[] = [
    {
      element: '[data-tour="user-nav-menu"]',
      popover: {
        title: '导航菜单',
        description: '左侧是功能导航菜单，您可以切换不同的功能模块。接下来我们将逐一介绍各个功能。',
        side: 'right',
        align: 'start',
      },
    },
    {
      element: '[data-tour="nav-user"]',
      popover: {
        title: '用户信息',
        description: '查看您的个人信息，包括头像、昵称等。',
        side: 'right',
        align: 'center',
      },
      onHighlightStarted: () => {
        guideTourStore.changeUserCenterNav('user');
      },
    },
    {
      element: '[data-tour="nav-apiKey"]',
      popover: {
        title: 'API密钥',
        description: '管理您的API密钥，用于第三方接入和开发集成。',
        side: 'right',
        align: 'center',
      },
      onHighlightStarted: () => {
        guideTourStore.changeUserCenterNav('apiKey');
      },
    },
    {
      element: '[data-tour="nav-rechargeLog"]',
      popover: {
        title: '充值记录',
        description: '查看您的充值历史和交易记录，了解消费明细。',
        side: 'right',
        align: 'center',
      },
      onHighlightStarted: () => {
        guideTourStore.changeUserCenterNav('rechargeLog');
      },
    },
    {
      element: '[data-tour="nav-usageStatistics"]',
      popover: {
        title: '用量统计',
        description: '查看您的AI模型使用情况和消费统计，掌握使用详情。',
        side: 'right',
        align: 'center',
      },
      onHighlightStarted: () => {
        guideTourStore.changeUserCenterNav('usageStatistics');
      },
    },
    {
      element: '[data-tour="nav-premiumService"]',
      popover: {
        title: '尊享服务',
        description: '了解尊享服务包专属特权和服务，我们将详细介绍这个页面的功能。',
        side: 'right',
        align: 'center',
      },
      onHighlightStarted: () => {
        guideTourStore.changeUserCenterNav('premiumService');
      },
    },
    {
      element: '[data-tour="premium-package-info"]',
      popover: {
        title: '套餐信息',
        description: '这里显示您的尊享服务套餐详情，包括总额度、已使用额度、剩余额度等信息。',
        side: 'left',
        align: 'start',
      },
    },
    {
      element: '[data-tour="premium-usage-list"]',
      popover: {
        title: '额度明细列表',
        description: '查看您的额度使用明细记录，包括每次使用的时间、消耗的额度等详细信息。',
        side: 'left',
        align: 'start',
      },
    },
    {
      element: '[data-tour="nav-dailyTask"]',
      popover: {
        title: '每日任务',
        description: '完成每日任务获取额外奖励，提升您的使用体验。',
        side: 'right',
        align: 'center',
      },
      onHighlightStarted: () => {
        guideTourStore.changeUserCenterNav('dailyTask');
      },
    },
    {
      element: '[data-tour="nav-cardFlip"]',
      popover: {
        title: '每周邀请',
        description: '邀请好友加入，获得丰厚奖励。接下来将详细介绍这个页面的各项功能。',
        side: 'right',
        align: 'center',
      },
      onHighlightStarted: () => {
        guideTourStore.changeUserCenterNav('cardFlip');
      },
    },
    {
      element: '[data-tour="card-flip-area"]',
      popover: {
        title: '每周免费翻牌',
        description: '每周您有10次免费翻牌机会，前7次为基础免费次数。翻牌可获得Token奖励，幸运值随着翻牌次数增加而提升。',
        side: 'left',
        align: 'start',
      },
    },
    {
      element: '[data-tour="use-invite-code-btn"]',
      popover: {
        title: '使用邀请码',
        description: '输入好友的邀请码，双方各增加1次翻牌机会！填写邀请码后，第8-10次翻牌必定中奖，每次奖励最大额度翻倍！',
        side: 'left',
        align: 'center',
      },
    },
    {
      element: '[data-tour="my-invite-code-btn"]',
      popover: {
        title: '我的邀请码',
        description: '生成您的专属邀请码，分享给好友。好友使用您的邀请码后，双方各获得1次额外翻牌机会。您可以复制邀请码或分享带邀请码的链接。',
        side: 'left',
        align: 'center',
      },
    },
  ];

  // 开始 Header 引导
  async function startHeaderTour() {
    if (!driverInstance.value) {
      initDriver();
    }

    guideTourStore.setCurrentPhase('header');

    // 等待 DOM 更新
    await nextTick();

    // 配置完成回调，触发用户中心引导
    driverInstance.value?.setConfig({
      onDestroyStarted: () => {
        if (!driverInstance.value?.hasNextStep()) {
          // Header 引导完成，触发打开用户中心弹窗
          guideTourStore.triggerUserCenterTour();
        }
        driverInstance.value?.destroy();
      },
    });

    driverInstance.value?.setSteps(headerSteps);
    driverInstance.value?.drive();
  }

  // 开始用户中心引导
  async function startUserCenterTour() {
    if (!driverInstance.value) {
      initDriver();
    }

    guideTourStore.setCurrentPhase('userCenter');

    // 等待弹窗完全打开
    await new Promise(resolve => setTimeout(resolve, 500));

    // 配置完成回调，关闭弹窗并标记引导完成
    driverInstance.value?.setConfig({
      onDestroyStarted: () => {
        if (!driverInstance.value?.hasNextStep()) {
          // 用户中心引导完成，先关闭弹窗
          guideTourStore.closeUserCenterDialog();

          // 等待弹窗关闭后标记整个引导流程完成
          setTimeout(() => {
            guideTourStore.markTourCompleted();
          }, 500);
        }
        driverInstance.value?.destroy();
      },
    });

    driverInstance.value?.setSteps(userCenterSteps);
    driverInstance.value?.drive();
  }

  // 开始完整引导流程
  async function startFullTour() {
    await startHeaderTour();
  }

  // 销毁 driver 实例
  function destroyTour() {
    if (driverInstance.value) {
      driverInstance.value.destroy();
      driverInstance.value = null;
    }
  }

  // 组件卸载时清理
  onUnmounted(() => {
    destroyTour();
  });

  return {
    startHeaderTour,
    startUserCenterTour,
    startFullTour,
    destroyTour,
  };
}