// // import React, { useEffect } from "react";
// // import { useDispatch, useSelector } from "react-redux";
// // import {
// //   fetchDashboard,
// //   fetchCouponStats,
// // } from "../../features/dashboard/dashboardSlice";
// // import {
// //   LineChart,
// //   Line,
// //   XAxis,
// //   YAxis,
// //   Tooltip,
// //   CartesianGrid,
// //   ResponsiveContainer,
// // } from "recharts";
// // import { useNavigate } from "react-router-dom";

// // const Dashboard = () => {
// //   const dispatch = useDispatch();
// //   const navigate = useNavigate();
// //   // const { stats, loading, error } = useSelector((state) => state.dashboard);
// //   const { stats, couponStats, loading, error } = useSelector(
// //     (state) => state.dashboard,
// //   );

// //   const getProductImage = (order) => {
// //     const productId = order.items?.[0]?.productId;
// //     if (!productId) return "/bitmap.png";

// //     const product = stats.topProducts.find((p) => p._id === productId);
// //     return product?.image || "/bitmap.png";
// //   };

// //   const getProductName = (order) => {
// //     const product = stats.topProducts.find(
// //       (p) => p._id === order.items[0]?.productId,
// //     );
// //     return product?.name || order.items[0]?.productName || "Product";
// //   };

// //   const orderGraphData = [
// //     { month: "Jan", orders: 120 },
// //     { month: "Feb", orders: 180 },
// //     { month: "Mar", orders: 240 },
// //     { month: "Apr", orders: 200 },
// //     { month: "May", orders: 300 },
// //     { month: "Jun", orders: 400 },
// //   ];

// //   useEffect(() => {
// //     dispatch(fetchDashboard());
// //     dispatch(fetchCouponStats());
// //   }, [dispatch]);

// //   if (loading) return <div className="p-6">Loading...</div>;
// //   if (error) return <div className="p-6 text-red-600">{error}</div>;
// //   if (!stats) return <div className="p-6">No data available</div>;

// //   return (
// //     <div className="space-y-6  min-h-screen p-2">
// //       {/* Dashboard Title */}
// //       <h1
// //         className="text-black"
// //         style={{
// //           fontFamily: "Nunito Sans",
// //           fontWeight: 700,
// //           fontSize: "24px",
// //           lineHeight: "100%",
// //           letterSpacing: "-0.11px",
// //         }}
// //       >
// //         Dashboard
// //       </h1>

// //       {/* Top Stats */}
// //       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
// //         {/* Total Users */}
// //         <div className="bg-white shadow-md rounded-2xl p-5 flex flex-col justify-between relative overflow-hidden">
// //           <div className="flex justify-between items-start">
// //             <div>
// //               <p className="text-gray-500 text-sm">Total Users</p>
// //               <p className="text-3xl font-bold text-[#704F38] mt-1">
// //                 {stats.totalUsers}
// //               </p>
// //             </div>

// //             <div className="bg-[#F5ECE6] w-14 h-14 rounded-xl flex items-center justify-center">
// //               <img src="/users_icon.png" className="w-10 h-10 opacity-90" />
// //             </div>
// //           </div>

// //           <div className="flex items-center gap-2 mt-4">
// //             <div className="w-2 h-2 bg-green-500 rounded-full"></div>
// //             <p className="text-sm text-green-600 font-medium">
// //               8.5% Up from yesterday
// //             </p>
// //           </div>
// //         </div>

// //         {/* Total Orders */}
// //         <div className="bg-white shadow-md rounded-2xl p-5 flex flex-col justify-between relative overflow-hidden">
// //           <div className="flex justify-between items-start">
// //             <div>
// //               <p className="text-gray-500 text-sm">Total Orders</p>
// //               <p className="text-3xl font-bold text-[#704F38] mt-1">
// //                 {stats.totalOrders}
// //               </p>
// //             </div>

// //             <div className="bg-[#E7F3FF] w-14 h-14 rounded-xl flex items-center justify-center">
// //               <img src="/orders_icon.png" className="w-10 h-10 opacity-90" />
// //             </div>
// //           </div>

// //           <div className="flex items-center gap-2 mt-4">
// //             <div className="w-2 h-2 bg-blue-500 rounded-full"></div>
// //             <p className="text-sm text-blue-600 font-medium">
// //               12% Up from last week
// //             </p>
// //           </div>
// //         </div>

// //         {/* Total Products */}
// //         <div className="bg-white shadow-md rounded-2xl p-5 flex flex-col justify-between relative overflow-hidden">
// //           <div className="flex justify-between items-start">
// //             <div>
// //               <p className="text-gray-500 text-sm">Total Products</p>
// //               <p className="text-3xl font-bold text-[#704F38] mt-1">
// //                 {stats.totalProducts}
// //               </p>
// //             </div>

// //             <div className="bg-[#FFF3E6] w-14 h-14 rounded-xl flex items-center justify-center">
// //               <img src="/stats_icon.png" className="w-10 h-10 opacity-90" />
// //             </div>
// //           </div>

// //           <div className="flex items-center gap-2 mt-4">
// //             <div className="w-2 h-2 bg-yellow-500 rounded-full"></div>
// //             <p className="text-sm text-yellow-600 font-medium">
// //               5.2% Growth this month
// //             </p>
// //           </div>
// //         </div>

// //         {/* Total Revenue */}
// //         {/* <div className="bg-white shadow-md rounded-2xl p-5 flex flex-col justify-between relative overflow-hidden">
// //           <div className="flex justify-between items-start">
// //             <div>
// //               <p className="text-gray-500 text-sm">Total Revenue</p>
// //               <p className="text-3xl font-bold text-[#704F38] mt-1">
// //                 ₹{stats.totalRevenue}
// //               </p>
// //             </div>

// //             <div className="bg-[#EAF8F1] w-14 h-14 rounded-xl flex items-center justify-center">
// //               <img src="/product_icon.png" className="w-10 h-10 opacity-90" />
// //             </div>
// //           </div>

// //           <div className="flex items-center gap-2 mt-4">
// //             <div className="w-2 h-2 bg-green-500 rounded-full"></div>
// //             <p className="text-sm text-green-600 font-medium">
// //               15% Up from last month
// //             </p>
// //           </div>
// //         </div> */}

// // <div className="bg-white shadow-md rounded-2xl p-5 flex flex-col justify-between relative overflow-hidden">
// //   <div className="flex justify-between items-start">
// //     <div>
// //       <p className="text-gray-500 text-sm">Total Coupons</p>
// //       <p className="text-3xl font-bold text-[#704F38] mt-1">
// //         {couponStats?.totalCoupons ?? 0}
// //       </p>
// //     </div>

// //     <div className="bg-[#EAF1FF] w-14 h-14 rounded-xl flex items-center justify-center">
// //       <img src="/coupon_icon.png" className="w-10 h-10 opacity-90" />
// //     </div>
// //   </div>
// //   {/* Bottom Right Arrow */}
// //   <div className="flex justify-between items-center mt-4">
// //     <p className="text-sm text-green-600 font-medium">
// //       Active: {couponStats?.activeCoupons ?? 0}
// //     </p>

// //     <button
// //       onClick={() => navigate("/coupon-stats")}
// //       className="text-blue-600 hover:text-blue-800 transition"
// //     >
// //       ➜
// //     </button>
// //   </div>
// //   {/* cod */}
// // </div>
// //       </div>

// //       {/* Total Coupons */}

// //       {/* 📌 ORDERS GRAPH SECTION */}
// //       <div className="mt-12">
// //         <div className="bg-white shadow-lg rounded-xl p-6 w-full max-w-full">
// //           <h2 className="text-xl font-bold text-black mb-6">Orders Overview</h2>
// //           <ResponsiveContainer width="100%" height={300}>
// //             <LineChart data={orderGraphData}>
// //               <defs>
// //                 <linearGradient id="colorOrders" x1="0" y1="0" x2="0" y2="1">
// //                   <stop offset="5%" stopColor="#4880FF" stopOpacity={0.9} />
// //                   <stop offset="95%" stopColor="#4880FF" stopOpacity={0} />
// //                 </linearGradient>
// //               </defs>

// //               <CartesianGrid strokeDasharray="3 3" opacity={0.2} />
// //               <XAxis dataKey="month" stroke="#888" />
// //               <YAxis stroke="#888" />
// //               <Tooltip
// //                 contentStyle={{
// //                   borderRadius: "10px",
// //                   border: "1px solid #eee",
// //                 }}
// //               />

// //               <Line
// //                 type="monotone"
// //                 dataKey="orders"
// //                 stroke="#4880FF"
// //                 strokeWidth={3}
// //                 fillOpacity={1}
// //                 fill="url(#colorOrders)"
// //                 dot={{ r: 4, fill: "#4880FF" }}
// //               />
// //             </LineChart>
// //           </ResponsiveContainer>
// //         </div>
// //       </div>

// //       {/* Recent Orders */}
// //       <div className="bg-white shadow-xl rounded-2xl p-6 border border-gray-100">
// //         <h3 className="text-xl font-bold text-black mb-6">Recent Orders</h3>

// //         <div className="overflow-x-auto">
// //           <table className="w-full border-collapse">
// //             <thead>
// //               <tr className="bg-[#FAF7F5] text-left text-sm text-gray-600">
// //                 <th className="px-5 py-3 font-semibold">Order #</th>
// //                 <th className="px-5 py-3 font-semibold">User</th>
// //                 {/* <th className="px-5 py-3 font-semibold">Product</th> */}
// //                 <th className="px-5 py-3 font-semibold">Total</th>
// //                 <th className="px-5 py-3 font-semibold">Status</th>
// //                 <th className="px-5 py-3 font-semibold">Payment</th>
// //               </tr>
// //             </thead>

// //             <tbody>
// //               {stats.recentOrders.map((order) => (
// //                 <tr
// //                   key={order.id}
// //                   className="border-b hover:bg-gray-50 transition-all duration-200"
// //                 >
// //                   <td className="px-5 py-4">
// //                     <div className="flex items-center gap-4">
// //                       <img
// //                         src={getProductImage(order)}
// //                         alt={getProductName(order)}
// //                         className="w-20 h-20 object-cover rounded-xl shadow-lg"
// //                       />

// //                       <div className="flex flex-col">
// //                         <span className="font-semibold text-gray-900">
// //                           {order.orderNumber}
// //                         </span>
// //                       </div>
// //                     </div>
// //                   </td>

// //                   {/* USER NAME ONLY */}
// //                   <td className="px-5 py-4">
// //                     <span className="font-medium text-gray-900">
// //                       {order.user.firstName} {order.user.lastName}
// //                     </span>
// //                   </td>

// //                   {/* TOTAL */}
// //                   <td className="px-5 py-4 font-bold text-[#704F38] text-lg">
// //                     ₹{order.totalAmount}
// //                   </td>

// //                   {/* ORDER STATUS BADGE */}
// //                   <td className="px-5 py-4">
// //                     <span
// //                       className={`px-3 py-1 rounded-full text-xs font-semibold shadow-sm
// //                 ${
// //                   order.status === "Completed"
// //                     ? "bg-green-100 text-green-700"
// //                     : order.status === "Pending"
// //                       ? "bg-yellow-100 text-yellow-700"
// //                       : "bg-red-100 text-red-700"
// //                 }`}
// //                     >
// //                       {order.status}
// //                     </span>
// //                   </td>

// //                   {/* PAYMENT STATUS BADGE */}
// //                   <td className="px-5 py-4">
// //                     <span
// //                       className={`px-3 py-1 rounded-full text-xs font-semibold shadow-sm
// //                 ${
// //                   order.paymentStatus === "Paid"
// //                     ? "bg-green-200 text-green-800"
// //                     : "bg-red-200 text-red-800"
// //                 }`}
// //                     >
// //                       {order.paymentStatus}
// //                     </span>
// //                   </td>
// //                 </tr>
// //               ))}
// //             </tbody>
// //           </table>
// //         </div>
// //       </div>

// //       {/* Top Products */}
// //       <div className="bg-white shadow-xl rounded-2xl p-6 border border-gray-100">
// //         <h3 className="text-2xl font-bold text-black mb-6">Top Products</h3>

// //         <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">
// //           {stats.topProducts.map((product) => (
// //             <div
// //               key={product._id}
// //               className="flex items-center justify-between bg-gradient-to-r from-white to-gray-50 rounded-2xl p-4 shadow-md hover:shadow-lg transition-all duration-300 group"
// //             >
// //               {/* Left side: Name & Description */}
// //               <div className="flex flex-col">
// //                 <span className="font-semibold text-gray-800 text-lg">
// //                   {product.name}
// //                 </span>
// //                 <span className="text-gray-500 text-sm mt-1 line-clamp-2">
// //                   {product.description}
// //                 </span>
// //                 <span className="mt-2">
// //                   <span className="bg-[#FFE6B3] text-[#704F38] px-2 py-1 rounded-full font-bold text-sm">
// //                     ₹{product.basePrice}
// //                   </span>
// //                 </span>
// //               </div>

