import React, { useState, useEffect } from 'react'
import { useAuth } from './auth/AuthContext'
import './Tracking.css'

function TrackingInviteAccept({ inviteToken, onNavigate }) {
  const { authFetch } = useAuth()
  const [inviteInfo, setInviteInfo] = useState(null)
  const [loading, setLoading] = useState(true)
  const [accepting, setAccepting] = useState(false)
  const [error, setError] = useState(null)
  
  // Загрузить информацию о приглашении
  useEffect(() => {
    const fetchInviteInfo = async () => {
      try {
        const res = await authFetch(`/api/tracking/invite/${inviteToken}`)
        if (res.ok) {
          setInviteInfo(await res.json())
        } else {
          const err = await res.json()
          setError(err.error || 'Ссылка недействительна или устарела')
        }
      } catch (err) {
        setError('Ошибка загрузки')
      } finally {
        setLoading(false)
      }
    }
    
    if (inviteToken) {
      fetchInviteInfo()
    }
  }, [inviteToken, authFetch])
  
  const handleAccept = async () => {
    setAccepting(true)
    setError(null)
    try {
      const res = await authFetch(`/api/tracking/invite/${inviteToken}/accept`, { method: 'POST' })
      if (res.ok) {
        // Успех - переходим на экран отслеживания
        onNavigate('tracking')
      } else {
        const err = await res.json()
        setError(err.error || 'Ошибка при принятии приглашения')
      }
    } catch (err) {
      setError('Ошибка при принятии приглашения')
    } finally {
      setAccepting(false)
    }
  }
  
  const handleClose = () => {
    onNavigate('tracking')
  }
  
  if (loading) {
    return (
      <div className="tracking-invite-screen">
        <div className="loading-container">
          <div className="spinner"></div>
          <p>Загрузка...</p>
        </div>
      </div>
    )
  }
  
  if (error && !inviteInfo) {
    return (
      <div className="tracking-invite-screen">
        <div className="invite-card error-card">
          <div className="invite-icon">❌</div>
          <h2>Ошибка</h2>
          <p className="error-text">{error}</p>
          <button className="secondary-btn" onClick={handleClose}>
            Перейти к отслеживанию
          </button>
        </div>
      </div>
    )
  }
  
  return (
    <div className="tracking-invite-screen">
      <button className="close-x-button" onClick={handleClose}>✕</button>
      
      <div className="invite-card">
        <div className="invite-icon">👁</div>
        <h2>Приглашение на отслеживание</h2>
        
        <div className="invite-info">
          <p>Вы сможете видеть статистику пользователя:</p>
          <p className="user-name-large">{inviteInfo?.user_name}</p>
        </div>
        
        {error && <p className="error-inline">{error}</p>}
        
        <button 
          className="accept-btn" 
          onClick={handleAccept}
          disabled={accepting}
        >
          {accepting ? 'Принятие...' : 'Начать отслеживать'}
        </button>
        
        <button className="cancel-link" onClick={handleClose}>
          Отмена
        </button>
      </div>
    </div>
  )
}

export default TrackingInviteAccept
