import React, { useState } from 'react';
import { trackUserAction, trackUserLocation } from '../utils/analytics';

const AnalyticsTestComponent: React.FC = () => {
  const [locationStatus, setLocationStatus] = useState<string>('Not requested');
  const [actionStatus, setActionStatus] = useState<string>('');

  const handleTrackLocation = async () => {
    try {
      setLocationStatus('Requesting...');
      await trackUserLocation();
      setLocationStatus('Location tracked successfully!');
    } catch (error) {
      setLocationStatus('Error tracking location');
      console.error('Location tracking error:', error);
    }
  };

  const handleTrackAction = () => {
    const actionName = `button_click_${Date.now()}`;
    trackUserAction(actionName, { 
      component: 'AnalyticsTestComponent',
      timestamp: new Date().toISOString()
    });
    setActionStatus(`Action "${actionName}" tracked`);
  };

  return (
    <div className="p-6 max-w-2xl mx-auto bg-white rounded-lg shadow-md">
      <h2 className="text-xl font-bold mb-4">Analytics Test Component</h2>
      
      <div className="mb-4">
        <button 
          onClick={handleTrackLocation}
          className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mr-4"
        >
          Track Location
        </button>
        <span className="text-sm text-gray-600">{locationStatus}</span>
      </div>
      
      <div className="mb-4">
        <button 
          onClick={handleTrackAction}
          className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded"
        >
          Track Action
        </button>
        <span className="text-sm text-gray-600 ml-4">{actionStatus}</span>
      </div>
      
      <div className="mt-6 p-4 bg-gray-100 rounded">
        <h3 className="font-semibold mb-2">Expected Behavior:</h3>
        <ul className="list-disc pl-5 space-y-1 text-sm">
          <li>Page views are automatically tracked when this component loads</li>
          <li>Session information is captured on initial load</li>
          <li>Browser and device info is collected automatically</li>
          <li>Clicking buttons will generate user action traces</li>
          <li>Location tracking requires user permission</li>
        </ul>
      </div>
    </div>
  );
};

export default AnalyticsTestComponent;