import { ActivityTracker } from '@vigneshwaranbs/activity-tracker';

// Initialize tracker
const tracker = new ActivityTracker({
  appId: 'my-app',
  apiEndpoint: 'https://api.yourapp.com/api/user/activity',
  getAuthToken: () => localStorage.getItem('userId') || ''
});

// Start tracking
tracker.start();

// Stop tracking (cleanup)
tracker.stop();

import { useEffect } from 'react';
import { ActivityTracker } from '@vigneshwaranbs/activity-tracker';

function App() {
  useEffect(() => {
    const tracker = new ActivityTracker({
      appId: 'my-react-app',
      apiEndpoint: 'https://api.yourapp.com/api/user/activity',
      getAuthToken: () => localStorage.getItem('userId') || '',
      
      // Callbacks
      onActive: (data) => {
        console.log('✅ User is active', data);
      },
      onInactive: (data) => {
        console.warn('⚠️ User inactive for', data.inactivityDuration / 60000, 'minutes');
      }
    });

    tracker.start();

    return () => tracker.stop(); // Cleanup on unmount
  }, []);

  return <div>Your App</div>;
}

import { DetailedActivityTracker } from '@vigneshwaranbs/activity-tracker';

const tracker = new DetailedActivityTracker({
  // Phase 1 config (required)
  appId: 'my-app',
  apiEndpoint: 'https://api.yourapp.com/api/user/activity',
  authToken: localStorage.getItem('authToken'),
  
  // Phase 2 config (new)
  trackClicks: true,
  trackScrolls: true,
  trackNavigation: true,
  trackViewport: true,
  eventsApiEndpoint: 'https://api.yourapp.com/api/user/activity/events',
  eventBatchInterval: 30000,  // 30 seconds
  maxEventsPerBatch: 100,
  
  // Phase 2 callbacks
  onEventTracked: (event) => {
    console.log('Event tracked:', event);
  },
  onEventBatchSent: (response) => {
    console.log('Batch sent:', response.eventsReceived, 'events');
  }
});

tracker.start();

{
  eventId: "evt-1703456789-abc123",
  eventType: "click",
  timestamp: 1703456789000,
  url: "/products",
  element: "button",
  elementId: "buy-now-btn",
  elementClass: "btn btn-primary",
  text: "Buy Now",
  xpath: "/html/body/div[1]/button",
  x: 350,
  y: 250
}

{
  eventId: "evt-1703456790-def456",
  eventType: "scroll",
  timestamp: 1703456790000,
  url: "/products",
  scrollDepth: 75,  // 75% down page
  scrollPosition: 1200,
  pageHeight: 1600,
  viewportHeight: 800,
  sectionsViewed: ["hero", "features", "pricing"]
}

{
  eventId: "evt-1703456791-ghi789",
  eventType: "navigation",
  timestamp: 1703456791000,
  url: "/checkout",
  fromUrl: "/products",
  toUrl: "/checkout",
  timeOnPage: 45000  // 45 seconds on previous page
}

{
  eventId: "evt-1703456792-jkl012",
  eventType: "viewport",
  timestamp: 1703456792000,
  url: "/products",
  elementsInView: [
    {
      id: "product-card-1",
      class: "product-card",
      tag: "div",
      text: "Premium Product",
      timeInView: 5000  // 5 seconds
    }
  ]
}

{
  // Feature Flags
  trackClicks?: boolean;           // Enable click tracking (default: true)
  trackScrolls?: boolean;          // Enable scroll tracking (default: true)
  trackNavigation?: boolean;       // Enable navigation tracking (default: true)
  trackViewport?: boolean;         // Enable viewport tracking (default: true)
  
  // API Endpoints
  eventsApiEndpoint?: string;      // Separate endpoint for events
                                   // Default: apiEndpoint + '/events'
  
  // Batching Settings
  eventBatchInterval?: number;     // How often to send events (ms)
                                   // Default: 30000 (30 seconds)
  maxEventsPerBatch?: number;      // Max events per batch
                                   // Default: 100
  
  // Callbacks
  onEventTracked?: (event: ActivityEvent) => void;
  onEventBatchSent?: (response: EventBatchResponse) => void;
  onEventBatchError?: (error: Error) => void;
}

import { useEffect } from 'react';
import { DetailedActivityTracker } from '@vigneshwaranbs/activity-tracker';

