'use client';

import { Home, ShieldX, ArrowRight } from 'lucide-react';
import { useRouter } from "next/navigation";
import { useState } from 'react';
import AuthModal from '@/components/Auth';



// تعریف تایپ برای پراپ‌ها (ورودی‌های کامپوننت)
interface NotLoginProps {
    buttonText?: string;
    returnPath?: string;
    onClose?: () => void;
}

export default function NotLogin({
    buttonText = "بازگشت به صفحه اصلی", // مقدار پیش‌فرض
    returnPath = "/",                   // مقدار پیش‌فرض
    onClose
}: NotLoginProps) {
    const router = useRouter();
    const [isAuthModalOpen, setIsAuthModalOpen] = useState(false);
    const [user, setUser] = useState<{ username: string; displayName: string } | null>(null);
    const [showRegisterSuccessDialog, setShowRegisterSuccessDialog] = useState(false);

    // مدیریت عملیات کلیک روی دکمه
    const handleAction = () => {
        if (onClose) {
            // اگر در حالت مودال (مثلا سبد خرید) استفاده شده بود، فقط مودال بسته شود
            onClose();
        } else {
            // اگر به عنوان صفحه جایگزین (مثلا چک‌اوت) استفاده شد، به مسیر پاس داده شده برود
            router.push(returnPath);
        }
    };

    // تغییر آیکون بر اساس مسیر هدایت (اختیاری برای زیبایی بیشتر)
    const renderIcon = () => {
        if (returnPath === "/") return <Home className="w-4 h-4" />;
        return <ArrowRight className="w-4 h-4" />;
    };

    return (
        <div className="min-h-screen flex items-center justify-center bg-gray-50 px-4" dir="rtl">
            <div className="bg-white shadow-xl rounded-2xl p-10 max-w-md w-full text-center border border-gray-100">
                <div className="flex justify-center mb-6">
                    <div className="bg-red-100 p-4 rounded-full">
                        <ShieldX className="w-10 h-10 text-red-600" />
                    </div>
                </div>
                <h1 className="text-2xl font-bold text-gray-800 mb-2">دسترسی غیرمجاز</h1>
                <p className="text-gray-500 text-sm leading-relaxed mb-6">برای ادامه مراحل باید ابتدا وارد حساب کاربری خود شوید.</p>

                <button
                    onClick={handleAction}
                    className="flex mx-auto cursor-pointer items-center gap-2 bg-gray-900 text-white px-5 py-2.5 rounded-lg text-sm hover:bg-black transition"
                >
                    {renderIcon()}
                    {buttonText}
                </button>





                <button onClick={() => setIsAuthModalOpen(true)}>
                    ورود / ثبت‌نام
                </button>
                {/* فراخوانی مودال احراز هویت */}
                <AuthModal
                    isOpen={isAuthModalOpen}
                    onClose={() => setIsAuthModalOpen(false)}
                    onLoginSuccess={(userData) => setUser(userData)}
                    onRegisterSuccess={(userData) => {
                        setUser(userData);
                        setShowRegisterSuccessDialog(true);
                    }}
                />



            </div>
        </div>
    );
}