"use client";
import React, { useEffect, useState } from 'react';
import { Navigate } from 'react-router-dom';

/**
 * نفس منطق الحماية الأصلي (وجود token في localStorage).
 * localStorage لا يوجد على الخادم، لذا يُفحص بعد التركيب في المتصفح.
 * يقبل الصيغة الأصلية component={Profile} أو children.
 */
const ProtectedRoute = ({ component: Component, children, ...rest }: any) => {
    const [status, setStatus] = useState<'checking' | 'in' | 'out'>('checking');

    useEffect(() => {
        let token: string | null = null;
        try { token = localStorage.getItem('token'); } catch { /* ignore */ }
        setStatus(token ? 'in' : 'out');
    }, []);

    if (status === 'checking') return null;

    if (status === 'out') {
        return <Navigate to="/login" state={{ message: 'من فضلك قم بتسجيل الدخول اولا' }} />;
    }

    return Component ? <Component {...rest} /> : <>{children}</>;
};

export default ProtectedRoute;