// //               {/* Right side: Product Image */}
// //               <img
// //                 src={product.image || "/bitmap.png"}
// //                 alt={product.name}
// //                 className="w-20 h-20 object-cover rounded-xl shadow-lg transform group-hover:scale-105 transition-transform duration-300"
// //               />
// //             </div>
// //           ))}
// //         </div>
// //       </div>
// //     </div>
// //   );
// // };

// // export default Dashboard;

// // import React, { useEffect } from "react";
// // import { useDispatch, useSelector } from "react-redux";
// // import {
// //   fetchDashboard,
// //   fetchCouponStats,
// // } from "../../features/dashboard/dashboardSlice";
// // import {
// //   LineChart,
// //   Line,
// //   XAxis,
// //   YAxis,
// //   Tooltip,
// //   CartesianGrid,
// //   ResponsiveContainer,
// //   AreaChart,
// //   Area,
// // } from "recharts";
// // import { useNavigate } from "react-router-dom";

// // const Dashboard = () => {
// //   const dispatch = useDispatch();
// //   const navigate = useNavigate();
// //   const { stats, couponStats, loading, error } = useSelector(
// //     (state) => state.dashboard
// //   );

// //   const getProductImage = (order) => {
// //   // ✅ First check if we have productImage directly in items
// //   const productImage = order.items?.[0]?.productImage;
// //   if (productImage && productImage !== 'https://via.placeholder.com/300') {
// //     return productImage;
// //   }

// //   // Fallback to searching in topProducts
// //   const productId = order.items?.[0]?.productId;
// //   if (productId) {
// //     const product = stats.topProducts.find((p) => p._id === productId);
// //     if (product?.displayImage) {
// //       return product.displayImage;
// //     }
// //   }

// //   return "/bitmap.png";
// // };

// // const getProductName = (order) => {
// //   // Check if we have productDetails from the enhanced API response
// //   const productDetails = order.items?.[0]?.productDetails;
// //   if (productDetails?.name) {
// //     return productDetails.name;
// //   }

// //   // Fallback to searching in topProducts
// //   const product = stats.topProducts.find(
// //     (p) => p._id === order.items[0]?.productId
// //   );

// //   return product?.name || order.items[0]?.productName || "Product";
// // };

// //   const orderGraphData = [
// //     { month: "Jan", orders: 120 },
// //     { month: "Feb", orders: 180 },
// //     { month: "Mar", orders: 240 },
// //     { month: "Apr", orders: 200 },
// //     { month: "May", orders: 300 },
// //     { month: "Jun", orders: 400 },
// //   ];

// //   useEffect(() => {
// //     dispatch(fetchDashboard());
// //     dispatch(fetchCouponStats());
// //   }, [dispatch]);

// //   if (loading)
// //     return (
// //       <div className="flex items-center justify-center min-h-screen bg-gradient-to-br from-gray-50 to-gray-100">
// //         <div className="text-center">
// //           <div className="animate-spin rounded-full h-16 w-16 border-t-4 border-b-4 border-[#704F38] mx-auto"></div>
// //           <p className="mt-4 text-gray-600 font-semibold">Loading Dashboard...</p>
// //         </div>
// //       </div>
// //     );

// //   if (error)
// //     return (
// //       <div className="flex items-center justify-center min-h-screen bg-gradient-to-br from-red-50 to-red-100">
// //         <div className="bg-white p-8 rounded-2xl shadow-xl">
// //           <div className="text-red-600 text-xl font-bold">{error}</div>
// //         </div>
// //       </div>
// //     );

// //   if (!stats)
// //     return (
// //       <div className="flex items-center justify-center min-h-screen">
// //         <div className="text-gray-500 text-xl">No data available</div>
// //       </div>
// //     );

// //   return (
// //     <div className="min-h-screen bg-gradient-to-br from-gray-50 via-white to-gray-100 p-4 md:p-8">
// //       <div className="max-w-7xl mx-auto space-y-8">
// //         {/* Header Section */}
// //         <div className="flex items-center justify-between">
// //           <div>
// //             <h1 className="text-4xl font-bold text-gray-900 tracking-tight">
// //               Dashboard
// //             </h1>
// //             <p className="text-gray-500 mt-2">
// //               Welcome back! Here's what's happening today.
// //             </p>
// //           </div>
// //           <div className="hidden md:flex items-center gap-3">
// //             <div className="bg-white px-4 py-2 rounded-xl shadow-sm border border-gray-200">
// //               <p className="text-sm text-gray-500">Today</p>
// //               <p className="font-semibold text-gray-900">
// //                 {new Date().toLocaleDateString("en-US", {
// //                   month: "short",
// //                   day: "numeric",
// //                   year: "numeric",
// //                 })}
// //               </p>
// //             </div>
// //           </div>
// //         </div>

// //         {/* Stats Cards Grid */}
// //         <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
// //           {/* Total Users Card */}
// //           <div className="group bg-gradient-to-br from-white to-[#FAF7F5] shadow-lg hover:shadow-2xl rounded-2xl p-6 transition-all duration-300 border border-gray-100 hover:scale-105">
// //             <div className="flex justify-between items-start mb-4">
// //               <div>
// //                 <p className="text-sm font-medium text-gray-500 uppercase tracking-wide">
// //                   Total Users
// //                 </p>
// //                 <p className="text-4xl font-extrabold text-[#704F38] mt-2">
// //                   {stats.totalUsers}
// //                 </p>
// //               </div>
// //               <div className="bg-gradient-to-br from-[#F5ECE6] to-[#E8D5C4] w-16 h-16 rounded-2xl flex items-center justify-center shadow-md group-hover:rotate-12 transition-transform duration-300">
// //                 <img src="/users_icon.png" className="w-10 h-10" alt="Users" />
// //               </div>
// //             </div>
// //             <div className="flex items-center gap-2 mt-4 pt-4 border-t border-gray-200">
// //               <div className="flex items-center gap-1">
// //                 <svg
// //                   className="w-4 h-4 text-green-500"
// //                   fill="currentColor"
// //                   viewBox="0 0 20 20"
// //                 >
// //                   <path
// //                     fillRule="evenodd"
// //                     d="M12 7a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0V8.414l-4.293 4.293a1 1 0 01-1.414 0L8 10.414l-4.293 4.293a1 1 0 01-1.414-1.414l5-5a1 1 0 011.414 0L11 10.586 14.586 7H12z"
// //                     clipRule="evenodd"
// //                   />
// //                 </svg>
// //                 <span className="text-sm font-bold text-green-600">8.5%</span>
// //               </div>
// //               <p className="text-sm text-gray-600">vs yesterday</p>
// //             </div>
// //           </div>

// //           {/* Total Orders Card */}
// //           <div className="group bg-gradient-to-br from-white to-[#E7F3FF] shadow-lg hover:shadow-2xl rounded-2xl p-6 transition-all duration-300 border border-gray-100 hover:scale-105">
// //             <div className="flex justify-between items-start mb-4">
// //               <div>
// //                 <p className="text-sm font-medium text-gray-500 uppercase tracking-wide">
// //                   Total Orders
// //                 </p>
// //                 <p className="text-4xl font-extrabold text-[#704F38] mt-2">
// //                   {stats.totalOrders}
// //                 </p>
// //               </div>
// //               <div className="bg-gradient-to-br from-[#E7F3FF] to-[#C2DFFF] w-16 h-16 rounded-2xl flex items-center justify-center shadow-md group-hover:rotate-12 transition-transform duration-300">
// //                 <img src="/orders_icon.png" className="w-10 h-10" alt="Orders" />
// //               </div>
// //             </div>
// //             <div className="flex items-center gap-2 mt-4 pt-4 border-t border-gray-200">
// //               <div className="flex items-center gap-1">
// //                 <svg
// //                   className="w-4 h-4 text-blue-500"
// //                   fill="currentColor"
// //                   viewBox="0 0 20 20"
// //                 >
// //                   <path
// //                     fillRule="evenodd"
// //                     d="M12 7a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0V8.414l-4.293 4.293a1 1 0 01-1.414 0L8 10.414l-4.293 4.293a1 1 0 01-1.414-1.414l5-5a1 1 0 011.414 0L11 10.586 14.586 7H12z"
// //                     clipRule="evenodd"
// //                   />
// //                 </svg>
// //                 <span className="text-sm font-bold text-blue-600">12%</span>
// //               </div>
// //               <p className="text-sm text-gray-600">vs last week</p>
// //             </div>
// //           </div>

// //           {/* Total Products Card */}
// //           <div className="group bg-gradient-to-br from-white to-[#FFF3E6] shadow-lg hover:shadow-2xl rounded-2xl p-6 transition-all duration-300 border border-gray-100 hover:scale-105">
// //             <div className="flex justify-between items-start mb-4">
// //               <div>
// //                 <p className="text-sm font-medium text-gray-500 uppercase tracking-wide">
// //                   Total Products
// //                 </p>
// //                 <p className="text-4xl font-extrabold text-[#704F38] mt-2">
// //                   {stats.totalProducts}
// //                 </p>
// //               </div>
// //               <div className="bg-gradient-to-br from-[#FFF3E6] to-[#FFE4B8] w-16 h-16 rounded-2xl flex items-center justify-center shadow-md group-hover:rotate-12 transition-transform duration-300">
// //                 <img src="/stats_icon.png" className="w-10 h-10" alt="Products" />
// //               </div>
// //             </div>
// //             <div className="flex items-center gap-2 mt-4 pt-4 border-t border-gray-200">
// //               <div className="flex items-center gap-1">
// //                 <svg
// //                   className="w-4 h-4 text-yellow-500"
// //                   fill="currentColor"
// //                   viewBox="0 0 20 20"
// //                 >
// //                   <path
// //                     fillRule="evenodd"
// //                     d="M12 7a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0V8.414l-4.293 4.293a1 1 0 01-1.414 0L8 10.414l-4.293 4.293a1 1 0 01-1.414-1.414l5-5a1 1 0 011.414 0L11 10.586 14.586 7H12z"
// //                     clipRule="evenodd"
// //                   />
// //                 </svg>
// //                 <span className="text-sm font-bold text-yellow-600">5.2%</span>
// //               </div>
// //               <p className="text-sm text-gray-600">this month</p>
// //             </div>
// //           </div>

// //           {/* Total Coupons Card */}
// //           <div className="group bg-gradient-to-br from-white to-[#EAF1FF] shadow-lg hover:shadow-2xl rounded-2xl p-6 transition-all duration-300 border border-gray-100 hover:scale-105">
// //             <div className="flex justify-between items-start mb-4">
// //               <div>
// //                 <p className="text-sm font-medium text-gray-500 uppercase tracking-wide">
// //                   Total Coupons
// //                 </p>
// //                 <p className="text-4xl font-extrabold text-[#704F38] mt-2">
// //                   {couponStats?.totalCoupons ?? 0}
// //                 </p>
// //               </div>
// //               <div className="bg-gradient-to-br from-[#EAF1FF] to-[#C5DEFF] w-16 h-16 rounded-2xl flex items-center justify-center shadow-md group-hover:rotate-12 transition-transform duration-300">
// //                 <img src="/coupon_icon.png" className="w-10 h-10" alt="Coupons" />
// //               </div>
// //             </div>
// //             <div className="flex justify-between items-center mt-4 pt-4 border-t border-gray-200">
// //               <div className="flex items-center gap-2">
// //                 <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
// //                 <p className="text-sm font-semibold text-gray-700">
// //                   Active: {couponStats?.activeCoupons ?? 0}
// //                 </p>
// //               </div>
// //               <button
// //                 onClick={() => navigate("/coupon-stats")}
// //                 className="text-blue-600 hover:text-blue-800 hover:bg-blue-50 p-2 rounded-lg transition-all duration-200"
// //                 aria-label="View coupon stats"
// //               >
// //                 <svg
// //                   className="w-5 h-5"
// //                   fill="none"
// //                   stroke="currentColor"
// //                   viewBox="0 0 24 24"
// //                 >
// //                   <path
// //                     strokeLinecap="round"
// //                     strokeLinejoin="round"
// //                     strokeWidth={2}
// //                     d="M9 5l7 7-7 7"
// //                   />
// //                 </svg>
// //               </button>
// //             </div>
// //           </div>
// //         </div>

// //         {/* Orders Graph Section */}
// //         <div className="bg-white shadow-xl rounded-2xl p-8 border border-gray-100 hover:shadow-2xl transition-shadow duration-300">
// //           <div className="flex items-center justify-between mb-6">
// //             <div>
// //               <h2 className="text-2xl font-bold text-gray-900">
// //                 Orders Overview
// //               </h2>
// //               <p className="text-gray-500 text-sm mt-1">
// //                 Monthly order trends and performance
// //               </p>
// //             </div>
// //             <div className="flex gap-2">
// //               <button className="px-4 py-2 bg-[#704F38] text-white rounded-xl text-sm font-semibold hover:bg-[#5a3e2d] transition-colors">
// //                 6 Months
// //               </button>
// //               <button className="px-4 py-2 bg-gray-100 text-gray-700 rounded-xl text-sm font-semibold hover:bg-gray-200 transition-colors">
// //                 1 Year
// //               </button>
// //             </div>
// //           </div>

