import type { TranslationKey } from '@/lib/i18n/types';
import { useDeviceStore } from '@/stores/device-store';
import { useInferenceStore } from '@/stores/inference-store';

export interface TourStep {
  id: string;
  page: string;
  elementSelector: string;
  titleKey: TranslationKey;
  descriptionKey: TranslationKey;
  pendingDescKey: TranslationKey;
  side: 'top' | 'bottom' | 'left' | 'right';
  /** Returns true when the step's goal has been achieved */
  isComplete: () => boolean;
}

export const tourSteps: TourStep[] = [
  {
    id: 'scan-devices',
    page: '/devices',
    elementSelector: '[data-tour-id="scan-devices-btn"]',
    titleKey: 'tour.step1Title',
    descriptionKey: 'tour.step1Desc',
    pendingDescKey: 'tour.step1Pending',
    side: 'bottom',
    isComplete: () => useDeviceStore.getState().devices.length > 0,
  },
  {
    id: 'connect-device',
    page: '/devices',
    elementSelector: '[data-tour-id="connect-device-btn"]',
    titleKey: 'tour.step2Title',
    descriptionKey: 'tour.step2Desc',
    pendingDescKey: 'tour.step2Pending',
    side: 'bottom',
    isComplete: () => {
      const devices = useDeviceStore.getState().devices;
      return devices.some((d) => d.status === 'connected' || d.status === 'flashing' || d.status === 'inferencing');
    },
  },
  {
    id: 'manage-device',
    page: '/devices',
    elementSelector: '[data-tour-id="manage-device-btn"]',
    titleKey: 'tour.step3Title',
    descriptionKey: 'tour.step3Desc',
    pendingDescKey: 'tour.step3Pending',
    side: 'bottom',
    // "Manage" is always available once a device is connected (previous step guarantees this)
    isComplete: () => {
      const devices = useDeviceStore.getState().devices;
      return devices.some((d) => d.status === 'connected' || d.status === 'flashing' || d.status === 'inferencing');
    },
  },
  {
    id: 'flash-model',
    page: '/devices/__DEVICE_ID__',
    elementSelector: '[data-tour-id="flash-model-btn"]',
    titleKey: 'tour.step4Title',
    descriptionKey: 'tour.step4Desc',
    pendingDescKey: 'tour.step4Pending',
    side: 'bottom',
    isComplete: () => {
      const device = useDeviceStore.getState().selectedDevice;
      return !!device?.flashedModel;
    },
  },
  {
    id: 'open-workspace',
    page: '/devices/__DEVICE_ID__',
    elementSelector: '[data-tour-id="open-workspace-btn"]',
    titleKey: 'tour.step5Title',
    descriptionKey: 'tour.step5Desc',
    pendingDescKey: 'tour.step5Pending',
    side: 'bottom',
    // Workspace button only shows when flashedModel exists, so same condition
    isComplete: () => {
      const device = useDeviceStore.getState().selectedDevice;
      return !!device?.flashedModel;
    },
  },
  {
    id: 'start-inference',
    page: '/workspace/__DEVICE_ID__',
    elementSelector: '[data-tour-id="start-inference-btn"]',
    titleKey: 'tour.step6Title',
    descriptionKey: 'tour.step6Desc',
    pendingDescKey: 'tour.step6Pending',
    side: 'bottom',
    isComplete: () => useInferenceStore.getState().isRunning,
  },
];