"use client";
import React, { useState } from "react";
import { motion } from "motion/react";
import { User, ShoppingBag, Wallet, MapPin, LogOut, ChevronRight, Package, Calendar, UserCircle, ShoppingCart, Trash2, Edit2, Phone, Hash, CheckCircle2, ArrowUpCircle, ArrowDownCircle, Info, Clock, CheckCircle, Heart, Sparkles, MessageSquare, Send, Stethoscope, FileText } from "lucide-react";
import { OrderRowSkeleton } from "./Skeleton";
import { useUserStore, Address } from "../lib/store/userStore";
import { useCartStore } from "../lib/store/cartStore";
import { toPersian, toEnglishDigits, cn } from "../lib/utils";
import { toast } from "sonner";
import OrderDetailsModal from "./OrderDetailsModal";
import AddressModal from "./AddressModal";
import DeleteConfirmModal from "./DeleteConfirmModal";
import TopUpModal from "./TopUpModal";

import { useRouter } from 'next/navigation';

export default function UserDashboard() {
  const router = useRouter();
  const { profile, isLoggedIn, logout, updateProfile, addAddress, updateAddress, deleteAddress, setDefaultAddress, topUpWallet } = useUserStore();

  React.useEffect(() => {
    if (!isLoggedIn && typeof window !== "undefined") {
      router.push("/");
      toast.error("برای دسترسی به داشبورد لطفاً ابتدا وارد حساب کاربری خود شوید.");
    }
  }, [isLoggedIn, router]);

  const { orders } = useCartStore();
  const [activeTab, setActiveTab] = React.useState<"profile" | "orders" | "wallet" | "addresses" | "tickets">("profile");
  const [isLoadingOrders, setIsLoadingOrders] = useState(false);

  // Fetch fresh profile data (which includes orders) whenever orders tab is opened
  React.useEffect(() => {
    if (activeTab === "orders") {
      let isSubscribed = true;
      Promise.resolve().then(() => {
        if (isSubscribed) setIsLoadingOrders(true);
      });
      useUserStore.getState().fetchProfile().finally(() => {
        if (isSubscribed) setIsLoadingOrders(false);
      });
      return () => {
        isSubscribed = false;
      };
    }
  }, [activeTab]);
  const [selectedOrder, setSelectedOrder] = useState<any>(null);
  
  // Address State
  const [isAddressModalOpen, setIsAddressModalOpen] = useState(false);
  const [editingAddress, setEditingAddress] = useState<Address | null>(null);
  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
  const [addressToDelete, setAddressToDelete] = useState<Address | null>(null);

  // Wallet State
  const [isTopUpModalOpen, setIsTopUpModalOpen] = useState(false);

  // Profile State
  const [isEditing, setIsEditing] = useState(false);
  const [isSavingProfile, setIsSavingProfile] = useState(false);
  const [profileForm, setProfileForm] = useState(() => ({
    firstName: profile.firstName || "",
    lastName: profile.lastName || "",
    email: profile.email || "",
    mobile: profile.mobile || ""
  }));

  // Sync profile data on change
  React.useEffect(() => {
    let isSubscribed = true;
    Promise.resolve().then(() => {
      if (isSubscribed) {
        setProfileForm({
          firstName: profile.firstName || "",
          lastName: profile.lastName || "",
          email: profile.email || "",
          mobile: profile.mobile || ""
        });
      }
    });
    return () => {
      isSubscribed = false;
    };
  }, [profile]);

  if (!isLoggedIn) {
    return null;
  }

  const handleSaveProfile = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsSavingProfile(true);
    try {
      const cleanPhone = toEnglishDigits(profileForm.mobile);
      await updateProfile({
        firstName: profileForm.firstName,
        lastName: profileForm.lastName,
        email: profileForm.email,
        mobile: cleanPhone
      });
      setIsEditing(false);
      toast.success("اطلاعات کاربری با موفقیت ویرایش شد");
    } catch {
      toast.error("خطا در ویرایش اطلاعات");
    } finally {
      setIsSavingProfile(false);
    }
  };

  const handleLogout = () => {
    logout();
    router.push('/');
  };

  const handleSaveAddress = async (addr: Address) => {
    try {
      if (editingAddress) {
        await updateAddress(addr.id, addr);
      } else {
        await addAddress(addr);
      }
    } catch {
      toast.error("خطا در ثبت آدرس");
    }
    setEditingAddress(null);
  };

  const handleDeleteClick = (addr: Address) => {
    setAddressToDelete(addr);
    setIsDeleteModalOpen(true);
  };

  const handleConfirmDelete = async () => {
    if (addressToDelete) {
      try {
        await deleteAddress(addressToDelete.id);
        toast.success("آدرس با موفقیت حذف شد");
      } catch {
        toast.error("خطا در حذف آدرس");
      }
      setAddressToDelete(null);
    }
  };

  const handleEditClick = (addr: Address) => {
    setEditingAddress(addr);
    setIsAddressModalOpen(true);
  };

  const handleAddClick = () => {
    setEditingAddress(null);
    setIsAddressModalOpen(true);
  };

  const tabs = [
    { id: "profile", label: "اطلاعات فردی", icon: <UserCircle className="w-5 h-5" /> },
    { id: "orders", label: "سفارشات من", icon: <Package className="w-5 h-5" /> },
    { id: "wallet", label: "کیف پول", icon: <Wallet className="w-5 h-5" /> },
    { id: "addresses", label: "آدرس‌ها", icon: <MapPin className="w-5 h-5" /> },
    { id: "tickets", label: "پشتیبانی و مشاوره", icon: <MessageSquare className="w-5 h-5" /> },
  ];

  return (
    <div className="min-h-screen bg-medical-gray-50 pt-6 sm:pt-12 pb-24 px-3 sm:px-4 font-vazir overflow-x-hidden" dir="rtl">
      <div className="max-w-6xl mx-auto w-full">
        {/* Breadcrumb */}
        <div className="flex items-center gap-2 text-[10px] font-black text-medical-gray-400 uppercase tracking-widest mb-6 sm:mb-10 overflow-x-auto whitespace-nowrap pb-2 no-scrollbar">
          <span className="cursor-pointer hover:text-canina-blue" onClick={() => router.push('/')}>خانه</span>
          <ChevronRight className="w-2.5 h-2.5 flex-shrink-0" />
          <span className="text-canina-blue">پنل کاربری</span>
        </div>

        <div className="grid lg:grid-cols-12 gap-6 sm:gap-8">
          {/* Top User Info & Navigation Tabs */}
          <div className="lg:col-span-12">
            <div className="bg-white rounded-[1.5rem] sm:rounded-[3rem] border border-medical-gray-200 p-4 sm:p-6 shadow-xl flex flex-col md:flex-row items-stretch md:items-center justify-between gap-4">
              <div className="flex items-center gap-3 sm:gap-4">
                <div className="w-12 h-12 sm:w-14 sm:h-14 bg-canina-blue rounded-xl sm:rounded-2xl flex items-center justify-center text-white shadow-lg flex-shrink-0">
                  <User className="w-6 h-6 sm:w-7 sm:h-7" />
                </div>
                <div className="min-w-0 flex-1">
                  <h2 className="text-base sm:text-lg font-black text-medical-gray-900 truncate">{profile.firstName} {profile.lastName}</h2>
                  <p className="text-[11px] sm:text-xs font-bold text-medical-gray-400 truncate">{profile.email}</p>
                </div>
              </div>

              {/* Tab Navigation */}
              <div className="grid grid-cols-2 sm:flex sm:flex-wrap items-center gap-2 pt-2 md:pt-0 border-t md:border-t-0 border-medical-gray-100">
                {tabs.map(tab => (
                  <button
                    key={tab.id}
                    onClick={() => setActiveTab(tab.id as any)}
                    className={`flex items-center justify-center gap-2 px-3 sm:px-4 py-2.5 sm:py-3 rounded-xl sm:rounded-2xl transition-all font-bold text-xs sm:text-sm ${activeTab === tab.id ? "bg-canina-blue text-white shadow-lg shadow-canina-blue/20" : "text-medical-gray-600 hover:bg-medical-gray-100 bg-medical-gray-50"}`}
                  >
                    <div className="flex-shrink-0">{tab.icon}</div>
                    <span>{tab.label}</span>
                  </button>
                ))}
                <button
                  onClick={handleLogout}
                  className="flex items-center justify-center gap-2 px-3 sm:px-4 py-2.5 sm:py-3 rounded-xl sm:rounded-2xl text-red-500 hover:bg-red-50 transition-all font-bold text-xs sm:text-sm bg-red-50/40 col-span-2 sm:col-span-1"
                >
                  <LogOut className="w-4 h-4 sm:w-5 sm:h-5 flex-shrink-0" />
                  <span>خروج</span>
                </button>
              </div>
            </div>
          </div>

          {/* Main Content Area */}
          <div className="lg:col-span-8 min-w-0 order-1 lg:order-1">
            <motion.div
              key={activeTab}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              className="bg-white rounded-[1.5rem] sm:rounded-[3.5rem] border border-medical-gray-200 p-4 sm:p-10 min-h-[400px] sm:min-h-[600px] shadow-sm overflow-hidden"
            >
              {activeTab === "profile" && (
                <div>
                   <h3 className="text-2xl font-black text-medical-gray-900 mb-8 italic">اطلاعات فردی</h3>
                   <form onSubmit={handleSaveProfile} className="space-y-8">
                     <div className="grid md:grid-cols-2 gap-8">
                        <div className="space-y-2">
                          <label htmlFor="firstName" className="text-[10px] font-black text-medical-gray-400 uppercase tracking-widest block pr-4">نام</label>
                          <input 
                            autoFocus={isEditing}
                            type="text" 
                            id="firstName"
                            name="firstName"
                            autoComplete="given-name"
                            required
                            readOnly={!isEditing} 
                            value={isEditing ? profileForm.firstName : profile.firstName} 
                            onChange={e => setProfileForm({ ...profileForm, firstName: e.target.value })}
                            className={cn(
                              "w-full border p-4 rounded-2xl font-bold outline-none transition-all",
                              isEditing 
                                ? "bg-white border-canina-blue/30 focus:ring-2 focus:ring-canina-blue/20" 
                                : "bg-medical-gray-50 border-medical-gray-100"
                            )} 
                          />
                        </div>
                        <div className="space-y-2">
                          <label htmlFor="lastName" className="text-[10px] font-black text-medical-gray-400 uppercase tracking-widest block pr-4">نام خانوادگی</label>
                          <input 
                            type="text" 
                            id="lastName"
                            name="lastName"
                            autoComplete="family-name"
                            required
                            readOnly={!isEditing} 
                            value={isEditing ? profileForm.lastName : profile.lastName} 
                            onChange={e => setProfileForm({ ...profileForm, lastName: e.target.value })}
                            className={cn(
                              "w-full border p-4 rounded-2xl font-bold outline-none transition-all",
                              isEditing 
                                ? "bg-white border-canina-blue/30 focus:ring-2 focus:ring-canina-blue/20" 
                                : "bg-medical-gray-50 border-medical-gray-100"
                            )} 
                          />
                        </div>
                        <div className="space-y-2">
                          <label htmlFor="email" className="text-[10px] font-black text-medical-gray-400 uppercase tracking-widest block pr-4">ایمیل</label>
                          <input 
                            type="email" 
                            id="email"
                            name="email"
                            autoComplete="email"
                            required
                            readOnly={!isEditing} 
                            value={isEditing ? profileForm.email : profile.email} 
                            onChange={e => setProfileForm({ ...profileForm, email: e.target.value })}
                            className={cn(
                              "w-full border p-4 rounded-2xl font-bold outline-none transition-all text-left",
                              isEditing 
                                ? "bg-white border-canina-blue/30 focus:ring-2 focus:ring-canina-blue/20" 
                                : "bg-medical-gray-50 border-medical-gray-100"
                            )} 
                            dir="ltr"
                          />
                        </div>
                        <div className="space-y-2">
                          <label htmlFor="mobile" className="text-[10px] font-black text-medical-gray-400 uppercase tracking-widest block pr-4">شماره موبایل</label>
                          <input 
                            type="tel" 
                            id="mobile"
                            name="mobile"
                            autoComplete="tel"
                            required
                            readOnly={!isEditing} 
                            disabled={!isEditing}
                            value={isEditing ? profileForm.mobile : toPersian(profile.mobile || "")} 
                            onChange={e => setProfileForm({ ...profileForm, mobile: e.target.value.replace(/[^0-9]/g, '') })}
                            className={cn(
                              "w-full border p-4 rounded-2xl font-bold outline-none transition-all text-left",
                              isEditing 
                                ? "bg-white border-canina-blue/30 focus:ring-2 focus:ring-canina-blue/20" 
                                : "bg-medical-gray-50 border-medical-gray-100 opacity-75 cursor-not-allowed"
                            )} 
                            dir="ltr"
                          />
                        </div>
                     </div>
                     
                     <div className="flex gap-4 mt-8">
                       {isEditing ? (
                         <>
                           <button 
                             type="submit" 
                             disabled={isSavingProfile}
                             className="bg-canina-blue text-white px-10 py-4 rounded-2xl font-black hover:bg-indigo-700 transition-all flex items-center gap-2 disabled:opacity-50"
                           >
                             {isSavingProfile && <span className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />}
                             ذخیره تغییرات
                           </button>
                           <button 
                             type="button" 
                             onClick={() => {
                               setProfileForm({
                                 firstName: profile.firstName || "",
                                 lastName: profile.lastName || "",
                                 email: profile.email || "",
                                 mobile: profile.mobile || ""
                               });
                               setIsEditing(false);
                             }}
                             className="bg-medical-gray-50 text-medical-gray-500 border border-medical-gray-200 px-10 py-4 rounded-2xl font-black hover:bg-medical-gray-100 transition-all"
                           >
                             انصراف
                           </button>
                         </>
                       ) : (
                         <button 
                           type="button"
                           onClick={() => setIsEditing(true)}
                           className="bg-medical-gray-900 text-white px-10 py-4 rounded-2xl font-black hover:bg-canina-blue transition-all"
                         >
                           ویرایش اطلاعات
                         </button>
                       )}
                     </div>
                   </form>
                </div>
              )}

              {activeTab === "orders" && (
                <div>
                  <div className="flex items-center justify-between mb-8">
                    <h3 className="text-2xl font-black text-medical-gray-900 italic">تاریخچه سفارشات</h3>
                    <div className="text-[10px] font-black text-medical-gray-400 uppercase tracking-widest border border-medical-gray-100 px-4 py-2 rounded-full bg-medical-gray-50">
                      تعداد کل: {toPersian((orders || []).length.toString())} مورد
                    </div>
                  </div>
                  {(orders || []).length === 0 ? (
                    <div className="text-center py-20">
                      <ShoppingBag className="w-16 h-16 text-medical-gray-200 mx-auto mb-4" />
                      <p className="text-medical-gray-400 font-bold">هنوز سفارشی ثبت نکرده‌اید.</p>
                      <button onClick={() => router.push('/shop')} className="mt-6 text-canina-blue font-black underline underline-offset-8">برو به فروشگاه</button>
                    </div>
                  ) : (
                    <div className="space-y-4">
                      {isLoadingOrders ? (
                         [1, 2, 3].map(i => <OrderRowSkeleton key={i} />)
                      ) : (
                        (orders || []).map(order => (
                          <motion.div 
                            key={order.id} 
                            whileHover={{ scale: 1.01, x: -5 }}
                            onClick={() => setSelectedOrder(order)}
                            className="p-6 border border-medical-gray-100 rounded-[2.5rem] hover:border-canina-blue transition-all group cursor-pointer bg-white overflow-hidden relative"
                          >
                            <div className="flex flex-wrap items-center justify-between gap-4">
                              <div className="flex items-center gap-4">
                                <div className="w-12 h-12 bg-medical-gray-50 rounded-2xl flex items-center justify-center text-canina-blue group-hover:bg-canina-blue group-hover:text-white transition-all shadow-sm">
                                  <Package className="w-6 h-6" />
                                </div>
                                <div>
                                  <div className="text-sm font-black text-medical-gray-900 group-hover:text-canina-blue transition-colors italic">سفارش {toPersian(order.trackingNumber || order.id?.substring(0, 8))}</div>
                                  <div className="text-[10px] font-bold text-medical-gray-400 flex items-center gap-1">
                                    <Calendar className="w-3 h-3 opacity-30" />
                                    {toPersian(new Date(order.date || (order as unknown as Record<string, string>).createdAt || 0).toLocaleDateString("fa-IR"))} - ساعت {toPersian(new Date(order.date || (order as unknown as Record<string, string>).createdAt || 0).toLocaleTimeString("fa-IR", { hour: '2-digit', minute: '2-digit' }))}
                                  </div>
                                </div>
                              </div>
                              <div className="text-left">
                                <div className="text-lg font-black text-medical-gray-900 italic">{toPersian(order.total.toLocaleString())} <span className="text-xs">تومان</span></div>
                                <div className="flex items-center gap-2 justify-end mt-1">
                                  {order.isRefill && (
                                     <span className="text-[9px] font-black px-2 py-0.5 rounded-full bg-emerald-50 text-emerald-600 border border-emerald-100">
                                       تمدید خودکار ۵٪-
                                     </span>
                                   )}
                                  <span className={`text-[9px] font-black px-2.5 py-0.5 rounded-full uppercase tracking-tighter ${order.status === 'delivered' ? 'bg-green-50 text-green-600' : order.status === 'shipped' ? 'bg-blue-50 text-blue-600' : 'bg-amber-50 text-amber-600'}`}>
                                    {order.status === 'delivered' ? 'تحویل شده' : order.status === 'shipped' ? 'ارسال شده' : 'در حال پردازش'}
                                  </span>
                                  <ChevronRight className="w-4 h-4 text-medical-gray-300 -rotate-180" />
                                </div>
                              </div>
                            </div>
                          </motion.div>
                        ))
                      )}
                    </div>
                  )}
                </div>
              )}

              {activeTab === "addresses" && (
                <div>
                  <div className="flex items-center justify-between mb-8">
                    <h3 className="text-2xl font-black text-medical-gray-900 italic">آدرس‌های من</h3>
                    <button 
                      onClick={handleAddClick}
                      className="px-6 py-3 bg-canina-blue text-white rounded-2xl font-black text-xs flex items-center gap-2 hover:bg-medical-gray-900 transition-all shadow-lg shadow-canina-blue/10"
                    >
                      <MapPin className="w-4 h-4" />
                      افزودن آدرس جدید
                    </button>
                  </div>

                  <div className="space-y-6">
                    {(profile?.addresses || []).length === 0 ? (
                      <div className="text-center py-20 border-2 border-dashed border-medical-gray-100 rounded-[3rem]">
                        <MapPin className="w-16 h-16 text-medical-gray-200 mx-auto mb-4" />
                        <p className="text-medical-gray-400 font-bold">هنوز آدرسی ثبت نکرده‌اید.</p>
                      </div>
                    ) : (
                      (profile?.addresses || []).map((addr) => (
                        <motion.div 
                          key={addr.id} 
                          initial={{ opacity: 0, y: 10 }}
                          animate={{ opacity: 1, y: 0 }}
                          className={cn(
                            "p-8 bg-white border rounded-[2.5rem] relative group transition-all",
                            addr.isDefault ? "border-canina-blue shadow-xl shadow-canina-blue/5" : "border-medical-gray-100 hover:border-medical-gray-200"
                          )}
                        >
                          <div className="flex justify-between items-start mb-6">
                             <div className="flex items-center gap-4">
                                <div className={cn("w-12 h-12 rounded-2xl flex items-center justify-center transition-all", addr.isDefault ? "bg-canina-blue text-white shadow-lg" : "bg-medical-gray-50 text-canina-blue")}>
                                   <MapPin className="w-6 h-6" />
                                </div>
                                <div>
                                   <div className="flex items-center gap-3">
                                      <h4 className="text-xl font-black text-medical-gray-900 italic">{addr.title}</h4>
                                      {addr.isDefault && (
                                        <span className="px-3 py-1 bg-green-50 text-green-600 text-[9px] font-black rounded-full uppercase tracking-widest">پیش‌فرض</span>
                                      )}
                                   </div>
                                   <p className="text-xs font-bold text-medical-gray-400">تحویل گیرنده: {addr.receptorName}</p>
                                </div>
                             </div>
                             <div className="flex items-center gap-2">
                                <button 
                                  onClick={() => handleEditClick(addr)}
                                  className="w-10 h-10 flex items-center justify-center rounded-xl bg-medical-gray-50 text-medical-gray-400 hover:bg-canina-blue hover:text-white transition-all shadow-sm"
                                >
                                   <Edit2 className="w-5 h-5" />
                                </button>
                                <button 
                                  onClick={() => handleDeleteClick(addr)}
                                  className="w-10 h-10 flex items-center justify-center rounded-xl bg-medical-gray-50 text-medical-gray-400 hover:bg-red-500 hover:text-white transition-all shadow-sm"
                                >
                                   <Trash2 className="w-5 h-5" />
                                </button>
                             </div>
                          </div>

                          <div className="bg-medical-gray-50/50 rounded-2xl p-6 mb-6">
                             <p className="text-sm font-black text-medical-gray-700 leading-relaxed text-right">{toPersian(addr.province)}، {toPersian(addr.city)}، {toPersian(addr.detail)}</p>
                          </div>

                          <div className="flex flex-wrap items-center gap-6">
                             <div className="flex items-center gap-2">
                                <Phone className="w-4 h-4 text-canina-blue/40" />
                                <span className="text-xs font-bold text-medical-gray-500" dir="ltr">{toPersian(addr.phone)}</span>
                             </div>
                             <div className="flex items-center gap-2">
                                <Hash className="w-4 h-4 text-canina-blue/40" />
                                <span className="text-xs font-bold text-medical-gray-500" dir="ltr">{toPersian(addr.zipCode)}</span>
                             </div>
                             {!addr.isDefault && (
                               <button 
                                 onClick={async () => {
                                   try {
                                     await setDefaultAddress(addr.id);
                                     toast.success("آدرس پیش‌فرض با موفقیت تغییر کرد");
                                   } catch {
                                     toast.error("خطا در تغییر آدرس پیش‌فرض");
                                   }
                                 }}
                                 className="mr-auto text-[10px] font-black text-canina-blue hover:text-medical-gray-900 uppercase tracking-widest whitespace-nowrap"
                               >
                                 انتخاب به عنوان پیش‌فرض
                               </button>
                             )}
                             {addr.isDefault && (
                               <div className="mr-auto flex items-center gap-2 text-green-600 text-[10px] font-black italic">
                                  <CheckCircle2 className="w-4 h-4" />
                                  آدرس اصلی ارسال
                               </div>
                             )}
                          </div>
                        </motion.div>
                      ))
                    )}
                  </div>
                </div>
              )}

              {activeTab === "wallet" && (
                <div className="space-y-10">
                   <div className="flex items-center justify-between">
                      <h3 className="text-2xl font-black text-medical-gray-900 italic">مدیریت کیف پول</h3>
                      <div className="text-[10px] font-black text-green-600 bg-green-50 px-4 py-2 rounded-full uppercase tracking-widest border border-green-100 flex items-center gap-2">
                         <CheckCircle className="w-3 h-3" />
                         حساب تایید شده
                      </div>
                   </div>

                    {/* Main Balance Card */}
                    <div className="bg-gradient-to-br from-canina-blue to-blue-600 rounded-[2rem] sm:rounded-[3rem] p-6 sm:p-12 text-white shadow-2xl shadow-canina-blue/20 relative overflow-hidden group">
                       <div className="absolute top-0 right-0 p-6 sm:p-12 opacity-10 group-hover:scale-110 transition-transform duration-700 pointer-events-none">
                          <Wallet className="w-32 h-32 sm:w-48 sm:h-48" />
                       </div>
                       <div className="relative z-10 flex flex-col md:flex-row items-center justify-between gap-6 sm:gap-10">
                           <div className="text-center md:text-right w-full md:w-auto">
                             <div className="text-xs font-black uppercase tracking-[0.2em] text-white/70 mb-3 sm:mb-4 flex items-center gap-2 justify-center md:justify-start">
                                <div className="w-2 h-2 bg-white rounded-full animate-pulse" />
                                موجودی زنده و قابل استفاده
                             </div>
                             <div className="flex items-baseline gap-3 sm:gap-4 flex-row-reverse justify-center md:justify-start">
                                <div className="text-4xl sm:text-6xl font-black italic tracking-tight">{toPersian(profile.walletBalance.toLocaleString())}</div>
                                <span className="text-base sm:text-xl not-italic font-bold opacity-80 decoration-white/30 underline underline-offset-8">تومان</span>
                             </div>
                          </div>
                          <div className="flex flex-col sm:flex-row gap-3 sm:gap-4 w-full md:w-auto">
                             <button 
                               onClick={() => {
                                 if (profile.walletBalance < 50000) {
                                   toast.error("حداقل موجودی برای ثبت درخواست برداشت ۵۰,۰۰۰ تومان است.");
                                   return;
                                 }
                                 const withdrawAmountStr = prompt("لطفاً مبلغ مورد نظر برای برداشت (تومان) را وارد کنید:", "100000");
                                 if (!withdrawAmountStr) return;
                                 const withdrawAmount = parseInt(withdrawAmountStr);
                                 if (isNaN(withdrawAmount) || withdrawAmount > profile.walletBalance) {
                                   toast.error("مبلغ وارد شده معتبر نیست یا از موجودی کیف پول بیشتر است.");
                                   return;
                                 }
                                 const iban = prompt("لطفاً شماره شبا (IR...) جهت واریز را وارد کنید:");
                                 if (!iban) return;
                                 toast.success(`درخواست برداشت ${toPersian(withdrawAmount.toLocaleString())} تومان با موفقیت ثبت شد و پس از بررسی واریز خواهد شد.`);
                               }} 
                               className="w-full md:w-40 h-12 sm:h-16 bg-white/10 backdrop-blur-md rounded-2xl font-black text-xs sm:text-sm flex items-center justify-center gap-2 border border-white/20 hover:bg-white/20 transition-all cursor-pointer"
                             >
                                <ArrowDownCircle className="w-4 h-4 sm:w-5 sm:h-5" />
                                برداشت وجه
                             </button>
                             <button 
                               onClick={() => setIsTopUpModalOpen(true)}
                               className="flex-1 md:w-40 h-12 sm:h-16 bg-white text-canina-blue rounded-2xl font-black text-xs sm:text-sm flex items-center justify-center gap-2 hover:bg-medical-gray-900 hover:text-white transition-all shadow-xl shadow-black/10 group/topup"
                             >
                                <ArrowUpCircle className="w-4 h-4 sm:w-5 sm:h-5 group-hover:-translate-y-1 transition-transform" />
                                شارژ آنی
                             </button>
                          </div>
                       </div>
                    </div>

                    {/* Transaction History */}
                    <div className="pt-10 border-t border-medical-gray-100">
                       <div className="flex items-center gap-4 mb-8">
                          <div className="w-10 h-10 bg-medical-gray-50 rounded-xl flex items-center justify-center text-medical-gray-400">
                             <Clock className="w-5 h-5" />
                          </div>
                          <h4 className="text-lg font-black text-medical-gray-900 italic">تاریخچه تراکنش‌ها</h4>
                       </div>

                       <div className="space-y-4">
                          {(profile?.transactions || []).length === 0 ? (
                             <div className="text-center py-20 bg-medical-gray-50 rounded-[2.5rem] border border-dashed border-medical-gray-200">
                                <Info className="w-12 h-12 text-medical-gray-200 mx-auto mb-4" />
                                <p className="text-medical-gray-400 font-bold">تراکنشی یافت نشد.</p>
                             </div>
                          ) : (
                             (profile?.transactions || []).map((trx) => (
                                <div key={trx.id} className="p-4 sm:p-6 bg-white border border-medical-gray-100 rounded-[1.5rem] sm:rounded-[2rem] flex flex-col sm:flex-row sm:items-center justify-between gap-4 sm:gap-6 hover:shadow-lg hover:border-canina-blue/10 transition-all group">
                                   <div className="flex items-center gap-3 sm:gap-4">
                                      <div className={cn(
                                        "w-10 h-10 sm:w-12 sm:h-12 rounded-xl sm:rounded-2xl flex items-center justify-center transition-colors flex-shrink-0",
                                        trx.type === 'top_up' ? "bg-green-50 text-green-500 group-hover:bg-green-500 group-hover:text-white" : "bg-red-50 text-red-500 group-hover:bg-red-500 group-hover:text-white"
                                      )}>
                                         {trx.type === 'top_up' ? <ArrowUpCircle className="w-5 h-5 sm:w-6 sm:h-6" /> : <ShoppingCart className="w-5 h-5 sm:w-6 sm:h-6" />}
                                      </div>
                                      <div className="min-w-0">
                                         <div className="text-xs sm:text-sm font-black text-medical-gray-900 truncate">{trx.type === 'top_up' ? "افزایش موجودی (شارژ)" : "پرداخت سفارش"}</div>
                                         <div className="text-[10px] font-bold text-medical-gray-400 flex flex-wrap items-center gap-1 sm:gap-2 mt-0.5">
                                            <span className="truncate">کد: {trx.id}</span>
                                            <span className="w-1 h-1 bg-medical-gray-200 rounded-full hidden sm:inline-block" />
                                            <span>{toPersian(new Date(trx.date).toLocaleDateString("fa-IR"))}</span>
                                         </div>
                                      </div>
                                   </div>
                                   <div className="text-right sm:text-left flex sm:flex-col justify-between items-center sm:items-end border-t sm:border-t-0 pt-2 sm:pt-0 border-medical-gray-50">
                                      <div className={cn(
                                        "text-base sm:text-lg font-black italic",
                                        trx.type === 'top_up' ? "text-green-600" : "text-red-500"
                                      )}>
                                         {trx.type === 'top_up' ? "+" : ""}{toPersian(trx.amount.toLocaleString())} <span className="text-xs not-italic">تومان</span>
                                      </div>
                                      <div className="text-[9px] font-black uppercase text-green-500 tracking-widest sm:mt-1">
                                         تایید شده
                                      </div>
                                   </div>
                                </div>
                             ))
                          )}
                       </div>
                    </div>
                </div>
              )}

              {activeTab === "tickets" && (
                 <div>
                    <div className="flex items-center justify-between mb-8">
                       <h3 className="text-2xl font-black text-medical-gray-900 italic">پشتیبانی و مشاوره آنلاین دامپزشک</h3>
                       <button
                         onClick={() => toast.info("فرم ارسال تیکت جدید فعال شد")}
                         className="px-4 py-2 bg-canina-blue text-white rounded-xl text-xs font-black flex items-center gap-1.5 hover:bg-canina-dark transition-all"
                       >
                         <Send className="w-3.5 h-3.5" />
                         ثبت تیکت جدید
                       </button>
                    </div>

                    <div className="space-y-4">
                       <div className="p-6 bg-medical-gray-50 border border-medical-gray-200 rounded-[2rem] flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
                          <div className="flex items-center gap-4">
                             <div className="w-12 h-12 bg-canina-blue/10 text-canina-blue rounded-2xl flex items-center justify-center">
                                <Stethoscope className="w-6 h-6" />
                             </div>
                             <div>
                                <h4 className="font-black text-medical-gray-900 text-sm">مشاوره دوز مکمل کانینوکال برای سگ ژرمن</h4>
                                <p className="text-xs text-medical-gray-400 mt-1">شناسه تیکت: TK-۸۴۹۲ • پاسخ داده شده توسط دکتر صادقی</p>
                             </div>
                          </div>
                          <span className="px-3 py-1 bg-green-50 text-green-700 text-xs font-black rounded-full border border-green-200">
                             پاسخ داده شد
                          </span>
                       </div>

                       <div className="p-6 bg-medical-gray-50 border border-medical-gray-200 rounded-[2rem] flex flex-col md:flex-row items-start md:items-center justify-between gap-4 opacity-75">
                          <div className="flex items-center gap-4">
                             <div className="w-12 h-12 bg-amber-50 text-amber-600 rounded-2xl flex items-center justify-center">
                                <FileText className="w-6 h-6" />
                             </div>
                             <div>
                                <h4 className="font-black text-medical-gray-900 text-sm">استعلام اصالت نسخه پزشکی و سفارش فوری</h4>
                                <p className="text-xs text-medical-gray-400 mt-1">شناسه تیکت: TK-۸۴۱۰ • در حال بررسی توسط کارشناس دارویی</p>
                             </div>
                          </div>
                          <span className="px-3 py-1 bg-amber-50 text-amber-700 text-xs font-black rounded-full border border-amber-200">
                             در حال بررسی
                          </span>
                       </div>
                    </div>
                 </div>
               )}
             </motion.div>
          </div>

          {/* Sidebar Widgets (Wallet & Charity) */}
          <div className="lg:col-span-4 space-y-4 sm:space-y-6 min-w-0 order-2 lg:order-2">
            <div className="bg-medical-gray-900 rounded-[1.5rem] sm:rounded-[3rem] p-5 sm:p-8 text-white relative overflow-hidden shadow-2xl">
              <div className="absolute top-0 left-0 p-6 opacity-20 pointer-events-none">
                <Wallet className="w-12 h-12 text-canina-blue" />
              </div>
              <div className="relative z-10">
                <div className="text-[10px] font-black uppercase tracking-widest text-white/70 mb-2">موجودی کیف پول</div>
                <div className="flex items-baseline gap-2 flex-row-reverse justify-end">
                   <div className="text-2xl sm:text-4xl font-black italic">{toPersian((profile.walletBalance ?? 0).toLocaleString())}</div>
                   <span className="text-xs sm:text-sm not-italic font-bold text-white/80">تومان</span>
                </div>
                <button 
                  onClick={() => { setActiveTab("wallet"); setIsTopUpModalOpen(true); }}
                  disabled={isTopUpModalOpen}
                  className="mt-5 sm:mt-8 bg-canina-blue text-white w-full py-3.5 sm:py-4 px-4 rounded-2xl font-black hover:bg-white hover:text-canina-blue transition-all shadow-lg shadow-black/20 flex items-center justify-center gap-2 text-xs sm:text-sm border border-canina-blue"
                >
                  <ArrowUpCircle className="w-4 h-4 sm:w-5 sm:h-5 flex-shrink-0" />
                  <span>شارژ کیف پول</span>
                </button>
              </div>
            </div>

            <div className="bg-pink-500 rounded-[1.5rem] sm:rounded-[3rem] p-5 sm:p-8 text-white relative overflow-hidden shadow-2xl shadow-pink-200">
               <div className="absolute -top-4 -right-4 opacity-10 pointer-events-none">
                  <Heart className="w-32 sm:w-40 h-32 sm:h-40 fill-white" />
               </div>
               <div className="relative z-10">
                  <div className="flex items-center gap-2 sm:gap-3 mb-4 sm:mb-6">
                    <Heart className="w-4 h-4 sm:w-5 sm:h-5 fill-white flex-shrink-0" />
                    <h4 className="text-xs sm:text-sm font-black italic tracking-widest">ردپای مهربانی</h4>
                  </div>
                  <div className="space-y-4 sm:space-y-6">
                    <div>
                      <p className="text-[10px] font-bold text-white/70 mb-1">مجموع کمک‌های اهدایی</p>
                      <div className="flex items-baseline gap-2 flex-row-reverse justify-end">
                        <span className="text-xl sm:text-3xl font-black italic">
                          {toPersian((Math.max(profile.charityDonationTotal || 0, orders.reduce((sum, o) => sum + Number(o.charityDonation || 0), 0))).toLocaleString())}
                        </span>
                        <span className="text-xs font-bold opacity-60">تومان</span>
                      </div>
                    </div>
                    <div className="p-3 sm:p-4 bg-white/10 rounded-xl sm:rounded-2xl border border-white/20 backdrop-blur-sm">
                       <div className="flex items-start gap-2.5 sm:gap-3">
                          <div className="w-6 h-6 sm:w-8 sm:h-8 bg-white/20 rounded-lg sm:rounded-xl flex items-center justify-center flex-shrink-0 mt-0.5">
                             <Sparkles className="w-3 h-3 sm:w-4 sm:h-4 text-white" />
                          </div>
                          <p className="text-[10px] sm:text-xs font-black leading-relaxed">
                             همکاری شما باعث تامین هزینه <span className="text-xs sm:text-sm text-yellow-300 mx-1">{toPersian(Math.floor((profile.charityDonationTotal || 0) / 15000).toString())} وعده غذا</span> برای حیوانات بی‌پناه شده است.
                          </p>
                       </div>
                    </div>
                  </div>
               </div>
            </div>
          </div>
        </div>
      </div>
      <OrderDetailsModal 
        isOpen={!!selectedOrder} 
        onClose={() => setSelectedOrder(null)} 
        order={selectedOrder} 
      />
      <AddressModal 
        isOpen={isAddressModalOpen} 
        onClose={() => setIsAddressModalOpen(false)} 
        onSave={handleSaveAddress} 
        editingAddress={editingAddress} 
      />
      <DeleteConfirmModal 
        isOpen={isDeleteModalOpen} 
        onClose={() => setIsDeleteModalOpen(false)} 
        onConfirm={handleConfirmDelete} 
        title="حذف آدرس"
        message={`آیا از حذف آدرس "${addressToDelete?.title}" اطمینان دارید؟ این عمل غیرقابل بازگشت است.`} 
      />
      <TopUpModal 
        isOpen={isTopUpModalOpen} 
        onClose={() => setIsTopUpModalOpen(false)} 
        onConfirm={topUpWallet} 
      />
    </div>
  );
}