import React, { useState, useRef } from 'react';
import WidgetContainer from './WidgetContainer';
import styles from './WidgetStyles.module.css';

const UserProfile = ({ currentUser, onUpdateUser }) => {
    const [isEditing, setIsEditing] = useState(false);
    const [formData, setFormData] = useState({ ...currentUser });
    const fileInputRef = useRef(null);

    const handleChange = (e) => {
        const { name, value } = e.target;
        setFormData(prev => ({ ...prev, [name]: value }));
    };

    const handlePhotoUpload = (e) => {
        const file = e.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onloadend = () => {
                setFormData(prev => ({ ...prev, photo: reader.result }));
            };
            reader.readAsDataURL(file);
        }
    };

    const handleSave = () => {
        onUpdateUser(formData);
        setIsEditing(false);
    };

    const handleCancel = () => {
        setFormData({ ...currentUser });
        setIsEditing(false);
    };

    return (
        <WidgetContainer title="My Profile">
            <div style={{ padding: '2rem', display: 'flex', gap: '3rem', maxWidth: '800px', margin: '0 auto' }}>
                {/* Left Column: Avatar & Actions */}
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '1.5rem' }}>
                    <div style={{
                        width: '150px', height: '150px',
                        borderRadius: '50%',
                        backgroundColor: 'var(--bg-secondary)',
                        border: '4px solid var(--accent-primary)',
                        display: 'flex', alignItems: 'center', justifyContent: 'center',
                        fontSize: '3rem', color: 'var(--text-primary)',
                        overflow: 'hidden',
                        position: 'relative'
                    }}>
                        {formData.photo ? (
                            <img src={formData.photo} alt="Profile" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                        ) : (
                            formData.name ? formData.name.substring(0, 2).toUpperCase() : 'US'
                        )}

                        {isEditing && (
                            <div
                                onClick={() => fileInputRef.current.click()}
                                style={{
                                    position: 'absolute', bottom: 0, left: 0, right: 0,
                                    backgroundColor: 'rgba(0,0,0,0.6)', color: 'white',
                                    padding: '0.5rem', fontSize: '0.8rem', textAlign: 'center',
                                    cursor: 'pointer'
                                }}
                            >
                                Change
                            </div>
                        )}
                    </div>
                    <input
                        type="file"
                        ref={fileInputRef}
                        style={{ display: 'none' }}
                        accept="image/*"
                        onChange={handlePhotoUpload}
                    />

                    {!isEditing ? (
                        <button
                            onClick={() => setIsEditing(true)}
                            style={{
                                padding: '0.75rem 2rem',
                                backgroundColor: 'var(--accent-primary)',
                                color: 'white', border: 'none', borderRadius: '8px',
                                cursor: 'pointer', fontWeight: 600
                            }}
                        >
                            Edit Profile
                        </button>
                    ) : (
                        <div style={{ display: 'flex', gap: '1rem' }}>
                            <button
                                onClick={handleSave}
                                style={{
                                    padding: '0.5rem 1.5rem',
                                    backgroundColor: '#22c55e',
                                    color: 'white', border: 'none', borderRadius: '6px',
                                    cursor: 'pointer', fontWeight: 600
                                }}
                            >
                                Save
                            </button>
                            <button
                                onClick={handleCancel}
                                style={{
                                    padding: '0.5rem 1.5rem',
                                    backgroundColor: 'transparent',
                                    border: '1px solid var(--text-secondary)',
                                    color: 'var(--text-secondary)', borderRadius: '6px',
                                    cursor: 'pointer'
                                }}
                            >
                                Cancel
                            </button>
                        </div>
                    )}
                </div>

                {/* Right Column: Details */}
                <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
                    <div className={styles.inputGroup}>
                        <label style={{ display: 'block', marginBottom: '0.5rem', color: 'var(--text-secondary)' }}>Full Name</label>
                        {isEditing ? (
                            <input
                                name="name"
                                value={formData.name}
                                onChange={handleChange}
                                style={{
                                    width: '100%', padding: '0.8rem',
                                    background: 'rgba(255,255,255,0.05)',
                                    border: '1px solid var(--border-color)',
                                    borderRadius: '6px', color: 'white'
                                }}
                            />
                        ) : (
                            <div style={{ fontSize: '1.2rem', fontWeight: 600 }}>{currentUser.name}</div>
                        )}
                    </div>

                    <div className={styles.inputGroup}>
                        <label style={{ display: 'block', marginBottom: '0.5rem', color: 'var(--text-secondary)' }}>Email Address</label>
                        {isEditing ? (
                            <input
                                name="email"
                                value={formData.email || ''}
                                onChange={handleChange}
                                style={{
                                    width: '100%', padding: '0.8rem',
                                    background: 'rgba(255,255,255,0.05)',
                                    border: '1px solid var(--border-color)',
                                    borderRadius: '6px', color: 'white'
                                }}
                            />
                        ) : (
                            <div style={{ fontSize: '1.1rem' }}>{currentUser.email || 'N/A'}</div>
                        )}
                    </div>

                    <div className={styles.inputGroup}>
                        <label style={{ display: 'block', marginBottom: '0.5rem', color: 'var(--text-secondary)' }}>Role</label>
                        <div style={{ fontSize: '1.1rem', opacity: 0.8 }}>{currentUser.role}</div>
                    </div>

                    {isEditing && (
                        <div className={styles.inputGroup}>
                            <label style={{ display: 'block', marginBottom: '0.5rem', color: 'var(--text-secondary)' }}>New Password</label>
                            <input
                                name="password"
                                type="password"
                                placeholder="Leave blank to keep current"
                                onChange={handleChange}
                                style={{
                                    width: '100%', padding: '0.8rem',
                                    background: 'rgba(255,255,255,0.05)',
                                    border: '1px solid var(--border-color)',
                                    borderRadius: '6px', color: 'white'
                                }}
                            />
                        </div>
                    )}
                </div>
            </div>
        </WidgetContainer>
    );
};

export default UserProfile;
