import React, { useState, useEffect } from 'react';

const SimpleDashboard = () => {
    const [user, setUser] = useState(null);

    useEffect(() => {
        // 저장된 사용자 정보 불러오기
        const userData = localStorage.getItem('user_data');
        if (userData) {
            setUser(JSON.parse(userData));
        }
    }, []);

    const handleLogout = () => {
        localStorage.removeItem('access_token');
        localStorage.removeItem('user_data');
        window.location.reload(); // 페이지 새로고침으로 로그인 페이지로 돌아가기
    };

    if (!user) {
        return (
            <div style={{
                minHeight: '100vh',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                background: '#f7fafc'
            }}>
                <div>사용자 정보를 불러오는 중...</div>
            </div>
        );
    }

    return (
        <div style={{
            minHeight: '100vh',
            background: '#f7fafc',
            fontFamily: 'Arial, sans-serif'
        }}>
            {/* 네비게이션 바 */}
            <nav style={{
                background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
                padding: '16px 24px',
                color: 'white',
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center',
                boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)'
            }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
                    <span style={{ fontSize: '24px' }}>🚀</span>
                    <div>
                        <h1 style={{ margin: '0', fontSize: '20px', fontWeight: '700' }}>TK-MP System</h1>
                        <span style={{ fontSize: '12px', opacity: '0.9' }}>통합 프로젝트 관리</span>
                    </div>
                </div>
                
                <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
                    <div style={{ textAlign: 'right' }}>
                        <div style={{ fontSize: '14px', fontWeight: '600' }}>{user.name}</div>
                        <div style={{ fontSize: '12px', opacity: '0.9' }}>
                            {user.role} · {user.access_level}
                        </div>
                    </div>
                    <button
                        onClick={handleLogout}
                        style={{
                            padding: '8px 16px',
                            background: 'rgba(255, 255, 255, 0.2)',
                            color: 'white',
                            border: 'none',
                            borderRadius: '6px',
                            cursor: 'pointer',
                            fontSize: '14px'
                        }}
                    >
                        로그아웃
                    </button>
                </div>
            </nav>

            {/* 메인 콘텐츠 */}
            <main style={{ padding: '32px 24px' }}>
                <div style={{ maxWidth: '1200px', margin: '0 auto' }}>
                    {/* 환영 메시지 */}
                    <div style={{
                        background: 'white',
                        borderRadius: '16px',
                        padding: '32px',
                        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.05)',
                        marginBottom: '32px'
                    }}>
                        <h2 style={{ 
                            color: '#2d3748', 
                            fontSize: '24px', 
                            fontWeight: '700', 
                            margin: '0 0 16px 0' 
                        }}>
                            환영합니다, {user.name}님! 🎉
                        </h2>
                        <p style={{ color: '#718096', fontSize: '16px', margin: '0' }}>
                            TK-MP 통합 프로젝트 관리 시스템에 성공적으로 로그인하셨습니다.
                        </p>
                    </div>

                    {/* 사용자 정보 카드 */}
                    <div style={{
                        background: 'white',
                        borderRadius: '16px',
                        padding: '32px',
                        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.05)',
                        marginBottom: '32px'
                    }}>
                        <h3 style={{ 
                            color: '#2d3748', 
                            fontSize: '20px', 
                            fontWeight: '600', 
                            margin: '0 0 24px 0' 
                        }}>
                            👤 사용자 정보
                        </h3>
                        
                        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: '16px' }}>
                            <div>
                                <strong style={{ color: '#4a5568' }}>사용자명:</strong>
                                <div style={{ color: '#2d3748', marginTop: '4px' }}>{user.username}</div>
                            </div>
                            <div>
                                <strong style={{ color: '#4a5568' }}>이메일:</strong>
                                <div style={{ color: '#2d3748', marginTop: '4px' }}>{user.email}</div>
                            </div>
                            <div>
                                <strong style={{ color: '#4a5568' }}>역할:</strong>
                                <div style={{ color: '#2d3748', marginTop: '4px' }}>{user.role}</div>
                            </div>
                            <div>
                                <strong style={{ color: '#4a5568' }}>접근 레벨:</strong>
                                <div style={{ color: '#2d3748', marginTop: '4px' }}>{user.access_level}</div>
                            </div>
                            {user.department && (
                                <div>
                                    <strong style={{ color: '#4a5568' }}>부서:</strong>
                                    <div style={{ color: '#2d3748', marginTop: '4px' }}>{user.department}</div>
                                </div>
                            )}
                            {user.position && (
                                <div>
                                    <strong style={{ color: '#4a5568' }}>직책:</strong>
                                    <div style={{ color: '#2d3748', marginTop: '4px' }}>{user.position}</div>
                                </div>
                            )}
                        </div>
                    </div>

                    {/* 권한 정보 */}
                    <div style={{
                        background: 'white',
                        borderRadius: '16px',
                        padding: '32px',
                        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.05)'
                    }}>
                        <h3 style={{ 
                            color: '#2d3748', 
                            fontSize: '20px', 
                            fontWeight: '600', 
                            margin: '0 0 24px 0' 
                        }}>
                            🔐 보유 권한
                        </h3>
                        
                        <div style={{ 
                            display: 'flex', 
                            flexWrap: 'wrap', 
                            gap: '8px' 
                        }}>
                            {user.permissions && user.permissions.length > 0 ? (
                                user.permissions.map(permission => (
                                    <span
                                        key={permission}
                                        style={{
                                            padding: '6px 12px',
                                            background: '#e2e8f0',
                                            color: '#4a5568',
                                            borderRadius: '20px',
                                            fontSize: '12px',
                                            fontWeight: '500'
                                        }}
                                    >
                                        {permission}
                                    </span>
                                ))
                            ) : (
                                <span style={{ color: '#718096' }}>권한 정보가 없습니다.</span>
                            )}
                        </div>
                    </div>

                    {/* 다음 단계 안내 */}
                    <div style={{
                        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
                        borderRadius: '16px',
                        padding: '32px',
                        color: 'white',
                        marginTop: '32px',
                        textAlign: 'center'
                    }}>
                        <h3 style={{ margin: '0 0 16px 0', fontSize: '20px', fontWeight: '600' }}>
                            🚀 다음 단계
                        </h3>
                        <p style={{ margin: '0', fontSize: '16px', opacity: '0.9' }}>
                            이제 복잡한 인증 시스템과 네비게이션을 단계적으로 추가할 준비가 되었습니다!
                        </p>
                    </div>
                </div>
            </main>
        </div>
    );
};

export default SimpleDashboard;






















