'use client';

import { useCart } from "@/components/context/cartcontext";
import Link from "next/link";
import { useState, useEffect } from "react";
import {
    ShoppingBag,
    ChevronLeft,
    ChevronRight,
    Truck,
    CreditCard,
    MapPin,
    User,
    Lock // آیکون قفل برای صفحه لاگین نشده
} from "lucide-react";

export default function CheckoutPage() {
    const { cart } = useCart();
    const [shippingMethod, setShippingMethod] = useState('post');
    const [isAuthenticated, setIsAuthenticated] = useState(false);
    const [isLoading, setIsLoading] = useState(true);

    useEffect(() => {
        const token = localStorage.getItem('accessToken');
        if (token) {
            setIsAuthenticated(true);
        }
        setIsLoading(false); // پایان بررسی وضعیت
    }, []);

    // محاسبه قیمت کل و تعداد
    const parsePrice = (priceStr?: number | null) => {
        if (!priceStr) return 0;
        return Number(priceStr.toString().replace(/,/g, ''));
    };

    const totalPrice = cart.reduce((total, item) => total + (parsePrice(item.price) * item.quantity), 0);
    const totalItems = cart.reduce((total, item) => total + item.quantity, 0);
    const shippingCost = shippingMethod === 'post' ? 45000 : 75000;
    const finalPrice = totalPrice + shippingCost;

    // حالت در حال بررسی توکن
    if (isLoading) {
        return (
            <div className="min-h-screen flex items-center justify-center bg-gray-50/30">
                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#ffb900]"></div>
            </div>
        );
    }

    // اگر کاربر لاگین نبود، این صفحه به جای محتوای چک‌اوت نمایش داده می‌شود
    if (!isAuthenticated) {
        return (
            <div className="min-h-screen bg-gray-50/30 flex flex-col items-center justify-center p-6" dir="rtl">
                <div className="bg-white p-12 rounded-[2rem] shadow-sm border border-gray-100 flex flex-col items-center max-w-md w-full text-center">
                    <div className="bg-gray-100 w-24 h-24 rounded-full flex items-center justify-center mb-6">
                        <Lock size={40} className="text-gray-400" />
                    </div>
                    <h2 className="text-xl font-bold text-gray-800 mb-3">دسترسی محدود</h2>
                    <p className="text-gray-500 mb-8 leading-relaxed text-sm">
                        برای ثبت نهایی سفارش و مشاهده این صفحه، باید ابتدا وارد حساب کاربری خود شوید یا ثبت‌نام کنید.
                    </p>
                    <Link href="/cart" className="w-full bg-[#ffb900] hover:bg-[#e5a600] text-[#1A2332] font-bold py-3 rounded-xl transition-all flex items-center justify-center gap-2">
                        <ChevronRight size={18} />
                        بازگشت به سبد خرید
                    </Link>
                </div>
            </div>
        );
    }

    // اگر لاگین بود، محتوای اصلی رندر می‌شود (کد اصلی شما در اینجا قرار می‌گیرد)
    return (
        <main className="bg-gray-50/30 min-h-screen pb-20" dir="rtl">
            <div className="container mx-auto px-4 py-8 max-w-6xl">

                <div className="mb-10">
                    <div className="flex items-center justify-between mb-8">
                        <h1 className="text-xl md:text-3xl font-black text-[#1A2332]">
                            اطلاعات ارسال
                        </h1>
                        <Link href="/cart" className="text-sm text-gray-500 hover:text-[#1A2332] flex items-center gap-1 transition-colors">
                            <ChevronRight size={16} />
                            بازگشت به سبد خرید
                        </Link>
                    </div>

                    <div className="relative w-full max-w-2xl mx-auto px-2 sm:px-0 mb-12">
                        <div className="absolute top-[20px] sm:top-[24px] left-[16.5%] right-[16.5%] h-[2px] bg-gray-200 z-0">
                            <div className="h-full bg-[#ffb900] w-[50%] transition-all duration-500 ease-in-out"></div>
                        </div>

                        <div className="flex justify-between relative z-10">
                            <Link href="/cart" className="flex flex-col items-center w-1/3 group cursor-pointer">
                                <div className="w-10 h-10 sm:w-12 sm:h-12 bg-[#ffb900] text-[#1A2332] rounded-full flex items-center justify-center shadow-md mb-2 sm:mb-3 ring-[6px] ring-[#f8fafc] sm:ring-[#f8fafc] transition-transform group-hover:scale-110">
                                    <ShoppingBag className="w-5 h-5 sm:w-6 sm:h-6" strokeWidth={2} />
                                </div>
                                <span className="text-[10px] sm:text-sm font-bold text-[#1A2332] text-center">سبد خرید</span>
                            </Link>

                            <div className="flex flex-col items-center w-1/3">
                                <div className="w-10 h-10 sm:w-12 sm:h-12 bg-[#ffb900] text-[#1A2332] rounded-full flex items-center justify-center shadow-[0_0_15px_rgba(255,185,0,0.4)] mb-2 sm:mb-3 ring-[6px] ring-[#ffb900]/20 transition-all">
                                    <Truck className="w-4 h-4 sm:w-5 sm:h-5" strokeWidth={2} />
                                </div>
                                <span className="text-[10px] sm:text-sm font-bold text-[#1A2332] text-center">اطلاعات ارسال</span>
                            </div>

                            <div className="flex flex-col items-center w-1/3">
                                <div className="w-10 h-10 sm:w-12 sm:h-12 bg-white border-2 border-gray-200 text-gray-400 rounded-full flex items-center justify-center mb-2 sm:mb-3 ring-[6px] ring-[#f8fafc] sm:ring-[#f8fafc]">
                                    <CreditCard className="w-4 h-4 sm:w-5 sm:h-5" />
                                </div>
                                <span className="text-[10px] sm:text-sm font-medium text-gray-400 text-center">پرداخت</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div className="flex flex-col lg:flex-row gap-6 lg:gap-8">
                    <div className="flex-1 space-y-6">
                        <div className="bg-white rounded-[1rem] p-6 md:p-8 shadow-sm ">
                            <div className="flex items-center gap-3 mb-6 pb-4 border-b border-gray-100">
                                <div className="bg-[#1A2332]/5 p-2 rounded-lg text-[#1A2332]">
                                    <User size={20} />
                                </div>
                                <h2 className="text-base md:text-lg font-bold text-[#1A2332]">مشخصات گیرنده</h2>
                            </div>
                            <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
                                <div className="space-y-2">
                                    <label className="text-sm font-medium text-gray-600 block">نام و نام خانوادگی</label>
                                    <input type="text" placeholder="مثال: علی رضایی" className="w-full bg-gray-50 border border-gray-200 text-[#1A2332] rounded-xl px-4 py-3 outline-none focus:ring-2 focus:ring-[#ffb900]/40 focus:border-[#ffb900] transition-all placeholder:text-gray-400 placeholder:text-[13px]" />
                                </div>
                                <div className="space-y-2">
                                    <label className="text-sm font-medium text-gray-600 block">شماره موبایل</label>
                                    <input type="tel" placeholder="09123456789" className="w-full text-right bg-gray-50 border border-gray-200 text-[#1A2332] rounded-xl pl-4 pr-4 py-3 outline-none focus:ring-2 focus:ring-[#ffb900]/40 focus:border-[#ffb900] transition-all placeholder:text-gray-400 placeholder:text-[13px]" />
                                </div>
                            </div>
                        </div>

                        <div className="bg-white rounded-[1rem] p-6 md:p-8 shadow-sm">
                            <div className="flex items-center gap-3 mb-6 pb-4 border-b border-gray-100">
                                <div className="bg-[#1A2332]/5 p-2 rounded-lg text-[#1A2332]">
                                    <MapPin size={20} />
                                </div>
                                <h2 className="text-base md:text-lg font-bold text-[#1A2332]">آدرس پستی</h2>
                            </div>
                            <div className="grid grid-cols-1 md:grid-cols-2 gap-5 mb-5">
                                <div className="space-y-2">
                                    <label className="text-sm font-medium text-gray-600 block">استان</label>
                                    <select className="w-full bg-gray-50 text-[13px] border border-gray-200 text-[#1A2332] rounded-xl px-4 py-3 outline-none focus:ring-2 focus:ring-[#ffb900]/40 focus:border-[#ffb900] transition-all appearance-none cursor-pointer">
                                        <option value="">انتخاب استان...</option>
                                        <option value="tehran">تهران</option>
                                        <option value="alborz">البرز</option>
                                    </select>
                                </div>
                                <div className="space-y-2">
                                    <label className="text-sm font-medium text-gray-600 block">شهر</label>
                                    <select className="w-full text-[13px] bg-gray-50 border border-gray-200 text-[#1A2332] rounded-xl px-4 py-3 outline-none focus:ring-2 focus:ring-[#ffb900]/40 focus:border-[#ffb900] transition-all appearance-none cursor-pointer">
                                        <option value="">انتخاب شهر...</option>
                                        <option value="tehran">تهران</option>
                                        <option value="karaj">کرج</option>
                                    </select>
                                </div>
                            </div>
                            <div className="space-y-2 mb-5">
                                <label className="text-sm font-medium text-gray-600 block">آدرس دقیق پستی</label>
                                <textarea rows={3} placeholder="خیابان، کوچه، پلاک، واحد..." className="w-full text-[13px] bg-gray-50 border border-gray-200 text-[#1A2332] rounded-xl px-4 py-3 outline-none focus:ring-2 focus:ring-[#ffb900]/40 focus:border-[#ffb900] transition-all placeholder:text-gray-400 resize-none" />
                            </div>
                            <div className="grid grid-cols-1 md:grid-cols-2 gap-5 mb-5">
                                <div className=" space-y-2">
                                    <label className="text-sm font-medium text-gray-600 block">کد پستی (۱۰ رقمی)</label>
                                    <input type="text" placeholder="1234567890" className="w-full bg-gray-50 border border-gray-200 text-[#1A2332] rounded-xl px-4 py-3 outline-none focus:ring-2 focus:ring-[#ffb900]/40 focus:border-[#ffb900] transition-all placeholder:text-gray-400 placeholder:text-[13px]" />
                                </div>
                                <div className="space-y-2">
                                    <label className="text-sm font-medium text-gray-600 block">ایمیل</label>
                                    <input type="email" placeholder="test@email.com" className="w-full bg-gray-50 border border-gray-200 text-[#1A2332] rounded-xl px-4 py-3 outline-none focus:ring-2 focus:ring-[#ffb900]/40 focus:border-[#ffb900] transition-all placeholder:text-gray-400 placeholder:text-[13px]" />
                                </div>
                            </div>
                        </div>
                    </div>

                    <div className="w-full lg:w-[400px] shrink-0">
                        <div className="bg-white rounded-[1rem] p-6 md:p-8 shadow-sm sticky top-6">
                            <h2 className="text-lg md:text-xl font-bold text-[#1A2332] mb-6">خلاصه سفارش</h2>
                            <div className="space-y-4 mb-6">
                                <div className="flex justify-between items-center text-xs md:text-sm">
                                    <span className="text-gray-500">مبلغ کالاها ({totalItems})</span>
                                    <span className="font-bold text-[#1A2332]">{totalPrice > 0 ? totalPrice.toLocaleString('fa-IR') : '۰'} <span className="text-[10px] font-normal text-gray-500">تومان</span></span>
                                </div>
                                <div className="flex justify-between items-center text-xs md:text-sm">
                                    <span className="text-gray-500">هزینه ارسال</span>
                                    <span className="font-bold text-[#1A2332]">{shippingCost.toLocaleString('fa-IR')} <span className="text-[10px] font-normal text-gray-500">تومان</span></span>
                                </div>
                            </div>

                            <div className="w-full border-t-2 border-dashed border-gray-100 my-6"></div>

                            <div className="bg-white rounded-[1rem] pt-4 pb-4">
                                <div className="flex items-center gap-3 mb-6 pb-4 ">
                                    <div className="bg-[#1A2332]/5 p-2 rounded-lg text-[#1A2332]">
                                        <Truck size={20} />
                                    </div>
                                    <h2 className="text-base md:text-lg font-bold text-[#1A2332]">نحوه ارسال</h2>
                                </div>
                                <div className="space-y-3">
                                    <label className={`flex items-center justify-between p-4 rounded-xl border-1 cursor-pointer transition-all ${shippingMethod === 'post' ? 'border-[#ffb900] bg-[#ffb900]/3' : 'border-gray-100 hover:border-gray-200 bg-white'}`}>
                                        <div className="flex items-center gap-3">
                                            <div className={`w-5 h-5 rounded-full border-1 flex items-center justify-center ${shippingMethod === 'post' ? 'border-[#ffb900]' : 'border-gray-300'}`}>
                                                {shippingMethod === 'post' && <div className="w-2.5 h-2.5 bg-[#ffb900] rounded-full" />}
                                            </div>
                                            <div>
                                                <div className="font-bold text-[#1A2332]">پست پیشتاز</div>
                                                <div className="text-xs text-gray-500 mt-1">زمان تحویل: ۳ تا ۵ روز کاری</div>
                                            </div>
                                        </div>
                                        <div className="font-bold text-[#1A2332]">۴۵,۰۰۰ <span className="text-xs font-normal text-gray-500">تومان</span></div>
                                        <input type="radio" name="shipping" value="post" className="hidden" checked={shippingMethod === 'post'} onChange={() => setShippingMethod('post')} />
                                    </label>
                                    <label className={`flex items-center justify-between p-4 rounded-xl border-1 cursor-pointer transition-all ${shippingMethod === 'tipax' ? 'border-[#ffb900] bg-[#ffb900]/3' : 'border-gray-100 hover:border-gray-200 bg-white'}`}>
                                        <div className="flex items-center gap-3">
                                            <div className={`w-5 h-5 rounded-full border-1 flex items-center justify-center ${shippingMethod === 'tipax' ? 'border-[#ffb900]' : 'border-gray-300'}`}>
                                                {shippingMethod === 'tipax' && <div className="w-2.5 h-2.5 bg-[#ffb900] rounded-full" />}
                                            </div>
                                            <div>
                                                <div className="font-bold text-[#1A2332]">تیپاکس (پس‌کرایه)</div>
                                                <div className="text-xs text-gray-500 mt-1">زمان تحویل: ۱ تا ۲ روز کاری</div>
                                            </div>
                                        </div>
                                        <div className="font-bold text-[#1A2332]">۷۵,۰۰۰ <span className="text-xs font-normal text-gray-500">تومان</span></div>
                                        <input type="radio" name="shipping" value="tipax" className="hidden" checked={shippingMethod === 'tipax'} onChange={() => setShippingMethod('tipax')} />
                                    </label>
                                </div>
                            </div>
                            
                            <div className="w-full border-t-2 border-dashed border-gray-100 my-6"></div>

                            <div className="flex justify-between items-center mb-8">
                                <span className="text-sm font-bold text-gray-600">مبلغ قابل پرداخت</span>
                                <span className="font-black text-[1em] md:text-2xl text-[#1A2332] tracking-tight">
                                    {finalPrice > 0 ? finalPrice.toLocaleString('fa-IR') : 'استعلام'}
                                    {finalPrice > 0 && <span className="text-xs md:text-sm font-medium text-gray-500 mr-1">تومان</span>}
                                </span>
                            </div>

                            <Link href="/payment" className="w-full bg-[#ffb900] hover:bg-[#e5a600] text-[#1A2332] py-3 md:py-4 rounded-xl text-base text-[1em] transition-all shadow-[0_4px_15px_rgba(255,185,0,0.2)] hover:shadow-[0_6px_20px_rgba(255,185,0,0.3)] flex justify-center items-center gap-2 mb-4">
                                پرداخت و ثبت نهایی
                                <ChevronLeft size={20} strokeWidth={2} />
                            </Link>

                        </div>
                    </div>
                </div>
            </div>
        </main>
    );
}