import React, { Component } from 'react';
import { 
  Box, 
  Paper, 
  Typography, 
  TextField, 
  Button, 
  Alert, 
  CircularProgress,
  Divider,
  IconButton,
  Snackbar
} from '@mui/material';
import ContentCopy from '@mui/icons-material/ContentCopy';
import { withI18n } from '../../i18n/withTranslation.js';

class SettingsTab extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentPassword: '',
      newPassword: '',
      confirmPassword: '',
      password: '',
      newEmail: '',
      passwordError: '',
      passwordSuccess: '',
      emailError: '',
      emailSuccess: '',
      loading: false,
      // API Key management state
      hasApiKey: false,
      apiKey: '',
      apiKeyDisplay: '',
      apiKeyError: '',
      apiKeySuccess: '',
      loadingApiKey: false,
      copySnackbarOpen: false
    };
  }

  componentDidMount() {
    // Load user data
    const storedUser = sessionStorage.getItem('user');
    if (storedUser) {
      try {
        const user = JSON.parse(storedUser);
        this.setState({ newEmail: user.email || '' });
        
        // Check if user has an API key
        this.props.socket.emit('isApiKey', (response) => {
          if (response.success && response.hasApiKey) {
            this.setState({ 
              hasApiKey: true,
              apiKeyDisplay: '************'
            });
          }
        });
      } catch (error) {
        console.error('Error loading user data:', error);
      }
    }
  }

  handleUpdatePassword = (e) => {
    e.preventDefault();
    
    // Reset states
    this.setState({
      passwordError: '',
      passwordSuccess: ''
    });
    
    // Validation
    if (!this.state.currentPassword || !this.state.newPassword || !this.state.confirmPassword) {
      this.setState({ passwordError: this.props.t ? this.props.t('settings.errors.fillAllFields') : 'Bitte füllen Sie alle Felder aus' });
      return;
    }
    
    if (this.state.newPassword !== this.state.confirmPassword) {
      this.setState({ passwordError: this.props.t ? this.props.t('settings.errors.passwordsNotMatch') : 'Die neuen Passwörter stimmen nicht überein' });
      return;
    }
    
    if (this.state.newPassword.length < 8) {
      this.setState({ passwordError: this.props.t ? this.props.t('settings.errors.passwordTooShort') : 'Das neue Passwort muss mindestens 8 Zeichen lang sein' });
      return;
    }
    
    this.setState({ loading: true });
    
    // Call socket.io endpoint to update password
    this.props.socket.emit('updatePassword', 
      { oldPassword: this.state.currentPassword, newPassword: this.state.newPassword }, 
      (response) => {
        this.setState({ loading: false });
        
        if (response.success) {
          this.setState({
            passwordSuccess: this.props.t ? this.props.t('settings.success.passwordUpdated') : 'Passwort erfolgreich aktualisiert',
            currentPassword: '',
            newPassword: '',
            confirmPassword: ''
          });
        } else {
          this.setState({
            passwordError: response.message || (this.props.t ? this.props.t('settings.errors.passwordUpdateError') : 'Fehler beim Aktualisieren des Passworts')
          });
        }
      }
    );
  };
  
  handleUpdateEmail = (e) => {
    e.preventDefault();
    
    // Reset states
    this.setState({
      emailError: '',
      emailSuccess: ''
    });
    
    // Validation
    if (!this.state.password || !this.state.newEmail) {
      this.setState({ emailError: this.props.t ? this.props.t('settings.errors.fillAllFields') : 'Bitte füllen Sie alle Felder aus' });
      return;
    }
    
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(this.state.newEmail)) {
      this.setState({ emailError: this.props.t ? this.props.t('settings.errors.invalidEmail') : 'Bitte geben Sie eine gültige E-Mail-Adresse ein' });
      return;
    }
    
    this.setState({ loading: true });
    
    // Call socket.io endpoint to update email
    this.props.socket.emit('updateEmail', 
      { password: this.state.password, email: this.state.newEmail }, 
      (response) => {
        this.setState({ loading: false });
        
        if (response.success) {
          this.setState({
            emailSuccess: this.props.t ? this.props.t('settings.success.emailUpdated') : 'E-Mail-Adresse erfolgreich aktualisiert',
            password: ''
          });
          
          // Update user in sessionStorage
          try {
            const storedUser = sessionStorage.getItem('user');
            if (storedUser) {
              const user = JSON.parse(storedUser);
              user.email = this.state.newEmail;
              sessionStorage.setItem('user', JSON.stringify(user));
            }
          } catch (error) {
            console.error('Error updating user in sessionStorage:', error);
          }
        } else {
          this.setState({
            emailError: response.message || (this.props.t ? this.props.t('settings.errors.emailUpdateError') : 'Fehler beim Aktualisieren der E-Mail-Adresse')
          });
        }
      }
    );
  };
  
  handleGenerateApiKey = () => {
    this.setState({
      apiKeyError: '',
      apiKeySuccess: '',
      loadingApiKey: true
    });
    
    const storedUser = sessionStorage.getItem('user');
    if (!storedUser) {
      this.setState({ 
        apiKeyError: 'Benutzer nicht gefunden',
        loadingApiKey: false
      });
      return;
    }
    
    try {
      const user = JSON.parse(storedUser);
      
      this.props.socket.emit('createApiKey', user.id, (response) => {
        this.setState({ loadingApiKey: false });
        
        if (response.success) {
          this.setState({
            hasApiKey: true,
            apiKey: response.apiKey,
            apiKeyDisplay: response.apiKey,
            apiKeySuccess: response.message || 'API-Schlüssel erfolgreich generiert'
          });
          
          // After 10 seconds, hide the actual key and show asterisks
          setTimeout(() => {
            this.setState({ apiKeyDisplay: '************' });
          }, 10000);
        } else {
          this.setState({
            apiKeyError: response.message || 'Fehler beim Generieren des API-Schlüssels'
          });
        }
      });
    } catch (error) {
      console.error('Error generating API key:', error);
      this.setState({ 
        apiKeyError: 'Fehler beim Generieren des API-Schlüssels',
        loadingApiKey: false
      });
    }
  };
  
  handleCopyToClipboard = () => {
    navigator.clipboard.writeText(this.state.apiKey).then(() => {
      this.setState({ copySnackbarOpen: true });
    }).catch(err => {
      console.error('Failed to copy to clipboard:', err);
      // Fallback for older browsers
      const textArea = document.createElement('textarea');
      textArea.value = this.state.apiKey;
      document.body.appendChild(textArea);
      textArea.select();
      document.execCommand('copy');
      document.body.removeChild(textArea);
      this.setState({ copySnackbarOpen: true });
    });
  };

  handleCloseSnackbar = () => {
    this.setState({ copySnackbarOpen: false });
  };
  
  render() {
    return (
      <Box sx={{ p: { xs: 1, sm: 3 } }}>
        <Paper sx={{ p: { xs: 2, sm: 3 } }}>
          <Typography variant="subtitle1" fontWeight="bold" gutterBottom>
            {this.props.t ? this.props.t('settings.changePassword') : 'Passwort ändern'}
          </Typography>
          
          {this.state.passwordError && <Alert severity="error" sx={{ mb: 2 }}>{this.state.passwordError}</Alert>}
          {this.state.passwordSuccess && <Alert severity="success" sx={{ mb: 2 }}>{this.state.passwordSuccess}</Alert>}
          
          <Box component="form" onSubmit={this.handleUpdatePassword}>
            <TextField
              margin="normal"
              label={this.props.t ? this.props.t('settings.currentPassword') : 'Aktuelles Passwort'}
              type="password"
              fullWidth
              value={this.state.currentPassword}
              onChange={(e) => this.setState({ currentPassword: e.target.value })}
              disabled={this.state.loading}
            />
            
            <TextField
              margin="normal"
              label={this.props.t ? this.props.t('settings.newPassword') : 'Neues Passwort'}
              type="password"
              fullWidth
              value={this.state.newPassword}
              onChange={(e) => this.setState({ newPassword: e.target.value })}
              disabled={this.state.loading}
            />
            
            <TextField
              margin="normal"
              label={this.props.t ? this.props.t('settings.confirmNewPassword') : 'Neues Passwort bestätigen'}
              type="password"
              fullWidth
              value={this.state.confirmPassword}
              onChange={(e) => this.setState({ confirmPassword: e.target.value })}
              disabled={this.state.loading}
            />
            
            <Button
              type="submit"
              variant="contained"
              color="primary"
              sx={{ mt: 2, bgcolor: '#2e7d32', '&:hover': { bgcolor: '#1b5e20' } }}
              disabled={this.state.loading}
            >
              {this.state.loading ? <CircularProgress size={24} /> : (this.props.t ? this.props.t('settings.updatePassword') : 'Passwort aktualisieren')}
            </Button>
          </Box>
        </Paper>
        
        <Divider sx={{ my: 4 }} />
        
        <Paper sx={{ p: { xs: 2, sm: 3 } }}>
          <Typography variant="subtitle1" fontWeight="bold" gutterBottom>
            {this.props.t ? this.props.t('settings.changeEmail') : 'E-Mail-Adresse ändern'}
          </Typography>
          
          {this.state.emailError && <Alert severity="error" sx={{ mb: 2 }}>{this.state.emailError}</Alert>}
          {this.state.emailSuccess && <Alert severity="success" sx={{ mb: 2 }}>{this.state.emailSuccess}</Alert>}
          
          <Box component="form" onSubmit={this.handleUpdateEmail}>
            <TextField
              margin="normal"
              label={this.props.t ? this.props.t('settings.password') : 'Passwort'}
              type="password"
              fullWidth
              value={this.state.password}
              onChange={(e) => this.setState({ password: e.target.value })}
              disabled={this.state.loading}
            />
            
            <TextField
              margin="normal"
              label={this.props.t ? this.props.t('settings.newEmail') : 'Neue E-Mail-Adresse'}
              type="email"
              fullWidth
              value={this.state.newEmail}
              onChange={(e) => this.setState({ newEmail: e.target.value })}
              disabled={this.state.loading}
            />
            
            <Button
              type="submit"
              variant="contained"
              color="primary"
              sx={{ mt: 2, bgcolor: '#2e7d32', '&:hover': { bgcolor: '#1b5e20' } }}
              disabled={this.state.loading}
            >
              {this.state.loading ? <CircularProgress size={24} /> : (this.props.t ? this.props.t('settings.updateEmail') : 'E-Mail aktualisieren')}
            </Button>
          </Box>
        </Paper>
        
        <Divider sx={{ my: 4 }} />
        
        <Paper sx={{ p: { xs: 2, sm: 3 } }}>
          <Typography variant="subtitle1" fontWeight="bold" gutterBottom>
            {this.props.t ? this.props.t('settings.apiKey') : 'API-Schlüssel'}
          </Typography>
          
          <Typography variant="body2" color="text.secondary" gutterBottom>
            {this.props.t ? this.props.t('settings.apiKeyDescription') : 'Verwenden Sie Ihren API-Schlüssel für die Integration mit externen Anwendungen.'}
          </Typography>
          
          {this.state.apiKeyError && <Alert severity="error" sx={{ mb: 2 }}>{this.state.apiKeyError}</Alert>}
          {this.state.apiKeySuccess && (
            <Alert severity="success" sx={{ mb: 2 }}>
              {this.state.apiKeySuccess}
              {this.state.apiKey && this.state.apiKeyDisplay !== '************' && (
                <Typography variant="body2" sx={{ mt: 1 }}>
                  {this.props.t ? this.props.t('settings.success.apiKeyWarning') : 'Speichern Sie diesen Schlüssel sicher. Er wird aus Sicherheitsgründen in 10 Sekunden ausgeblendet.'}
                </Typography>
              )}
            </Alert>
          )}
          
          <Typography variant="body2" sx={{ mb: 2 }}>
            {this.props.t ? this.props.t('settings.apiDocumentation') : 'API-Dokumentation:'} {' '}
            <a 
              href={`${window.location.protocol}//${window.location.host}/api/`}
              target="_blank"
              rel="noopener noreferrer"
              style={{ color: '#2e7d32' }}
            >
              {`${window.location.protocol}//${window.location.host}/api/`}
            </a>
          </Typography>
          
          <Box sx={{ display: 'flex', gap: 2, alignItems: 'center', mt: 2 }}>
            <TextField
              label={this.props.t ? this.props.t('settings.apiKey') : 'API-Schlüssel'}
              value={this.state.apiKeyDisplay}
              disabled
              fullWidth
              sx={{
                '& .MuiInputBase-input.Mui-disabled': {
                  WebkitTextFillColor: this.state.apiKeyDisplay === '************' ? '#666' : '#000',
                }
              }}
            />
            
            {this.state.apiKeyDisplay !== '************' && this.state.apiKey && (
              <IconButton
                onClick={this.handleCopyToClipboard}
                sx={{ 
                  color: '#2e7d32',
                  '&:hover': { bgcolor: 'rgba(46, 125, 50, 0.1)' }
                }}
                title={this.props.t ? this.props.t('settings.copyToClipboard') : 'In Zwischenablage kopieren'}
              >
                <ContentCopy />
              </IconButton>
            )}
            
            <Button
              variant="contained"
              color="primary"
              onClick={this.handleGenerateApiKey}
              disabled={this.state.loadingApiKey}
              sx={{ 
                minWidth: 120,
                bgcolor: '#2e7d32', 
                '&:hover': { bgcolor: '#1b5e20' }
              }}
            >
              {this.state.loadingApiKey ? (
                <CircularProgress size={24} />
              ) : (
                this.state.hasApiKey ? (this.props.t ? this.props.t('settings.regenerate') : 'Regenerieren') : (this.props.t ? this.props.t('settings.generate') : 'Generieren')
              )}
            </Button>
          </Box>
        </Paper>
        
        <Snackbar
          open={this.state.copySnackbarOpen}
          autoHideDuration={3000}
          onClose={this.handleCloseSnackbar}
          message={this.props.t ? this.props.t('settings.apiKeyCopied') : 'API-Schlüssel in Zwischenablage kopiert'}
          anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
        />
      </Box>
    );
  }
}

export default withI18n()(SettingsTab);