import React, { useState, useEffect } from 'react';
import { 
  Container, 
  Paper, 
  Box, 
  Typography, 
  Tabs, 
  Tab,
  CircularProgress
} from '@mui/material';
import useMediaQuery from '@mui/material/useMediaQuery';
import { useTheme } from '@mui/material/styles';
import { useLocation, useNavigate, Navigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';

// Import extracted components
import OrdersTab from '../components/profile/OrdersTab.js';
import SettingsTab from '../components/profile/SettingsTab.js';
import CartTab from '../components/profile/CartTab.js';
import LoginComponent from '../components/LoginComponent.js';
import {
  hasPendingWirePaymentOrder,
  WIRE_PAYMENT_PENDING_EVENT,
} from '../utils/wireGirocodeEligibility.js';

// Functional Profile Page Component
const ProfilePage = () => {
  const location = useLocation();
  const navigate = useNavigate();
  const { t } = useTranslation();
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
  const [tabValue, setTabValue] = useState(0);
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [showLogin, setShowLogin] = useState(false);
  const [orderIdFromHash, setOrderIdFromHash] = useState(null);
  const [paymentCompletion, setPaymentCompletion] = useState(null);
  const [wirePaymentPending, setWirePaymentPending] = useState(false);

  // @note Check for payment completion parameters from Stripe and Mollie redirects
  useEffect(() => {
    const urlParams = new URLSearchParams(location.search);
    
    // Check for Stripe payment completion
    const isComplete = urlParams.has('complete');
    const paymentIntent = urlParams.get('payment_intent');
    const paymentIntentClientSecret = urlParams.get('payment_intent_client_secret');
    const redirectStatus = urlParams.get('redirect_status');

    if (isComplete && paymentIntent && redirectStatus) {
      setPaymentCompletion({
        paymentType: 'stripe',
        paymentIntent,
        paymentIntentClientSecret,
        redirectStatus,
        isSuccessful: redirectStatus === 'succeeded'
      });
      
      // Clean up the URL by removing the payment parameters
      const newUrl = new URL(window.location);
      newUrl.searchParams.delete('complete');
      newUrl.searchParams.delete('payment_intent');
      newUrl.searchParams.delete('payment_intent_client_secret');
      newUrl.searchParams.delete('redirect_status');
      window.history.replaceState({}, '', newUrl.toString());
    }
    
    // Check for Mollie payment completion
    const isMollieComplete = urlParams.has('mollieComplete');
    const molliePaymentId = urlParams.get('mollie_payment_id');
    const mollieStatus = urlParams.get('mollie_status');
    const mollieAmount = urlParams.get('mollie_amount');
    const mollieTimestamp = urlParams.get('mollie_timestamp');
    const mollieIsPaid = urlParams.get('mollie_is_paid');
    const mollieOrderId = urlParams.get('mollie_order_id');

    if (isMollieComplete && molliePaymentId && mollieStatus) {
      setPaymentCompletion({
        paymentType: 'mollie',
        molliePaymentId,
        mollieStatus,
        mollieAmount: mollieAmount ? parseFloat(mollieAmount) : null,
        mollieTimestamp: mollieTimestamp ? parseInt(mollieTimestamp) : null,
        mollieIsPaid: mollieIsPaid === 'true',
        mollieOrderId: mollieOrderId ? parseInt(mollieOrderId) : null,
        isSuccessful: mollieIsPaid === 'true'
      });
      
      // Clean up the URL by removing the Mollie payment parameters
      const newUrl = new URL(window.location);
      newUrl.searchParams.delete('mollieComplete');
      newUrl.searchParams.delete('mollie_payment_id');
      newUrl.searchParams.delete('mollie_status');
      newUrl.searchParams.delete('mollie_amount');
      newUrl.searchParams.delete('mollie_timestamp');
      newUrl.searchParams.delete('mollie_is_paid');
      newUrl.searchParams.delete('mollie_order_id');
      window.history.replaceState({}, '', newUrl.toString());
    }
  }, [location.search]);

  useEffect(() => {
    const hash = location.hash;

    switch (hash) {
      case '#cart':
        setTabValue(0);
        setOrderIdFromHash(null);
        break;
      case '#orders':
        setTabValue(1);
        setOrderIdFromHash(null);
        break;
      case '#settings':
        setTabValue(2);
        setOrderIdFromHash(null);
        break;
      default:
        if (hash && hash.length > 1) {
          // Check if it's a potential order ID (starts with # and has alphanumeric characters with dashes)
          const potentialOrderId = hash.substring(1);
          if (/^[A-Z0-9]+-[A-Z0-9]+$/i.test(potentialOrderId)) {
            setOrderIdFromHash(potentialOrderId);
            setTabValue(1); // Switch to Orders tab
          } else {
            setOrderIdFromHash(null);
          }
        } else {
          setOrderIdFromHash(null);
          // If no hash is present, set default to cart tab
          if (!hash) {
            navigate('/profile#cart', { replace: true });
          }
        }
    }
  }, [location.hash, navigate]);

  useEffect(() => {
    if (!user || typeof window === 'undefined' || !window.socketManager) {
      setWirePaymentPending(false);
      return;
    }

    const fetchWirePending = () => {
      window.socketManager.emit('getOrders', (response) => {
        if (response.success && Array.isArray(response.orders)) {
          setWirePaymentPending(hasPendingWirePaymentOrder(response.orders));
        }
      });
    };

    fetchWirePending();

    const onWirePending = (e) => {
      if (e.detail && typeof e.detail.pending === 'boolean') {
        setWirePaymentPending(e.detail.pending);
      }
    };
    window.addEventListener(WIRE_PAYMENT_PENDING_EVENT, onWirePending);
    return () => window.removeEventListener(WIRE_PAYMENT_PENDING_EVENT, onWirePending);
  }, [user]);

  useEffect(() => {
    const checkUserLoggedIn = () => {
      const storedUser = sessionStorage.getItem('user');
      if (!storedUser) {
        setShowLogin(true);
        setUser(null);
        return;
      }
      
      try {
        const userData = JSON.parse(storedUser);
        if (!userData) {
          setShowLogin(true);
          setUser(null);
        } else if (!user) {
          setUser(userData);
          setShowLogin(false); // Hide login on successful user load
        }
      } catch (error) {
        console.error('Error parsing user from sessionStorage:', error);
        setShowLogin(true);
        setUser(null);
      }

      if (loading) {
        setLoading(false);
      }
    };

    checkUserLoggedIn();
    const checkLoginInterval = setInterval(checkUserLoggedIn, 1000);

    const handleStorageChange = (e) => {
      if (e.key === 'user' && !e.newValue) {
        // User was removed from sessionStorage in another tab
        setShowLogin(true);
        setUser(null);
      }
    };

    window.addEventListener('storage', handleStorageChange);

    return () => {
      clearInterval(checkLoginInterval);
      window.removeEventListener('storage', handleStorageChange);
    };
  }, [user, loading]);

  const handleTabChange = (event, newValue) => {
    setTabValue(newValue);
    
    // Update the hash based on the selected tab
    const hashMap = {
      0: '#cart',
      1: '#orders', 
      2: '#settings'
    };
    
    const newHash = hashMap[newValue];
    if (newHash) {
      navigate(`/profile${newHash}`, { replace: true });
    }
  };

  const handleGoToOrders = () => {
    setTabValue(1);
    navigate('/profile#orders', { replace: true });
  };

  const handleClearPaymentCompletion = () => {
    setPaymentCompletion(null);
  };

  const handleLoginClose = () => {
    setShowLogin(false);
    // If user closes login without logging in, redirect to home.
    const storedUser = sessionStorage.getItem('user');
    if (!storedUser) {
      navigate('/', { replace: true });
    }
  }

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

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

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

  return (
    <Container maxWidth="md" sx={{ py: { xs: 0, sm: 4 }, px: { xs: 0, sm: 3 } }}>
      <Paper elevation={{ xs: 0, sm: 2 }} sx={{ borderRadius: { xs: 0, sm: 2 }, overflow: 'hidden' }}>
        <Box sx={{ bgcolor: '#2e7d32', p: { xs: 2, sm: 3 }, color: 'white' }}>
          <Typography variant="h5" fontWeight="bold" component="div" sx={{ display: 'flex', alignItems: 'center', gap: 0.75, flexWrap: 'wrap' }}>
            {isMobile ? 
              (<>
                {tabValue === 0 ? (t ? t('auth.menu.checkout') : 'Bestellabschluss') : 
                 tabValue === 1 ? (t ? t('auth.menu.orders') : 'Bestellungen') : 
                 tabValue === 2 ? (t ? t('auth.menu.settings') : 'Einstellungen') : (t ? t('auth.profile') : 'Mein Profil')}
                {tabValue === 1 && wirePaymentPending && (
                  <Box component="span" sx={{ color: 'error.main', fontWeight: 700 }} aria-label="Ausstehende Überweisung">[!]</Box>
                )}
              </>) 
              : (t ? t('auth.profile') : 'Mein Profil')
            }
          </Typography>
          {user && (
            <Typography variant="body1" sx={{ mt: 1 }}>
              {user.email}
            </Typography>
          )}
        </Box>
        
        <Box>
          <Tabs
            value={tabValue}
            onChange={handleTabChange}
            variant="fullWidth"
            sx={{ 
              borderBottom: 1, 
              borderColor: 'divider',
              display: { xs: 'none', sm: 'flex' }
            }}
            TabIndicatorProps={{
              style: { backgroundColor: '#2e7d32' }
            }}
          >
            <Tab 
              label={t ? t('auth.menu.checkout') : 'Bestellabschluss'} 
              sx={{ 
                color: tabValue === 0 ? '#2e7d32' : 'inherit',
                fontWeight: 'bold'
              }}
            />
             <Tab 
              label={
                <Box sx={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 0.5 }}>
                  <span>{t ? t('auth.menu.orders') : 'Bestellungen'}</span>
                  {wirePaymentPending && (
                    <Box component="span" sx={{ color: 'error.main', fontWeight: 700, fontSize: '0.85em', lineHeight: 1 }} aria-hidden>
                      [!]
                    </Box>
                  )}
                </Box>
              }
              sx={{ 
                color: tabValue === 1 ? '#2e7d32' : 'inherit',
                fontWeight: 'bold'
              }}
            />
            <Tab 
              label={t ? t('auth.menu.settings') : 'Einstellungen'} 
              sx={{ 
                color: tabValue === 2 ? '#2e7d32' : 'inherit',
                fontWeight: 'bold'
              }}
            />
          </Tabs>

          {tabValue === 0 && <CartTab onOrderSuccess={handleGoToOrders} paymentCompletion={paymentCompletion} onClearPaymentCompletion={handleClearPaymentCompletion} />}
          {tabValue === 1 && <OrdersTab orderIdFromHash={orderIdFromHash} />}
          {tabValue === 2 && <SettingsTab/>}

        </Box>
      </Paper>
    </Container>
  );
};

// Wrap with socket context
const ProfilePageWithSocket = (props) => {
  return <ProfilePage {...props}/>;
};

export default ProfilePageWithSocket; 