import React, { useState } from 'react';
import api from '../api';
import { reportError, logUserActionError } from '../utils/errorLogger';

const AccountSettingsPage = ({ onNavigate, user, onUserUpdate }) => {
    const [activeTab, setActiveTab] = useState('profile');
    const [isLoading, setIsLoading] = useState(false);
    const [message, setMessage] = useState({ type: '', text: '' });

    // 프로필 정보 상태
    const [profileData, setProfileData] = useState({
        name: user?.name || '',
        email: user?.email || '',
        department: user?.department || '',
        position: user?.position || ''
    });

    // 비밀번호 변경 상태
    const [passwordData, setPasswordData] = useState({
        currentPassword: '',
        newPassword: '',
        confirmPassword: ''
    });

    const [validationErrors, setValidationErrors] = useState({});

    const handleProfileChange = (e) => {
        const { name, value } = e.target;
        setProfileData(prev => ({
            ...prev,
            [name]: value
        }));
        
        // 에러 메시지 초기화
        if (validationErrors[name]) {
            setValidationErrors(prev => ({
                ...prev,
                [name]: ''
            }));
        }
        if (message.text) setMessage({ type: '', text: '' });
    };

    const handlePasswordChange = (e) => {
        const { name, value } = e.target;
        setPasswordData(prev => ({
            ...prev,
            [name]: value
        }));
        
        // 에러 메시지 초기화
        if (validationErrors[name]) {
            setValidationErrors(prev => ({
                ...prev,
                [name]: ''
            }));
        }
        if (message.text) setMessage({ type: '', text: '' });
    };

    const validateProfileForm = () => {
        const errors = {};

        if (!profileData.name.trim()) {
            errors.name = '이름을 입력해주세요';
        } else if (profileData.name.length < 2 || profileData.name.length > 50) {
            errors.name = '이름은 2-50자여야 합니다';
        }

        if (profileData.email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(profileData.email)) {
            errors.email = '올바른 이메일 형식을 입력해주세요';
        }

        setValidationErrors(errors);
        return Object.keys(errors).length === 0;
    };

    const validatePasswordForm = () => {
        const errors = {};

        if (!passwordData.currentPassword) {
            errors.currentPassword = '현재 비밀번호를 입력해주세요';
        }

        if (!passwordData.newPassword) {
            errors.newPassword = '새 비밀번호를 입력해주세요';
        } else if (passwordData.newPassword.length < 8) {
            errors.newPassword = '새 비밀번호는 8자 이상이어야 합니다';
        }

        if (!passwordData.confirmPassword) {
            errors.confirmPassword = '비밀번호 확인을 입력해주세요';
        } else if (passwordData.newPassword !== passwordData.confirmPassword) {
            errors.confirmPassword = '새 비밀번호가 일치하지 않습니다';
        }

        setValidationErrors(errors);
        return Object.keys(errors).length === 0;
    };

    const handleProfileSubmit = async (e) => {
        e.preventDefault();
        
        if (!validateProfileForm()) {
            return;
        }

        setIsLoading(true);
        setMessage({ type: '', text: '' });

        try {
            const response = await api.put('/auth/profile', {
                name: profileData.name.trim(),
                email: profileData.email.trim() || null,
                department: profileData.department.trim() || null,
                position: profileData.position.trim() || null
            });

            if (response.data.success) {
                const updatedUser = { ...user, ...response.data.user };
                onUserUpdate(updatedUser);
                setMessage({ type: 'success', text: '프로필이 성공적으로 업데이트되었습니다' });
            } else {
                setMessage({ type: 'error', text: response.data.message || '프로필 업데이트에 실패했습니다' });
            }

        } catch (err) {
            console.error('Profile update error:', err);
            
            const errorMessage = err.response?.data?.detail || 
                               err.response?.data?.message || 
                               '프로필 업데이트 중 오류가 발생했습니다';
            
            setMessage({ type: 'error', text: errorMessage });
            
            logUserActionError('profile_update', err, { userId: user?.user_id });
            
        } finally {
            setIsLoading(false);
        }
    };

    const handlePasswordSubmit = async (e) => {
        e.preventDefault();
        
        if (!validatePasswordForm()) {
            return;
        }

        setIsLoading(true);
        setMessage({ type: '', text: '' });

        try {
            const response = await api.put('/auth/change-password', {
                current_password: passwordData.currentPassword,
                new_password: passwordData.newPassword
            });

            if (response.data.success) {
                setPasswordData({
                    currentPassword: '',
                    newPassword: '',
                    confirmPassword: ''
                });
                setMessage({ type: 'success', text: '비밀번호가 성공적으로 변경되었습니다' });
            } else {
                setMessage({ type: 'error', text: response.data.message || '비밀번호 변경에 실패했습니다' });
            }

        } catch (err) {
            console.error('Password change error:', err);
            
            const errorMessage = err.response?.data?.detail || 
                               err.response?.data?.message || 
                               '비밀번호 변경 중 오류가 발생했습니다';
            
            setMessage({ type: 'error', text: errorMessage });
            
            logUserActionError('password_change', err, { userId: user?.user_id });
            
        } finally {
            setIsLoading(false);
        }
    };

    return (
        <div style={{ minHeight: '100vh', background: '#f8f9fa' }}>
            {/* 헤더 */}
            <div style={{
                background: 'white',
                borderBottom: '1px solid #e9ecef',
                padding: '16px 32px',
                display: 'flex',
                alignItems: 'center',
                gap: '16px'
            }}>
                <button
                    onClick={() => onNavigate('dashboard')}
                    style={{
                        background: 'none',
                        border: 'none',
                        color: '#28a745',
                        fontSize: '20px',
                        cursor: 'pointer',
                        padding: '4px',
                        borderRadius: '4px',
                        transition: 'background-color 0.2s'
                    }}
                    onMouseEnter={(e) => e.target.style.background = '#f8f9fa'}
                    onMouseLeave={(e) => e.target.style.background = 'none'}
                    title="대시보드로 돌아가기"
                >
                    ←
                </button>
                <div>
                    <h1 style={{ fontSize: '24px', fontWeight: '700', color: '#2d3748', margin: 0 }}>
                        ⚙️ 계정 설정
                    </h1>
                    <p style={{ color: '#6c757d', fontSize: '14px', margin: '4px 0 0 0' }}>
                        프로필 정보 및 비밀번호를 관리하세요
                    </p>
                </div>
            </div>

            <div style={{ padding: '32px', maxWidth: '800px', margin: '0 auto' }}>
                {/* 탭 메뉴 */}
                <div style={{
                    display: 'flex',
                    borderBottom: '2px solid #e9ecef',
                    marginBottom: '32px'
                }}>
                    <button
                        onClick={() => setActiveTab('profile')}
                        style={{
                            padding: '12px 24px',
                            background: 'none',
                            border: 'none',
                            borderBottom: activeTab === 'profile' ? '2px solid #007bff' : '2px solid transparent',
                            color: activeTab === 'profile' ? '#007bff' : '#6c757d',
                            fontSize: '16px',
                            fontWeight: '600',
                            cursor: 'pointer',
                            transition: 'all 0.2s ease'
                        }}
                    >
                        👤 프로필 정보
                    </button>
                    <button
                        onClick={() => setActiveTab('password')}
                        style={{
                            padding: '12px 24px',
                            background: 'none',
                            border: 'none',
                            borderBottom: activeTab === 'password' ? '2px solid #007bff' : '2px solid transparent',
                            color: activeTab === 'password' ? '#007bff' : '#6c757d',
                            fontSize: '16px',
                            fontWeight: '600',
                            cursor: 'pointer',
                            transition: 'all 0.2s ease'
                        }}
                    >
                        🔒 비밀번호 변경
                    </button>
                </div>

                {/* 메시지 표시 */}
                {message.text && (
                    <div style={{
                        padding: '12px 16px',
                        borderRadius: '8px',
                        marginBottom: '24px',
                        backgroundColor: message.type === 'success' ? '#d1edff' : '#f8d7da',
                        border: `1px solid ${message.type === 'success' ? '#bee5eb' : '#f5c6cb'}`,
                        color: message.type === 'success' ? '#0c5460' : '#721c24'
                    }}>
                        {message.text}
                    </div>
                )}

                {/* 프로필 정보 탭 */}
                {activeTab === 'profile' && (
                    <div style={{
                        background: 'white',
                        borderRadius: '12px',
                        padding: '32px',
                        boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)'
                    }}>
                        <h2 style={{ fontSize: '20px', fontWeight: '600', color: '#2d3748', marginBottom: '24px' }}>
                            프로필 정보
                        </h2>

                        <form onSubmit={handleProfileSubmit}>
                            <div style={{ display: 'grid', gap: '20px' }}>
                                {/* 사용자명 (읽기 전용) */}
                                <div>
                                    <label style={{
                                        display: 'block',
                                        fontSize: '14px',
                                        fontWeight: '600',
                                        color: '#374151',
                                        marginBottom: '6px'
                                    }}>
                                        사용자명
                                    </label>
                                    <input
                                        type="text"
                                        value={user?.username || ''}
                                        disabled
                                        style={{
                                            width: '100%',
                                            padding: '12px',
                                            border: '1px solid #d1d5db',
                                            borderRadius: '8px',
                                            fontSize: '14px',
                                            backgroundColor: '#f9fafb',
                                            color: '#6b7280',
                                            boxSizing: 'border-box'
                                        }}
                                    />
                                    <p style={{ fontSize: '12px', color: '#6b7280', marginTop: '4px' }}>
                                        사용자명은 변경할 수 없습니다
                                    </p>
                                </div>

                                {/* 이름 */}
                                <div>
                                    <label style={{
                                        display: 'block',
                                        fontSize: '14px',
                                        fontWeight: '600',
                                        color: '#374151',
                                        marginBottom: '6px'
                                    }}>
                                        이름 *
                                    </label>
                                    <input
                                        type="text"
                                        name="name"
                                        value={profileData.name}
                                        onChange={handleProfileChange}
                                        style={{
                                            width: '100%',
                                            padding: '12px',
                                            border: validationErrors.name ? '2px solid #ef4444' : '1px solid #d1d5db',
                                            borderRadius: '8px',
                                            fontSize: '14px',
                                            outline: 'none',
                                            transition: 'border-color 0.2s',
                                            boxSizing: 'border-box'
                                        }}
                                        onFocus={(e) => e.target.style.borderColor = '#3b82f6'}
                                        onBlur={(e) => e.target.style.borderColor = validationErrors.name ? '#ef4444' : '#d1d5db'}
                                    />
                                    {validationErrors.name && (
                                        <p style={{ color: '#ef4444', fontSize: '12px', marginTop: '4px' }}>
                                            {validationErrors.name}
                                        </p>
                                    )}
                                </div>

                                {/* 이메일 */}
                                <div>
                                    <label style={{
                                        display: 'block',
                                        fontSize: '14px',
                                        fontWeight: '600',
                                        color: '#374151',
                                        marginBottom: '6px'
                                    }}>
                                        이메일
                                    </label>
                                    <input
                                        type="email"
                                        name="email"
                                        value={profileData.email}
                                        onChange={handleProfileChange}
                                        placeholder="example@company.com"
                                        style={{
                                            width: '100%',
                                            padding: '12px',
                                            border: validationErrors.email ? '2px solid #ef4444' : '1px solid #d1d5db',
                                            borderRadius: '8px',
                                            fontSize: '14px',
                                            outline: 'none',
                                            transition: 'border-color 0.2s',
                                            boxSizing: 'border-box'
                                        }}
                                        onFocus={(e) => e.target.style.borderColor = '#3b82f6'}
                                        onBlur={(e) => e.target.style.borderColor = validationErrors.email ? '#ef4444' : '#d1d5db'}
                                    />
                                    {validationErrors.email && (
                                        <p style={{ color: '#ef4444', fontSize: '12px', marginTop: '4px' }}>
                                            {validationErrors.email}
                                        </p>
                                    )}
                                </div>

                                {/* 부서 및 직책 */}
                                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px' }}>
                                    <div>
                                        <label style={{
                                            display: 'block',
                                            fontSize: '14px',
                                            fontWeight: '600',
                                            color: '#374151',
                                            marginBottom: '6px'
                                        }}>
                                            부서
                                        </label>
                                        <input
                                            type="text"
                                            name="department"
                                            value={profileData.department}
                                            onChange={handleProfileChange}
                                            placeholder="IT팀"
                                            style={{
                                                width: '100%',
                                                padding: '12px',
                                                border: '1px solid #d1d5db',
                                                borderRadius: '8px',
                                                fontSize: '14px',
                                                outline: 'none',
                                                transition: 'border-color 0.2s',
                                                boxSizing: 'border-box'
                                            }}
                                            onFocus={(e) => e.target.style.borderColor = '#3b82f6'}
                                            onBlur={(e) => e.target.style.borderColor = '#d1d5db'}
                                        />
                                    </div>
                                    <div>
                                        <label style={{
                                            display: 'block',
                                            fontSize: '14px',
                                            fontWeight: '600',
                                            color: '#374151',
                                            marginBottom: '6px'
                                        }}>
                                            직책
                                        </label>
                                        <input
                                            type="text"
                                            name="position"
                                            value={profileData.position}
                                            onChange={handleProfileChange}
                                            placeholder="관리자"
                                            style={{
                                                width: '100%',
                                                padding: '12px',
                                                border: '1px solid #d1d5db',
                                                borderRadius: '8px',
                                                fontSize: '14px',
                                                outline: 'none',
                                                transition: 'border-color 0.2s',
                                                boxSizing: 'border-box'
                                            }}
                                            onFocus={(e) => e.target.style.borderColor = '#3b82f6'}
                                            onBlur={(e) => e.target.style.borderColor = '#d1d5db'}
                                        />
                                    </div>
                                </div>

                                {/* 역할 (읽기 전용) */}
                                <div>
                                    <label style={{
                                        display: 'block',
                                        fontSize: '14px',
                                        fontWeight: '600',
                                        color: '#374151',
                                        marginBottom: '6px'
                                    }}>
                                        역할
                                    </label>
                                    <input
                                        type="text"
                                        value={user?.role === 'system' ? '시스템 관리자' : 
                                               user?.role === 'admin' ? '관리자' : '사용자'}
                                        disabled
                                        style={{
                                            width: '100%',
                                            padding: '12px',
                                            border: '1px solid #d1d5db',
                                            borderRadius: '8px',
                                            fontSize: '14px',
                                            backgroundColor: '#f9fafb',
                                            color: '#6b7280',
                                            boxSizing: 'border-box'
                                        }}
                                    />
                                    <p style={{ fontSize: '12px', color: '#6b7280', marginTop: '4px' }}>
                                        역할은 시스템 관리자만 변경할 수 있습니다
                                    </p>
                                </div>
                            </div>

                            <button
                                type="submit"
                                disabled={isLoading}
                                style={{
                                    marginTop: '24px',
                                    padding: '12px 24px',
                                    backgroundColor: isLoading ? '#9ca3af' : '#007bff',
                                    color: 'white',
                                    border: 'none',
                                    borderRadius: '8px',
                                    fontSize: '16px',
                                    fontWeight: '600',
                                    cursor: isLoading ? 'not-allowed' : 'pointer',
                                    transition: 'background-color 0.2s',
                                    display: 'flex',
                                    alignItems: 'center',
                                    gap: '8px'
                                }}
                                onMouseEnter={(e) => {
                                    if (!isLoading) e.target.style.backgroundColor = '#0056b3';
                                }}
                                onMouseLeave={(e) => {
                                    if (!isLoading) e.target.style.backgroundColor = '#007bff';
                                }}
                            >
                                {isLoading ? '저장 중...' : '💾 프로필 저장'}
                            </button>
                        </form>
                    </div>
                )}

                {/* 비밀번호 변경 탭 */}
                {activeTab === 'password' && (
                    <div style={{
                        background: 'white',
                        borderRadius: '12px',
                        padding: '32px',
                        boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)'
                    }}>
                        <h2 style={{ fontSize: '20px', fontWeight: '600', color: '#2d3748', marginBottom: '24px' }}>
                            비밀번호 변경
                        </h2>

                        <form onSubmit={handlePasswordSubmit}>
                            <div style={{ display: 'grid', gap: '20px', maxWidth: '400px' }}>
                                {/* 현재 비밀번호 */}
                                <div>
                                    <label style={{
                                        display: 'block',
                                        fontSize: '14px',
                                        fontWeight: '600',
                                        color: '#374151',
                                        marginBottom: '6px'
                                    }}>
                                        현재 비밀번호 *
                                    </label>
                                    <input
                                        type="password"
                                        name="currentPassword"
                                        value={passwordData.currentPassword}
                                        onChange={handlePasswordChange}
                                        style={{
                                            width: '100%',
                                            padding: '12px',
                                            border: validationErrors.currentPassword ? '2px solid #ef4444' : '1px solid #d1d5db',
                                            borderRadius: '8px',
                                            fontSize: '14px',
                                            outline: 'none',
                                            transition: 'border-color 0.2s',
                                            boxSizing: 'border-box'
                                        }}
                                        onFocus={(e) => e.target.style.borderColor = '#3b82f6'}
                                        onBlur={(e) => e.target.style.borderColor = validationErrors.currentPassword ? '#ef4444' : '#d1d5db'}
                                    />
                                    {validationErrors.currentPassword && (
                                        <p style={{ color: '#ef4444', fontSize: '12px', marginTop: '4px' }}>
                                            {validationErrors.currentPassword}
                                        </p>
                                    )}
                                </div>

                                {/* 새 비밀번호 */}
                                <div>
                                    <label style={{
                                        display: 'block',
                                        fontSize: '14px',
                                        fontWeight: '600',
                                        color: '#374151',
                                        marginBottom: '6px'
                                    }}>
                                        새 비밀번호 *
                                    </label>
                                    <input
                                        type="password"
                                        name="newPassword"
                                        value={passwordData.newPassword}
                                        onChange={handlePasswordChange}
                                        placeholder="8자 이상 입력해주세요"
                                        style={{
                                            width: '100%',
                                            padding: '12px',
                                            border: validationErrors.newPassword ? '2px solid #ef4444' : '1px solid #d1d5db',
                                            borderRadius: '8px',
                                            fontSize: '14px',
                                            outline: 'none',
                                            transition: 'border-color 0.2s',
                                            boxSizing: 'border-box'
                                        }}
                                        onFocus={(e) => e.target.style.borderColor = '#3b82f6'}
                                        onBlur={(e) => e.target.style.borderColor = validationErrors.newPassword ? '#ef4444' : '#d1d5db'}
                                    />
                                    {validationErrors.newPassword && (
                                        <p style={{ color: '#ef4444', fontSize: '12px', marginTop: '4px' }}>
                                            {validationErrors.newPassword}
                                        </p>
                                    )}
                                </div>

                                {/* 새 비밀번호 확인 */}
                                <div>
                                    <label style={{
                                        display: 'block',
                                        fontSize: '14px',
                                        fontWeight: '600',
                                        color: '#374151',
                                        marginBottom: '6px'
                                    }}>
                                        새 비밀번호 확인 *
                                    </label>
                                    <input
                                        type="password"
                                        name="confirmPassword"
                                        value={passwordData.confirmPassword}
                                        onChange={handlePasswordChange}
                                        placeholder="새 비밀번호를 다시 입력해주세요"
                                        style={{
                                            width: '100%',
                                            padding: '12px',
                                            border: validationErrors.confirmPassword ? '2px solid #ef4444' : '1px solid #d1d5db',
                                            borderRadius: '8px',
                                            fontSize: '14px',
                                            outline: 'none',
                                            transition: 'border-color 0.2s',
                                            boxSizing: 'border-box'
                                        }}
                                        onFocus={(e) => e.target.style.borderColor = '#3b82f6'}
                                        onBlur={(e) => e.target.style.borderColor = validationErrors.confirmPassword ? '#ef4444' : '#d1d5db'}
                                    />
                                    {validationErrors.confirmPassword && (
                                        <p style={{ color: '#ef4444', fontSize: '12px', marginTop: '4px' }}>
                                            {validationErrors.confirmPassword}
                                        </p>
                                    )}
                                </div>
                            </div>

                            <button
                                type="submit"
                                disabled={isLoading}
                                style={{
                                    marginTop: '24px',
                                    padding: '12px 24px',
                                    backgroundColor: isLoading ? '#9ca3af' : '#dc3545',
                                    color: 'white',
                                    border: 'none',
                                    borderRadius: '8px',
                                    fontSize: '16px',
                                    fontWeight: '600',
                                    cursor: isLoading ? 'not-allowed' : 'pointer',
                                    transition: 'background-color 0.2s',
                                    display: 'flex',
                                    alignItems: 'center',
                                    gap: '8px'
                                }}
                                onMouseEnter={(e) => {
                                    if (!isLoading) e.target.style.backgroundColor = '#c82333';
                                }}
                                onMouseLeave={(e) => {
                                    if (!isLoading) e.target.style.backgroundColor = '#dc3545';
                                }}
                            >
                                {isLoading ? '변경 중...' : '🔒 비밀번호 변경'}
                            </button>
                        </form>

                        {/* 보안 안내 */}
                        <div style={{
                            marginTop: '32px',
                            padding: '16px',
                            backgroundColor: '#fff3cd',
                            border: '1px solid #ffeaa7',
                            borderRadius: '8px'
                        }}>
                            <h4 style={{ fontSize: '14px', fontWeight: '600', color: '#856404', margin: '0 0 8px 0' }}>
                                🔐 보안 안내
                            </h4>
                            <ul style={{ fontSize: '12px', color: '#856404', margin: 0, paddingLeft: '16px' }}>
                                <li>비밀번호는 8자 이상으로 설정해주세요</li>
                                <li>영문, 숫자, 특수문자를 조합하여 사용하는 것을 권장합니다</li>
                                <li>정기적으로 비밀번호를 변경해주세요</li>
                                <li>다른 사이트와 동일한 비밀번호 사용을 피해주세요</li>
                            </ul>
                        </div>
                    </div>
                )}
            </div>
        </div>
    );
};

export default AccountSettingsPage;