// //           <ResponsiveContainer width="100%" height={350}>
// //             <AreaChart data={orderGraphData}>
// //               <defs>
// //                 <linearGradient id="colorOrders" x1="0" y1="0" x2="0" y2="1">
// //                   <stop offset="5%" stopColor="#4880FF" stopOpacity={0.3} />
// //                   <stop offset="95%" stopColor="#4880FF" stopOpacity={0} />
// //                 </linearGradient>
// //               </defs>
// //               <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
// //               <XAxis
// //                 dataKey="month"
// //                 stroke="#888"
// //                 style={{ fontSize: "14px", fontWeight: "500" }}
// //               />
// //               <YAxis
// //                 stroke="#888"
// //                 style={{ fontSize: "14px", fontWeight: "500" }}
// //               />
// //               <Tooltip
// //                 contentStyle={{
// //                   backgroundColor: "white",
// //                   borderRadius: "12px",
// //                   border: "1px solid #e5e7eb",
// //                   boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
// //                 }}
// //                 labelStyle={{ fontWeight: "bold", color: "#111827" }}
// //               />
// //               <Area
// //                 type="monotone"
// //                 dataKey="orders"
// //                 stroke="#4880FF"
// //                 strokeWidth={3}
// //                 fillOpacity={1}
// //                 fill="url(#colorOrders)"
// //                 dot={{ r: 5, fill: "#4880FF", strokeWidth: 2, stroke: "white" }}
// //                 activeDot={{ r: 7 }}
// //               />
// //             </AreaChart>
// //           </ResponsiveContainer>
// //         </div>

// //         {/* Recent Orders Section */}
// //         <div className="bg-white shadow-xl rounded-2xl border border-gray-100 overflow-hidden hover:shadow-2xl transition-shadow duration-300">
// //           <div className="bg-gradient-to-r from-[#704F38] to-[#8d6449] p-6">
// //             <h3 className="text-2xl font-bold text-white">Recent Orders</h3>
// //             <p className="text-gray-200 text-sm mt-1">
// //               Latest transactions and order status
// //             </p>
// //           </div>

// //           <div className="overflow-x-auto">
// //             <table className="w-full">
// //               <thead>
// //                 <tr className="bg-gray-50 border-b border-gray-200">
// //                   <th className="px-6 py-4 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">
// //                     Order Details
// //                   </th>
// //                   <th className="px-6 py-4 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">
// //                     Customer
// //                   </th>
// //                   <th className="px-6 py-4 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">
// //                     Amount
// //                   </th>
// //                   <th className="px-6 py-4 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">
// //                     Status
// //                   </th>
// //                   <th className="px-6 py-4 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">
// //                     Payment
// //                   </th>
// //                 </tr>
// //               </thead>

// //               <tbody className="divide-y divide-gray-200">
// //                 {stats.recentOrders.map((order, index) => (
// //                   <tr
// //                     key={order.id}
// //                     className="hover:bg-gray-50 transition-colors duration-200"
// //                   >
// //                     <td className="px-6 py-4">
// //                       <div className="flex items-center gap-4">
// //                         <div className="relative">
// //                           <img
// //                             src={getProductImage(order)}
// //                             alt={getProductName(order)}
// //                             className="w-16 h-16 object-cover rounded-xl shadow-md ring-2 ring-gray-100"
// //                           />
// //                           <div className="absolute -top-2 -right-2 bg-[#704F38] text-white text-xs font-bold rounded-full w-6 h-6 flex items-center justify-center">
// //                             {order.items.length}
// //                           </div>
// //                         </div>
// //                         <div>
// //                           <p className="font-bold text-gray-900">
// //                             {order.orderNumber}
// //                           </p>
// //                           <p className="text-sm text-gray-500 mt-1">
// //                             {getProductName(order)}
// //                           </p>
// //                         </div>
// //                       </div>
// //                     </td>

// //                     <td className="px-6 py-4">
// //                       <div className="flex items-center gap-3">
// //                         <div className="w-10 h-10 bg-gradient-to-br from-[#704F38] to-[#8d6449] rounded-full flex items-center justify-center text-white font-bold">
// //                           {order.user.firstName[0]}
// //                           {order.user.lastName[0]}
// //                         </div>
// //                         <div>
// //                           <p className="font-semibold text-gray-900">
// //                             {order.user.firstName} {order.user.lastName}
// //                           </p>
// //                           <p className="text-xs text-gray-500">
// //                             {order.user.email}
// //                           </p>
// //                         </div>
// //                       </div>
// //                     </td>

// //                     <td className="px-6 py-4">
// //                       <p className="font-bold text-xl text-[#704F38]">
// //                         ₹{parseFloat(order.totalAmount).toLocaleString()}
// //                       </p>
// //                       <p className="text-xs text-gray-500 mt-1">
// //                         {order.paymentMethod.toUpperCase()}
// //                       </p>
// //                     </td>

// //                     <td className="px-6 py-4">
// //                       <span
// //                         className={`inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-xs font-bold shadow-sm
// //                         ${
// //                           order.status === "DELIVERED"
// //                             ? "bg-green-100 text-green-700 ring-1 ring-green-200"
// //                             : order.status === "PENDING"
// //                               ? "bg-yellow-100 text-yellow-700 ring-1 ring-yellow-200"
// //                               : order.status === "SHIPPED"
// //                                 ? "bg-blue-100 text-blue-700 ring-1 ring-blue-200"
// //                                 : "bg-red-100 text-red-700 ring-1 ring-red-200"
// //                         }`}
// //                       >
// //                         <span
// //                           className={`w-2 h-2 rounded-full ${
// //                             order.status === "DELIVERED"
// //                               ? "bg-green-500"
// //                               : order.status === "PENDING"
// //                                 ? "bg-yellow-500"
// //                                 : order.status === "SHIPPED"
// //                                   ? "bg-blue-500"
// //                                   : "bg-red-500"
// //                           }`}
// //                         ></span>
// //                         {order.status}
// //                       </span>
// //                     </td>

// //                     <td className="px-6 py-4">
// //                       <span
// //                         className={`inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-xs font-bold shadow-sm
// //                         ${
// //                           order.paymentStatus === "PAID"
// //                             ? "bg-emerald-100 text-emerald-700 ring-1 ring-emerald-200"
// //                             : "bg-orange-100 text-orange-700 ring-1 ring-orange-200"
// //                         }`}
// //                       >
// //                         {order.paymentStatus === "PAID" ? "✓" : "⏱"}
// //                         {order.paymentStatus}
// //                       </span>
// //                     </td>
// //                   </tr>
// //                 ))}
// //               </tbody>
// //             </table>
// //           </div>

// //           {stats.recentOrders.length === 0 && (
// //             <div className="text-center py-12">
// //               <p className="text-gray-500">No recent orders found</p>
// //             </div>
// //           )}
// //         </div>

// //         {/* Top Products Section */}
// //         <div className="bg-white shadow-xl rounded-2xl border border-gray-100 p-8 hover:shadow-2xl transition-shadow duration-300">
// //           <div className="flex items-center justify-between mb-6">
// //             <div>
// //               <h3 className="text-2xl font-bold text-gray-900">
// //                 Top Products
// //               </h3>
// //               <p className="text-gray-500 text-sm mt-1">
// //                 Best selling items this month
// //               </p>
// //             </div>
// //             <button className="text-[#704F38] hover:bg-[#FAF7F5] px-4 py-2 rounded-xl font-semibold text-sm transition-colors">
// //               View All →
// //             </button>
// //           </div>

// //           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
// //             {stats.topProducts.map((product, index) => (
// //               <div
// //                 key={product._id}
// //                 className="group relative bg-gradient-to-br from-white to-gray-50 rounded-2xl p-5 shadow-md hover:shadow-xl transition-all duration-300 border border-gray-100 hover:scale-105"
// //               >
// //                 {/* Rank Badge */}
// //                 <div className="absolute -top-3 -left-3 w-10 h-10 bg-gradient-to-br from-[#704F38] to-[#8d6449] rounded-full flex items-center justify-center shadow-lg z-10">
// //                   <span className="text-white font-bold text-sm">
// //                     #{index + 1}
// //                   </span>
// //                 </div>

// //                 {/* Product Image */}
// //                 <div className="relative mb-4 overflow-hidden rounded-xl">
// //                   <img
// //                     src={product.displayImage || "/bitmap.png"}
// //                     alt={product.name}
// //                     className="w-full h-48 object-cover transform group-hover:scale-110 transition-transform duration-300"
// //                   />
// //                   <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
// //                 </div>

// //                 {/* Product Details */}
// //                 <div className="space-y-2">
// //                   <h4 className="font-bold text-gray-900 text-lg line-clamp-1">
// //                     {product.name}
// //                   </h4>
// //                   <p className="text-gray-600 text-sm line-clamp-2 min-h-[2.5rem]">
// //                     {product.description}
// //                   </p>

// //                   <div className="flex items-center justify-between pt-3 border-t border-gray-200">
// //                     <div className="bg-gradient-to-r from-[#FFE6B3] to-[#FFD280] px-3 py-1.5 rounded-full">
// //                       <span className="text-[#704F38] font-extrabold text-lg">
// //                         ₹{product.basePrice.toLocaleString()}
// //                       </span>
// //                     </div>
// //                     <div className="flex items-center gap-1 text-gray-500">
// //                       <svg
// //                         className="w-4 h-4"
// //                         fill="currentColor"
// //                         viewBox="0 0 20 20"
// //                       >
// //                         <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
// //                         <path
// //                           fillRule="evenodd"
// //                           d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z"
// //                           clipRule="evenodd"
// //                         />
// //                       </svg>
// //                       <span className="text-xs font-semibold">
// //                         {product.viewCount}
// //                       </span>
// //                     </div>
// //                   </div>
// //                 </div>
// //               </div>
// //             ))}
// //           </div>
// //         </div>
// //       </div>
// //     </div>
// //   );
// // };

// // export default Dashboard;

// import React, { useEffect } from "react";
// import { useDispatch, useSelector } from "react-redux";
// import {
//   fetchDashboard,
//   fetchCouponStats,
// } from "../../features/dashboard/dashboardSlice";
// import {
//   AreaChart,
//   Area,
//   BarChart,
//   Bar,
//   PieChart,
//   Pie,
//   Cell,
//   XAxis,
//   YAxis,
//   Tooltip,
//   CartesianGrid,
//   ResponsiveContainer,
//   Legend,
// } from "recharts";
// import { useNavigate } from "react-router-dom";

// const Dashboard = () => {
//   const dispatch = useDispatch();
//   const navigate = useNavigate();
//   const { stats, couponStats, loading, error } = useSelector(
//     (state) => state.dashboard,
//   );

//   const getProductImage = (order) => {
//     const productImage = order.items?.[0]?.productImage;
//     if (productImage && productImage !== "https://via.placeholder.com/300") {
//       return productImage;
//     }

//     const productId = order.items?.[0]?.productId;
//     if (productId) {
//       const product = stats.topProducts.find((p) => p._id === productId);
//       if (product?.displayImage) {
//         return product.displayImage;
//       }
//     }

//     return "/bitmap.png";
//   };

//   const getProductName = (order) => {
//     const productDetails = order.items?.[0]?.productDetails;
//     if (productDetails?.name) {
//       return productDetails.name;
//     }

//     const product = stats.topProducts.find(
//       (p) => p._id === order.items[0]?.productId,
//     );

//     return product?.name || order.items[0]?.productName || "Product";
//   };

//   useEffect(() => {
//     dispatch(fetchDashboard());
//     dispatch(fetchCouponStats());
//   }, [dispatch]);

//   if (loading)
//     return (
//       <div className="flex items-center justify-center min-h-screen bg-gradient-to-br from-gray-50 to-gray-100">
//         <div className="text-center">
//           <div className="animate-spin rounded-full h-16 w-16 border-t-4 border-b-4 border-[#704F38] mx-auto"></div>
//           <p className="mt-4 text-gray-600 font-semibold">
//             Loading Dashboard...
//           </p>
//         </div>
//       </div>
//     );

//   if (error)
//     return (
//       <div className="flex items-center justify-center min-h-screen bg-gradient-to-br from-red-50 to-red-100">
//         <div className="bg-white p-8 rounded-2xl shadow-xl">
//           <div className="text-red-600 text-xl font-bold">{error}</div>
//         </div>
//       </div>
//     );

//   if (!stats)
//     return (
//       <div className="flex items-center justify-center min-h-screen">
//         <div className="text-gray-500 text-xl">No data available</div>
//       </div>
//     );