function App() {
  useEffect(() => {
    const tracker = new DetailedActivityTracker({
      appId: 'my-react-app',
      apiEndpoint: 'https://api.yourapp.com/api/user/activity',
      eventsApiEndpoint: 'https://api.yourapp.com/api/user/activity/events',
      authToken: localStorage.getItem('authToken'),
      
      // Enable all Phase 2 features
      trackClicks: true,
      trackScrolls: true,
      trackNavigation: true,
      trackViewport: true,
      
      // Callbacks
      onEventTracked: (event) => {
        // Send to analytics
        if (event.eventType === 'click') {
          analytics.track('Button Clicked', {
            elementId: event.elementId,
            text: event.text
          });
        }
      }
    });

    tracker.start();
    return () => tracker.stop();
  }, []);

  return (
    <div>
      <div data-section="hero">
        <h1>Welcome</h1>
        <button id="cta-button">Get Started</button>
      </div>
      
      <div data-section="features" data-track-viewport>
        <h2>Features</h2>
        {/* Feature cards */}
      </div>
    </div>
  );
}

const tracker = new DetailedActivityTracker({
  appId: 'ecommerce-store',
  trackClicks: true,      // Track "Add to Cart", "Buy Now" clicks
  trackScrolls: true,     // See how far users scroll on product pages
  trackViewport: true,    // Track which products are viewed
  
  onEventTracked: (event) => {
    if (event.eventType === 'click' && event.elementId?.includes('add-to-cart')) {
      // User clicked "Add to Cart"
      sendToAnalytics('add_to_cart', { productId: extractProductId(event.url) });
    }
    
    if (event.eventType === 'viewport' && event.elementsInView.length > 0) {
      // Track product impressions
      event.elementsInView.forEach(el => {
        if (el.class?.includes('product-card')) {
          sendToAnalytics('product_view', { productId: el.id });
        }
      });
    }
  }
});

const tracker = new DetailedActivityTracker({
  appId: 'blog',
  trackScrolls: true,     // Measure read depth
  trackNavigation: true,  // Time spent on each article
  
  onEventTracked: (event) => {
    if (event.eventType === 'scroll') {
      // User scrolled to 75% - likely read the article
      if (event.scrollDepth >= 75) {
        sendToAnalytics('article_read', { 
          url: event.url,
          scrollDepth: event.scrollDepth
        });
      }
    }
    
    if (event.eventType === 'navigation') {
      // Track time spent on article
      if (event.timeOnPage > 60000) { // More than 1 minute
        sendToAnalytics('article_engagement', {
          url: event.fromUrl,
          timeSpent: event.timeOnPage
        });
      }
    }
  }
});

// Only track clicks and scrolls
const tracker = new DetailedActivityTracker({
  appId: 'my-app',
  trackClicks: true,
  trackScrolls: true,
  trackNavigation: false,  // Disabled
  trackViewport: false     // Disabled
});

const tracker = new DetailedActivityTracker({
  appId: 'my-app',
  trackClicks: true,
  
  onEventTracked: (event) => {
    // Send to multiple analytics platforms
    if (event.eventType === 'click') {
      googleAnalytics.event('click', { elementId: event.elementId });
      mixpanel.track('Button Click', { button: event.text });
      amplitude.logEvent('click', { element: event.element });
    }
  },
  
  onEventBatchSent: (response) => {
    console.log(`✅ Sent ${response.eventsReceived} events to backend`);
  },
  
  onEventBatchError: (error) => {
    console.error('❌ Failed to send events:', error);
    // Retry logic or alert user
  }
});

// Manually trigger batch send (useful before page unload)
tracker.forceSendBatch();

// Example: Send batch before user leaves
window.addEventListener('beforeunload', () => {
  tracker.forceSendBatch();
});

const batchSize = tracker.getBatchSize();
console.log(`Current batch has ${batchSize} events`);

const tracker = new ActivityTracker({
  appId: 'my-app',
  apiEndpoint: 'https://api.yourapp.com/api/user/activity',
  userId: 'user-123'
});
tracker.start();

const tracker = new DetailedActivityTracker({
  // Basic tracking
  appId: 'my-app',
  apiEndpoint: 'https://api.yourapp.com/api/user/activity',
  getAuthToken: () => localStorage.getItem('authToken') || '',
  inactivityTimeout: 600000,      // 10 minutes
  heartbeatInterval: 30000,       // 30 seconds
  checkInterval: 5000,            // 5 seconds
  crossTabSync: true,
  serverSync: true,
  trackPageVisibility: true,
  trackWindowFocused: true,
  debounceDelay: 2000,           // 2 seconds
  retryAttempts: 5,
  logLevel: 'info',
  
  // Detailed tracking
  eventsApiEndpoint: 'https://api.yourapp.com/api/user/activity/events',
  trackClicks: true,
  trackScrolls: true,
  trackNavigation: true,
  trackViewport: true,
  eventBatchInterval: 20000,     // 20 seconds
  maxEventsPerBatch: 50,
  
  // Callbacks
  onActive: (data) => console.log('Active:', data),
  onInactive: (data) => console.warn('Inactive:', data),
  onHeartbeatSuccess: (res) => console.log('Heartbeat:', res),
  onHeartbeatError: (err) => console.error('Error:', err),
  onEventTracked: (event) => console.log('Event:', event),
  onEventBatchSent: (res) => console.log('Batch sent:', res),
  onEventBatchError: (err) => console.error('Batch error:', err)
});
tracker.start();

