import React, { useEffect, useMemo, useRef, useState } from 'react';
import { useLocation, useNavigate, useParams, Navigate } from 'react-router-dom';
import {
  Alert,
  Box,
  Button,
  CircularProgress,
  Container,
  Paper,
  Typography,
} from '@mui/material';

import LoginComponent from '../components/LoginComponent.js';

const LinkTelegramPage = () => {
  const location = useLocation();
  const navigate = useNavigate();
  const params = useParams();

  const idFromQuery = useMemo(() => {
    const urlParams = new URLSearchParams(location.search);
    return urlParams.get('id');
  }, [location.search]);

  const id = idFromQuery || params.id || null;

  const [user, setUser] = useState(null);
  const [authToken, setAuthToken] = useState(() =>
    typeof window === 'undefined' ? null : sessionStorage.getItem('authToken')
  );
  const [loadingAuth, setLoadingAuth] = useState(true);
  const [showLogin, setShowLogin] = useState(false);

  const [linking, setLinking] = useState(false);
  const [error, setError] = useState('');
  const [success, setSuccess] = useState(false);

  const attemptedKeyRef = useRef('');

  const handleLoginClose = () => {
    setShowLogin(false);

    const storedUser = sessionStorage.getItem('user');
    if (!storedUser) {
      navigate('/', { replace: true });
    }
  };

  useEffect(() => {
    let isMounted = true;

    const loadUserFromSession = () => {
      const storedUser = sessionStorage.getItem('user');
      if (!storedUser) return null;
      try {
        return JSON.parse(storedUser);
      } catch (e) {
        console.error('Error parsing user from sessionStorage:', e);
        return null;
      }
    };

    const checkAuth = () => {
      const token = sessionStorage.getItem('authToken');
      setAuthToken(token);

      const userData = loadUserFromSession();
      if (userData) {
        setUser(userData);
        setShowLogin(false);
        setLoadingAuth(false);
        return;
      }

      // If we have a token but no user yet, silently restore session via verifyToken.
      if (token && window.socketManager) {
        setLoadingAuth(true);
        window.socketManager.emit('verifyToken', { token }, (res) => {
          if (!isMounted) return;

          if (res?.success && res?.user) {
            try {
              sessionStorage.setItem('user', JSON.stringify(res.user));
            } catch (e) {
              console.error('Failed to persist verified user:', e);
            }
            setUser(res.user);
            setShowLogin(false);
          } else {
            setUser(null);
            setShowLogin(true);
          }
          setLoadingAuth(false);
        });
        return;
      }

      // No user + no token => need login.
      setUser(null);
      setShowLogin(true);
      setLoadingAuth(false);
    };

    checkAuth();

    const onUserLoggedIn = () => checkAuth();
    window.addEventListener('userLoggedIn', onUserLoggedIn);

    const handleStorageChange = (e) => {
      if (e.key === 'user' && !e.newValue) {
        setShowLogin(true);
        setUser(null);
      }
      if (e.key === 'authToken') {
        checkAuth();
      }
    };
    window.addEventListener('storage', handleStorageChange);

    return () => {
      isMounted = false;
      window.removeEventListener('userLoggedIn', onUserLoggedIn);
      window.removeEventListener('storage', handleStorageChange);
    };
  }, []);

  useEffect(() => {
    if (!user) return;
    if (!id) {
      setError('Missing Telegram id.');
      setSuccess(false);
      return;
    }
    if (!window.socketManager) return;

    const attemptKey = `${user?.id || 'anon'}:${id}:${authToken || ''}`;
    if (attemptedKeyRef.current === attemptKey) return;
    attemptedKeyRef.current = attemptKey;

    if (!authToken) {
      setError('Not authenticated (missing auth token).');
      setSuccess(false);
      setShowLogin(true);
      return;
    }

    setLinking(true);
    setError('');
    setSuccess(false);

    // 1) Verify token so server-side socket flags are set.
    window.socketManager.emit('verifyToken', { token: authToken }, (verifyRes) => {
      if (!verifyRes?.success) {
        setLinking(false);
        setError(verifyRes?.message || 'Not authenticated.');
        setShowLogin(true);
        return;
      }

      // 2) Link Telegram id after authentication.
      window.socketManager.emit('linkTelegram', { id }, (linkRes) => {
        setLinking(false);

        if (linkRes?.success) {
          setSuccess(true);
          setError('');
          return;
        }

        setSuccess(false);
        setError(
          linkRes?.error || linkRes?.message || 'Failed to link Telegram.'
        );
      });
    });
  }, [id, user, authToken]);

  if (showLogin) {
    return <LoginComponent open={showLogin} handleClose={handleLoginClose} location={location} />;
  }

  if (loadingAuth) {
    return (
      <Box sx={{ display: 'flex', justifyContent: 'center', py: 5 }}>
        <CircularProgress />
      </Box>
    );
  }

  if (!user) {
    return <Navigate to="/" replace />;
  }

  return (
    <Container maxWidth="sm" sx={{ mt: 8, mb: 4 }}>
      <Paper elevation={3} sx={{ p: 4 }}>
        <Typography component="h1" variant="h5" gutterBottom>
          Telegram verknüpfen
        </Typography>

        {error ? (
          <Alert severity="error" sx={{ mt: 2 }}>
            {error}
          </Alert>
        ) : null}

        {success ? (
          <Alert severity="success" sx={{ mt: 2 }}>
            Telegram wurde erfolgreich verknüpft.
          </Alert>
        ) : null}

        {(!success && !error) || linking ? (
          <Box sx={{ mt: 3, display: 'flex', flexDirection: 'column', gap: 2 }}>
            <Typography variant="body2" color="text.secondary">
              Bitte warten, wir verifizieren und verknüpfen dein Telegram.
            </Typography>
            {linking ? <CircularProgress /> : null}
          </Box>
        ) : null}

        <Box sx={{ mt: 3, display: 'flex', justifyContent: 'flex-end' }}>
          <Button
            variant="contained"
            onClick={() => navigate('/profile#settings')}
            sx={{ bgcolor: '#2e7d32', '&:hover': { bgcolor: '#1b5e20' } }}
            disabled={linking}
          >
            Zurück zum Profil
          </Button>
        </Box>
      </Paper>
    </Container>
  );
};

export default LinkTelegramPage;