//   // Calculate growth percentages
//   const orderGrowth = stats.charts?.monthlyComparison?.growth?.orders || 0;
//   const revenueGrowth = stats.charts?.monthlyComparison?.growth?.revenue || 0;

//   return (
//       <div className="space-y-6  min-h-screen p-2">
//       <div className="max-w-[1600px] mx-auto space-y-8">
//         {/* Header Section */}
//         <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
//           <div>
//             <h1 className="text-2xl font-bold text-gray-600 tracking-tight">
//               Dashboard
//             </h1>
//             <p className="text-gray-500 mt-2">
//               Welcome back! Here's what's happening with your store.
//             </p>
//           </div>
//           <div className="flex items-center gap-3">
//             <div className="bg-white px-4 py-2 rounded-xl shadow-sm border border-gray-200">
//               <p className="text-xs text-gray-500">Current Month</p>
//               <p className="font-bold text-gray-900">
//                 {stats.charts?.monthlyComparison?.currentMonth?.label}
//               </p>
//             </div>
//             <div className="bg-white px-4 py-2 rounded-xl shadow-sm border border-gray-200">
//               <p className="text-xs text-gray-500">Today</p>
//               <p className="font-semibold text-gray-900">
//                 {new Date().toLocaleDateString("en-US", {
//                   month: "short",
//                   day: "numeric",
//                 })}
//               </p>
//             </div>
//           </div>
//         </div>

//         {/* Stats Cards Grid */}
//         <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
//           {/* Total Users Card */}
//           <div className="group bg-gradient-to-br from-white to-[#FAF7F5] shadow-lg hover:shadow-2xl rounded-2xl p-6 transition-all duration-300 border border-gray-100 hover:scale-105 cursor-pointer">
//             <div className="flex justify-between items-start mb-4">
//               <div>
//                 <p className="text-sm font-medium text-gray-500 uppercase tracking-wide">
//                   Total Users
//                 </p>
//                 <p className="text-4xl font-extrabold text-[#704F38] mt-2">
//                   {stats.totalUsers}
//                 </p>
//               </div>
//               <div className="bg-gradient-to-br from-[#F5ECE6] to-[#E8D5C4] w-16 h-16 rounded-2xl flex items-center justify-center shadow-md group-hover:rotate-12 transition-transform duration-300">
//                 <svg
//                   className="w-8 h-8 text-[#704F38]"
//                   fill="currentColor"
//                   viewBox="0 0 20 20"
//                 >
//                   <path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z" />
//                 </svg>
//               </div>
//             </div>
//             <div className="flex items-center gap-2 mt-4 pt-4 border-t border-gray-200">
//               <span className="text-xs text-gray-600">Active users</span>
//             </div>
//           </div>

//           {/* Total Orders Card */}
//           <div className="group bg-gradient-to-br from-white to-[#E7F3FF] shadow-lg hover:shadow-2xl rounded-2xl p-6 transition-all duration-300 border border-gray-100 hover:scale-105 cursor-pointer">
//             <div className="flex justify-between items-start mb-4">
//               <div>
//                 <p className="text-sm font-medium text-gray-500 uppercase tracking-wide">
//                   Total Orders
//                 </p>
//                 <p className="text-4xl font-extrabold text-[#704F38] mt-2">
//                   {stats.totalOrders}
//                 </p>
//               </div>
//               <div className="bg-gradient-to-br from-[#E7F3FF] to-[#C2DFFF] w-16 h-16 rounded-2xl flex items-center justify-center shadow-md group-hover:rotate-12 transition-transform duration-300">
//                 <svg
//                   className="w-8 h-8 text-blue-600"
//                   fill="currentColor"
//                   viewBox="0 0 20 20"
//                 >
//                   <path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z" />
//                 </svg>
//               </div>
//             </div>
//             <div className="flex items-center gap-2 mt-4 pt-4 border-t border-gray-200">
//               <div className="flex items-center gap-1">
//                 <svg
//                   className={`w-4 h-4 ${orderGrowth >= 0 ? "text-green-500" : "text-red-500"}`}
//                   fill="currentColor"
//                   viewBox="0 0 20 20"
//                 >
//                   <path
//                     fillRule="evenodd"
//                     d={
//                       orderGrowth >= 0
//                         ? "M12 7a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0V8.414l-4.293 4.293a1 1 0 01-1.414 0L8 10.414l-4.293 4.293a1 1 0 01-1.414-1.414l5-5a1 1 0 011.414 0L11 10.586 14.586 7H12z"
//                         : "M12 13a1 1 0 100 2h5a1 1 0 001-1v-5a1 1 0 10-2 0v2.586l-4.293-4.293a1 1 0 00-1.414 0L8 9.586l-4.293-4.293a1 1 0 00-1.414 1.414l5 5a1 1 0 001.414 0L11 9.414 14.586 13H12z"
//                     }
//                     clipRule="evenodd"
//                   />
//                 </svg>
//                 <span
//                   className={`text-sm font-bold ${orderGrowth >= 0 ? "text-green-600" : "text-red-600"}`}
//                 >
//                   {orderGrowth.toFixed(1)}%
//                 </span>
//               </div>
//               <p className="text-sm text-gray-600">vs last month</p>
//             </div>
//           </div>

//           {/* Total Products Card */}
//           <div className="group bg-gradient-to-br from-white to-[#FFF3E6] shadow-lg hover:shadow-2xl rounded-2xl p-6 transition-all duration-300 border border-gray-100 hover:scale-105 cursor-pointer">
//             <div className="flex justify-between items-start mb-4">
//               <div>
//                 <p className="text-sm font-medium text-gray-500 uppercase tracking-wide">
//                   Total Products
//                 </p>
//                 <p className="text-4xl font-extrabold text-[#704F38] mt-2">
//                   {stats.totalProducts}
//                 </p>
//               </div>
//               <div className="bg-gradient-to-br from-[#FFF3E6] to-[#FFE4B8] w-16 h-16 rounded-2xl flex items-center justify-center shadow-md group-hover:rotate-12 transition-transform duration-300">
//                 <svg
//                   className="w-8 h-8 text-orange-600"
//                   fill="currentColor"
//                   viewBox="0 0 20 20"
//                 >
//                   <path
//                     fillRule="evenodd"
//                     d="M10 2a4 4 0 00-4 4v1H5a1 1 0 00-.994.89l-1 9A1 1 0 004 18h12a1 1 0 00.994-1.11l-1-9A1 1 0 0015 7h-1V6a4 4 0 00-4-4zm2 5V6a2 2 0 10-4 0v1h4zm-6 3a1 1 0 112 0 1 1 0 01-2 0zm7-1a1 1 0 100 2 1 1 0 000-2z"
//                     clipRule="evenodd"
//                   />
//                 </svg>
//               </div>
//             </div>
//             <div className="flex items-center gap-2 mt-4 pt-4 border-t border-gray-200">
//               <span className="text-xs text-gray-600">In catalog</span>
//             </div>
//           </div>

//           {/* Total Revenue Card */}
//           {/* <div className="group bg-gradient-to-br from-white to-[#EAF8F1] shadow-lg hover:shadow-2xl rounded-2xl p-6 transition-all duration-300 border border-gray-100 hover:scale-105 cursor-pointer">
//             <div className="flex justify-between items-start mb-4">
//               <div>
//                 <p className="text-sm font-medium text-gray-500 uppercase tracking-wide">
//                   Total Revenue
//                 </p>
//                 <p className="text-4xl font-extrabold text-[#704F38] mt-2">
//                   ₹{(stats.totalRevenue || 0).toLocaleString()}
//                 </p>
//               </div>
//               <div className="bg-gradient-to-br from-[#EAF8F1] to-[#C6F6D5] w-16 h-16 rounded-2xl flex items-center justify-center shadow-md group-hover:rotate-12 transition-transform duration-300">
//                 <svg
//                   className="w-8 h-8 text-green-600"
//                   fill="currentColor"
//                   viewBox="0 0 20 20"
//                 >
//                   <path d="M8.433 7.418c.155-.103.346-.196.567-.267v1.698a2.305 2.305 0 01-.567-.267C8.07 8.34 8 8.114 8 8c0-.114.07-.34.433-.582zM11 12.849v-1.698c.22.071.412.164.567.267.364.243.433.468.433.582 0 .114-.07.34-.433.582a2.305 2.305 0 01-.567.267z" />
//                   <path
//                     fillRule="evenodd"
//                     d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-13a1 1 0 10-2 0v.092a4.535 4.535 0 00-1.676.662C6.602 6.234 6 7.009 6 8c0 .99.602 1.765 1.324 2.246.48.32 1.054.545 1.676.662v1.941c-.391-.127-.68-.317-.843-.504a1 1 0 10-1.51 1.31c.562.649 1.413 1.076 2.353 1.253V15a1 1 0 102 0v-.092a4.535 4.535 0 001.676-.662C13.398 13.766 14 12.991 14 12c0-.99-.602-1.765-1.324-2.246A4.535 4.535 0 0011 9.092V7.151c.391.127.68.317.843.504a1 1 0 101.511-1.31c-.563-.649-1.413-1.076-2.354-1.253V5z"
//                     clipRule="evenodd"
//                   />
//                 </svg>
//               </div>
//             </div>
//             <div className="flex items-center gap-2 mt-4 pt-4 border-t border-gray-200">
//               <div className="flex items-center gap-1">
//                 <svg
//                   className={`w-4 h-4 ${revenueGrowth >= 0 ? "text-green-500" : "text-red-500"}`}
//                   fill="currentColor"
//                   viewBox="0 0 20 20"
//                 >
//                   <path
//                     fillRule="evenodd"
//                     d={
//                       revenueGrowth >= 0
//                         ? "M12 7a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0V8.414l-4.293 4.293a1 1 0 01-1.414 0L8 10.414l-4.293 4.293a1 1 0 01-1.414-1.414l5-5a1 1 0 011.414 0L11 10.586 14.586 7H12z"
//                         : "M12 13a1 1 0 100 2h5a1 1 0 001-1v-5a1 1 0 10-2 0v2.586l-4.293-4.293a1 1 0 00-1.414 0L8 9.586l-4.293-4.293a1 1 0 00-1.414 1.414l5 5a1 1 0 001.414 0L11 9.414 14.586 13H12z"
//                     }
//                     clipRule="evenodd"
//                   />
//                 </svg>
//                 <span
//                   className={`text-sm font-bold ${revenueGrowth >= 0 ? "text-green-600" : "text-red-600"}`}
//                 >
//                   {revenueGrowth.toFixed(1)}%
//                 </span>
//               </div>
//               <p className="text-sm text-gray-600">vs last month</p>
//             </div>
//           </div> */}

//           <div className="group bg-gradient-to-br from-white to-[#EAF1FF] shadow-lg hover:shadow-2xl rounded-2xl p-6 transition-all duration-300 border border-gray-100 hover:scale-105 cursor-pointer">
//             <div className="flex justify-between items-start mb-4">
//               <div>
//                 <p className="text-sm font-medium text-gray-500 uppercase tracking-wide">
//                   Total Coupons
//                 </p>
//                 <p className="text-4xl font-extrabold text-[#704F38] mt-2">
//                   {couponStats?.totalCoupons ?? 0}
//                 </p>
//               </div>

//               {/* Icon Box */}
//               <div className="bg-gradient-to-br from-[#EAF1FF] to-[#C7D7FE] w-16 h-16 rounded-2xl flex items-center justify-center shadow-md group-hover:rotate-12 transition-transform duration-300">
//                 {/* Coupon SVG Icon */}
//                 <svg
//                   className="w-8 h-8 text-blue-600"
//                   fill="currentColor"
//                   viewBox="0 0 24 24"
//                 >
//                   <path d="M21 10V7a1 1 0 00-1-1h-3V4a1 1 0 00-1-1H8a1 1 0 00-1 1v2H4a1 1 0 00-1 1v3a2 2 0 010 4v3a1 1 0 001 1h3v2a1 1 0 001 1h8a1 1 0 001-1v-2h3a1 1 0 001-1v-3a2 2 0 010-4zM9 4h6v2H9V4zm6 16H9v-2h6v2z" />
//                 </svg>
//               </div>
//             </div>

//             {/* Bottom Section */}
//             <div className="flex items-center justify-between mt-4 pt-4 border-t border-gray-200">
//               <p className="text-sm font-bold text-green-600">
//                 Active: {couponStats?.activeCoupons ?? 0}
//               </p>

//               <button
//                 onClick={() => navigate("/coupon-stats")}
//                 className="text-blue-600 hover:text-blue-800 transition font-semibold"
//               >
//                 View →
//               </button>
//             </div>
//           </div>
//         </div>

//         {/* Charts Row */}
//         <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
//           {/* Orders Overview Chart - Takes 2 columns */}
//           <div className="lg:col-span-2 bg-white shadow-xl rounded-2xl p-6 border border-gray-100 hover:shadow-2xl transition-shadow duration-300">
//             <div className="flex items-center justify-between mb-6">
//               <div>
//                 <h2 className="text-xl font-bold text-gray-900">
//                   Orders Overview
//                 </h2>
//                 <p className="text-gray-500 text-sm mt-1">
//                   Last 30 days order trends
//                 </p>
//               </div>
//             </div>