const tracker = new ActivityTracker({
  appId: 'my-app',
  apiEndpoint: 'https://api.yourapp.com/api/user/activity',
  getAuthToken: () => localStorage.getItem('userId') || '',
  
  // Custom metadata
  metadata: {
    userAgent: navigator.userAgent,
    screenResolution: `${window.screen.width}x${window.screen.height}`,
    timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
    language: navigator.language,
    referrer: document.referrer
  }
});

tracker.start();

const tracker = new ActivityTracker({
  appId: 'my-app',
  apiEndpoint: 'https://api.yourapp.com/api/user/activity',
  userId: 'user-123',
  
  // Custom headers for API authentication
  customHeaders: {
    'Authorization': `Bearer ${localStorage.getItem('authToken')}`,
    'X-API-Key': 'your-api-key',
    'X-App-Version': '1.0.0'
  }
});

tracker.start();

const tracker = new ActivityTracker({
  appId: 'my-app',
  apiEndpoint: 'https://api.yourapp.com/api/user/activity',
  getAuthToken: () => localStorage.getItem('userId') || '',
  
  // Activity callbacks
  onActive: (data) => {
    console.log('✅ User is active');
    console.log('Last activity:', new Date(data.lastActivityTime));
    // Send to analytics
    analytics.track('user_active', data);
  },
  
  onInactive: (data) => {
    console.warn('⚠️ User inactive');
    console.warn('Duration:', data.inactivityDuration / 60000, 'minutes');
    // Show warning modal
    showInactivityWarning();
  },
  
  onHeartbeatSuccess: (response) => {
    console.log('💓 Heartbeat sent successfully');
    // Handle server response
    if (response.action === 'logout') {
      logout();
    }
  },
  
  onHeartbeatError: (error) => {
    console.error('❌ Heartbeat failed:', error.message);
    // Send to error tracking (e.g., Sentry)
    Sentry.captureException(error);
  }
});

tracker.start();

const isDevelopment = process.env.NODE_ENV === 'development';

const tracker = new ActivityTracker({
  appId: isDevelopment ? 'my-app-dev' : 'my-app',
  apiEndpoint: isDevelopment 
    ? 'http://localhost:4000/api/user/activity'
    : 'https://api.yourapp.com/api/user/activity',
  getAuthToken: () => localStorage.getItem('userId') || '',
  
  // Development: shorter intervals for testing
  inactivityTimeout: isDevelopment ? 2 * 60 * 1000 : 15 * 60 * 1000,
  heartbeatInterval: isDevelopment ? 10 * 1000 : 60 * 1000,
  
  // Development: verbose logging
  logLevel: isDevelopment ? 'debug' : 'warn'
});

tracker.start();

// hooks/useActivityTracker.ts
import { useEffect, useState } from 'react';
import { ActivityTracker } from '@vigneshwaranbs/activity-tracker';

export function useActivityTracker(appId: string) {
  const [isActive, setIsActive] = useState(true);
  const [tracker, setTracker] = useState<ActivityTracker | null>(null);

  useEffect(() => {
    const activityTracker = new ActivityTracker({
      appId,
      apiEndpoint: 'https://api.yourapp.com/api/user/activity',
      getAuthToken: () => localStorage.getItem('userId') || '',
      
      onActive: () => setIsActive(true),
      onInactive: () => setIsActive(false)
    });

    activityTracker.start();
    setTracker(activityTracker);

    return () => activityTracker.stop();
  }, [appId]);

  return { isActive, tracker };
}

// Usage
function MyComponent() {
  const { isActive } = useActivityTracker('my-app');
  
  return (
    <div>
      <StatusBadge active={isActive} />
      {!isActive && <InactivityWarning />}
    </div>
  );
}

POST /api/user/activity
Content-Type: application/json

