import React from 'react';
import { useAuth } from '../contexts/AuthContext';
import LoginPage from '../pages/LoginPage';

const ProtectedRoute = ({ 
    children, 
    requiredPermission = null, 
    requiredRole = null,
    fallback = null 
}) => {
    const { isAuthenticated, isLoading, user, hasPermission, hasRole } = useAuth();

    // 로딩 중일 때
    if (isLoading) {
        return (
            <div className="loading-container" style={{
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'center',
                justifyContent: 'center',
                minHeight: '100vh',
                background: '#f7fafc',
                color: '#718096'
            }}>
                <div className="loading-spinner-large" style={{
                    width: '48px',
                    height: '48px',
                    border: '4px solid #e2e8f0',
                    borderTop: '4px solid #667eea',
                    borderRadius: '50%',
                    animation: 'spin 1s linear infinite',
                    marginBottom: '16px'
                }}></div>
                <p>인증 정보를 확인하는 중...</p>
            </div>
        );
    }

    // 인증되지 않은 경우
    if (!isAuthenticated) {
        return <LoginPage />;
    }

    // 특정 권한이 필요한 경우
    if (requiredPermission && !hasPermission(requiredPermission)) {
        return fallback || (
            <div className="access-denied-container">
                <div className="access-denied-content">
                    <div className="access-denied-icon">🔒</div>
                    <h2>접근 권한이 없습니다</h2>
                    <p>이 페이지에 접근하기 위한 권한이 없습니다.</p>
                    <p className="permission-info">
                        필요한 권한: <code>{requiredPermission}</code>
                    </p>
                    <div className="user-info">
                        <p>현재 사용자: <strong>{user?.name}</strong> ({user?.username})</p>
                        <p>역할: <strong>{user?.role}</strong></p>
                        <p>접근 레벨: <strong>{user?.access_level}</strong></p>
                    </div>
                    <button 
                        className="back-button"
                        onClick={() => window.history.back()}
                    >
                        이전 페이지로 돌아가기
                    </button>
                </div>
            </div>
        );
    }

    // 특정 역할이 필요한 경우
    if (requiredRole && !hasRole(requiredRole)) {
        return fallback || (
            <div className="access-denied-container">
                <div className="access-denied-content">
                    <div className="access-denied-icon">👤</div>
                    <h2>역할 권한이 없습니다</h2>
                    <p>이 페이지에 접근하기 위한 역할 권한이 없습니다.</p>
                    <p className="role-info">
                        필요한 역할: <code>{requiredRole}</code>
                    </p>
                    <div className="user-info">
                        <p>현재 사용자: <strong>{user?.name}</strong> ({user?.username})</p>
                        <p>현재 역할: <strong>{user?.role}</strong></p>
                    </div>
                    <button 
                        className="back-button"
                        onClick={() => window.history.back()}
                    >
                        이전 페이지로 돌아가기
                    </button>
                </div>
            </div>
        );
    }

    // 모든 조건을 만족하는 경우 자식 컴포넌트 렌더링
    return children;
};

// 관리자 전용 라우트
export const AdminRoute = ({ children, fallback = null }) => {
    return (
        <ProtectedRoute 
            requiredRole="admin" 
            fallback={fallback}
        >
            {children}
        </ProtectedRoute>
    );
};

// 시스템 관리자 전용 라우트
export const SystemRoute = ({ children, fallback = null }) => {
    const { hasRole } = useAuth();
    
    if (!hasRole('admin') && !hasRole('system')) {
        return fallback || (
            <div className="access-denied-container">
                <div className="access-denied-content">
                    <div className="access-denied-icon">⚙️</div>
                    <h2>시스템 관리자 권한이 필요합니다</h2>
                    <p>이 페이지는 시스템 관리자만 접근할 수 있습니다.</p>
                </div>
            </div>
        );
    }

    return (
        <ProtectedRoute>
            {children}
        </ProtectedRoute>
    );
};

// 매니저 이상 권한 라우트
export const ManagerRoute = ({ children, fallback = null }) => {
    const { isManager } = useAuth();
    
    if (!isManager()) {
        return fallback || (
            <div className="access-denied-container">
                <div className="access-denied-content">
                    <div className="access-denied-icon">👔</div>
                    <h2>관리자 권한이 필요합니다</h2>
                    <p>이 페이지는 관리자 이상의 권한이 필요합니다.</p>
                </div>
            </div>
        );
    }

    return (
        <ProtectedRoute>
            {children}
        </ProtectedRoute>
    );
};

export default ProtectedRoute;