//             <ResponsiveContainer width="100%" height={300}>
//               <AreaChart data={stats.charts?.orderOverview || []}>
//                 <defs>
//                   <linearGradient id="colorTotal" x1="0" y1="0" x2="0" y2="1">
//                     <stop offset="5%" stopColor="#4880FF" stopOpacity={0.3} />
//                     <stop offset="95%" stopColor="#4880FF" stopOpacity={0} />
//                   </linearGradient>
//                   <linearGradient
//                     id="colorCompleted"
//                     x1="0"
//                     y1="0"
//                     x2="0"
//                     y2="1"
//                   >
//                     <stop offset="5%" stopColor="#10B981" stopOpacity={0.3} />
//                     <stop offset="95%" stopColor="#10B981" stopOpacity={0} />
//                   </linearGradient>
//                 </defs>
//                 <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
//                 <XAxis
//                   dataKey="label"
//                   stroke="#888"
//                   style={{ fontSize: "12px" }}
//                 />
//                 <YAxis stroke="#888" style={{ fontSize: "12px" }} />
//                 <Tooltip
//                   contentStyle={{
//                     backgroundColor: "white",
//                     borderRadius: "12px",
//                     border: "1px solid #e5e7eb",
//                     boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
//                   }}
//                 />
//                 <Legend />
//                 <Area
//                   type="monotone"
//                   dataKey="total"
//                   stroke="#4880FF"
//                   strokeWidth={2}
//                   fillOpacity={1}
//                   fill="url(#colorTotal)"
//                   name="Total Orders"
//                 />
//                 <Area
//                   type="monotone"
//                   dataKey="completed"
//                   stroke="#10B981"
//                   strokeWidth={2}
//                   fillOpacity={1}
//                   fill="url(#colorCompleted)"
//                   name="Completed"
//                 />
//               </AreaChart>
//             </ResponsiveContainer>
//           </div>

//           {/* Orders by Status - Pie Chart */}
//           <div className="bg-white shadow-xl rounded-2xl p-6 border border-gray-100 hover:shadow-2xl transition-shadow duration-300">
//             <div className="mb-6">
//               <h2 className="text-xl font-bold text-gray-900">
//                 Orders by Status
//               </h2>
//               <p className="text-gray-500 text-sm mt-1">Current distribution</p>
//             </div>

//             <ResponsiveContainer width="100%" height={300}>
//               <PieChart>
//                 <Pie
//                   data={stats.charts?.ordersByStatus || []}
//                   cx="50%"
//                   cy="50%"
//                   labelLine={false}
//                   label={({ label, percent }) =>
//                     `${label} ${(percent * 100).toFixed(0)}%`
//                   }
//                   outerRadius={80}
//                   fill="#8884d8"
//                   dataKey="count"
//                 >
//                   {(stats.charts?.ordersByStatus || []).map((entry, index) => (
//                     <Cell key={`cell-${index}`} fill={entry.color} />
//                   ))}
//                 </Pie>
//                 <Tooltip />
//               </PieChart>
//             </ResponsiveContainer>

//             <div className="mt-4 space-y-2">
//               {(stats.charts?.ordersByStatus || []).map((status, index) => (
//                 <div
//                   key={index}
//                   className="flex items-center justify-between text-sm"
//                 >
//                   <div className="flex items-center gap-2">
//                     <div
//                       className="w-3 h-3 rounded-full"
//                       style={{ backgroundColor: status.color }}
//                     ></div>
//                     <span className="text-gray-700">{status.label}</span>
//                   </div>
//                   <span className="font-semibold text-gray-900">
//                     {status.count}
//                   </span>
//                 </div>
//               ))}
//             </div>
//           </div>
//         </div>

//         {/* Monthly Comparison Cards */}
//         <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
//           <div className="bg-gradient-to-br from-blue-50 to-white shadow-lg rounded-2xl p-6 border border-blue-100">
//             <div className="flex items-center justify-between mb-4">
//               <h3 className="text-lg font-bold text-gray-900">
//                 Monthly Orders Comparison
//               </h3>
//               <svg
//                 className="w-8 h-8 text-blue-500"
//                 fill="currentColor"
//                 viewBox="0 0 20 20"
//               >
//                 <path d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z" />
//               </svg>
//             </div>
//             <div className="space-y-4">
//               <div className="flex items-center justify-between">
//                 <div>
//                   <p className="text-sm text-gray-500">
//                     {stats.charts?.monthlyComparison?.currentMonth?.label}
//                   </p>
//                   <p className="text-3xl font-bold text-blue-600">
//                     {stats.charts?.monthlyComparison?.currentMonth?.orders || 0}
//                   </p>
//                 </div>
//                 <div className="text-right">
//                   <p className="text-sm text-gray-500">
//                     {stats.charts?.monthlyComparison?.previousMonth?.label}
//                   </p>
//                   <p className="text-2xl font-semibold text-gray-400">
//                     {stats.charts?.monthlyComparison?.previousMonth?.orders ||
//                       0}
//                   </p>
//                 </div>
//               </div>
//               <div className="pt-4 border-t border-blue-100">
//                 <div className="flex items-center gap-2">
//                   <span
//                     className={`text-lg font-bold ${orderGrowth >= 0 ? "text-green-600" : "text-red-600"}`}
//                   >
//                     {orderGrowth >= 0 ? "+" : ""}
//                     {orderGrowth.toFixed(1)}%
//                   </span>
//                   <span className="text-sm text-gray-600">growth</span>
//                 </div>
//               </div>
//             </div>
//           </div>

//           <div className="bg-gradient-to-br from-green-50 to-white shadow-lg rounded-2xl p-6 border border-green-100">
//             <div className="flex items-center justify-between mb-4">
//               <h3 className="text-lg font-bold text-gray-900">
//                 Monthly Revenue Comparison
//               </h3>
//               <svg
//                 className="w-8 h-8 text-green-500"
//                 fill="currentColor"
//                 viewBox="0 0 20 20"
//               >
//                 <path d="M8.433 7.418c.155-.103.346-.196.567-.267v1.698a2.305 2.305 0 01-.567-.267C8.07 8.34 8 8.114 8 8c0-.114.07-.34.433-.582zM11 12.849v-1.698c.22.071.412.164.567.267.364.243.433.468.433.582 0 .114-.07.34-.433.582a2.305 2.305 0 01-.567.267z" />
//                 <path
//                   fillRule="evenodd"
//                   d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-13a1 1 0 10-2 0v.092a4.535 4.535 0 00-1.676.662C6.602 6.234 6 7.009 6 8c0 .99.602 1.765 1.324 2.246.48.32 1.054.545 1.676.662v1.941c-.391-.127-.68-.317-.843-.504a1 1 0 10-1.51 1.31c.562.649 1.413 1.076 2.353 1.253V15a1 1 0 102 0v-.092a4.535 4.535 0 001.676-.662C13.398 13.766 14 12.991 14 12c0-.99-.602-1.765-1.324-2.246A4.535 4.535 0 0011 9.092V7.151c.391.127.68.317.843.504a1 1 0 101.511-1.31c-.563-.649-1.413-1.076-2.354-1.253V5z"
//                   clipRule="evenodd"
//                 />
//               </svg>
//             </div>
//             <div className="space-y-4">
//               <div className="flex items-center justify-between">
//                 <div>
//                   <p className="text-sm text-gray-500">
//                     {stats.charts?.monthlyComparison?.currentMonth?.label}
//                   </p>
//                   <p className="text-3xl font-bold text-green-600">
//                     ₹
//                     {(
//                       stats.charts?.monthlyComparison?.currentMonth?.revenue ||
//                       0
//                     ).toLocaleString()}
//                   </p>
//                 </div>
//                 <div className="text-right">
//                   <p className="text-sm text-gray-500">
//                     {stats.charts?.monthlyComparison?.previousMonth?.label}
//                   </p>
//                   <p className="text-2xl font-semibold text-gray-400">
//                     ₹
//                     {(
//                       stats.charts?.monthlyComparison?.previousMonth?.revenue ||
//                       0
//                     ).toLocaleString()}
//                   </p>
//                 </div>
//               </div>
//               <div className="pt-4 border-t border-green-100">
//                 <div className="flex items-center gap-2">
//                   <span
//                     className={`text-lg font-bold ${revenueGrowth >= 0 ? "text-green-600" : "text-red-600"}`}
//                   >
//                     {revenueGrowth >= 0 ? "+" : ""}
//                     {revenueGrowth.toFixed(1)}%
//                   </span>
//                   <span className="text-sm text-gray-600">growth</span>
//                 </div>
//               </div>
//             </div>
//           </div>
//         </div>

//         {/* Recent Orders Section */}
//         <div className="bg-white shadow-xl rounded-2xl border border-gray-100 overflow-hidden hover:shadow-2xl transition-shadow duration-300">
//           <div className="bg-gradient-to-r from-[#704F38] to-[#8d6449] p-6">
//             <div className="flex items-center justify-between">
//               <div>
//                 <h3 className="text-2xl font-bold text-white">Recent Orders</h3>
//                 <p className="text-gray-200 text-sm mt-1">
//                   Latest {stats.recentOrders?.length || 0} transactions
//                 </p>
//               </div>
//               <button
//                 onClick={() => navigate("/orders")}
//                 className="bg-white text-[#704F38] px-4 py-2 rounded-lg font-semibold hover:bg-gray-100 transition-colors"
//               >
//                 View All
//               </button>
//             </div>
//           </div>

//           <div className="overflow-x-auto">
//             <table className="w-full">
//               <thead>
//                 <tr className="bg-gray-50 border-b border-gray-200">
//                   <th className="px-6 py-4 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">
//                     Order Details
//                   </th>
//                   <th className="px-6 py-4 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">
//                     Customer
//                   </th>
//                   <th className="px-6 py-4 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">
//                     Amount
//                   </th>
//                   <th className="px-6 py-4 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">
//                     Status
//                   </th>
//                   <th className="px-6 py-4 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">
//                     Payment
//                   </th>
//                   <th className="px-6 py-4 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">
//                     Date
//                   </th>
//                 </tr>
//               </thead>

//               <tbody className="divide-y divide-gray-200">
//                 {stats.recentOrders?.map((order, index) => (
//                   <tr
//                     key={order.id}
//                     className="hover:bg-gray-50 transition-colors duration-200 cursor-pointer"
//                     onClick={() => navigate(`/orders/${order.id}`)}
//                   >
//                     <td className="px-6 py-4">
//                       <div className="flex items-center gap-4">
//                         <div className="relative">
//                           <img
//                             src={getProductImage(order)}
//                             alt={getProductName(order)}
//                             className="w-16 h-16 object-cover rounded-xl shadow-md ring-2 ring-gray-100"
//                             onError={(e) => {
//                               e.target.src = "/bitmap.png";
//                             }}
//                           />
//                           {order.items.length > 1 && (
//                             <div className="absolute -top-2 -right-2 bg-[#704F38] text-white text-xs font-bold rounded-full w-6 h-6 flex items-center justify-center">
//                               {order.items.length}
//                             </div>
//                           )}
//                         </div>
//                         <div>
//                           <p className="font-bold text-gray-900 text-sm">
//                             {order.orderNumber}
//                           </p>
//                           <p className="text-xs text-gray-500 mt-1">
//                             {getProductName(order)}
//                           </p>
//                         </div>
//                       </div>
//                     </td>

//                     <td className="px-6 py-4">
//                       <div className="flex items-center gap-3">
//                         <div className="w-10 h-10 bg-gradient-to-br from-[#704F38] to-[#8d6449] rounded-full flex items-center justify-center text-white font-bold text-sm">
//                           {order.user.firstName?.[0]}
//                           {order.user.lastName?.[0]}
//                         </div>
//                         <div>
//                           <p className="font-semibold text-gray-900 text-sm">
//                             {order.user.firstName} {order.user.lastName}
//                           </p>
//                           <p className="text-xs text-gray-500">
//                             {order.user.email}
//                           </p>
//                         </div>
//                       </div>
//                     </td>

//                     <td className="px-6 py-4">
//                       <p className="font-bold text-lg text-[#704F38]">
//                         ₹{parseFloat(order.totalAmount).toLocaleString()}
//                       </p>
//                       <p className="text-xs text-gray-500 mt-1 uppercase">
//                         {order.paymentMethod}
//                       </p>
//                     </td>

