import { useState, useEffect } from 'react'
import { 
  useStackScopeLogger, 
  useUserActionTracking, 
  usePerformanceTracking 
} from 'stackscope/react'

function HooksDemo() {
  const logger = useStackScopeLogger()
  const { trackClick, trackFormSubmit } = useUserActionTracking()
  const { trackRenderTime, trackComponentMount } = usePerformanceTracking()
  
  const [formData, setFormData] = useState({ name: '', email: '' })
  const [renderCount, setRenderCount] = useState(0)

  // Track component mount
  useEffect(() => {
    const mountStart = performance.now()
    
    trackComponentMount('HooksDemo', {
      initialProps: { demo: 'hooks' },
      timestamp: new Date().toISOString()
    })
    
    logger.info('HooksDemo component mounted', {
      component: 'HooksDemo',
      mountTime: performance.now() - mountStart
    })

    return () => {
      logger.info('HooksDemo component unmounting')
    }
  }, [logger, trackComponentMount])

  // Track render performance
  useEffect(() => {
    const renderStart = performance.now()
    setRenderCount(prev => prev + 1)
    
    requestAnimationFrame(() => {
      const renderTime = performance.now() - renderStart
      trackRenderTime('HooksDemo', renderTime)
    })
  })

  const handleCustomLog = () => {
    logger.info('Custom hook log example', {
      hook: 'useStackScopeLogger',
      renderCount,
      formState: Object.keys(formData).length,
      userInteraction: true
    })
  }

  const handleTrackClick = (buttonId) => {
    trackClick(buttonId, {
      component: 'HooksDemo',
      renderCount,
      timestamp: Date.now()
    })
  }

  const handleFormSubmit = (e) => {
    e.preventDefault()
    
    trackFormSubmit('hooks-demo-form', {
      fields: Object.keys(formData).length,
      hasName: !!formData.name,
      hasEmail: !!formData.email,
      renderCount
    })

    logger.info('Form submitted via hooks', formData)
    
    // Reset form
    setFormData({ name: '', email: '' })
  }

  const handleInputChange = (e) => {
    const { name, value } = e.target
    setFormData(prev => ({ ...prev, [name]: value }))
    
    // Track input changes
    logger.debug('Form input changed', {
      field: name,
      hasValue: !!value,
      formCompletion: Object.values({ ...formData, [name]: value })
        .filter(Boolean).length / 2 * 100
    })
  }

  const simulateSlowRender = () => {
    const start = performance.now()
    
    // Simulate expensive computation
    let result = 0
    for (let i = 0; i < 100000; i++) {
      result += Math.random()
    }
    
    const duration = performance.now() - start
    logger.warn('Intentionally slow render detected', {
      duration,
      operation: 'expensive_computation',
      result: result.toFixed(2)
    })

    trackRenderTime('HooksDemo-slow', duration)
  }

  return (
    <div className="demo-section">
      <h3>⚛️ React Hooks Integration</h3>
      <p>
        This demo shows how to use StackScope React hooks for advanced logging, 
        user action tracking, and performance monitoring.
      </p>

      <div className="demo-section">
        <h4>🪝 useStackScopeLogger Hook</h4>
        <p>Direct access to StackScope logger with full context:</p>
        <div className="button-group">
          <button className="demo-button" onClick={handleCustomLog}>
            Log Custom Event
          </button>
          <button className="demo-button info" onClick={() => 
            logger.debug('Debug message from hook', { 
              source: 'HooksDemo',
              debugInfo: { renderCount, timestamp: Date.now() }
            })
          }>
            Debug Log
          </button>
          <button className="demo-button warning" onClick={() =>
            logger.warn('Warning from hook', {
              warningType: 'demo_warning',
              severity: 'medium'
            })
          }>
            Warning Log
          </button>
        </div>
      </div>

      <div className="demo-section">
        <h4>👆 useUserActionTracking Hook</h4>
        <p>Track user interactions with rich metadata:</p>
        <div className="button-group">
          <button 
            className="demo-button" 
            onClick={() => handleTrackClick('primary-action')}
          >
            Track Primary Action
          </button>
          <button 
            className="demo-button info" 
            onClick={() => handleTrackClick('secondary-action')}
          >
            Track Secondary Action
          </button>
          <button 
            className="demo-button" 
            onClick={() => trackClick('custom-event', {
              category: 'demo',
              value: Math.round(Math.random() * 100),
              customData: { renderCount, formFilled: !!formData.name }
            })}
          >
            Track Custom Event
          </button>
        </div>
      </div>

      <div className="demo-section">
        <h4>📊 usePerformanceTracking Hook</h4>
        <p>Monitor component and operation performance:</p>
        <div className="button-group">
          <button className="demo-button" onClick={simulateSlowRender}>
            Simulate Slow Render
          </button>
          <button className="demo-button info" onClick={() => {
            const start = performance.now()
            setTimeout(() => {
              trackRenderTime('async-operation', performance.now() - start)
              logger.info('Async operation completed', {
                duration: performance.now() - start,
                operation: 'setTimeout'
              })
            }, Math.random() * 200 + 50)
          }}>
            Track Async Operation
          </button>
        </div>
      </div>

      <div className="demo-section">
        <h4>📝 Form Tracking Example</h4>
        <form className="form-demo" onSubmit={handleFormSubmit}>
          <div className="form-group">
            <label htmlFor="name">Name:</label>
            <input
              type="text"
              id="name"
              name="name"
              value={formData.name}
              onChange={handleInputChange}
              placeholder="Enter your name"
            />
          </div>
          <div className="form-group">
            <label htmlFor="email">Email:</label>
            <input
              type="email"
              id="email"
              name="email"
              value={formData.email}
              onChange={handleInputChange}
              placeholder="Enter your email"
            />
          </div>
          <button type="submit" className="demo-button">
            Submit Form (Tracked)
          </button>
        </form>
      </div>

      <div className="demo-section">
        <h4>📈 Component Statistics</h4>
        <div className="performance-metrics">
          <div className="metric-card">
            <h4>Render Count</h4>
            <div className="metric-value">{renderCount}</div>
            <div className="metric-unit">renders</div>
          </div>
          <div className="metric-card">
            <h4>Form Completion</h4>
            <div className="metric-value">
              {Math.round(Object.values(formData).filter(Boolean).length / 2 * 100)}
            </div>
            <div className="metric-unit">%</div>
          </div>
          <div className="metric-card">
            <h4>Active Hooks</h4>
            <div className="metric-value">3</div>
            <div className="metric-unit">hooks</div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default HooksDemo