"use client";
import React, { useState, useEffect } from "react";
import { motion, AnimatePresence } 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, Lock, Key, Eye, EyeOff, ShieldCheck, Dog, X, Plus, CreditCard, Activity, RotateCcw } from "lucide-react";
import { OrderRowSkeleton } from "./Skeleton";
import { useUserStore, Address } from "../lib/store/userStore";
import { useCartStore } from "../lib/store/cartStore";
import { useSettingsStore } from "../lib/store/settingsStore";
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 { ticketService, Ticket, TicketMessage } from "../lib/services/ticketService";
import { usePetStore } from "../lib/store/usePetStore";
import { useCatalogMode } from "../lib/useCatalogMode";
import PetProfile from "./PetProfile";
import api, { BASE_DOMAIN } from "../lib/services/api";

import { useRouter, useSearchParams } from 'next/navigation';

export default function UserDashboard() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const { profile, isLoggedIn, logout, updateProfile, addAddress, updateAddress, deleteAddress, setDefaultAddress, topUpWallet, fetchProfile } = useUserStore();
  const { pets, activePetId, setActivePet, removePet } = usePetStore();
  const isWithdrawalEnabled = useSettingsStore((s) => s.getBoolean('wallet_withdrawal_enabled', false));
  const isRechargeEnabled = useSettingsStore((s) => s.getBoolean('wallet_recharge_enabled', true));
  const { isCatalogOnly, showOrders, showWallet, showCharity } = useCatalogMode();
  const isWalletRechargeAllowed = !isCatalogOnly && isRechargeEnabled;

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

  const { orders } = useCartStore();
  const validTabs = React.useMemo(() => {
    const list = ['profile', 'pets', 'addresses', 'tickets', 'prescriptions'];
    if (showOrders) list.push('orders');
    if (showWallet) list.push('wallet');
    return list;
  }, [showOrders, showWallet]);
  
  // Initialize tab directly from URL or default to profile
  const initialTab = (searchParams.get('tab') as "profile" | "orders" | "wallet" | "addresses" | "tickets" | "pets" | "prescriptions") || "profile";
  const [activeTab, setActiveTab] = React.useState<"profile" | "orders" | "wallet" | "addresses" | "tickets" | "pets" | "prescriptions" | "overview">(
    validTabs.includes(initialTab) ? initialTab : "profile"
  );
  
  // Handle tab click and update browser URL without full reloads
  const handleTabChange = React.useCallback((tabId: "profile" | "orders" | "wallet" | "addresses" | "tickets" | "pets" | "prescriptions") => {
    setActiveTab(tabId);
    const newUrl = tabId === 'profile' ? '/dashboard' : `/dashboard?tab=${tabId}`;
    window.history.replaceState(null, '', newUrl);
  }, []);

  // Sync tab if user navigates back/forward in browser history or searchParams change
  useEffect(() => {
    const tabParam = searchParams.get('tab');
    if (tabParam && validTabs.includes(tabParam)) {
      setActiveTab(tabParam as "profile" | "orders" | "wallet" | "addresses" | "tickets" | "pets" | "prescriptions");
    } else if (!tabParam || !validTabs.includes(activeTab)) {
      setActiveTab("profile");
    }
  }, [searchParams, validTabs, activeTab]);

  const [isLoadingOrders, setIsLoadingOrders] = useState(false);
  const [prescriptions, setPrescriptions] = useState<any[]>([]);
  const [isLoadingPrescriptions, setIsLoadingPrescriptions] = useState(false);

  const fetchPrescriptions = React.useCallback(async () => {
    try {
      setIsLoadingPrescriptions(true);
      const res = await api.get('/prescriptions');
      setPrescriptions(Array.isArray(res.data) ? res.data : (res.data?.data || []));
    } catch {
      // ignore
    } finally {
      setIsLoadingPrescriptions(false);
    }
  }, []);

  useEffect(() => {
    if (activeTab === 'prescriptions') {
      fetchPrescriptions();
    }
  }, [activeTab, fetchPrescriptions]);

  // Tickets State
  const [tickets, setTickets] = useState<Ticket[]>([]);
  const [isLoadingTickets, setIsLoadingTickets] = useState(false);
  const [isNewTicketModalOpen, setIsNewTicketModalOpen] = useState(false);
  const [selectedTicket, setSelectedTicket] = useState<Ticket | null>(null);
  const [newTicketSubject, setNewTicketSubject] = useState("");
  const [newTicketMessage, setNewTicketMessage] = useState("");
  const [newTicketCategory, setNewTicketCategory] = useState<string>("VET_CONSULTATION");
  const [newTicketPriority, setNewTicketPriority] = useState<string>("MEDIUM");
  const [newTicketPetId, setNewTicketPetId] = useState<string>("");
  const [isSubmittingTicket, setIsSubmittingTicket] = useState(false);
  const [replyMessage, setReplyMessage] = useState("");
  const [isSendingReply, setIsSendingReply] = useState(false);

  const fetchTickets = React.useCallback(async () => {
    try {
      setIsLoadingTickets(true);
      const data = await ticketService.getMyTickets();
      setTickets(data);
    } catch (err: unknown) {
      if (!(err as Record<string, boolean>)?._toastShown) {
        toast.error("خطا در دریافت لیست تیکت‌ها");
      }
    } finally {
      setIsLoadingTickets(false);
    }
  }, []);

  React.useEffect(() => {
    if (activeTab === "tickets") {
      fetchTickets();
    }
  }, [activeTab, fetchTickets]);

  const handleCreateTicket = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!newTicketSubject.trim() || !newTicketMessage.trim()) {
      toast.error("لطفاً موضوع و متن پیام را وارد کنید.");
      return;
    }
    try {
      setIsSubmittingTicket(true);
      await ticketService.createTicket({
        subject: newTicketSubject.trim(),
        message: newTicketMessage.trim(),
        category: newTicketCategory,
        priority: newTicketPriority,
        petId: newTicketPetId || undefined,
      });
      toast.success("تیکت شما با موفقیت ثبت شد!");
      setIsNewTicketModalOpen(false);
      setNewTicketSubject("");
      setNewTicketMessage("");
      setNewTicketPetId("");
      fetchTickets();
    } catch (err: unknown) {
      if (!(err as Record<string, boolean>)?._toastShown) {
        const gErr = err as { response?: { data?: { message?: string } }; message?: string };
        toast.error(gErr.response?.data?.message || gErr.message || "خطا در ثبت تیکت");
      }
    } finally {
      setIsSubmittingTicket(false);
    }
  };

  const handleSendReply = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!selectedTicket || !replyMessage.trim()) return;
    try {
      setIsSendingReply(true);
      const newMsg = await ticketService.replyTicket(selectedTicket.id, replyMessage.trim());
      setSelectedTicket((prev) =>
        prev ? { ...prev, messages: [...prev.messages, newMsg] } : null,
      );
      setReplyMessage("");
      toast.success("پاسخ شما با موفقیت ارسال شد");
      fetchTickets();
    } catch (err: unknown) {
      if (!(err as Record<string, boolean>)?._toastShown) {
        const gErr = err as { response?: { data?: { message?: string } }; message?: string };
        toast.error(gErr.response?.data?.message || gErr.message || "خطا در ارسال پاسخ");
      }
    } finally {
      setIsSendingReply(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<Record<string, unknown> | null>(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);
  const [isWithdrawModalOpen, setIsWithdrawModalOpen] = useState(false);
  const [withdrawAmount, setWithdrawAmount] = useState("");
  const [withdrawIban, setWithdrawIban] = useState("");
  const [isSubmittingWithdrawal, setIsSubmittingWithdrawal] = useState(false);

  // Pet Delete State
  const [petToDelete, setPetToDelete] = useState<{ id: string; name: string } | null>(null);

  // 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]);

  // Password Management State
  const [currentPassword, setCurrentPassword] = useState("");
  const [newPassword, setNewPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");
  const [showCurrentPass, setShowCurrentPass] = useState(false);
  const [showNewPass, setShowNewPass] = useState(false);
  const [showConfirmPass, setShowConfirmPass] = useState(false);
  const [isSavingPassword, setIsSavingPassword] = useState(false);

  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 handleSavePassword = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!newPassword || newPassword.length < 6) {
      toast.error("رمز عبور جدید باید حداقل ۶ کاراکتر باشد");
      return;
    }
    if (newPassword !== confirmPassword) {
      toast.error("رمز عبور جدید و تکرار آن یکسان نیستند");
      return;
    }
    if (profile.hasPassword && !currentPassword) {
      toast.error("لطفاً رمز عبور فعلی خود را وارد کنید");
      return;
    }

    setIsSavingPassword(true);
    try {
      await updateProfile({
        password: newPassword.trim(),
        currentPassword: profile.hasPassword ? currentPassword.trim() : undefined,
      });
      toast.success(profile.hasPassword ? "رمز عبور با موفقیت تغییر کرد" : "رمز عبور با موفقیت برای حساب شما ثبت شد");
      setCurrentPassword("");
      setNewPassword("");
      setConfirmPassword("");
    } catch (err: unknown) {
      const errObj = err as { message?: string };
      toast.error(errObj.message || "خطا در ثبت رمز عبور");
    } finally {
      setIsSavingPassword(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 handleWithdrawSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    const numAmount = parseInt(toEnglishDigits(withdrawAmount));
    if (!numAmount || numAmount < 50000) {
      toast.error("حداقل مبلغ قابل برداشت ۵۰,۰۰۰ تومان است.");
      return;
    }
    if (numAmount > (profile.walletBalance || 0)) {
      toast.error("مبلغ درخواستی از موجودی کیف پول شما بیشتر است.");
      return;
    }
    if (!withdrawIban.trim() || withdrawIban.trim().length < 10) {
      toast.error("لطفاً شماره شبا یا شماره کارت معتبر وارد نمایید.");
      return;
    }
    try {
      setIsSubmittingWithdrawal(true);
      await ticketService.createTicket({
        subject: `درخواست تسویه و برداشت وجه (${toPersian(numAmount.toLocaleString())} تومان)`,
        message: `درخواست برداشت وجه از کیف پول کاربری:\nمبلغ: ${numAmount.toLocaleString('fa-IR')} تومان\nشماره شبا/کارت: ${withdrawIban}\nشماره همراه کاربر: ${profile.mobile || ''}`,
        category: 'FINANCIAL',
        priority: 'HIGH'
      });
      toast.success(`درخواست برداشت ${toPersian(numAmount.toLocaleString())} تومان با موفقیت ثبت شد و پس از بررسی واحد مالی واریز خواهد شد.`);
      setIsWithdrawModalOpen(false);
      setWithdrawAmount("");
      setWithdrawIban("");
      fetchTickets();
    } catch {
      toast.error("خطا در ثبت درخواست برداشت. لطفاً با پشتیبانی تماس بگیرید.");
    } finally {
      setIsSubmittingWithdrawal(false);
    }
  };

  const allTabs = [
    { id: "profile", label: "اطلاعات فردی", icon: <UserCircle className="w-5 h-5" /> },
    { id: "pets", label: "پت‌های من", icon: <Dog className="w-5 h-5" /> },
    { id: "orders", label: "سفارشات من", icon: <Package className="w-5 h-5" /> },
    { id: "prescriptions", label: "نسخه‌های من", icon: <Stethoscope 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" /> },
  ];

  const tabs = allTabs.filter(tab => {
    if (tab.id === 'orders' && !showOrders) return false;
    if (tab.id === 'wallet' && !showWallet) return false;
    return true;
  });

  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={() => handleTabChange(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 cursor-pointer ${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>

                    {/* Password & Security Section */}
                    <div className="mt-12 pt-8 border-t border-medical-gray-100">
                      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-6">
                        <div className="flex items-center gap-3">
                          <div className="w-10 h-10 rounded-2xl bg-canina-blue/10 text-canina-blue flex items-center justify-center">
                            <Lock className="w-5 h-5" />
                          </div>
                          <div>
                            <h4 className="text-lg font-black text-medical-gray-900 italic">
                              {profile.hasPassword ? "تغییر رمز عبور حساب" : "تعریف رمز عبور برای حساب کاربری"}
                            </h4>
                            <p className="text-xs font-medium text-medical-gray-400">
                              {profile.hasPassword
                                ? "برای افزایش امنیت می‌توانید رمز عبور ورود خود را تغییر دهید."
                                : "با تعیین رمز عبور می‌توانید در دفعات بعدی علاوه بر پیامک، با رمز عبور نیز وارد شوید."}
                            </p>
                          </div>
                        </div>

                        <span
                          className={cn(
                            "px-3 py-1 rounded-full text-[11px] font-bold self-start sm:self-auto",
                            profile.hasPassword
                              ? "bg-green-50 text-green-700 border border-green-200"
                              : "bg-amber-50 text-amber-700 border border-amber-200"
                          )}
                        >
                          {profile.hasPassword ? "رمز عبور فعال است" : "ورود فقط با OTP"}
                        </span>
                      </div>

                      <form onSubmit={handleSavePassword} className="bg-medical-gray-50/50 p-6 sm:p-8 rounded-[2rem] border border-medical-gray-100 space-y-4">
                        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                          {profile.hasPassword && (
                            <div className="space-y-1.5">
                              <label className="text-[10px] font-black text-medical-gray-400 uppercase tracking-widest block pr-2">
                                رمز عبور فعلی *
                              </label>
                              <div className="relative">
                                <input
                                  type={showCurrentPass ? "text" : "password"}
                                  autoComplete="current-password"
                                  required
                                  placeholder="رمز فعلی..."
                                  value={currentPassword}
                                  onChange={(e) => setCurrentPassword(e.target.value)}
                                  className="w-full bg-white border border-medical-gray-200 rounded-xl py-3 pr-3 pl-10 focus:ring-2 focus:ring-canina-blue/20 outline-none text-sm text-left font-mono"
                                  dir="ltr"
                                />
                                <button
                                  type="button"
                                  onClick={() => setShowCurrentPass(!showCurrentPass)}
                                  className="absolute left-2.5 top-1/2 -translate-y-1/2 p-1 text-medical-gray-400 hover:text-medical-gray-700 transition-colors cursor-pointer"
                                  tabIndex={-1}
                                >
                                  {showCurrentPass ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
                                </button>
                              </div>
                            </div>
                          )}

                          <div className="space-y-1.5">
                            <label className="text-[10px] font-black text-medical-gray-400 uppercase tracking-widest block pr-2">
                              {profile.hasPassword ? "رمز عبور جدید *" : "رمز عبور دلخواه *"}
                            </label>
                            <div className="relative">
                              <input
                                type={showNewPass ? "text" : "password"}
                                autoComplete="new-password"
                                required
                                placeholder="حداقل ۶ کاراکتر"
                                value={newPassword}
                                onChange={(e) => setNewPassword(e.target.value)}
                                className="w-full bg-white border border-medical-gray-200 rounded-xl py-3 pr-3 pl-10 focus:ring-2 focus:ring-canina-blue/20 outline-none text-sm text-left font-mono"
                                dir="ltr"
                              />
                              <button
                                type="button"
                                onClick={() => setShowNewPass(!showNewPass)}
                                className="absolute left-2.5 top-1/2 -translate-y-1/2 p-1 text-medical-gray-400 hover:text-medical-gray-700 transition-colors cursor-pointer"
                                tabIndex={-1}
                              >
                                {showNewPass ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
                              </button>
                            </div>
                          </div>

                          <div className="space-y-1.5">
                            <label className="text-[10px] font-black text-medical-gray-400 uppercase tracking-widest block pr-2">
                              تکرار رمز عبور *
                            </label>
                            <div className="relative">
                              <input
                                type={showConfirmPass ? "text" : "password"}
                                autoComplete="new-password"
                                required
                                placeholder="تکرار رمز عبور"
                                value={confirmPassword}
                                onChange={(e) => setConfirmPassword(e.target.value)}
                                className="w-full bg-white border border-medical-gray-200 rounded-xl py-3 pr-3 pl-10 focus:ring-2 focus:ring-canina-blue/20 outline-none text-sm text-left font-mono"
                                dir="ltr"
                              />
                              <button
                                type="button"
                                onClick={() => setShowConfirmPass(!showConfirmPass)}
                                className="absolute left-2.5 top-1/2 -translate-y-1/2 p-1 text-medical-gray-400 hover:text-medical-gray-700 transition-colors cursor-pointer"
                                tabIndex={-1}
                              >
                                {showConfirmPass ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
                              </button>
                            </div>
                          </div>
                        </div>

                        <div className="flex justify-end pt-3">
                          <button
                            type="submit"
                            disabled={isSavingPassword || newPassword.length < 6 || !confirmPassword}
                            className="px-8 py-3.5 bg-canina-blue hover:bg-indigo-700 text-white rounded-xl font-black text-xs transition-all shadow-md shadow-canina-blue/15 flex items-center gap-2 cursor-pointer disabled:opacity-50"
                          >
                            {isSavingPassword ? (
                              <span className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
                            ) : (
                              <ShieldCheck className="w-4 h-4" />
                            )}
                            {profile.hasPassword ? "بروزرسانی رمز عبور" : "ثبت رمز عبور"}
                          </button>
                        </div>
                      </form>
                     </div>
                  </div>
                )}

              {activeTab === "pets" && (
                <div className="w-full">
                  <PetProfile embedded={true} initialView={pets.length > 0 ? "index" : "add"} />
                </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 as unknown as Record<string, unknown>)}
                            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 flex-wrap items-center gap-2 justify-end mt-1.5">
                                  {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>
                                   )}
                                  {Number(order.charityDonation) > 0 && (
                                     <span className="text-[9px] font-black px-2 py-0.5 rounded-full bg-rose-50 text-rose-600 border border-rose-100 flex items-center gap-1">
                                       <Heart className="w-2.5 h-2.5 fill-rose-500 text-rose-500" />
                                       مهربانی: {toPersian(Number(order.charityDonation).toLocaleString())} ت
                                     </span>
                                   )}
                                  {(() => {
                                    const st = order.status;
                                    let badgeLabel = 'در حال پردازش';
                                    let badgeColor = 'bg-amber-50 text-amber-700 border-amber-200';
                                    if (st === 'delivered') {
                                      badgeLabel = 'تحویل شده';
                                      badgeColor = 'bg-green-50 text-green-700 border-green-200';
                                    } else if (st === 'shipped') {
                                      badgeLabel = 'ارسال شده';
                                      badgeColor = 'bg-blue-50 text-blue-700 border-blue-200';
                                    } else if (st === 'packaged' || st === 'ready_to_ship') {
                                      badgeLabel = 'بسته‌بندی شده (آماده ارسال)';
                                      badgeColor = 'bg-purple-50 text-purple-700 border-purple-200';
                                    } else if (st === 'pending_payment') {
                                      badgeLabel = 'در انتظار پرداخت / ناموفق';
                                      badgeColor = 'bg-rose-50 text-rose-700 border-rose-200';
                                    } else if (st === 'cancelled') {
                                      badgeLabel = 'لغو شده';
                                      badgeColor = 'bg-red-50 text-red-700 border-red-200';
                                    } else if (st === 'refunded') {
                                      badgeLabel = 'مرجوع شده';
                                      badgeColor = 'bg-gray-100 text-gray-700 border-gray-200';
                                    }
                                    return (
                                      <span className={`text-[9px] font-black px-2.5 py-0.5 rounded-full border uppercase tracking-tighter ${badgeColor}`}>
                                        {badgeLabel}
                                      </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 via-blue-600 to-indigo-700 rounded-[2rem] sm:rounded-[3rem] p-6 sm:p-10 text-white shadow-2xl shadow-canina-blue/20 relative overflow-hidden group">
                       <div className="absolute top-0 right-0 p-6 sm:p-10 opacity-10 group-hover:scale-110 transition-transform duration-700 pointer-events-none">
                          <Wallet className="w-32 h-32 sm:w-44 sm:h-44" />
                       </div>
                       <div className="relative z-10 flex flex-col lg:flex-row items-center justify-between gap-6 sm:gap-8">
                           <div className="text-center lg:text-right w-full lg:w-auto">
                             <div className="text-xs font-black uppercase tracking-[0.2em] text-white/80 mb-2 sm:mb-3 flex items-center gap-2 justify-center lg:justify-start">
                                <div className="w-2 h-2 bg-emerald-400 rounded-full animate-pulse shadow-sm shadow-emerald-400/50" />
                                موجودی زنده و قابل استفاده
                             </div>
                              <div className="flex items-baseline gap-2 flex-row-reverse justify-end">
                                <div className="text-3xl sm:text-4xl lg:text-5xl font-black italic tracking-tight whitespace-nowrap">
                                  {toPersian((profile.walletBalance || 0).toLocaleString())}
                                </div>
                                <span className="text-sm sm:text-base font-bold opacity-90 decoration-white/30 underline underline-offset-8">
                                  تومان
                                </span>
                              </div>
                           </div>
                           <div className="flex flex-wrap sm:flex-nowrap gap-3 w-full lg:w-auto shrink-0 justify-center">
                              {isWithdrawalEnabled && (
                                <button 
                                  type="button"
                                  onClick={() => {
                                    if ((profile.walletBalance || 0) < 50000) {
                                      toast.error("حداقل موجودی برای ثبت درخواست برداشت ۵۰,۰۰۰ تومان است.");
                                      return;
                                    }
                                    setWithdrawAmount(String(profile.walletBalance || 50000));
                                    setIsWithdrawModalOpen(true);
                                  }} 
                                  className="flex-1 sm:flex-initial sm:w-36 h-12 sm:h-14 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 whitespace-nowrap"
                                >
                                  <ArrowDownCircle className="w-4 h-4 sm:w-5 sm:h-5 shrink-0" />
                                  برداشت وجه
                                </button>
                              )}
                              {isWalletRechargeAllowed ? (
                                <button 
                                  type="button"
                                  onClick={() => setIsTopUpModalOpen(true)}
                                  className="flex-1 sm:flex-initial sm:w-36 h-12 sm:h-14 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 cursor-pointer whitespace-nowrap"
                                >
                                  <ArrowUpCircle className="w-4 h-4 sm:w-5 sm:h-5 group-hover:-translate-y-1 transition-transform shrink-0" />
                                  شارژ آنی
                                </button>
                              ) : (
                                <span className="text-[11px] font-bold text-white/80 bg-white/10 px-4 py-3 rounded-2xl border border-white/20 whitespace-nowrap">
                                  شارژ در حالت کاتالوگ غیرفعال است
                                </span>
                              )}
                           </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) => {
                                 const desc = trx.description || "";
                                 const isRefund = trx.type === 'refund' || desc.includes('استرداد') || desc.includes('لغو') || desc.includes('عودت');
                                 const isAdmin = desc.includes('مدیر') || desc.includes('دستی');
                                 const isOnlineTopUp = trx.type === 'top_up' && !isRefund && !isAdmin;
                                 const isPurchase = trx.type === 'purchase' || desc.includes('پرداخت سفارش');

                                 let title = "تراکنش کیف پول";
                                 let badgeText = "تراکنش";
                                 let badgeClass = "bg-medical-gray-100 text-medical-gray-600 border-medical-gray-200";
                                 let iconBgClass = "bg-medical-gray-50 text-medical-gray-600 group-hover:bg-medical-gray-700 group-hover:text-white";
                                 let IconComponent = ArrowUpCircle;
                                 let isPositive = trx.type === 'top_up' || trx.type === 'refund';

                                 if (isRefund) {
                                    title = "استرداد وجه سفارش";
                                    badgeText = "استرداد وجه";
                                    badgeClass = "bg-blue-50 text-blue-700 border-blue-200/60";
                                    iconBgClass = "bg-blue-50 text-blue-600 group-hover:bg-blue-600 group-hover:text-white";
                                    IconComponent = RotateCcw;
                                    isPositive = true;
                                 } else if (isAdmin) {
                                    title = isPositive ? "شارژ توسط مدیریت" : "کسر توسط مدیریت";
                                    badgeText = "تغییر توسط پشتیبانی";
                                    badgeClass = "bg-amber-50 text-amber-700 border-amber-200/60";
                                    iconBgClass = "bg-amber-50 text-amber-600 group-hover:bg-amber-600 group-hover:text-white";
                                    IconComponent = ShieldCheck;
                                 } else if (isOnlineTopUp) {
                                    title = "افزایش اعتبار آنلاین (درگاه پرداخت)";
                                    badgeText = "شارژ درگاه";
                                    badgeClass = "bg-emerald-50 text-emerald-700 border-emerald-200/60";
                                    iconBgClass = "bg-emerald-50 text-emerald-600 group-hover:bg-emerald-600 group-hover:text-white";
                                    IconComponent = ArrowUpCircle;
                                    isPositive = true;
                                 } else if (isPurchase) {
                                    title = "پرداخت سفارش از کیف پول";
                                    badgeText = "پرداخت سفارش";
                                    badgeClass = "bg-rose-50 text-rose-700 border-rose-200/60";
                                    iconBgClass = "bg-rose-50 text-rose-600 group-hover:bg-rose-600 group-hover:text-white";
                                    IconComponent = ShoppingCart;
                                    isPositive = false;
                                 }

                                 return (
                                    <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/20 transition-all group">
                                       <div className="flex items-start sm:items-center gap-3 sm:gap-4 flex-1 min-w-0">
                                          <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 mt-0.5 sm:mt-0",
                                            iconBgClass
                                          )}>
                                             <IconComponent className="w-5 h-5 sm:w-6 sm:h-6" />
                                          </div>
                                          <div className="min-w-0 flex-1">
                                             <div className="flex flex-wrap items-center gap-2 mb-1">
                                                <span className="text-xs sm:text-sm font-black text-medical-gray-900">{title}</span>
                                                <span className={cn("text-[10px] px-2.5 py-0.5 rounded-full border font-black", badgeClass)}>
                                                   {badgeText}
                                                </span>
                                             </div>

                                             {desc && (
                                                <p className="text-xs font-bold text-medical-gray-700 line-clamp-2 leading-relaxed mb-1.5">
                                                   {desc}
                                                </p>
                                             )}

                                             <div className="text-[10px] font-bold text-medical-gray-400 flex flex-wrap items-center gap-x-2.5 gap-y-1">
                                                <span className="font-mono text-medical-gray-500">کد: {trx.id}</span>
                                                {trx.transactionReference && (
                                                   <>
                                                      <span className="w-1 h-1 bg-medical-gray-200 rounded-full" />
                                                      <span className="font-mono text-canina-blue">مرجع/پیگیری: {trx.transactionReference}</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-3 sm:pt-0 border-medical-gray-50 flex-shrink-0">
                                          <div className={cn(
                                            "text-base sm:text-lg font-black italic",
                                            isPositive ? "text-emerald-600" : "text-rose-500"
                                          )}>
                                             {isPositive ? "+" : "-"}{toPersian(trx.amount.toLocaleString())} <span className="text-xs not-italic">تومان</span>
                                          </div>
                                          <div className={cn(
                                             "text-[10px] font-black tracking-wide sm:mt-1 px-2 py-0.5 rounded-full",
                                             trx.status === 'failed' ? "bg-rose-50 text-rose-600" :
                                             trx.status === 'pending' ? "bg-amber-50 text-amber-600" :
                                             "bg-emerald-50 text-emerald-600"
                                          )}>
                                             {trx.status === 'failed' ? "ناموفق" : trx.status === 'pending' ? "در انتظار تایید" : "موفق"}
                                          </div>
                                       </div>
                                    </div>
                                 );
                              })
                          )}
                       </div>
                    </div>
                </div>
              )}

              {activeTab === "tickets" && (
                  <div>
                     <div className="flex items-center justify-between mb-8">
                        <div>
                          <h3 className="text-2xl font-black text-medical-gray-900 italic">پشتیبانی و مشاوره آنلاین دامپزشک</h3>
                          <p className="text-xs text-medical-gray-500 mt-1 font-medium">پاسخگویی تخصصی به سوالات دارویی، مکمل‌ها و پیگیری سفارشات توسط تیم پزشکی کنینا</p>
                        </div>
                        <button
                          type="button"
                          onClick={() => setIsNewTicketModalOpen(true)}
                          className="px-4 py-2.5 bg-canina-blue text-white rounded-xl text-xs font-black flex items-center gap-1.5 hover:bg-canina-dark transition-all shadow-md shadow-canina-blue/20 cursor-pointer"
                        >
                          <Send className="w-3.5 h-3.5" />
                          ثبت تیکت جدید
                        </button>
                     </div>

                     {isLoadingTickets ? (
                        <div className="py-20 text-center text-medical-gray-400 font-bold">در حال بارگذاری تیکت‌ها...</div>
                     ) : tickets.length === 0 ? (
                        <div className="text-center py-20 bg-medical-gray-50 rounded-[2.5rem] border border-dashed border-medical-gray-200">
                           <MessageSquare className="w-12 h-12 text-medical-gray-300 mx-auto mb-4" />
                           <h4 className="text-base font-black text-medical-gray-800 mb-1">هنوز تیکتی ثبت نکرده‌اید</h4>
                           <p className="text-xs text-medical-gray-400 font-medium max-w-md mx-auto mb-6">
                              شما می‌توانید سوالات پزشکی و تغذیه‌ای حیوان خانگی خود را از دامپزشکان متخصص کنینا بپرسید یا وضعیت سفارشات خود را پیگیری کنید.
                           </p>
                           <button
                             type="button"
                             onClick={() => setIsNewTicketModalOpen(true)}
                             className="px-6 py-3 bg-canina-blue text-white rounded-xl text-xs font-black inline-flex items-center gap-2 hover:bg-canina-dark transition-all shadow-md shadow-canina-blue/20 cursor-pointer"
                           >
                             <Send className="w-4 h-4" />
                             ثبت اولین تیکت مشاوره
                           </button>
                        </div>
                     ) : (
                        <div className="space-y-4">
                           {tickets.map((t) => {
                              const isVet = t.category === 'VET_CONSULTATION';
                              return (
                                 <div
                                   key={t.id}
                                   onClick={() => setSelectedTicket(t)}
                                   className="p-5 sm:p-6 bg-medical-gray-50 hover:bg-white border border-medical-gray-200 hover:border-canina-blue/30 rounded-[1.5rem] sm:rounded-[2rem] flex flex-col md:flex-row items-start md:items-center justify-between gap-4 transition-all hover:shadow-lg hover:shadow-canina-blue/5 cursor-pointer group"
                                 >
                                    <div className="flex items-center gap-4">
                                       <div className={cn(
                                          "w-12 h-12 rounded-2xl flex items-center justify-center shrink-0 transition-transform group-hover:scale-105",
                                          isVet ? "bg-emerald-50 text-emerald-600" : "bg-canina-blue/10 text-canina-blue"
                                       )}>
                                          {isVet ? <Stethoscope className="w-6 h-6" /> : <FileText className="w-6 h-6" />}
                                       </div>
                                       <div>
                                          <div className="flex items-center gap-2 flex-wrap mb-1">
                                             <h4 className="font-black text-medical-gray-900 text-sm group-hover:text-canina-blue transition-colors">
                                               {t.subject}
                                             </h4>
                                             {t.pet && (
                                                <span className="px-2 py-0.5 bg-purple-50 text-purple-700 text-[10px] font-bold rounded-lg border border-purple-100">
                                                  🐾 {t.pet.name} ({t.pet.breed || t.pet.type})
                                                </span>
                                             )}
                                          </div>
                                          <p className="text-[11px] text-medical-gray-400 font-medium">
                                             شناسه: {t.ticketNumber} • {t.messages?.length || 1} پیام • {new Date(t.updatedAt).toLocaleDateString('fa-IR')}
                                          </p>
                                       </div>
                                    </div>
                                    <div className="flex items-center gap-3 self-end md:self-center">
                                       <span className={cn(
                                          "px-3 py-1 text-xs font-black rounded-full border",
                                          t.status === 'ANSWERED' && "bg-emerald-50 text-emerald-700 border-emerald-200",
                                          t.status === 'OPEN' && "bg-amber-50 text-amber-700 border-amber-200",
                                          t.status === 'IN_PROGRESS' && "bg-blue-50 text-blue-700 border-blue-200",
                                          t.status === 'CLOSED' && "bg-gray-100 text-gray-600 border-gray-200",
                                       )}>
                                          {t.status === 'ANSWERED' ? 'پاسخ داده شد' :
                                           t.status === 'OPEN' ? 'در انتظار پاسخ' :
                                           t.status === 'IN_PROGRESS' ? 'در حال بررسی' : 'بسته شده'}
                                       </span>
                                       <ChevronRight className="w-4 h-4 text-medical-gray-300 group-hover:translate-x-[-2px] transition-transform" />
                                    </div>
                                 </div>
                              );
                           })}
                        </div>
                     )}
                  </div>
                )}

                {activeTab === "prescriptions" && (
                  <div>
                    <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-8">
                      <div>
                        <h3 className="text-2xl font-black text-medical-gray-900 italic flex items-center gap-2">
                          <Stethoscope className="w-6 h-6 text-canina-blue" />
                          نسخه‌های پزشکی من
                        </h3>
                        <p className="text-xs font-bold text-medical-gray-400 mt-1">
                          پیگیری وضعیت نسخه‌های بارگذاری شده و توصیه‌های دارویی دامپزشک
                        </p>
                      </div>
                      <button
                        onClick={() => router.push('/?rx=1')}
                        className="px-5 py-3 bg-canina-blue text-white rounded-2xl text-xs font-black hover:bg-canina-dark transition-all flex items-center gap-2 shadow-lg shadow-canina-blue/20 cursor-pointer"
                      >
                        <Plus className="w-4 h-4" />
                        <span>ارسال نسخه جدید</span>
                      </button>
                    </div>

                    {isLoadingPrescriptions ? (
                      <div className="py-20 text-center text-medical-gray-400 font-bold text-sm">
                        در حال بارگذاری نسخه‌ها...
                      </div>
                    ) : prescriptions.length === 0 ? (
                      <div className="py-20 text-center space-y-4">
                        <div className="w-16 h-16 bg-medical-gray-50 text-medical-gray-300 rounded-full flex items-center justify-center mx-auto">
                          <Stethoscope className="w-8 h-8" />
                        </div>
                        <p className="text-sm font-bold text-medical-gray-400">هنوز هیچ نسخه‌ای ثبت نکرده‌اید.</p>
                        <button
                          onClick={() => router.push('/?rx=1')}
                          className="px-6 py-2.5 bg-medical-gray-900 text-white rounded-xl text-xs font-bold hover:bg-canina-blue transition-all cursor-pointer"
                        >
                          ثبت اولین نسخه
                        </button>
                      </div>
                    ) : (
                      <div className="space-y-4">
                        {prescriptions.map((rx: any) => (
                          <div
                            key={rx.id}
                            className="p-5 sm:p-6 bg-medical-gray-50 border border-medical-gray-200 rounded-[1.5rem] sm:rounded-[2rem] space-y-3 transition-all hover:shadow-md"
                          >
                            <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2 pb-3 border-b border-medical-gray-200">
                              <div className="flex items-center gap-2">
                                <span className="text-xs font-black text-medical-gray-900">نسخه #{rx.id.slice(0, 8)}</span>
                                {rx.pet && (
                                  <span className="px-2 py-0.5 bg-purple-50 text-purple-700 text-[10px] font-bold rounded-lg border border-purple-100">
                                    🐾 {rx.pet.name} ({rx.pet.breed || rx.pet.type})
                                  </span>
                                )}
                              </div>
                              <div className="flex items-center gap-2">
                                <span className={`px-3 py-1 text-xs font-black rounded-full ${
                                  rx.status === 'APPROVED' ? 'bg-green-100 text-green-700' :
                                  rx.status === 'REJECTED' ? 'bg-red-100 text-red-700' :
                                  'bg-amber-100 text-amber-700'
                                }`}>
                                  {rx.status === 'APPROVED' ? 'تایید شده' : rx.status === 'REJECTED' ? 'عدم تایید' : 'در حال بررسی'}
                                </span>
                                <span className="text-[11px] text-medical-gray-400 font-bold">
                                  {toPersian(new Date(rx.createdAt).toLocaleDateString('fa-IR'))}
                                </span>
                              </div>
                            </div>

                            {rx.notes && (
                              <p className="text-xs text-medical-gray-600">
                                <strong className="text-medical-gray-800">توضیحات شما: </strong>
                                {rx.notes}
                              </p>
                            )}

                            {rx.adminNotes && (
                              <div className="p-3.5 bg-canina-blue/5 border border-canina-blue/10 rounded-xl text-xs text-canina-blue leading-relaxed font-bold">
                                <strong className="text-canina-dark block mb-1">پاسخ دامپزشک کنینا:</strong>
                                {rx.adminNotes.split('__PRESCRIBED_PRODUCTS__:')[0]}
                              </div>
                            )}

                            <div className="pt-2 flex items-center justify-end gap-2">
                              <a
                                href={rx.fileUrl.startsWith('http') ? rx.fileUrl : `${BASE_DOMAIN}${rx.fileUrl}`}
                                target="_blank"
                                rel="noreferrer"
                                className="px-4 py-2 bg-white border border-medical-gray-200 text-medical-gray-700 hover:text-canina-blue hover:border-canina-blue rounded-xl text-xs font-bold transition-all"
                              >
                                مشاهده تصویر نسخه
                              </a>
                            </div>
                          </div>
                        ))}
                      </div>
                    )}
                  </div>
                )}
              </motion.div>
          </div>

          {/* Sidebar Widgets (Wallet & Charity) */}
          {(showWallet || showCharity) && (
            <div className="lg:col-span-4 space-y-4 sm:space-y-6 min-w-0 order-2 lg:order-2">
              {showWallet && (
                <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>
                    {isWalletRechargeAllowed ? (
                      <button 
                        onClick={() => { handleTabChange("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 cursor-pointer"
                      >
                        <ArrowUpCircle className="w-4 h-4 sm:w-5 sm:h-5 flex-shrink-0" />
                        <span>شارژ کیف پول</span>
                      </button>
                    ) : (
                      <div className="mt-5 sm:mt-8 text-[11px] font-bold text-center text-white/70 bg-white/10 py-3 px-2 rounded-2xl border border-white/20">
                        شارژ آنلاین موقتاً غیرفعال است
                      </div>
                    )}
                  </div>
                </div>
              )}

              {showCharity && (
                <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((Number(profile.charityDonationTotal) || 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((Number(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} 
      />

      {/* New Ticket Modal */}
      {isNewTicketModalOpen && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm">
          <div className="bg-white w-full max-w-lg rounded-3xl p-6 sm:p-8 shadow-2xl space-y-6 max-h-[90vh] overflow-y-auto" dir="rtl">
            <div className="flex items-center justify-between pb-4 border-b border-medical-gray-100">
              <div className="flex items-center gap-2">
                <div className="w-10 h-10 bg-canina-blue/10 text-canina-blue rounded-xl flex items-center justify-center">
                  <Stethoscope className="w-5 h-5" />
                </div>
                <div>
                  <h3 className="text-lg font-black text-gray-900">ثبت تیکت و مشاوره دامپزشک</h3>
                  <p className="text-xs text-gray-400 font-medium">پاسخگویی توسط دامپزشکان و کارشناسان کنینا</p>
                </div>
              </div>
              <button 
                type="button"
                onClick={() => setIsNewTicketModalOpen(false)}
                className="w-8 h-8 rounded-full bg-gray-100 hover:bg-gray-200 text-gray-600 flex items-center justify-center font-bold text-sm cursor-pointer"
              >
                ✕
              </button>
            </div>

            <form onSubmit={handleCreateTicket} className="space-y-4">
              <div>
                <label className="block text-xs font-bold text-gray-700 mb-1.5">موضوع تیکت *</label>
                <input
                  required
                  type="text"
                  placeholder="مثال: سوال در مورد دوز مصرف مکمل سگ ژرمن"
                  value={newTicketSubject}
                  onChange={(e) => setNewTicketSubject(e.target.value)}
                  className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl text-sm font-medium focus:border-canina-blue outline-none"
                />
              </div>

              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                  <label className="block text-xs font-bold text-gray-700 mb-1.5">دسته‌بندی موضوع</label>
                  <select
                    value={newTicketCategory}
                    onChange={(e) => setNewTicketCategory(e.target.value)}
                    className="w-full px-3 py-3 bg-gray-50 border border-gray-200 rounded-xl text-xs font-bold focus:border-canina-blue outline-none"
                  >
                    <option value="VET_CONSULTATION">مشاوره تخصصی دامپزشک</option>
                    <option value="ORDER_SUPPORT">پیگیری و پشتیبانی سفارش</option>
                    <option value="PRODUCT_INQUIRY">سوال درباره داروها و مکمل‌ها</option>
                    <option value="GENERAL">عمومی و پیشنهادات</option>
                  </select>
                </div>

                <div>
                  <label className="block text-xs font-bold text-gray-700 mb-1.5">حیوان خانگی مرتبط</label>
                  <select
                    value={newTicketPetId}
                    onChange={(e) => setNewTicketPetId(e.target.value)}
                    className="w-full px-3 py-3 bg-gray-50 border border-gray-200 rounded-xl text-xs font-bold focus:border-canina-blue outline-none"
                  >
                    <option value="">بدون انتخاب / عمومی</option>
                    {pets.map((p) => (
                      <option key={p.id} value={p.id}>
                        {p.name} ({p.breed || p.type})
                      </option>
                    ))}
                  </select>
                </div>
              </div>

              <div>
                <label className="block text-xs font-bold text-gray-700 mb-1.5">شرح پیام یا سوال پزشکی *</label>
                <textarea
                  required
                  rows={4}
                  placeholder="سن، وزن، سابقه بیماری، علائم یا سوال خود را با جزئیات کامل بنویسید..."
                  value={newTicketMessage}
                  onChange={(e) => setNewTicketMessage(e.target.value)}
                  className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl text-sm font-medium focus:border-canina-blue outline-none"
                />
              </div>

              <div className="pt-2 flex justify-end gap-3">
                <button
                  type="button"
                  onClick={() => setIsNewTicketModalOpen(false)}
                  className="px-5 py-2.5 rounded-xl text-xs font-bold text-gray-600 bg-gray-100 hover:bg-gray-200 cursor-pointer"
                >
                  انصراف
                </button>
                <button
                  type="submit"
                  disabled={isSubmittingTicket}
                  className="px-6 py-2.5 rounded-xl text-xs font-black text-white bg-canina-blue hover:bg-canina-dark disabled:opacity-50 transition-all flex items-center gap-2 cursor-pointer"
                >
                  {isSubmittingTicket ? 'در حال ارسال...' : 'ارسال تیکت'}
                </button>
              </div>
            </form>
          </div>
        </div>
      )}

      {/* Ticket Details & Chat Modal */}
      {selectedTicket && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm">
          <div className="bg-white w-full max-w-2xl rounded-3xl p-6 sm:p-8 shadow-2xl space-y-6 max-h-[90vh] flex flex-col" dir="rtl">
            <div className="flex items-center justify-between pb-4 border-b border-medical-gray-100">
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 bg-canina-blue/10 text-canina-blue rounded-xl flex items-center justify-center">
                  <MessageSquare className="w-5 h-5" />
                </div>
                <div>
                  <h3 className="text-base font-black text-gray-900">{selectedTicket.subject}</h3>
                  <div className="flex items-center gap-2 text-xs text-gray-400 font-medium mt-0.5">
                    <span>شناسه: {selectedTicket.ticketNumber}</span>
                    {selectedTicket.pet && (
                      <span className="text-purple-600 font-bold">• 🐾 {selectedTicket.pet.name}</span>
                    )}
                  </div>
                </div>
              </div>
              <button 
                type="button"
                onClick={() => setSelectedTicket(null)}
                className="w-8 h-8 rounded-full bg-gray-100 hover:bg-gray-200 text-gray-600 flex items-center justify-center font-bold text-sm cursor-pointer"
              >
                ✕
              </button>
            </div>

            {/* Messages Thread */}
            <div className="flex-1 overflow-y-auto space-y-4 p-2 min-h-[220px]">
              {(selectedTicket.messages || []).map((msg) => {
                const isDoctorOrAdmin = msg.senderRole === 'ADMIN' || msg.senderRole === 'VET_DOCTOR';
                return (
                  <div
                    key={msg.id}
                    className={cn(
                      "p-4 rounded-2xl max-w-[85%] text-xs font-medium leading-relaxed",
                      isDoctorOrAdmin
                        ? "bg-emerald-50 border border-emerald-200 text-emerald-950 ml-auto"
                        : "bg-blue-50 border border-blue-200 text-blue-950 mr-auto"
                    )}
                  >
                    <div className="flex items-center justify-between gap-4 mb-1.5 pb-1 border-b border-black/5">
                      <span className="font-black text-[11px] flex items-center gap-1.5">
                        {isDoctorOrAdmin ? (
                          <>
                            <Stethoscope className="w-3.5 h-3.5 text-emerald-600" />
                            <span className="text-emerald-700">{msg.senderName || 'پاسخ دامپزشک کنینا'}</span>
                          </>
                        ) : (
                          <>
                            <UserCircle className="w-3.5 h-3.5 text-blue-600" />
                            <span className="text-blue-700">{msg.senderName || 'شما'}</span>
                          </>
                        )}
                      </span>
                      <span className="text-[10px] text-gray-400 font-normal">
                        {new Date(msg.createdAt).toLocaleTimeString('fa-IR', { hour: '2-digit', minute: '2-digit' })}
                      </span>
                    </div>
                    <p className="whitespace-pre-wrap">{msg.message}</p>
                  </div>
                );
              })}
            </div>

            {/* Quick Reply Form */}
            {selectedTicket.status !== 'CLOSED' ? (
              <form onSubmit={handleSendReply} className="pt-3 border-t border-medical-gray-100 flex gap-2">
                <input
                  type="text"
                  placeholder="پاسخ خود را بنویسید..."
                  value={replyMessage}
                  onChange={(e) => setReplyMessage(e.target.value)}
                  className="flex-1 px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl text-xs font-medium focus:border-canina-blue outline-none"
                />
                <button
                  type="submit"
                  disabled={isSendingReply || !replyMessage.trim()}
                  className="px-5 py-3 bg-canina-blue text-white rounded-xl text-xs font-black hover:bg-canina-dark disabled:opacity-50 transition-all flex items-center gap-1.5 shrink-0 cursor-pointer"
                >
                  <Send className="w-3.5 h-3.5" />
                  <span>ارسال</span>
                </button>
              </form>
            ) : (
              <div className="p-3 bg-gray-50 rounded-xl text-center text-xs text-gray-500 font-bold">
                این تیکت بسته شده است. در صورت نیاز می‌توانید تیکت جدیدی ثبت فرمایید.
              </div>
            )}
          </div>
        </div>
      )}

      {/* Wallet Withdrawal Request Modal */}
      {isWithdrawModalOpen && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm animate-fade-in font-vazir">
          <div className="bg-white w-full max-w-md rounded-3xl p-6 sm:p-8 shadow-2xl space-y-6" dir="rtl">
            <div className="flex items-center justify-between pb-4 border-b border-medical-gray-100">
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 bg-amber-50 text-amber-600 rounded-xl flex items-center justify-center">
                  <ArrowDownCircle className="w-6 h-6" />
                </div>
                <div>
                  <h3 className="text-base font-black text-gray-900">درخواست برداشت و تسویه وجه</h3>
                  <p className="text-xs text-gray-400 font-bold mt-0.5">
                    موجودی قابل برداشت: {toPersian((profile.walletBalance || 0).toLocaleString())} تومان
                  </p>
                </div>
              </div>
              <button 
                type="button"
                onClick={() => setIsWithdrawModalOpen(false)}
                className="w-8 h-8 rounded-full bg-gray-100 hover:bg-gray-200 text-gray-600 flex items-center justify-center font-bold text-sm cursor-pointer"
              >
                ✕
              </button>
            </div>

            <form onSubmit={handleWithdrawSubmit} className="space-y-4">
              <div>
                <label className="block text-xs font-black text-gray-700 mb-1">
                  مبلغ درخواستی (تومان) *
                </label>
                <input
                  type="text"
                  required
                  placeholder="حداقل ۵۰,۰۰۰ تومان"
                  value={withdrawAmount}
                  onChange={(e) => setWithdrawAmount(e.target.value)}
                  className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl text-sm font-bold text-gray-900 focus:border-canina-blue outline-none"
                  dir="ltr"
                />
              </div>

              <div>
                <label className="block text-xs font-black text-gray-700 mb-1">
                  شماره شبا یا شماره کارت جهت واریز *
                </label>
                <input
                  type="text"
                  required
                  placeholder="IR... یا شماره ۱۶ رقمی کارت"
                  value={withdrawIban}
                  onChange={(e) => setWithdrawIban(e.target.value)}
                  className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl text-xs font-mono font-bold text-gray-900 focus:border-canina-blue outline-none"
                  dir="ltr"
                />
                <p className="text-[10px] text-gray-400 font-medium mt-1">
                  شماره حساب باید به نام صاحب حساب کاربری ({profile.firstName} {profile.lastName}) باشد.
                </p>
              </div>

              <div className="p-3 bg-amber-50 rounded-xl text-[11px] text-amber-800 font-medium leading-relaxed">
                واریز مبالغ تسویه پس از تایید واحد مالی کنینا، طی ۲۴ الی ۴۸ ساعت کاری از طریق سامانه پایا انجام خواهد شد.
              </div>

              <div className="pt-2 flex justify-end gap-3">
                <button
                  type="button"
                  onClick={() => setIsWithdrawModalOpen(false)}
                  className="px-5 py-2.5 rounded-xl text-xs font-bold text-gray-600 bg-gray-100 hover:bg-gray-200 cursor-pointer"
                >
                  انصراف
                </button>
                <button
                  type="submit"
                  disabled={isSubmittingWithdrawal}
                  className="px-6 py-2.5 rounded-xl text-xs font-black text-white bg-canina-blue hover:bg-canina-dark disabled:opacity-50 transition-all flex items-center gap-2 cursor-pointer shadow-md shadow-canina-blue/20"
                >
                  {isSubmittingWithdrawal ? 'در حال ثبت...' : 'ثبت درخواست برداشت'}
                </button>
              </div>
            </form>
          </div>
        </div>
      )}

      {/* Order Details & Retry Payment Modal */}
      <OrderDetailsModal
        isOpen={!!selectedOrder}
        onClose={() => setSelectedOrder(null)}
        order={selectedOrder}
        onOrderUpdated={async () => {
          try {
            await fetchProfile();
          } catch (e) {
            console.error(e);
          }
        }}
      />
    </div>
  );
}