//                     <td className="px-6 py-4">
//                       <span
//                         className={`inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-xs font-bold shadow-sm
//                         ${
//                           order.status === "DELIVERED"
//                             ? "bg-green-100 text-green-700 ring-1 ring-green-200"
//                             : order.status === "PENDING"
//                               ? "bg-yellow-100 text-yellow-700 ring-1 ring-yellow-200"
//                               : order.status === "SHIPPED"
//                                 ? "bg-blue-100 text-blue-700 ring-1 ring-blue-200"
//                                 : order.status === "CANCELLED"
//                                   ? "bg-red-100 text-red-700 ring-1 ring-red-200"
//                                   : "bg-purple-100 text-purple-700 ring-1 ring-purple-200"
//                         }`}
//                       >
//                         <span
//                           className={`w-2 h-2 rounded-full ${
//                             order.status === "DELIVERED"
//                               ? "bg-green-500"
//                               : order.status === "PENDING"
//                                 ? "bg-yellow-500"
//                                 : order.status === "SHIPPED"
//                                   ? "bg-blue-500"
//                                   : order.status === "CANCELLED"
//                                     ? "bg-red-500"
//                                     : "bg-purple-500"
//                           }`}
//                         ></span>
//                         {order.status}
//                       </span>
//                     </td>

//                     <td className="px-6 py-4">
//                       <span
//                         className={`inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-xs font-bold shadow-sm
//                         ${
//                           order.paymentStatus === "PAID"
//                             ? "bg-emerald-100 text-emerald-700 ring-1 ring-emerald-200"
//                             : "bg-orange-100 text-orange-700 ring-1 ring-orange-200"
//                         }`}
//                       >
//                         {order.paymentStatus === "PAID" ? "✓" : "⏱"}
//                         {order.paymentStatus}
//                       </span>
//                     </td>

//                     <td className="px-6 py-4">
//                       <p className="text-sm text-gray-900">
//                         {new Date(order.createdAt).toLocaleDateString("en-US", {
//                           month: "short",
//                           day: "numeric",
//                         })}
//                       </p>
//                       <p className="text-xs text-gray-500">
//                         {new Date(order.createdAt).toLocaleTimeString("en-US", {
//                           hour: "2-digit",
//                           minute: "2-digit",
//                         })}
//                       </p>
//                     </td>
//                   </tr>
//                 ))}
//               </tbody>
//             </table>
//           </div>

//           {(!stats.recentOrders || stats.recentOrders.length === 0) && (
//             <div className="text-center py-12">
//               <svg
//                 className="w-16 h-16 text-gray-300 mx-auto mb-4"
//                 fill="none"
//                 stroke="currentColor"
//                 viewBox="0 0 24 24"
//               >
//                 <path
//                   strokeLinecap="round"
//                   strokeLinejoin="round"
//                   strokeWidth={2}
//                   d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"
//                 />
//               </svg>
//               <p className="text-gray-500 text-lg">No recent orders found</p>
//             </div>
//           )}
//         </div>

//         {/* Top Products Section */}
//         <div className="bg-white shadow-xl rounded-2xl border border-gray-100 p-8 hover:shadow-2xl transition-shadow duration-300">
//           <div className="flex items-center justify-between mb-6">
//             <div>
//               <h3 className="text-2xl font-bold text-gray-900">Top Products</h3>
//               <p className="text-gray-500 text-sm mt-1">
//                 Best performing products by views
//               </p>
//             </div>
//             <button
//               onClick={() => navigate("/products")}
//               className="text-[#704F38] hover:bg-[#FAF7F5] px-4 py-2 rounded-xl font-semibold text-sm transition-colors flex items-center gap-2"
//             >
//               View All
//               <svg
//                 className="w-4 h-4"
//                 fill="none"
//                 stroke="currentColor"
//                 viewBox="0 0 24 24"
//               >
//                 <path
//                   strokeLinecap="round"
//                   strokeLinejoin="round"
//                   strokeWidth={2}
//                   d="M9 5l7 7-7 7"
//                 />
//               </svg>
//             </button>
//           </div>

//           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-6">
//             {stats.topProducts?.map((product, index) => (
//               <div
//                 key={product._id}
//                 className="group relative bg-gradient-to-br from-white to-gray-50 rounded-2xl p-4 shadow-md hover:shadow-xl transition-all duration-300 border border-gray-100 hover:scale-105 cursor-pointer"
//                 onClick={() => navigate(`/products/${product._id}`)}
//               >
//                 {/* Rank Badge */}
//                 <div className="absolute -top-3 -left-3 w-10 h-10 bg-gradient-to-br from-[#704F38] to-[#8d6449] rounded-full flex items-center justify-center shadow-lg z-10">
//                   <span className="text-white font-bold text-sm">
//                     #{index + 1}
//                   </span>
//                 </div>

//                 {/* Product Image */}
//                 <div className="relative mb-4 overflow-hidden rounded-xl">
//                   <img
//                     src={product.displayImage || "/bitmap.png"}
//                     alt={product.name}
//                     className="w-full h-40 object-cover transform group-hover:scale-110 transition-transform duration-300"
//                     onError={(e) => {
//                       e.target.src = "/bitmap.png";
//                     }}
//                   />
//                   <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
//                 </div>

//                 {/* Product Details */}
//                 <div className="space-y-2">
//                   <h4 className="font-bold text-gray-900 text-sm line-clamp-1">
//                     {product.name}
//                   </h4>
//                   <p className="text-gray-600 text-xs line-clamp-2 min-h-[2rem]">
//                     {product.description}
//                   </p>

//                   <div className="flex items-center justify-between pt-3 border-t border-gray-200">
//                     <div className="bg-gradient-to-r from-[#FFE6B3] to-[#FFD280] px-3 py-1 rounded-full">
//                       <span className="text-[#704F38] font-extrabold text-sm">
//                         ₹{product.basePrice.toLocaleString()}
//                       </span>
//                     </div>
//                     <div className="flex items-center gap-1 text-gray-500">
//                       <svg
//                         className="w-4 h-4"
//                         fill="currentColor"
//                         viewBox="0 0 20 20"
//                       >
//                         <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
//                         <path
//                           fillRule="evenodd"
//                           d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z"
//                           clipRule="evenodd"
//                         />
//                       </svg>
//                       <span className="text-xs font-semibold">
//                         {product.viewCount}
//                       </span>
//                     </div>
//                   </div>
//                 </div>
//               </div>
//             ))}
//           </div>
//         </div>
//       </div>
//     </div>
//   );
// };

// export default Dashboard;





import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import {
  fetchDashboard,
  fetchCouponStats,
} from "../../features/dashboard/dashboardSlice";
import {
  AreaChart,
  Area,
  BarChart,
  Bar,
  PieChart,
  Pie,
  Cell,
  XAxis,
  YAxis,
  Tooltip,
  CartesianGrid,
  ResponsiveContainer,
  Legend,
} from "recharts";
import { useNavigate } from "react-router-dom";

