<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dashboard - ClosetLoop</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <link rel="stylesheet" href="css/fashion-theme.css">
  
  <!-- Firebase SDKs - Load only essential ones -->
  <script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-app-compat.js"></script>
  <script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-auth-compat.js"></script>
  <script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-firestore-compat.js"></script>
  <script src="js/firebase-config.js"></script>
  
  <style>
    :root {
      --primary: #8b5cf6;
      --primary-light: #a78bfa;
      --primary-dark: #7c3aed;
    }
    
    * {
      scrollbar-width: thin;
      scrollbar-color: var(--primary-light) #f5f5f5;
    }
    
    *::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }
    
    *::-webkit-scrollbar-track {
      background: #f5f5f5;
      border-radius: 4px;
    }
    
    *::-webkit-scrollbar-thumb {
      background-color: var(--primary-light);
      border-radius: 4px;
    }
    
    /* Hide scrollbars globally for both PC and mobile */
    html, body {
      scrollbar-width: none; /* Firefox */
      -ms-overflow-style: none; /* Internet Explorer 10+ */
    }
    
    /* Hide scrollbar for Webkit browsers (Chrome, Safari, Edge) */
    html::-webkit-scrollbar,
    body::-webkit-scrollbar {
      display: none;
    }
    
    /* Hide scrollbars for all elements */
    * {
      scrollbar-width: none; /* Firefox */
      -ms-overflow-style: none; /* Internet Explorer 10+ */
    }
    
    *::-webkit-scrollbar {
      display: none; /* Chrome, Safari, Edge */
    }
    
    body {
      font-family: 'Poppins', sans-serif;
      background-color: #f9fafb;
      margin: 0;
      padding: 0;
    }
    
    .dashboard-grid {
      display: grid;
      grid-template-columns: 280px 1fr;
      gap: 1.5rem;
    }
    
    @media (max-width: 1024px) {
      .dashboard-grid {
        grid-template-columns: 1fr;
      }
    }
    
    .stat-card {
      transition: all 0.3s ease;
      box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    }
    
    .stat-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 15px rgba(0,0,0,0.07);
    }
    
    .dashboard-card {
      background: white;
      border-radius: 16px;
      box-shadow: 0 4px 6px rgba(0,0,0,0.03);
      transition: all 0.3s ease;
      border: 1px solid #f3f4f6;
    }
    
    .dashboard-card:hover {
      box-shadow: 0 10px 15px rgba(0,0,0,0.05);
    }
    
    .sidebar {
      position: sticky;
      top: 1rem;
      height: calc(100vh - 2rem);
      overflow-y: auto;
    }
    
    .sidebar-item {
      transition: all 0.2s ease;
      border-radius: 12px;
      text-decoration: none;
      color: inherit;
    }
    
    .sidebar-item:hover {
      background-color: #f3f4f6;
      text-decoration: none;
    }
    
    .sidebar-item.active {
      background-color: #ede9fe;
      color: var(--primary);
      font-weight: 500;
    }
    
    .status-badge {
      display: inline-block;
      padding: 2px 10px;
      border-radius: 12px;
      font-size: 0.8rem;
      font-weight: 500;
    }
    
    .status-pending {
      background-color: #fffbeb;
      color: #d97706;
    }
    
    .status-active {
      background-color: #ecfdf5;
      color: #059669;
    }
    
    .status-completed {
      background-color: #f5f3ff;
      color: var(--primary);
    }
    
    .status-cancelled {
      background-color: #fef2f2;
      color: #dc2626;
    }
    
    .fashion-item-card {
      transition: all 0.3s ease;
      overflow: hidden;
      border-radius: 12px;
    }
    
    .fashion-item-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 10px 15px rgba(0,0,0,0.08);
    }

    /* Mobile menu improvements */
    #mobileMenu {
      transition: all 0.3s ease;
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      transform: translateY(-10px);
    }

    #mobileMenu.show {
      max-height: 500px;
      opacity: 1;
      transform: translateY(0);
    }

    /* Icon improvements */
    .fas {
      display: inline-block;
      width: 1em;
      height: 1em;
      vertical-align: middle;
    }

    /* Better touch targets for mobile */
    @media (max-width: 768px) {
      .user-menu a {
        padding: 8px 12px;
        min-height: 44px;
        display: flex;
        align-items: center;
      }
      
      .dashboard-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
      }
      
      .sidebar {
        position: static;
        height: auto;
        margin-bottom: 1rem;
      }

      .stat-card {
        padding: 1rem !important;
      }

      .stat-card .text-xl {
        font-size: 1.125rem;
      }

      /* Fix mobile navigation spacing */
      .pt-24 {
        padding-bottom: 5rem;
      }


      /* Ensure proper spacing for mobile content */
      .main-content {
        padding-bottom: 80px !important;
      }
      
      /* Fix mobile grid layouts */
      .grid-cols-1.md\\:grid-cols-2.lg\\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
      }
      
      .lg\\:grid-cols-3 {
        grid-template-columns: 1fr !important;
      }
      
      .lg\\:col-span-2 {
        grid-column: 1 !important;
      }
    }

    /* Fix notification badge positioning */
    #notificationCount {
      min-width: 20px;
      height: 20px;
      font-size: 11px;
      font-weight: 600;
    }

    /* Loading states */
    .loading-spinner {
      display: inline-block;
      width: 20px;
      height: 20px;
      border: 3px solid #f3f3f3;
      border-top: 3px solid var(--primary);
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    .loading-placeholder {
      background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
      background-size: 200% 100%;
      animation: loading 1.5s infinite;
    }

    @keyframes loading {
      0% { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }


    /* Ensure mobile menu is above other elements */
    #mobileMenu {
      z-index: 60 !important;
    }
  </style>
</head>
<body class="text-gray-800 dashboard">
  <!-- Navigation -->
  <nav class="bg-white shadow-md py-4 px-6 fixed w-full z-50 dashboard-header">
    <div class="max-w-7xl mx-auto flex justify-between items-center">
              <a href="index.html" class="text-2xl font-bold text-purple-600 flex items-center">
          <i class="fas fa-tshirt mr-2"></i>ClosetLoop
        </a>
      
      <!-- Search bar -->
      <div class="hidden md:flex flex-1 justify-center">
        <input type="text" placeholder="Search clothes, shoes, accessories..." class="w-96 px-4 py-2 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-purple-500">
      </div>

      <div class="flex gap-4 items-center">
        <!-- Desktop Navigation Links -->
        <div class="hidden md:flex gap-6 items-center">
          <a href="index.html#browse" class="hover:text-gray-600 transition">Browse</a>
          <a href="index.html#how-it-works" class="hover:text-gray-600 transition">How it Works</a>
        </div>
        
        <!-- Notification Bell -->
        <a href="notifications.html" title="Notifications" class="relative p-2 hover:bg-gray-100 rounded-full transition">
          <i class="fas fa-bell text-lg text-gray-600 hover:text-purple-600 transition"></i>
          <span id="notificationCount" class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center hidden">0</span>
        </a>
        

      </div>
    </div>


  </nav>

  <!-- Dashboard Content -->
  <div class="pt-24 pb-12 px-4 max-w-7xl mx-auto">
    <!-- Dashboard Header -->
    <div class="mb-8">
      <h1 class="text-3xl md:text-4xl font-bold text-gray-900">Your Dashboard</h1>
      <p id="welcomeMessage" class="text-gray-600 mt-2">Welcome back! Here's what's happening with your fashion journey.</p>
    </div>

    <div class="dashboard-grid">
      <!-- Sidebar -->
      <div class="sidebar hidden lg:block">
        <div class="dashboard-card p-6 mb-6">
          <div class="flex flex-col items-center text-center">
            <img id="sidebarAvatar" src="assets/default-avatar.jpg" 
                 alt="Profile" 
                 class="w-24 h-24 rounded-full object-cover border-4 border-white shadow-lg">
            <h2 id="sidebarName" class="text-xl font-bold mt-4">Loading...</h2>
            <div class="flex items-center mt-1 text-yellow-400">
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star-half-alt"></i>
              <span id="userRating" class="ml-2 text-gray-600 text-sm">4.7</span>
            </div>
            <p id="memberSince" class="text-gray-500 text-sm mt-2">Member since Jan 2024</p>
          </div>
          
          <div class="mt-6 space-y-1">
            <a href="#" class="sidebar-item active flex items-center gap-3 p-3">
              <i class="fas fa-chart-line w-5 text-center"></i>
              Dashboard
            </a>
            <a href="create-listing.html" class="sidebar-item flex items-center gap-3 p-3">
              <i class="fas fa-tshirt w-5 text-center"></i>
              My Listings
            </a>
            <a href="#" onclick="scrollToSection('myRentalsPurchases')" class="sidebar-item flex items-center gap-3 p-3">
              <i class="fas fa-shopping-bag w-5 text-center"></i>
              Orders & Rentals
            </a>

            <a href="profile.html" class="sidebar-item flex items-center gap-3 p-3">
              <i class="fas fa-user-cog w-5 text-center"></i>
              Profile Settings
            </a>
            <a href="#" onclick="signOut()" class="sidebar-item flex items-center gap-3 p-3 text-red-500">
              <i class="fas fa-sign-out-alt w-5 text-center"></i>
              Logout
            </a>
          </div>
        </div>
        
        <!-- Quick Stats -->
        <div class="dashboard-card p-6">
          <h3 class="font-bold text-lg mb-4">Quick Stats</h3>
          <div class="space-y-4">
            <div class="flex justify-between">
              <span class="text-gray-500 text-sm">Listings</span>
              <span id="itemsListed" class="font-bold">0</span>
            </div>
            <div class="flex justify-between">
              <span class="text-gray-500 text-sm">Rentals</span>
              <span id="itemsRented" class="font-bold">0</span>
            </div>
            <div class="flex justify-between">
              <span class="text-gray-500 text-sm">Purchases</span>
              <span id="itemsPurchased" class="font-bold">0</span>
            </div>
            <div class="flex justify-between">
              <span class="text-gray-500 text-sm">Rating</span>
              <span id="communityRating" class="font-bold">4.7/5.0</span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- Main Content -->
      <div class="main-content">
        <!-- Stats Overview -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5 mb-6">
          <div class="stat-card dashboard-card p-5 flex items-center">
            <div class="bg-purple-100 p-3 rounded-full">
              <i class="fas fa-wallet text-purple-600 text-xl"></i>
            </div>
            <div class="ml-4">
              <p class="text-gray-500 text-sm">Total Earnings</p>
              <p id="totalEarnings" class="font-bold text-xl">₹0.00</p>
            </div>
          </div>
          
          <div class="stat-card dashboard-card p-5 flex items-center">
            <div class="bg-green-100 p-3 rounded-full">
              <i class="fas fa-calendar-check text-green-600 text-xl"></i>
            </div>
            <div class="ml-4">
              <p class="text-gray-500 text-sm">Active Rentals</p>
              <p id="activeRentals" class="font-bold text-xl">0</p>
            </div>
          </div>
          
          <div class="stat-card dashboard-card p-5 flex items-center">
            <div class="bg-blue-100 p-3 rounded-full">
              <i class="fas fa-tshirt text-blue-600 text-xl"></i>
            </div>
            <div class="ml-4">
              <p class="text-gray-500 text-sm">Your Listings</p>
              <p id="yourListings" class="font-bold text-xl">0</p>
            </div>
          </div>
          

        </div>
        
        <!-- Dashboard Content Grid -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
          <!-- Left Column -->
          <div class="lg:col-span-2 space-y-6">
            <!-- Recent Activity -->
            <div class="dashboard-card p-6">
              <div class="flex justify-between items-center mb-4">
                <h3 class="font-bold text-lg">Recent Activity</h3>
                <a href="#" class="text-sm text-purple-600 font-medium">View All</a>
              </div>
              
              <div id="recentActivity" class="space-y-4">
                <div class="text-center py-8">
                  <div class="loading-spinner mx-auto"></div>
                  <p class="text-gray-500 mt-2">Loading activity...</p>
                </div>
              </div>
              
              <div id="recentActivityMore" class="hidden mt-4">
                <button onclick="loadMoreActivity()" class="w-full py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition">
                  See More Activity
                </button>
              </div>
            </div>
            
            <!-- Active Listings -->
            <div class="dashboard-card p-6">
              <div class="flex justify-between items-center mb-4">
                <h3 class="font-bold text-lg">Active Listings</h3>
                <a href="create-listing.html?manage=true" class="text-sm text-purple-600 font-medium">Manage All</a>
              </div>
              
              <div id="activeListings" class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="text-center py-8">
                  <div class="loading-spinner mx-auto"></div>
                  <p class="text-gray-500 mt-2">Loading listings...</p>
                </div>
              </div>
            </div>
            
            <!-- My Rentals & Purchases -->
            <div class="dashboard-card p-6">
              <div class="flex justify-between items-center mb-4">
                <h3 class="font-bold text-lg">My Rentals & Purchases</h3>
                <div class="flex gap-2">
                  <button id="showRentals" onclick="filterItems('rentals')" class="px-3 py-1 bg-purple-600 text-white rounded-full text-xs hover:bg-purple-700 transition">Rentals</button>
                  <button id="showPurchases" onclick="filterItems('purchases')" class="px-3 py-1 bg-gray-200 text-gray-700 rounded-full text-xs hover:bg-gray-300 transition">Purchases</button>
                  <button id="showAll" onclick="filterItems('all')" class="px-3 py-1 bg-gray-200 text-gray-700 rounded-full text-xs hover:bg-gray-300 transition">All</button>
                </div>
              </div>
              
              <div id="myRentalsPurchases" class="space-y-4">
                <div class="text-center py-8">
                  <div class="loading-spinner mx-auto"></div>
                  <p class="text-gray-500 mt-2">Loading your items...</p>
                </div>
              </div>
              
              <div id="rentalsPurchasesMore" class="hidden mt-4">
                <button onclick="loadMoreRentalsPurchases()" class="w-full py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition">
                  See More Items
                </button>
              </div>
            </div>
          </div>
          
          <!-- Right Column -->
          <div class="space-y-6">

            
            <!-- Fashion Insights -->
            <div class="dashboard-card p-6">
              <h3 class="font-bold text-lg mb-4">Fashion Insights</h3>
              <div class="space-y-4">
                <div class="flex items-start gap-3">
                  <div class="bg-purple-100 p-3 rounded-lg flex-shrink-0">
                    <i class="fas fa-fire text-purple-600"></i>
                  </div>
                  <div>
                    <h4 class="font-medium">Trending Now</h4>
                    <p class="text-sm text-gray-600">Pastel colors are in high demand this season</p>
                  </div>
                </div>
                
                <div class="flex items-start gap-3">
                  <div class="bg-yellow-100 p-3 rounded-lg flex-shrink-0">
                    <i class="fas fa-bolt text-yellow-500"></i>
                  </div>
                  <div>
                    <h4 class="font-medium">Quick Tip</h4>
                    <p class="text-sm text-gray-600">List formal wear on Thursdays for weekend rentals</p>
                  </div>
                </div>
                
                <div class="flex items-start gap-3">
                  <div class="bg-blue-100 p-3 rounded-lg flex-shrink-0">
                    <i class="fas fa-chart-line text-blue-600"></i>
                  </div>
                  <div>
                    <h4 class="font-medium">Your Performance</h4>
                    <p id="performanceText" class="text-sm text-gray-600">Your listings have 20% more views than last month</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>


  <!-- Optimized Script Loading -->
  <script src="js/auth-state.js"></script>
  <script src="js/dashboard.js"></script>
  
  <!-- Dashboard-specific scripts -->
  <script>
    // Mobile menu functionality
    document.addEventListener('DOMContentLoaded', function() {
      const mobileMenuBtn = document.getElementById('mobileMenuBtn');
      const mobileMenu = document.getElementById('mobileMenu');
      
      if (mobileMenuBtn && mobileMenu) {
        mobileMenuBtn.addEventListener('click', function() {
          mobileMenu.classList.toggle('hidden');
          // Change icon based on menu state
          const icon = mobileMenuBtn.querySelector('i');
          if (mobileMenu.classList.contains('hidden')) {
            icon.className = 'fas fa-bars text-lg text-gray-600';
          } else {
            icon.className = 'fas fa-times text-lg text-gray-600';
          }
        });
      }

      // Close mobile menu when clicking outside
      document.addEventListener('click', function(event) {
        if (mobileMenu && !mobileMenuBtn.contains(event.target) && !mobileMenu.contains(event.target)) {
          mobileMenu.classList.add('hidden');
          const icon = mobileMenuBtn.querySelector('i');
          icon.className = 'fas fa-bars text-lg text-gray-600';
        }
      });
    });

    // Override auth-state.js for dashboard-specific behavior
    firebase.auth().onAuthStateChanged(function(user) {
      if (!user) {
        // Redirect to login if not authenticated
        window.location.href = 'login.html';
        return;
      }
      
      // Update user info in dashboard
      const userName = user.displayName || user.email.split('@')[0];
      const userAvatar = user.photoURL || 'assets/default-avatar.jpg';
      
      // Update navigation elements
      const userNameElement = document.getElementById('userName');
      const userAvatarElement = document.getElementById('userAvatar');
      
      if (userNameElement) userNameElement.textContent = userName;
      if (userAvatarElement) userAvatarElement.src = userAvatar;
    });

    // Simple mobile fix for scrollToSection function
    window.scrollToSection = function(sectionId) {
        const element = document.getElementById(sectionId);
        if (element) {
            const headerHeight = document.querySelector('.dashboard-header')?.offsetHeight || 80;
            const elementPosition = element.offsetTop - headerHeight - 20;
            
            window.scrollTo({
                top: Math.max(0, elementPosition),
                behavior: 'smooth'
            });
        }
    };
  </script>
  <!-- User Activity Tracking -->
  <script src="js/user-activity-tracker.js"></script>
  
  </body>
</html>