{
  "userId": "676966c6c0b4b40f8cc2db9a",
  "appId": "my-app",
  "isActive": true,
  "lastActivityTime": 1703456789000,
  "tabVisible": true,
  "windowFocused": true,
  "metadata": {
    "userAgent": "Mozilla/5.0...",
    "platform": "MacIntel",
    "language": "en-US",
    "screenResolution": "1920x1080",
    "viewport": "1440x900",
    "timezone": "America/New_York",
    "url": "https://app.example.com/dashboard"
  }
}

{
  "success": true,
  "message": "Activity tracked successfully",
  "activeInOtherApp": false,
  "lastActivityTime": 1703456789000,
  "action": "continue" // or "logout", "warn"
}

const tracker = new ActivityTracker({
  appId: 'my-app',
  apiEndpoint: 'https://api.yourapp.com/api/user/activity',
  getAuthToken: () => localStorage.getItem('userId') || '',
  inactivityTimeout: 15 * 60 * 1000, // 15 minutes
  
  onInactive: (data) => {
    // Show warning modal
    showModal({
      title: 'Session Timeout Warning',
      message: `You've been inactive for ${data.inactivityDuration / 60000} minutes. Your session will expire soon.`,
      actions: ['Stay Logged In', 'Logout']
    });
  }
});

const tracker = new ActivityTracker({
  appId: 'my-app',
  apiEndpoint: 'https://api.yourapp.com/api/user/activity',
  getAuthToken: () => localStorage.getItem('userId') || '',
  crossTabSync: true, // Enable cross-tab sync
  
  onActive: () => {
    // Activity detected in any tab syncs to all tabs
    console.log('User active in this or another tab');
  }
});

const tracker = new ActivityTracker({
  appId: 'my-app',
  apiEndpoint: 'https://api.yourapp.com/api/user/activity',
  getAuthToken: () => localStorage.getItem('userId') || '',
  
  onActive: (data) => {
    // Track active sessions in analytics
    analytics.track('session_active', {
      userId: data.userId,
      appId: data.appId,
      timestamp: data.lastActivityTime
    });
  },
  
  onInactive: (data) => {
    // Track session end in analytics
    analytics.track('session_inactive', {
      userId: data.userId,
      duration: data.inactivityDuration
    });
  }
});

const tracker = new ActivityTracker({
  appId: 'collaboration-app',
  apiEndpoint: 'https://api.yourapp.com/api/user/activity',
  getAuthToken: () => localStorage.getItem('userId') || '',
  heartbeatInterval: 30 * 1000, // 30 seconds for real-time presence
  
  onHeartbeatSuccess: (response) => {
    // Update UI with active users from server response
    updateActiveUsersList(response.activeUsers);
  }
});

import { 
  ActivityTracker, 
  ActivityTrackerConfig,
  ActivityData,
  InactivityData,
  HeartbeatPayload,
  HeartbeatResponse 
} from '@vigneshwaranbs/activity-tracker';

const config: ActivityTrackerConfig = {
  appId: 'my-app',
  apiEndpoint: 'https://api.yourapp.com/api/user/activity',
  getAuthToken: () => localStorage.getItem('userId') || '',
  inactivityTimeout: 15 * 60 * 1000,
  onActive: (data: ActivityData) => console.log(data),
  onInactive: (data: InactivityData) => console.warn(data)
};

const tracker = new ActivityTracker(config);
tracker.start();

// Create tracker with short timeouts for testing
const tracker = new ActivityTracker({
  appId: 'test-app',
  apiEndpoint: 'http://localhost:4000/api/user/activity',
  userId: 'test-user',
  
  // Short intervals for testing
  inactivityTimeout: 30 * 1000,  // 30 seconds
  heartbeatInterval: 10 * 1000,  // 10 seconds
  checkInterval: 5 * 1000,       // 5 seconds
  
  // Verbose logging
  logLevel: 'debug',
  
  // Test callbacks
  onActive: () => console.log('✅ ACTIVE'),
  onInactive: () => console.log('⚠️ INACTIVE'),
  onHeartbeatSuccess: (res) => console.log('💓 HEARTBEAT', res),
  onHeartbeatError: (err) => console.error('❌ ERROR', err)
});

tracker.start();

// Test inactivity: Stop moving mouse for 30 seconds
// Test heartbeat: Check network tab for POST requests every 10 seconds
// Test cross-tab: Open multiple tabs and check sync

new ActivityTracker(config: ActivityTrackerConfig)

const tracker = new ActivityTracker({ /* config */ });

tracker.start();                        // Start tracking
const active = tracker.isUserActive();  // Check status
const lastTime = tracker.getLastActivityTime(); // Get timestamp
tracker.forceHeartbeat();              // Force sync
tracker.stop();                        // Stop and cleanup