const Dashboard = () => {
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const { stats, couponStats, loading, error } = useSelector(
    (state) => state.dashboard
  );

  const getProductImage = (order) => {
    const productImage = order.items?.[0]?.productImage;
    if (productImage && productImage !== "https://via.placeholder.com/300") {
      return productImage;
    }

    const productId = order.items?.[0]?.productId;
    if (productId) {
      const product = stats.topProducts.find((p) => p._id === productId);
      if (product?.displayImage) {
        return product.displayImage;
      }
    }

    return "/bitmap.png";
  };

  const getProductName = (order) => {
    const productDetails = order.items?.[0]?.productDetails;
    if (productDetails?.name) {
      return productDetails.name;
    }

    const product = stats.topProducts.find(
      (p) => p._id === order.items[0]?.productId
    );

    return product?.name || order.items[0]?.productName || "Product";
  };

  useEffect(() => {
    dispatch(fetchDashboard());
    dispatch(fetchCouponStats());
  }, [dispatch]);

  if (loading)
    return (
      <div className="flex items-center justify-center min-h-screen bg-gradient-to-br from-gray-50 to-gray-100">
        <div className="text-center">
          <div className="animate-spin rounded-full h-16 w-16 border-t-4 border-b-4 border-[#704F38] mx-auto"></div>
          <p className="mt-4 text-gray-600 font-semibold">
            Loading Dashboard...
          </p>
        </div>
      </div>
    );

  if (error)
    return (
      <div className="flex items-center justify-center min-h-screen bg-gradient-to-br from-red-50 to-red-100">
        <div className="bg-white p-8 rounded-2xl shadow-xl">
          <div className="text-red-600 text-xl font-bold">{error}</div>
        </div>
      </div>
    );

  if (!stats)
    return (
      <div className="flex items-center justify-center min-h-screen">
        <div className="text-gray-500 text-xl">No data available</div>
      </div>
    );

  // Calculate growth percentages
  const orderGrowth = stats.charts?.monthlyComparison?.growth?.orders || 0;
  const revenueGrowth = stats.charts?.monthlyComparison?.growth?.revenue || 0;

  return (
    <div className="space-y-6 min-h-screen p-2">
      <div className="max-w-[1600px] mx-auto space-y-8">
        {/* Header Section */}
        <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
          <div>
            <h1 className="text-2xl font-bold text-gray-600 tracking-tight">
              Dashboard
            </h1>
            <p className="text-gray-500 mt-2">
              Welcome back! Here's what's happening with your store.
            </p>
          </div>
          <div className="flex items-center gap-3">
            <div className="bg-white px-4 py-2 rounded-xl shadow-sm border border-gray-200">
              <p className="text-xs text-gray-500">Current Month</p>
              <p className="font-bold text-gray-900">
                {stats.charts?.monthlyComparison?.currentMonth?.label}
              </p>
            </div>
            <div className="bg-white px-4 py-2 rounded-xl shadow-sm border border-gray-200">
              <p className="text-xs text-gray-500">Today</p>
              <p className="font-semibold text-gray-900">
                {new Date().toLocaleDateString("en-US", {
                  month: "short",
                  day: "numeric",
                })}
              </p>
            </div>
          </div>
        </div>

        {/* Stats Cards Grid */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
          {/* Total Users Card */}
          <div className="group bg-gradient-to-br from-white to-[#FAF7F5] shadow-lg hover:shadow-2xl rounded-2xl p-6 transition-all duration-300 border border-gray-100 hover:scale-105 cursor-pointer">
            <div className="flex justify-between items-start mb-4">
              <div>
                <p className="text-sm font-medium text-gray-500 uppercase tracking-wide">
                  Total Users
                </p>
                <p className="text-4xl font-extrabold text-[#704F38] mt-2">
                  {stats.totalUsers}
                </p>
              </div>
              <div className="bg-gradient-to-br from-[#F5ECE6] to-[#E8D5C4] w-16 h-16 rounded-2xl flex items-center justify-center shadow-md group-hover:rotate-12 transition-transform duration-300">
                <svg
                  className="w-8 h-8 text-[#704F38]"
                  fill="currentColor"
                  viewBox="0 0 20 20"
                >
                  <path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z" />
                </svg>
              </div>
            </div>
            <div className="flex items-center gap-2 mt-4 pt-4 border-t border-gray-200">
              <span className="text-xs text-gray-600">Active users</span>
            </div>
          </div>

          {/* Total Orders Card */}
          <div className="group bg-gradient-to-br from-white to-[#E7F3FF] shadow-lg hover:shadow-2xl rounded-2xl p-6 transition-all duration-300 border border-gray-100 hover:scale-105 cursor-pointer">
            <div className="flex justify-between items-start mb-4">
              <div>
                <p className="text-sm font-medium text-gray-500 uppercase tracking-wide">
                  Total Orders
                </p>
                <p className="text-4xl font-extrabold text-[#704F38] mt-2">
                  {stats.totalOrders}
                </p>
              </div>
              <div className="bg-gradient-to-br from-[#E7F3FF] to-[#C2DFFF] w-16 h-16 rounded-2xl flex items-center justify-center shadow-md group-hover:rotate-12 transition-transform duration-300">
                <svg
                  className="w-8 h-8 text-blue-600"
                  fill="currentColor"
                  viewBox="0 0 20 20"
                >
                  <path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z" />
                </svg>
              </div>
            </div>
            <div className="flex items-center gap-2 mt-4 pt-4 border-t border-gray-200">
              <div className="flex items-center gap-1">
                <svg
                  className={`w-4 h-4 ${orderGrowth >= 0 ? "text-green-500" : "text-red-500"}`}
                  fill="currentColor"
                  viewBox="0 0 20 20"
                >
                  <path
                    fillRule="evenodd"
                    d={
                      orderGrowth >= 0
                        ? "M12 7a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0V8.414l-4.293 4.293a1 1 0 01-1.414 0L8 10.414l-4.293 4.293a1 1 0 01-1.414-1.414l5-5a1 1 0 011.414 0L11 10.586 14.586 7H12z"
                        : "M12 13a1 1 0 100 2h5a1 1 0 001-1v-5a1 1 0 10-2 0v2.586l-4.293-4.293a1 1 0 00-1.414 0L8 9.586l-4.293-4.293a1 1 0 00-1.414 1.414l5 5a1 1 0 001.414 0L11 9.414 14.586 13H12z"
                    }
                    clipRule="evenodd"
                  />
                </svg>
                <span
                  className={`text-sm font-bold ${orderGrowth >= 0 ? "text-green-600" : "text-red-600"}`}
                >
                  {orderGrowth.toFixed(1)}%
                </span>
              </div>
              <p className="text-sm text-gray-600">vs last month</p>
            </div>
          </div>

          {/* Total Products Card */}
          <div className="group bg-gradient-to-br from-white to-[#FFF3E6] shadow-lg hover:shadow-2xl rounded-2xl p-6 transition-all duration-300 border border-gray-100 hover:scale-105 cursor-pointer">
            <div className="flex justify-between items-start mb-4">
              <div>
                <p className="text-sm font-medium text-gray-500 uppercase tracking-wide">
                  Total Products
                </p>
                <p className="text-4xl font-extrabold text-[#704F38] mt-2">
                  {stats.inventory?.totalProducts || stats.totalProducts}
                </p>
              </div>
              <div className="bg-gradient-to-br from-[#FFF3E6] to-[#FFE4B8] w-16 h-16 rounded-2xl flex items-center justify-center shadow-md group-hover:rotate-12 transition-transform duration-300">
                <svg
                  className="w-8 h-8 text-orange-600"
                  fill="currentColor"
                  viewBox="0 0 20 20"
                >
                  <path
                    fillRule="evenodd"
                    d="M10 2a4 4 0 00-4 4v1H5a1 1 0 00-.994.89l-1 9A1 1 0 004 18h12a1 1 0 00.994-1.11l-1-9A1 1 0 0015 7h-1V6a4 4 0 00-4-4zm2 5V6a2 2 0 10-4 0v1h4zm-6 3a1 1 0 112 0 1 1 0 01-2 0zm7-1a1 1 0 100 2 1 1 0 000-2z"
                    clipRule="evenodd"
                  />
                </svg>
              </div>
            </div>
            <div className="flex items-center gap-2 mt-4 pt-4 border-t border-gray-200">
              <span className="text-xs text-green-600">
                In Stock: {stats.inventory?.inStock || 0}
              </span>
              {stats.inventory?.outOfStock > 0 && (
                <span className="text-xs text-red-600">
                  • Out: {stats.inventory.outOfStock}
                </span>
              )}
            </div>
          </div>

          {/* Total Coupons Card */}
          <div className="group bg-gradient-to-br from-white to-[#EAF1FF] shadow-lg hover:shadow-2xl rounded-2xl p-6 transition-all duration-300 border border-gray-100 hover:scale-105 cursor-pointer">
            <div className="flex justify-between items-start mb-4">
              <div>
                <p className="text-sm font-medium text-gray-500 uppercase tracking-wide">
                  Total Coupons
                </p>
                <p className="text-4xl font-extrabold text-[#704F38] mt-2">
                  {couponStats?.totalCoupons ?? 0}
                </p>
              </div>
              <div className="bg-gradient-to-br from-[#EAF1FF] to-[#C7D7FE] w-16 h-16 rounded-2xl flex items-center justify-center shadow-md group-hover:rotate-12 transition-transform duration-300">
                <svg
                  className="w-8 h-8 text-blue-600"
                  fill="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path d="M21 10V7a1 1 0 00-1-1h-3V4a1 1 0 00-1-1H8a1 1 0 00-1 1v2H4a1 1 0 00-1 1v3a2 2 0 010 4v3a1 1 0 001 1h3v2a1 1 0 001 1h8a1 1 0 001-1v-2h3a1 1 0 001-1v-3a2 2 0 010-4zM9 4h6v2H9V4zm6 16H9v-2h6v2z" />
                </svg>
              </div>
            </div>
            <div className="flex items-center justify-between mt-4 pt-4 border-t border-gray-200">
              <p className="text-sm font-bold text-green-600">
                Active: {couponStats?.activeCoupons ?? 0}
              </p>
              <button
                onClick={() => navigate("/coupon-stats")}
                className="text-blue-600 hover:text-blue-800 transition font-semibold"
              >
                View →
              </button>
            </div>
          </div>
        </div>

        {/* 🆕 Inventory Status Cards */}
        {stats.inventory && (
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            <div className="bg-green-50 border border-green-200 rounded-xl p-4">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-xs text-green-600 font-semibold uppercase">
                    In Stock
                  </p>
                  <p className="text-2xl font-bold text-green-700 mt-1">
                    {stats.inventory.inStock}
                  </p>
                </div>
                <div className="bg-green-100 w-12 h-12 rounded-lg flex items-center justify-center">
                  <svg
                    className="w-6 h-6 text-green-600"
                    fill="currentColor"
                    viewBox="0 0 20 20"
                  >
                    <path
                      fillRule="evenodd"
                      d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                      clipRule="evenodd"
                    />
                  </svg>
                </div>
              </div>
            </div>

            <div className="bg-yellow-50 border border-yellow-200 rounded-xl p-4">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-xs text-yellow-600 font-semibold uppercase">
                    Low Stock
                  </p>
                  <p className="text-2xl font-bold text-yellow-700 mt-1">
                    {stats.inventory.lowStock}
                  </p>
                </div>
                <div className="bg-yellow-100 w-12 h-12 rounded-lg flex items-center justify-center">
                  <svg
                    className="w-6 h-6 text-yellow-600"
                    fill="currentColor"
                    viewBox="0 0 20 20"
                  >
                    <path
                      fillRule="evenodd"
                      d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
                      clipRule="evenodd"
                    />
                  </svg>
                </div>
              </div>
            </div>

            <div className="bg-orange-50 border border-orange-200 rounded-xl p-4">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-xs text-orange-600 font-semibold uppercase">
                    Critical
                  </p>
                  <p className="text-2xl font-bold text-orange-700 mt-1">
                    {stats.inventory.criticalStock}
                  </p>
                </div>
                <div className="bg-orange-100 w-12 h-12 rounded-lg flex items-center justify-center">
                  <svg
                    className="w-6 h-6 text-orange-600"
                    fill="currentColor"
                    viewBox="0 0 20 20"
                  >
                    <path
                      fillRule="evenodd"
                      d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
                      clipRule="evenodd"
                    />
                  </svg>
                </div>
              </div>
            </div>

            <div className="bg-red-50 border border-red-200 rounded-xl p-4">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-xs text-red-600 font-semibold uppercase">
                    Out of Stock
                  </p>
                  <p className="text-2xl font-bold text-red-700 mt-1">
                    {stats.inventory.outOfStock}
                  </p>
                </div>
                <div className="bg-red-100 w-12 h-12 rounded-lg flex items-center justify-center">
                  <svg
                    className="w-6 h-6 text-red-600"
                    fill="currentColor"
                    viewBox="0 0 20 20"
                  >
                    <path
                      fillRule="evenodd"
                      d="M10 18a8 8 0 100-16 8 8 0 000 16zM7 9a1 1 0 000 2h6a1 1 0 100-2H7z"
                      clipRule="evenodd"
                    />
                  </svg>
                </div>
              </div>
            </div>
          </div>
        )}

        {/* Charts Row */}
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          {/* Orders Overview Chart - Takes 2 columns */}
          <div className="lg:col-span-2 bg-white shadow-xl rounded-2xl p-6 border border-gray-100 hover:shadow-2xl transition-shadow duration-300">
            <div className="flex items-center justify-between mb-6">
              <div>
                <h2 className="text-xl font-bold text-gray-900">
                  Orders Overview
                </h2>
                <p className="text-gray-500 text-sm mt-1">
                  Last 30 days order trends
                </p>
              </div>
            </div>

            <ResponsiveContainer width="100%" height={300}>
              <AreaChart data={stats.charts?.orderOverview || []}>
                <defs>
                  <linearGradient id="colorTotal" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="5%" stopColor="#4880FF" stopOpacity={0.3} />
                    <stop offset="95%" stopColor="#4880FF" stopOpacity={0} />
                  </linearGradient>
                  <linearGradient
                    id="colorCompleted"
                    x1="0"
                    y1="0"
                    x2="0"
                    y2="1"
                  >
                    <stop offset="5%" stopColor="#10B981" stopOpacity={0.3} />
                    <stop offset="95%" stopColor="#10B981" stopOpacity={0} />
                  </linearGradient>
                </defs>
                <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
                <XAxis
                  dataKey="label"
                  stroke="#888"
                  style={{ fontSize: "12px" }}
                />
                <YAxis stroke="#888" style={{ fontSize: "12px" }} />
                <Tooltip
                  contentStyle={{
                    backgroundColor: "white",
                    borderRadius: "12px",
                    border: "1px solid #e5e7eb",
                    boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
                  }}
                />
                <Legend />
                <Area
                  type="monotone"
                  dataKey="total"
                  stroke="#4880FF"
                  strokeWidth={2}
                  fillOpacity={1}
                  fill="url(#colorTotal)"
                  name="Total Orders"
                />
                <Area
                  type="monotone"
                  dataKey="completed"
                  stroke="#10B981"
                  strokeWidth={2}
                  fillOpacity={1}
                  fill="url(#colorCompleted)"
                  name="Completed"
                />
              </AreaChart>
            </ResponsiveContainer>
          </div>

          {/* Orders by Status - Pie Chart */}
          <div className="bg-white shadow-xl rounded-2xl p-6 border border-gray-100 hover:shadow-2xl transition-shadow duration-300">
            <div className="mb-6">
              <h2 className="text-xl font-bold text-gray-900">
                Orders by Status
              </h2>
              <p className="text-gray-500 text-sm mt-1">Current distribution</p>
            </div>

            <ResponsiveContainer width="100%" height={300}>
              <PieChart>
                <Pie
                  data={stats.charts?.ordersByStatus || []}
                  cx="50%"
                  cy="50%"
                  labelLine={false}
                  label={({ label, percent }) =>
                    `${label} ${(percent * 100).toFixed(0)}%`
                  }
                  outerRadius={80}
                  fill="#8884d8"
                  dataKey="count"
                >
                  {(stats.charts?.ordersByStatus || []).map((entry, index) => (
                    <Cell key={`cell-${index}`} fill={entry.color} />
                  ))}
                </Pie>
                <Tooltip />
              </PieChart>
            </ResponsiveContainer>

            <div className="mt-4 space-y-2">
              {(stats.charts?.ordersByStatus || []).map((status, index) => (
                <div
                  key={index}
                  className="flex items-center justify-between text-sm"
                >
                  <div className="flex items-center gap-2">
                    <div
                      className="w-3 h-3 rounded-full"
                      style={{ backgroundColor: status.color }}
                    ></div>
                    <span className="text-gray-700">{status.label}</span>
                  </div>
                  <span className="font-semibold text-gray-900">
                    {status.count}
                  </span>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Monthly Comparison Cards */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div className="bg-gradient-to-br from-blue-50 to-white shadow-lg rounded-2xl p-6 border border-blue-100">
            <div className="flex items-center justify-between mb-4">
              <h3 className="text-lg font-bold text-gray-900">
                Monthly Orders Comparison
              </h3>
              <svg
                className="w-8 h-8 text-blue-500"
                fill="currentColor"
                viewBox="0 0 20 20"
              >
                <path d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z" />
              </svg>
            </div>
            <div className="space-y-4">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-gray-500">
                    {stats.charts?.monthlyComparison?.currentMonth?.label}
                  </p>
                  <p className="text-3xl font-bold text-blue-600">
                    {stats.charts?.monthlyComparison?.currentMonth?.orders || 0}
                  </p>
                </div>
                <div className="text-right">
                  <p className="text-sm text-gray-500">
                    {stats.charts?.monthlyComparison?.previousMonth?.label}
                  </p>
                  <p className="text-2xl font-semibold text-gray-400">
                    {stats.charts?.monthlyComparison?.previousMonth?.orders ||
                      0}
                  </p>
                </div>
              </div>
              <div className="pt-4 border-t border-blue-100">
                <div className="flex items-center gap-2">
                  <span
                    className={`text-lg font-bold ${orderGrowth >= 0 ? "text-green-600" : "text-red-600"}`}
                  >
                    {orderGrowth >= 0 ? "+" : ""}
                    {orderGrowth.toFixed(1)}%
                  </span>
                  <span className="text-sm text-gray-600">growth</span>
                </div>
              </div>
            </div>
          </div>

          <div className="bg-gradient-to-br from-green-50 to-white shadow-lg rounded-2xl p-6 border border-green-100">
            <div className="flex items-center justify-between mb-4">
              <h3 className="text-lg font-bold text-gray-900">
                Monthly Revenue Comparison
              </h3>
              <svg
                className="w-8 h-8 text-green-500"
                fill="currentColor"
                viewBox="0 0 20 20"
              >
                <path d="M8.433 7.418c.155-.103.346-.196.567-.267v1.698a2.305 2.305 0 01-.567-.267C8.07 8.34 8 8.114 8 8c0-.114.07-.34.433-.582zM11 12.849v-1.698c.22.071.412.164.567.267.364.243.433.468.433.582 0 .114-.07.34-.433.582a2.305 2.305 0 01-.567.267z" />
                <path
                  fillRule="evenodd"
                  d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-13a1 1 0 10-2 0v.092a4.535 4.535 0 00-1.676.662C6.602 6.234 6 7.009 6 8c0 .99.602 1.765 1.324 2.246.48.32 1.054.545 1.676.662v1.941c-.391-.127-.68-.317-.843-.504a1 1 0 10-1.51 1.31c.562.649 1.413 1.076 2.353 1.253V15a1 1 0 102 0v-.092a4.535 4.535 0 001.676-.662C13.398 13.766 14 12.991 14 12c0-.99-.602-1.765-1.324-2.246A4.535 4.535 0 0011 9.092V7.151c.391.127.68.317.843.504a1 1 0 101.511-1.31c-.563-.649-1.413-1.076-2.354-1.253V5z"
                  clipRule="evenodd"
                />
              </svg>
            </div>
            <div className="space-y-4">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-gray-500">
                    {stats.charts?.monthlyComparison?.currentMonth?.label}
                  </p>
                  <p className="text-3xl font-bold text-green-600">
                    ₹
                    {(
                      stats.charts?.monthlyComparison?.currentMonth?.revenue ||
                      0
                    ).toLocaleString()}
                  </p>
                </div>
                <div className="text-right">
                  <p className="text-sm text-gray-500">
                    {stats.charts?.monthlyComparison?.previousMonth?.label}
                  </p>
                  <p className="text-2xl font-semibold text-gray-400">
                    ₹
                    {(
                      stats.charts?.monthlyComparison?.previousMonth?.revenue ||
                      0
                    ).toLocaleString()}
                  </p>
                </div>
              </div>
              <div className="pt-4 border-t border-green-100">
                <div className="flex items-center gap-2">
                  <span
                    className={`text-lg font-bold ${revenueGrowth >= 0 ? "text-green-600" : "text-red-600"}`}
                  >
                    {revenueGrowth >= 0 ? "+" : ""}
                    {revenueGrowth.toFixed(1)}%
                  </span>
                  <span className="text-sm text-gray-600">growth</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Recent Orders Section */}
        <div className="bg-white shadow-xl rounded-2xl border border-gray-100 overflow-hidden hover:shadow-2xl transition-shadow duration-300">
          <div className="bg-gradient-to-r from-[#704F38] to-[#8d6449] p-6">
            <div className="flex items-center justify-between">
              <div>
                <h3 className="text-2xl font-bold text-white">Recent Orders</h3>
                <p className="text-gray-200 text-sm mt-1">
                  Latest {stats.recentOrders?.length || 0} transactions
                </p>
              </div>
              <button
                onClick={() => navigate("/orders")}
                className="bg-white text-[#704F38] px-4 py-2 rounded-lg font-semibold hover:bg-gray-100 transition-colors"
              >
                View All
              </button>
            </div>
          </div>

          <div className="overflow-x-auto">
            <table className="w-full">
              <thead>
                <tr className="bg-gray-50 border-b border-gray-200">
                  <th className="px-6 py-4 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">
                    Order Details
                  </th>
                  <th className="px-6 py-4 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">
                    Customer
                  </th>
                  <th className="px-6 py-4 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">
                    Amount
                  </th>
                  <th className="px-6 py-4 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">
                    Status
                  </th>
                  <th className="px-6 py-4 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">
                    Payment
                  </th>
                  <th className="px-6 py-4 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">
                    Date
                  </th>
                </tr>
              </thead>

              <tbody className="divide-y divide-gray-200">
                {stats.recentOrders?.map((order, index) => (
                  <tr
                    key={order.id}
                    className="hover:bg-gray-50 transition-colors duration-200 cursor-pointer"
                    onClick={() => navigate(`/orders/${order.id}`)}
                  >
                    <td className="px-6 py-4">
                      <div className="flex items-center gap-4">
                        <div className="relative">
                          <img
                            src={getProductImage(order)}
                            alt={getProductName(order)}
                            className="w-16 h-16 object-cover rounded-xl shadow-md ring-2 ring-gray-100"
                            onError={(e) => {
                              e.target.src = "/bitmap.png";
                            }}
                          />
                          {order.items.length > 1 && (
                            <div className="absolute -top-2 -right-2 bg-[#704F38] text-white text-xs font-bold rounded-full w-6 h-6 flex items-center justify-center">
                              {order.items.length}
                            </div>
                          )}
                        </div>
                        <div>
                          <p className="font-bold text-gray-900 text-sm">
                            {order.orderNumber}
                          </p>
                          <p className="text-xs text-gray-500 mt-1">
                            {getProductName(order)}
                          </p>
                        </div>
                      </div>
                    </td>

                    <td className="px-6 py-4">
                      <div className="flex items-center gap-3">
                        <div className="w-10 h-10 bg-gradient-to-br from-[#704F38] to-[#8d6449] rounded-full flex items-center justify-center text-white font-bold text-sm">
                          {order.user.firstName?.[0]}
                          {order.user.lastName?.[0]}
                        </div>
                        <div>
                          <p className="font-semibold text-gray-900 text-sm">
                            {order.user.firstName} {order.user.lastName}
                          </p>
                          <p className="text-xs text-gray-500">
                            {order.user.email}
                          </p>
                        </div>
                      </div>
                    </td>

                    <td className="px-6 py-4">
                      <p className="font-bold text-lg text-[#704F38]">
                        ₹{parseFloat(order.totalAmount).toLocaleString()}
                      </p>
                      <p className="text-xs text-gray-500 mt-1 uppercase">
                        {order.paymentMethod}
                      </p>
                    </td>

                    <td className="px-6 py-4">
                      <span
                        className={`inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-xs font-bold shadow-sm
                        ${
                          order.status === "DELIVERED"
                            ? "bg-green-100 text-green-700 ring-1 ring-green-200"
                            : order.status === "PENDING"
                              ? "bg-yellow-100 text-yellow-700 ring-1 ring-yellow-200"
                              : order.status === "SHIPPED"
                                ? "bg-blue-100 text-blue-700 ring-1 ring-blue-200"
                                : order.status === "CANCELLED"
                                  ? "bg-red-100 text-red-700 ring-1 ring-red-200"
                                  : "bg-purple-100 text-purple-700 ring-1 ring-purple-200"
                        }`}
                      >
                        <span
                          className={`w-2 h-2 rounded-full ${
                            order.status === "DELIVERED"
                              ? "bg-green-500"
                              : order.status === "PENDING"
                                ? "bg-yellow-500"
                                : order.status === "SHIPPED"
                                  ? "bg-blue-500"
                                  : order.status === "CANCELLED"
                                    ? "bg-red-500"
                                    : "bg-purple-500"
                          }`}
                        ></span>
                        {order.status}
                      </span>
                    </td>

                    <td className="px-6 py-4">
                      <span
                        className={`inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-xs font-bold shadow-sm
                        ${
                          order.paymentStatus === "PAID"
                            ? "bg-emerald-100 text-emerald-700 ring-1 ring-emerald-200"
                            : "bg-orange-100 text-orange-700 ring-1 ring-orange-200"
                        }`}
                      >
                        {order.paymentStatus === "PAID" ? "✓" : "⏱"}
                        {order.paymentStatus}
                      </span>
                    </td>

                    <td className="px-6 py-4">
                      <p className="text-sm text-gray-900">
                        {new Date(order.createdAt).toLocaleDateString("en-US", {
                          month: "short",
                          day: "numeric",
                        })}
                      </p>
                      <p className="text-xs text-gray-500">
                        {new Date(order.createdAt).toLocaleTimeString("en-US", {
                          hour: "2-digit",
                          minute: "2-digit",
                        })}
                      </p>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          {(!stats.recentOrders || stats.recentOrders.length === 0) && (
            <div className="text-center py-12">
              <svg
                className="w-16 h-16 text-gray-300 mx-auto mb-4"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"
                />
              </svg>
              <p className="text-gray-500 text-lg">No recent orders found</p>
            </div>
          )}
        </div>

        {/* 🆕 Top Products Section with Enhanced Data */}
        <div className="bg-white shadow-xl rounded-2xl border border-gray-100 p-8 hover:shadow-2xl transition-shadow duration-300">
          <div className="flex items-center justify-between mb-6">
            <div>
              <h3 className="text-2xl font-bold text-gray-900">
                Top Selling Products
              </h3>
              <p className="text-gray-500 text-sm mt-1">
                Best performers by revenue and orders
              </p>
            </div>
            <button
              onClick={() => navigate("/products")}
              className="text-[#704F38] hover:bg-[#FAF7F5] px-4 py-2 rounded-xl font-semibold text-sm transition-colors flex items-center gap-2"
            >
              View All
              <svg
                className="w-4 h-4"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M9 5l7 7-7 7"
                />
              </svg>
            </button>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-6">
            {stats.topProducts?.map((product, index) => (
              <div
                key={product._id}
                className="group relative bg-gradient-to-br from-white to-gray-50 rounded-2xl p-4 shadow-md hover:shadow-xl transition-all duration-300 border border-gray-100 hover:scale-105 cursor-pointer"
                onClick={() => navigate(`/products/${product._id}`)}
              >
                {/* Rank Badge */}
                <div className="absolute -top-3 -left-3 w-10 h-10 bg-gradient-to-br from-[#704F38] to-[#8d6449] rounded-full flex items-center justify-center shadow-lg z-10">
                  <span className="text-white font-bold text-sm">
                    #{index + 1}
                  </span>
                </div>

                {/* Stock Status Badge */}
                {product.stockStatus === "OUT_OF_STOCK" && (
                  <div className="absolute -top-2 -right-2 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-full shadow-lg z-10">
                    Out of Stock
                  </div>
                )}

                {/* Product Image */}
                <div className="relative mb-4 overflow-hidden rounded-xl">
                  <img
                    src={product.displayImage || "/bitmap.png"}
                    alt={product.name}
                    className="w-full h-40 object-cover transform group-hover:scale-110 transition-transform duration-300"
                    onError={(e) => {
                      e.target.src = "/bitmap.png";
                    }}
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                </div>

                {/* Product Details */}
                <div className="space-y-2">
                  <h4 className="font-bold text-gray-900 text-sm line-clamp-1">
                    {product.name}
                  </h4>

                  <div className="flex items-center justify-between pt-3 border-t border-gray-200">
                    <div className="bg-gradient-to-r from-[#FFE6B3] to-[#FFD280] px-3 py-1 rounded-full">
                      <span className="text-[#704F38] font-extrabold text-sm">
                        ₹{product.basePrice.toLocaleString()}
                      </span>
                    </div>
                  </div>

                  {/* 🆕 Sales Info */}
                  <div className="space-y-1 pt-2 border-t border-gray-200">
                    <div className="flex items-center justify-between text-xs">
                      <span className="text-gray-500">Sold:</span>
                      <span className="font-bold text-gray-900">
                        {product.totalSold} units
                      </span>
                    </div>
                    <div className="flex items-center justify-between text-xs">
                      <span className="text-gray-500">Orders:</span>
                      <span className="font-bold text-gray-900">
                        {product.totalOrders}
                      </span>
                    </div>
                    <div className="flex items-center justify-between text-xs">
                      <span className="text-gray-500">Revenue:</span>
                      <span className="font-bold text-green-600">
                        ₹{product.revenue.toLocaleString()}
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* 🆕 Low Stock Alert Section */}
        {stats.lowStockProducts && stats.lowStockProducts.length > 0 && (
          <div className="bg-yellow-50 border-2 border-yellow-200 rounded-2xl p-6">
            <div className="flex items-center gap-3 mb-4">
              <svg
                className="w-8 h-8 text-yellow-600"
                fill="currentColor"
                viewBox="0 0 20 20"
              >
                <path
                  fillRule="evenodd"
                  d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
                  clipRule="evenodd"
                />
              </svg>
              <div>
                <h3 className="text-xl font-bold text-yellow-900">
                  Low Stock Alert
                </h3>
                <p className="text-sm text-yellow-700">
                  {stats.lowStockProducts.length} products need restocking
                </p>
              </div>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
              {stats.lowStockProducts.map((product) => (
                <div
                  key={product._id}
                  className="bg-white rounded-lg p-4 border border-yellow-200 flex items-center gap-4 cursor-pointer hover:shadow-md transition-shadow"
                  onClick={() => navigate(`/products/${product._id}`)}
                >
                  <img
                    src={product.displayImage || "/bitmap.png"}
                    alt={product.name}
                    className="w-16 h-16 object-cover rounded-lg"
                    onError={(e) => {
                      e.target.src = "/bitmap.png";
                    }}
                  />
                  <div className="flex-1">
                    <p className="font-semibold text-gray-900 text-sm line-clamp-1">
                      {product.name}
                    </p>
                    <p className="text-xs text-red-600 font-bold mt-1">
                      Only {product.stock} left
                    </p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

export default Dashboard;