<!--
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⡤⠴⠒⠒⠒⢒⡶⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⠞⠁⠀⠀⠀⠀⠀⡾⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡴⠁⠀⠀⠀⠀⠀⠀⠀⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⠞⠁⠀⢀⣀⣀⣀⡀⠀⠀⢧⠀⠀⠀⠀⠀⡴⣄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢀⣰⠿⠒⠋⠉⠉⠀⠀⠀⠈⠉⠓⠾⢄⣀⠀⠀⢠⡇⠸⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⣩⠏⠉⠒⢒⣲⡤⠤⣀⣀⠀⠀⠀⠀⠀⠈⠑⢤⡘⡄⠀⢳⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⠀
⠀⠀⠀⠀⠀⢰⠾⣣⠴⠚⠉⠉⠀⠀⠀⠀⠀⠉⠓⠀⠀⠀⠀⠀⠀⠙⣧⠀⠀⢣⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⡤⣔⡿⡍⡇
⠀⠀⠀⠀⠀⢸⡼⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⠆⠀⠀⢳⡀⠀⠀⠀⠀⠀⣀⡤⠞⠋⣡⠞⠉⠀⣇⡇
⠀⠀⠀⠀⣴⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⡠⠴⠒⠛⠓⠚⠉⠉⠉⠁⠀⣴⡟⠁⠀⠀⠀⣿⠁
⠀⠀⠀⣼⣁⣠⡤⢴⠖⠒⠒⠦⠤⢴⣶⣢⠤⠤⠔⠚⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣞⡞⠀⠀⠀⠀⢰⢿⠀
⠀⠀⠀⠉⠉⢙⣦⠞⠀⡠⠞⠉⢉⡷⡄⠉⢙⡶⠃⠀⠀⠀⢀⣠⣦⣤⣄⡀⠀⠀⠀⠀⠀⠀⠀⠀⢀⡎⡼⠀⠀⠀⠀⠀⡜⡞⠀
⠀⠀⠀⣤⡖⠛⠀⠀⡜⠁⠀⡴⢋⣀⣹⣠⠋⠀⠀⠀⠀⣰⣿⠿⠛⠛⠿⣿⣷⣄⡀⠀⠀⠀⠀⠀⡼⢰⠃⠀⠀⠀⠀⡼⢱⠃⠀
⠀⢀⣴⠛⠀⠀⠀⢼⠁⠀⣼⢁⣿⡬⣿⠃⠀⠀⠀⠀⠐⠋⠁⠀⠀⠀⠀⠀⠙⢿⣷⣄⠀⠀⠀⣸⢃⡏⠀⠀⠀⢀⡜⢡⠏⠀⠀
⠀⠸⡿⠀⠀⠀⠀⢻⡀⠀⠀⠀⠉⢠⠇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⣿⠁⣀⡜⠁⡼⠀⠀⠀⡠⠋⣰⠋⠀⠀⠀
⠀⠀⣧⠀⠀⠀⠀⠈⢳⣀⣙⣦⡤⠋⠀⠀⠀⠀⠀⠀⠀⣰⠄⠀⠀⠀⠀⠀⠀⢤⠀⣹⠌⢩⠏⢠⣇⣠⠴⠊⢀⡼⠁⠀⠀⠀⠀
⠀⠀⠘⡆⢀⡴⠖⠋⠉⠉⠀⠀⠀⠀⠀⠀⠀⠘⢧⣤⣾⣷⣿⣿⣿⣷⣦⡀⠀⢸⠀⠻⣾⠉⠀⠀⠀⠀⢀⣠⠋⠀⠀⠀⠀⠀⠀
⠀⠀⢠⡟⣥⠤⠦⠤⠤⢤⣀⣀⠀⠀⠀⠀⠀⠀⠀⠉⠁⠀⠀⠉⠛⠿⣿⣿⣄⣸⠀⠈⠻⣇⠀⢀⣀⠤⠟⠓⠃⠀⠀⠀⠀⠀⠀
⠀⠀⠸⡆⢧⡀⠀⠀⠀⠀⠀⠈⠙⠲⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠉⠉⠁⠀⠀⠀⣸⡍⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⢳⡄⠙⢦⡀⠀⠀⠀⣀⡤⠞⠁⠀⠀⠀⠀⢀⣀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⡿⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠙⢦⣀⣉⣷⡚⠉⠀⠀⠀⠀⠀⠀⠀⢀⡾⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⠼⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⣦⣴⠚⢁⡾⠋⠉⠳⢤⣀⢀⣀⣀⣠⠔⠋⠀⠀⠀⠀⠀⠀⣀⣠⠤⠖⠋⠁⢀⣺⣆⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⢰⣷⡇⠀⡞⠀⠀⠀⠀⠀⡼⠋⠉⠁⠀⠀⣀⣀⠤⠴⠒⠊⠉⠉⠀⠀⠀⠀⠀⣼⣿⠻⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠈⢯⡛⢦⡀⠀⠀⠀⢀⡾⠥⠤⠔⠒⠊⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠰⡆⣸⣹⠛⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⢠⡿⠀⢹⣶⣶⣖⡋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠹⡟⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⢀⡿⠿⠉⠉⠋⠀⠀⠉⠙⠶⣄⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⡀⠹⢤⣀⣀⣀⣀⣀⡠⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⡰⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠢⣄⠀⠀⠀⡀⠀⠀⠀⠀⠀⠀⠀⣼⠇⠀⠀⠀⠀⠀⠙⠋⠩⠿⢿⣁⠀⠀⠀⠀⠀⠀
⡼⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠳⡄⠀⠉⠑⠶⢤⣀⣀⣠⣴⡟⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⠿⣅⠀⠀⠀⠀⠀
⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⠂⠀⠀⠀⠀⠀⠉⠉⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⢦⠀⠀⠀⠀
⡅⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡇⠀⠀⠀
⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣇⠀⠀⠀
⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠀⠀⠀
Yep, this project is made by a furry owo >;3 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <meta http-equiv="X-Frame-Options" content="DENY">
    <meta http-equiv="Referrer-Policy" content="no-referrer">

    <link href="/static/css/main.css?v=1747838793" rel="stylesheet">
    <link href="/static/themes.php" rel="stylesheet">
    <link href="/static/css/fonts.css?v=1747740437" rel="stylesheet">
    <link href="/static/css/notifications.css?v=1747740437" rel="stylesheet">
    <link rel="stylesheet" href="/static/js/sweetalert2.min.css?v=1747740437">

    <script src="/static/js/sweetalert2.min.js?v=1747740437" defer></script>
    <script src="/static/header_scripts.js?v=1747740437" defer></script>
    <script src="/static/js/notifications.js?v=1747740437" defer></script>

    <link rel="stylesheet" href="/static/lib/tippy/tippy.css?v=1747740437">
    <script src="/static/lib/tippy/popper.min.js?v=1747740437"></script>
    <script src="/static/lib/tippy/tippy.umd.min.js?v=1747740437"></script>
    <script src="/static/lib/chart/chart.min.js?v=1747740437"></script>
    <link rel="stylesheet" href="/static/css/bootstrap-icons.css?v=1747740437">

    <script>
        if (localStorage.getItem("dark-mode") === "enabled") {
            document.documentElement.classList.add("dark-mode");
        }
    </script>
    
        
        <style>
        .dark-mode body {
            background-image: url('/static/backgrounds/GST-bg.jpg');
        }
    </style>
        
    <style>
            </style>
    
        
    <div class="topbar">
        <div class="topbar-container">
            <div class="logo-container">
                <div class="topbar-title logo">
                    <a href="/">
                        <img src="/static/logos/logo.png" alt="Logo" width="180">
                    </a>
                </div>
                <div id="banner" class="banner">
                    <div class="note" id="bannerNote"></div>
                    <button id="closeBanner" onclick="closeBanner()">&times;</button>
                </div>
                <div class="topbar-subtitle">goSupertools
                </div>
            </div>
            <div class="topbar-button-container">

                <a href="/" class="topbar-button">Home</a>
                <a href="/list/" class="topbar-button">Item
                    Database</a>
                <a href="/sale/"
                    class="topbar-button">Sales
                    Manager</a>
                <a href="/list/catwalk.php"
                    class="topbar-button">Catwalk</a>
                <a href="/analyzer-v2/"
                    class="topbar-button active">Wardrobe
                    Analyzer</a>

                                </div>
                <div class="topbar-links">
                    <button id="registerButton" class="profile-button"><i class="bi bi-person-plus-fill" style="font-size: 18px; font-weight: bold; margin-right: 8px;"></i>Register</button>
                    <button id="loginButton" class="log-in"><i class="bi bi-box-arrow-in-right" style="font-size: 18px; font-weight: bold; margin-right: 8px;"></i>Login</button>
                                <div class="search-container">
                    <input type="text" id="linkInput" name="searchInput" class="search-input"
                        placeholder="Enter Item Link" autocomplete="off">
                    <button id="srchButton" class="search-button">
                        <i class="bi bi-search" style="font-size: 18px; font-weight: bold;"></i>
                    </button>
                </div>

                <div id="dark-mode-toggle" class="toggle-container">
                    <div class="toggle-switch">
                        <i class="bi bi-moon-fill moon-icon" style="font-size: 18px; color: #D9D9D9;"></i>
                        <i class="bi bi-sun-fill sun-icon" style="font-size: 18px; color: #606060;"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
        <div class="footer">    
    <div class="footer-links">
        <span><a href="/item/JJRC9g5v9PLm8tHpE9UsX">Random Item</a></span> | 
        <span><a href="/help/">Help</a></span> | 
        <span><a href="/help/info.php">Information</a></span> | 
        <span><a href="/help/safety.php">Safety</a></span> | 
        <span><a href="/help/terms.php">Terms</a></span> | 
        <span><a href="/help/rules.php">Rules</a></span> | 
        <span><a href="/help/thanks.php">Credits</a></span> | 
        <span><a href="/help/feedback.php">Feedback</a></span> | 
        <span><a href="/help/imprint.php">Imprint</a></span>
            </div>
    <div class="footer-note">
        <span>Thanks to © 2024 Momio Aps. All Rights Reserved. Used with permission.</span>
    </div>
</div>

<style>
    .gsm-ad-container {
        width: 100%;
        max-width: inherit;
        padding: 20px 0;
        text-align: center;
        margin: 10px auto 80px auto;
    }
    
    .gsm-ad-banner {
        background-color: var(--gst-background-columncontainer-opacity);
        border-radius: 25px;
        padding: 15px;
        display: inline-block;
        max-width: 100%;
    }
    
    .dark-mode .gsm-ad-banner {
        background-color: #2a2a2a;
        color: #e0e0e0;
    }
    
    .gsm-ad-content {
        min-height: 90px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
    }
    
    .column-container {
        margin-bottom: 100px;
    }
</style>


<title>goSupertools - Wardrobe Analyzer V2</title>
<link rel="stylesheet" href="../list/designer.css">
<style>
  .analyzer-header h1 {
    color: var(--gst-text-pink);
  font-size: 32px;
  font-weight: 700;
  margin: unset;
  padding: 20px;
  }

  .input-section {
    background-color: var(--gst-background-white);
    border-radius: 12px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    padding: 30px;
    margin: 20px;
    text-align: center;
  }

  .unified-section {
    background-color: var(--gst-background-white);
    border-radius: 12px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    padding: 30px;
    margin: 20px auto;
    text-align: center;
    max-width: 800px;
  }

  .account-input {
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
  }

  .account-input input {
    padding: 12px 20px;
    border: 2px solid var(--gst-border-ccc);
    border-radius: 8px;
    font-size: 1.1rem;
    width: 300px;
    transition: all 0.3s ease;
  }

  .account-input input:focus {
    outline: none;
    border-color: var(--gst-border-pink);
    box-shadow: 0 0 0 3px rgba(255, 94, 153, 0.1);
  }

  .analyze-btn {
    background-color: var(--gst-background-pink);
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .analyze-btn:hover {
    background-color: var(--gst-background-pink-hover);
    transform: translateY(-2px);
  }

  .analyze-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
  }

  .loading-spinner {
    display: none;
    margin: 20px auto;
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid var(--gst-background-pink);
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }

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

  @keyframes pulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 94, 153, 0.7); }
    50% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(255, 94, 153, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 94, 153, 0); }
  }


  .wardrobe-summary {
    background-color: var(--gst-background-white);
    border-radius: 12px;
    padding: 20px;
    margin: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  }

  .summary-title {
    color: var(--gst-text-pink);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 15px;
    text-align: center;
  }

  .quality-distribution {
    display: flex;
    gap: 10px;
    margin: 15px 0;
    flex-wrap: wrap;
    color: #333;
  }

  .quality-stat {
    flex: 1;
    min-width: 120px;
    text-align: center;
    padding: 10px;
    border-radius: 8px;
    font-weight: 600;
  }

  .quality-stat.quality-0 { background-color: #eaefd9; }
  .quality-stat.quality-1 { background-color: #def3f6; }
  .quality-stat.quality-2 { background-color: #e1d3ec; }
  .quality-stat.quality-3 { background-color: #fcf4e2; }
  .quality-stat.quality-4 { background-color: #ffd6da; }

  .results-container {
    display: none;
    width: 940px;
  }

  .random-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    margin-top: 15px;
  }

  .shuffle-btn {
    position: absolute;
    top: -40px;
    right: 0px;
    background-color: var(--gst-background-pink);
    color: white;
    border: none;
    border-radius: 20px;
    padding: 8px 15px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    z-index: 10;
  }

  .shuffle-btn:hover {
    background-color: var(--gst-background-pink-hover);
  }

  .pie-chart-container {
    position: relative;
    height: 280px;
    margin: 20px 0;
  }

  .share-section {
    background-color: var(--gst-background-white);
    border-radius: 12px;
    padding: 20px;
    margin: 20px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  }

  .share-btn {
    background-color: var(--gst-background-pink);
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 10px;
  }

  .share-btn:hover {
    background-color: var(--gst-background-pink-hover);
  }

  .timeline-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
    margin-top: 15px;
  }

  .timeline-more {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    background-color: white;
    border: 2px dashed var(--gst-border-ccc);
    border-radius: 8px;
    color: var(--gst-text-777);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .timeline-more:hover {
    background-color: var(--gst-background-pink);
    color: white;
    border-color: var(--gst-background-pink);
    transform: translateY(-2px);
  }

  .popular-categories {
    margin-top: 20px;
  }

  .category-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: var(--gst-background-white2);
    border-radius: 8px;
    margin-bottom: 8px;
  }

  .category-item-hidden,
  .brand-item-hidden {
    display: none !important;
  }

  .category-item-hidden.show,
  .brand-item-hidden.show {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: var(--gst-background-white2);
    border-radius: 8px;
    margin-bottom: 8px;
  }

  .progress-container {
    width: 100%;
    background-color: #f0f0f0;
    border-radius: 12px;
    overflow: hidden;
    margin: 20px 0;
    height: 13px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  }

  .progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--gst-background-pink), #C17888);
    border-radius: 12px;
    transition: width 0.5s ease;
    width: 0%;
    position: relative;
  }

  .progress-text {
    text-align: center;
    margin-top: 10px;
    font-size: 0.9rem;
    font-weight: 500;
  }

  .color-palette {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));
    gap: 10px;
    margin: 20px 0;
  }

  .color-swatch {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 2px solid #ddd;
    cursor: pointer;
    transition: transform 0.2s ease;
    position: relative;
  }

  .color-swatch:hover {
    transform: scale(1.1);
    border-color: var(--gst-background-pink);
  }

  .color-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: var(--gst-background-white2);
    border-radius: 8px;
    margin-bottom: 8px;
  }

  .color-label {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .color-preview {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1px solid #ddd;
  }

  .hex-code {
    font-family: monospace;
    background-color: #f8f9fa;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.85em;
  }

  .gallery-controls {
    background-color: var(--gst-background-white2);
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
  }

  .filter-group {
    display: flex;
    align-items: center;
    white-space: nowrap;
  }

  .filter-select {
    padding: 6px 10px;
    border: 1px solid var(--gst-border-ccc);
    border-radius: 4px;
    font-size: 13px;
    background-color: white;
    min-width: 120px;
  }

  .filter-select:focus {
    outline: none;
    border-color: var(--gst-border-pink);
    box-shadow: 0 0 0 2px rgba(255, 94, 153, 0.1);
  }

  .filter-toggle {
    background-color: var(--gst-background-white);
    color: var(--gst-text-4D4D4D);
    border-color: var(--gst-border-ccc);
  }

  .filter-toggle.active {
    background-color: var(--gst-background-pink);
    color: white;
    border-color: var(--gst-background-pink);
  }

  .filter-toggle:hover {
    background-color: var(--gst-background-pink);
    color: white;
    border-color: var(--gst-background-pink);
  }

  .filter-toggle.active:hover {
    background-color: var(--gst-background-pink-hover);
    border-color: var(--gst-background-pink-hover);
  }

  .btn {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s ease;
    cursor: pointer;
    border: 1px solid;
  }

  .btn-sm {
    padding: 6px 12px;
    font-size: 13px;
  }

  .btn-primary {
    background-color: var(--gst-background-pink);
    color: white;
    border-color: var(--gst-background-pink);
  }

  .btn-primary:hover {
    background-color: var(--gst-background-pink-hover);
    border-color: var(--gst-background-pink-hover);
  }

  .btn-outline-secondary {
    background-color: transparent;
    color: var(--gst-text-4D4D4D);
    border-color: var(--gst-border-ccc);
  }

  .btn-outline-secondary:hover {
    background-color: var(--gst-background-white2);
    color: var(--gst-text-4D4D4D);
  }

  .pagination-controls {
    padding: 20px;
    background-color: var(--gst-background-white2);
    border-radius: 8px;
  }

  .me-1 { margin-right: 4px; }
  .me-2 { margin-right: 8px; }
  .ms-2 { margin-left: 8px; }


  .selling-stats {
    background-color: var(--gst-background-white2);
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    text-align: center;
  }

  .selling-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 15px;
  }

  .selling-stat {
    text-align: center;
  }

  .selling-stat-value {
    font-size: 1.5em;
    font-weight: 700;
    color: var(--gst-text-pink);
    margin-bottom: 5px;
  }

  .selling-stat-label {
    font-size: 0.85em;
    color: var(--gst-text-777);
  }


</style>
</head>

<body>
  <div class="column-container">
    <a href="/help/help.php?id="><div id="questionIcon">Help</div></a><a href="/help/"><div id="questionIcon">Help</div></a>
    <div class="analyzer-header">
      <h1>Wardrobe Analyzer V2</h1>
    </div>

    <div class="unified-section">
      <h3 style="margin-bottom: 20px; color: var(--gst-text-4D4D4D);">Enter Verification Code</h3>
      <div class="account-input">
        <input type="text" id="accountInput" placeholder="Enter your verification code" maxlength="16">
        <button id="analyzeBtn" class="analyze-btn" onclick="analyzeWardrobe()">
          <i class="bi bi-search"></i> Analyze Wardrobe
        </button>
      </div>
      
      <div id="progressContainer" style="display: none;">
        <div class="progress-container">
          <div class="progress-bar" id="progressBar"></div>
        </div>
        <div class="progress-text" id="progressText">Preparing analysis...</div>
      </div>
      <p style="margin-top: 15px; font-size: 0.9rem;">
        <i class="bi bi-info-circle"></i> 
        Get your verification code from <a href="https://gosupermodel.com/profiles/settings/external.jsp" target="_blank" style="color: var(--gst-text-pink);">goSupermodel settings</a>
      </p>
      
      <div id="loadSavedSection" style="display: none; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--gst-body-fontcolor);">
        <p style="font-size: 0.9rem; margin-bottom: 15px;">
          <i class="bi bi-cloud-download"></i> 
          Or load your previously shared wardrobe analysis:
        </p>
        <button id="loadSavedBtn" class="analyze-btn" onclick="loadSavedWardrobe()" style="background-color: #6c757d;">
          <i class="bi bi-download"></i> Load My Saved Wardrobe
        </button>
      </div>

      <div style="background-color: var(--gst-text-columncontainer); border-radius: 8px; padding: 20px; margin: 20px 0;">
        <h4 style="color: var(--gst-text-4D4D4D); margin: 0 0 15px 0;">
          <i class="bi bi-exclamation-triangle" style="color: var(--gst-text-pink);"></i> 
          Important
        </h4>
        <div style="text-align: left;">
          <p style="margin-bottom: 10px; color: var(--gst-text-4D4D4D);">
            Before analyzing your wardrobe, please make sure:
          </p>
          <ul style="color: var(--gst-text-4D4D4D); margin: 15px 0; padding-left: 20px;">
            <li style="margin-bottom: 8px;">
              <strong>You are logged in</strong> to <a href="https://gosupermodel.com" target="_blank" style="color: var(--gst-text-pink);">gosupermodel.com</a>
            </li>
            <li style="margin-bottom: 8px;">
              <strong>Your wardrobe is set to public</strong>, you can change this in your 
              <a href="https://gosupermodel.com/profiles/settings/generic_settings.jsp" target="_blank" style="color: var(--gst-text-pink);">settings</a>
            </li>
            <li style="margin-bottom: 8px;">
              <strong>You have your verification code</strong> from the 
              <a href="https://gosupermodel.com/profiles/settings/external.jsp" target="_blank" style="color: var(--gst-text-pink);">external settings page</a>
            </li>
          </ul>
          <div style="background-color: #fff3cd; border: 1px solid #ffeaa7; border-radius: 6px; padding: 12px; margin-top: 15px; color: #856404;">
            <p style="margin: 0; font-size: 0.85rem;">
              <i class="bi bi-shield-check" style="color: #f39c12;"></i> 
              Never share your verification code with others! Keep it private.
            </p>
          </div>
          <p style="font-size: 0.85rem; margin-top: 15px;">
            <i class="bi bi-lock"></i> 
            Don't worry - you can set your wardrobe back to private after the analysis!
          </p>
        </div>
      </div>
    </div>

    <div class="results-container" id="resultsContainer">
      <div class="wardrobe-summary" id="wardrobeSummary">
      </div>

      <div class="tab-container">
                 <div class="tabs">
           <div class="tab active" data-tab="overview">Overview</div>
           <div class="tab" data-tab="items">Items Gallery</div>
           <div class="tab" data-tab="timeline">Timeline</div>
           <div class="tab" data-tab="statistics">Statistics</div>
           <div class="tab" data-tab="colors">Colors</div>
           <div class="tab" data-tab="eras">Eras</div>
           <div class="tab" data-tab="worth">Worth</div>
           <div class="tab" data-tab="selling">Selling</div>
         </div>

        <div id="overview-tab" class="tab-content active">
          <div class="stats-section">
            <h2>Wardrobe Overview</h2>
            <div class="stats-grid" id="overviewStatsGrid">
            </div>
            
            <h3>Quality Distribution</h3>
            <div class="pie-chart-container">
              <canvas id="qualityChart"></canvas>
            </div>

            <h3>Random Items from Your Wardrobe</h3>
            <div style="position: relative; padding-top: 10px;">
              <button class="shuffle-btn" onclick="shuffleRandomItems()">
                <i class="bi bi-shuffle"></i> Shuffle
              </button>
              <div class="random-items" id="randomItems">
              </div>
            </div>
          </div>
        </div>

        <div id="items-tab" class="tab-content">
          <div class="stats-section">
            <h2>Items Gallery</h2>
            
            <div class="gallery-header" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding: 15px; background-color: var(--gst-background-white2); border-radius: 8px;">
              <div class="gallery-info">
                <span id="galleryInfo" style="font-weight: 600; color: var(--gst-text-4D4D4D);">Showing items...</span>
            </div>
              <div class="gallery-sort">
                <button class="btn btn-sm" onclick="toggleItemSort()" id="sortBtn">
                  <i class="bi bi-sort-down"></i> Newest First
                </button>
          </div>
        </div>

            <div class="filter-panel" style="background-color: var(--gst-background-white); border-radius: 12px; padding: 20px; margin-bottom: 20px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);">
              <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
                <h4 style="margin: 0; color: var(--gst-text-4D4D4D);">
                  <i class="bi bi-funnel"></i> Filter Items
                </h4>
            </div>
              
              <div class="filter-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 15px;">
                <div class="filter-item">
                  <label style="display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; color: var(--gst-text-4D4D4D);">Value Range</label>
                  <select id="valueFilter" class="filter-select" style="width: 100%;" onchange="onFilterChange()">
                    <option value="">All Values</option>
                    <option value="expensive">Most Expensive</option>
                    <option value="cheap">Cheapest</option>
                    <option value="no-value">No Value Data</option>
                  </select>
                </div>
                
                <div class="filter-item">
                  <label style="display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; color: var(--gst-text-4D4D4D);">Quality</label>
                  <select id="qualityFilter" class="filter-select" style="width: 100%;" onchange="onFilterChange()">
                    <option value="">All Qualities</option>
                    <option value="4">Diamond</option>
                    <option value="3">Basic</option>
                    <option value="2">Unique</option>
                    <option value="1">Special</option>
                    <option value="0">Good</option>
                  </select>
                </div>
                
                <div class="filter-item">
                  <label style="display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; color: var(--gst-text-4D4D4D);">Category</label>
                  <select id="categoryFilter" class="filter-select" style="width: 100%;" onchange="onFilterChange()">
                    <option value="">All Categories</option>
                  </select>
                </div>
                
                <div class="filter-item">
                  <label style="display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; color: var(--gst-text-4D4D4D);">Designer</label>
                  <select id="brandFilter" class="filter-select" style="width: 100%;" onchange="onFilterChange()">
                    <option value="">All Designers</option>
                  </select>
                </div>
                
                <div class="filter-item">
                  <label style="display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; color: var(--gst-text-4D4D4D);">Era</label>
                  <select id="eraFilter" class="filter-select" style="width: 100%;" onchange="onFilterChange()">
                    <option value="">All Eras</option>
                  </select>
                </div>
                
                <div class="filter-item">
                  <label style="display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; color: var(--gst-text-4D4D4D);">Color</label>
                  <select id="colorFilter" class="filter-select" style="width: 100%;" onchange="onFilterChange()">
                    <option value="">All Colors</option>
                  </select>
                </div>
                
                <div class="filter-item">
                  <label style="display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; color: var(--gst-text-4D4D4D);">Tradeable</label>
                  <select id="tradeableFilter" class="filter-select" style="width: 100%;" onchange="onFilterChange()">
                    <option value="all">All Items</option>
                    <option value="tradeable">Tradeable Only</option>
                    <option value="non-tradeable">Non-Tradeable Only</option>
                  </select>
                </div>
                
                <div class="filter-item">
                  <label style="display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; color: var(--gst-text-4D4D4D);">Duplicates</label>
                  <select id="duplicatesFilter" class="filter-select" style="width: 100%;" onchange="onFilterChange()">
                    <option value="all">All Items</option>
                    <option value="duplicates-only">Duplicates Only</option>
                    <option value="unique-only">Unique Items Only</option>
                  </select>
                </div>
              </div>
              
              <div class="filter-actions-bottom" style="display: flex; justify-content: space-between; align-items: center; padding-top: 15px; border-top: 1px solid var(--gst-border-ccc);">
                <div class="filter-status" id="filterStatus" style="font-size: 12px; font-style: italic;">
                  Ready to apply filters
                </div>
                <div>
                  <button class="btn btn-sm btn-outline-secondary me-2" onclick="clearAllFilters()" id="clearFiltersBtn">
                    <i class="bi bi-x"></i> Clear All
                  </button>
                  <button class="btn btn-sm btn-primary" onclick="applyFilters()" id="applyFiltersBtn">
                    <i class="bi bi-check"></i> Apply Filters
                  </button>
                </div>
              </div>
            </div>
            
            <div class="items-grid" id="itemsGrid">
            </div>
            <div class="pagination-controls" id="itemsPagination" style="margin-top: 20px; text-align: center;">
            </div>
          </div>
        </div>

        <div id="timeline-tab" class="tab-content">
          <div class="stats-section">
            <h2>Wardrobe Timeline</h2>
            <div id="timelineContainer">
            </div>
          </div>
        </div>

        <div id="statistics-tab" class="tab-content">
          <div class="stats-section">
            <h2>Wardrobe Statistics</h2>
            
            <h3>Top Categories</h3>
            <div id="categoriesContainer">
            </div>

            <h3>Top Designers</h3>
            <div id="brandsContainer">
            </div>
          </div>
        </div>

        <div id="colors-tab" class="tab-content">
          <div class="stats-section">
            <h2>Color Profile</h2>
            <p style="margin-bottom: 20px;">Your wardrobe's color palette</p>
            
            <h3>Color Distribution</h3>
            <div class="pie-chart-container">
              <canvas id="colorChart"></canvas>
            </div>

            <h3>Most Used Colors</h3>
            <div id="colorsContainer">
            </div>
          </div>
        </div>

         <div id="eras-tab" class="tab-content">
           <div class="stats-section">
             <h2>Era Distribution</h2>
             <div id="erasContainer">
             </div>
           </div>
         </div>

         <div id="worth-tab" class="tab-content">
           <div class="stats-section">
             <h2>Wardrobe Worth</h2>
             <div id="worthContainer">
             </div>
           </div>
         </div>

         <div id="selling-tab" class="tab-content">
           <div class="stats-section">
             <h2>Selling Opportunities</h2>
             <p style="margin-bottom: 20px;">Items from your wardrobe that are wanted on public wishlists</p>
             
             <div class="gallery-header" id="sellingHeader" style="display: none; justify-content: space-between; align-items: center; margin-bottom: 20px; padding: 15px; background-color: var(--gst-background-white2); border-radius: 8px;">
               <div class="gallery-info">
                 <span id="sellingInfo" style="font-weight: 600; color: var(--gst-text-4D4D4D);">Showing selling opportunities...</span>
               </div>
             </div>
             
             <div class="filters-section" id="sellingFilters" style="display: none;">
               <div style="display: flex; gap: 15px; margin-bottom: 20px; flex-wrap: wrap;">
                 <div>
                   <label style="display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; color: var(--gst-text-4D4D4D);">Category</label>
                   <select id="sellingCategoryFilter" class="filter-select" style="width: 150px;" onchange="onSellingFilterChange()">
                     <option value="">All Categories</option>
                   </select>
                 </div>
                 <div>
                   <label style="display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; color: var(--gst-text-4D4D4D);">Quality</label>
                   <select id="sellingQualityFilter" class="filter-select" style="width: 120px;" onchange="onSellingFilterChange()">
                     <option value="">All Quality</option>
                     <option value="0">Good</option>
                     <option value="1">Special</option>
                     <option value="2">Unique</option>
                     <option value="3">Basic</option>
                     <option value="4">Diamond</option>
                   </select>
                 </div>
                 <div>
                   <label style="display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; color: var(--gst-text-4D4D4D);">Offer Type</label>
                   <select id="sellingOfferFilter" class="filter-select" style="width: 150px;" onchange="onSellingFilterChange()">
                     <option value="">All Offers</option>
                     <option value="make-offer">Make an Offer</option>
                     <option value="fixed-offer">Fixed Offer</option>
                   </select>
                 </div>
                 <div>
                   <label style="display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; color: var(--gst-text-4D4D4D);">Sort by Price</label>
                   <select id="sellingPriceFilter" class="filter-select" style="width: 150px;" onchange="onSellingFilterChange()">
                     <option value="">Default Sort</option>
                     <option value="highest">Highest Offers</option>
                     <option value="lowest">Lowest Offers</option>
                   </select>
                 </div>
               </div>
             </div>
             
             <div id="sellingContainer">
             </div>
             
             <div class="pagination-controls" id="sellingPagination" style="margin-top: 20px; text-align: center; display: none;">
             </div>
           </div>
         </div>
      </div>

      <div class="share-section" id="shareSection" style="display: none;">
        <h3>Share Your Analysis</h3>
        <p>Share your wardrobe analysis with others!</p>
        <button class="share-btn" onclick="shareAnalysis()">
          <i class="bi bi-share"></i> Share Analysis
        </button>
        <button class="share-btn" onclick="manageShare()" id="manageShareBtn" style="display: none;">
          <i class="bi bi-gear"></i> Manage Share
        </button>
      </div>
    </div>
  </div>

  <script src="/static/lib/chart/chart.min.js"></script>
  <script>
    let analysisData = null;
    let wardrobeData = null;
    let summaryData = null;
    let currentRandomItems = [];
    let currentAccountId = null;
    
    let currentItemsPage = 1;
    let itemsPerPage = 48;
    let isNewestFirst = true;
    
    let timelineDaysShown = 0;
    let timelineDaysPerBatch = 50;
    
    let currentSellingPage = 1;
    let sellingItemsPerPage = 48;
    
    let currentFilters = {
      value: '',
      quality: '',
      category: '',
      brand: '',
      era: '',
      color: '',
      tradeable: 'all',
      duplicates: 'all'
    };
    
    let sellingFilters = {
      category: '',
      quality: '',
      offer: '',
      price: ''
    };

    const colorMapping = {
      "000000": "Black",
      "FFFFFF": "White", 
      "808080": "Grey",
      "FFC0CB": "Pink",
      "8B4513": "Brown",
      "FF0000": "Red",
      "FFA500": "Orange",
      "FFFF00": "Yellow",
      "008000": "Green",
      "0000FF": "Blue",
      "800080": "Purple",
      "F5F5DC": "Beige"
    };

    function getColorName(hexColor) {
      return colorMapping[hexColor.toUpperCase()] || hexColor;
    }

    document.addEventListener('DOMContentLoaded', function() {
      console.log('DOMContentLoaded event fired');
      const urlParams = new URLSearchParams(window.location.search);
      const shareCode = urlParams.get('code');
      console.log('Share code from URL:', shareCode);
      
      if (shareCode) {
        console.log('Calling loadSharedWardrobe with code:', shareCode);
        loadSharedWardrobe(shareCode).catch(error => {
          console.error('Error in loadSharedWardrobe:', error);
          showError(`Failed to load shared wardrobe: ${error.message || error.toString() || 'Unknown error'}`);
        });
      } else {
        console.log('No share code, calling checkShareStatus');
        checkShareStatus();
      }
      
      const tabs = document.querySelectorAll('.tab');
      const tabContents = document.querySelectorAll('.tab-content');
      
      tabs.forEach(tab => {
        tab.addEventListener('click', () => {
          const tabId = tab.getAttribute('data-tab');
          
          tabs.forEach(t => t.classList.remove('active'));
          tabContents.forEach(c => c.classList.remove('active'));
          
          tab.classList.add('active');
          document.getElementById(tabId + '-tab').classList.add('active');
        });
      });
    });

    document.getElementById('accountInput').addEventListener('keypress', function(e) {
      if (e.key === 'Enter') {
        analyzeWardrobe();
      }
    });

    async function analyzeWardrobe() {
      const verificationCode = document.getElementById('accountInput').value.trim();
      
      if (!verificationCode) {
        showError('Please enter a verification code');
        return;
      }

      if (verificationCode.length !== 16) {
        showError('Verification code must be 16 characters long');
        return;
      }

      const analyzeBtn = document.getElementById('analyzeBtn');
      const progressContainer = document.getElementById('progressContainer');
      const progressBar = document.getElementById('progressBar');
      const progressText = document.getElementById('progressText');
      const resultsContainer = document.getElementById('resultsContainer');
      const inputSection = document.querySelector('.unified-section');

      analyzeBtn.disabled = true;
      progressContainer.style.display = 'block';
      resultsContainer.style.display = 'none';

      timelineDaysShown = 0;
      
      progressBar.style.width = '0%';
      progressText.textContent = 'Preparing analysis...';

      try {
        updateProgress(10, 'Verifying your code and fetching wardrobe data...');
        const fetchResponse = await fetch(`../api/analyzer-v2/wardrobe_fetch.php?code=${verificationCode}`);
        const fetchData = await fetchResponse.json();

        if (!fetchData.success) {
          if (fetchData.errorType === 'access_denied') {
            showAccessDeniedError(fetchData.error, fetchData.helpUrl);
            return;
          }
          throw new Error(fetchData.error || 'Failed to verify code or fetch wardrobe data');
        }

        currentAccountId = fetchData.accountId;
        wardrobeData = fetchData.data;
        summaryData = fetchData.summary;
        updateProgress(25, 'Wardrobe data fetched successfully!');

        updateProgress(30, 'Analyzing wardrobe structure...');
        const basicAnalysisResponse = await fetch('../api/analyzer-v2/wardrobe_analyze_basic.php', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({ items: wardrobeData.items })
        });
        const basicAnalysisData = await basicAnalysisResponse.json();

        if (!basicAnalysisData.success) {
          throw new Error(basicAnalysisData.error || 'Failed to analyze wardrobe data');
        }

        analysisData = basicAnalysisData.analysis;
        updateProgress(50, 'Basic analysis completed!');
        
        updateProgress(55, 'Analyzing item categories...');
        try {
          const categoriesResponse = await fetch('../api/analyzer-v2/wardrobe_analyze_categories.php', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json'
            },
            body: JSON.stringify({ items: wardrobeData.items })
          });
          const categoriesData = await categoriesResponse.json();

          if (categoriesData.success) {
            analysisData.categories = categoriesData.categories;
          } else {
            analysisData.categories = { items: [], counts: {} };
          }
          
          if (analysisData.shop_items && analysisData.shop_items.items.length > 0) {
            analysisData.categories.items = [...analysisData.categories.items, ...analysisData.shop_items.items];
            for (const [category, count] of Object.entries(analysisData.shop_items.counts)) {
              analysisData.categories.counts[category] = (analysisData.categories.counts[category] || 0) + count;
            }
          }
        } catch (categoriesError) {
          analysisData.categories = { items: [], counts: {} };
        }
        
        updateProgress(75, 'Categories analyzed successfully!');

        updateProgress(80, 'Calculating item values...');
        try {
          const valuesResponse = await fetch('../api/analyzer-v2/wardrobe_analyze_values.php', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json'
            },
            body: JSON.stringify({ items: wardrobeData.items })
          });
          const valuesData = await valuesResponse.json();

          if (valuesData.success) {
            analysisData.values = valuesData.values;
          } else {
            analysisData.values = { 
              message: 'Value calculation failed: ' + valuesData.error,
              totals: { min: 0, max: 0, avg: 0 },
              items: {}
            };
          }
        } catch (valuesError) {
          analysisData.values = { 
            message: 'Value calculation temporarily unavailable',
            totals: { min: 0, max: 0, avg: 0 },
            items: {}
          };
        }

        updateProgress(90, 'Fetching wishlists...');
        
        try {
          const sellingResponse = await fetch('../api/analyzer-v2/wardrobe_analyze_selling.php', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json'
            },
            body: JSON.stringify({ items: wardrobeData.items })
          });
          
          const sellingData = await sellingResponse.json();
          
          if (sellingData.success) {
            analysisData.selling = sellingData.selling;
          } else {
            analysisData.selling = { error: sellingData.error || 'Failed to analyze selling opportunities' };
          }
        } catch (error) {
          analysisData.selling = { error: 'Failed to fetch selling data: ' + error.message };
        }
        
        updateProgress(95, 'Finalizing analysis...');
        
        displayResults();
        
        updateProgress(100, 'Analysis complete!');
        
        setTimeout(() => {
          progressContainer.style.display = 'none';
          const analyzerHeader = document.querySelector('.analyzer-header');
          if (analyzerHeader) analyzerHeader.style.display = 'none';
          const unifiedSections = document.querySelectorAll('.unified-section');
          unifiedSections.forEach(section => section.style.display = 'none');
          resultsContainer.style.display = 'block';
        }, 500);

      } catch (error) {
        showError(error.message || 'An error occurred while analyzing the wardrobe');
        progressContainer.style.display = 'none';
      } finally {
        analyzeBtn.disabled = false;
      }
    }

    function updateProgress(percentage, message) {
      const progressBar = document.getElementById('progressBar');
      const progressText = document.getElementById('progressText');
      
      progressBar.style.width = percentage + '%';
      progressText.textContent = message;
    }

    function showError(message) {
      Swal.fire({
        icon: 'error',
        title: 'Error',
        text: message,
        confirmButtonText: 'OK'
      });
    }

    function showAccessDeniedError(message, helpUrl) {
      Swal.fire({
        icon: 'warning',
        title: 'Access Denied',
        html: `
          <p style="margin-bottom: 15px;">${message}</p>
          <div style="background-color: #f8f9fa; padding: 15px; border-radius: 8px; margin: 15px 0; text-align: left;">
            <p style="margin: 0 0 10px 0; font-weight: 600;">Please check:</p>
            <ul style="margin: 0; padding-left: 20px;">
              <li>You are logged in to <a href="https://gosupermodel.com" target="_blank">gosupermodel.com</a></li>
              <li>Your wardrobe is set to "public"</li>
            </ul>
          </div>
        `,
        showCancelButton: true,
        confirmButtonText: 'gSm Settings',
        cancelButtonText: 'OK',
        confirmButtonColor: '#ff6b6b'
      }).then((result) => {
        if (result.isConfirmed) {
          window.open(helpUrl, '_blank');
        }
      });
    }

    function hideError() {
      const errorMessage = document.getElementById('errorMessage');
      errorMessage.style.display = 'none';
    }

    function displayResults() {
      displaySummary();
      displayOverview();
      displayItemsGallery();
             displayTimeline();
       displayStatistics();
      displayColors();
       displayEras();
      displayWorth();
      displaySelling();
      
      const urlParams = new URLSearchParams(window.location.search);
      const isSharedView = urlParams.has('code');
      
      if (!isSharedView && wardrobeData && wardrobeData.items) {
        const uniqueUiids = new Set();
        
        wardrobeData.items.forEach(item => {
          const shortUiid = item.uiid.substring(0, 12);
          uniqueUiids.add(shortUiid);
        });
        
        if (analysisData && analysisData.all_uiids && Array.isArray(analysisData.all_uiids)) {
          analysisData.all_uiids.forEach(uiid => {
            const shortUiid = uiid.substring(0, 12);
            uniqueUiids.add(shortUiid);
          });
        } else if (analysisData && analysisData.item_details) {
          Object.keys(analysisData.item_details).forEach(shortUiid => {
            uniqueUiids.add(shortUiid);
            
            const itemDetail = analysisData.item_details[shortUiid];
            if (itemDetail.uiid) {
              uniqueUiids.add(itemDetail.uiid.substring(0, 12));
            }
          });
        }
        
        const uiidsArray = Array.from(uniqueUiids);
        localStorage.setItem('loggedUiids', JSON.stringify(uiidsArray));
        
        console.log(`Stored ${uiidsArray.length} unique UIIDs in localStorage (including front/back layers)`);
      }
      
      document.getElementById('shareSection').style.display = 'block';
    }

         function displaySummary() {
       const analysis = analysisData;
       const summary = summaryData;
       const qualityLabels = ['Good', 'Special', 'Unique', 'Basic', 'Diamond'];
       const qualityColors = ['#eaefd9', '#def3f6', '#e1d3ec', '#fcf4e2', '#ffd6da'];
       
       const qualityCounts = [0, 0, 0, 0, 0];
       if (analysis.quality_distribution) {
         for (let quality in analysis.quality_distribution) {
           const index = parseInt(quality);
           if (index >= 0 && index <= 4) {
             qualityCounts[index] = analysis.quality_distribution[quality];
           }
         }
       }

       let performanceNotice = '';
       if (analysis.is_large_wardrobe) {
         performanceNotice = `
           <div style="background-color: #fff3cd; border: 1px solid #ffeaa7; border-radius: 8px; padding: 15px; margin: 15px 0; color: #856404;">
             <strong>Large Wardrobe Detected:</strong> For performance reasons, analysis is based on a sample of ${analysis.sampled_items.toLocaleString('de-DE')} items out of ${analysis.unique_items.toLocaleString('de-DE')} unique items.
           </div>
         `;
       }

       const summaryHtml = `
         <div class="summary-title">Wardrobe Summary</div>
         ${performanceNotice}
         <div class="stats-grid">
           <div class="stat-card">
             <div class="stat-title">Total Items</div>
             <div class="stat-value">${analysis.total_items.toLocaleString('de-DE')}</div>
           </div>
           <div class="stat-card">
             <div class="stat-title">Unique Items</div>
             <div class="stat-value">${analysis.unique_items.toLocaleString('de-DE')}</div>
           </div>
           <div class="stat-card">
             <div class="stat-title">Duplicate Items</div>
             <div class="stat-value">${analysis.duplicates.length.toLocaleString('de-DE')}</div>
           </div>
         </div>
         <div class="quality-distribution">
           ${qualityCounts.map((count, index) => `
             <div class="quality-stat quality-${index}">
               <div style="font-size: 1.2em; margin-bottom: 5px;">${count}</div>
               <div style="font-size: 0.9em;">${qualityLabels[index]}</div>
             </div>
           `).join('')}
         </div>
       `;

       document.getElementById('wardrobeSummary').innerHTML = summaryHtml;
     }

    function displayOverview() {
      const analysis = analysisData;
      
      const qualityLabels = ['Good', 'Special', 'Unique', 'Basic', 'Diamond'];
      const qualityColors = ['#eaefd9', '#def3f6', '#e1d3ec', '#fcf4e2', '#ffd6da'];
      
      const qualityCounts = [0, 0, 0, 0, 0];
      if (analysis.quality_distribution) {
        for (let quality in analysis.quality_distribution) {
          const index = parseInt(quality);
          if (index >= 0 && index <= 4) {
            qualityCounts[index] = analysis.quality_distribution[quality];
          }
        }
      }

      const ctx = document.getElementById('qualityChart').getContext('2d');
      new Chart(ctx, {
        type: 'pie',
        data: {
          labels: qualityLabels,
          datasets: [{
            data: qualityCounts,
            backgroundColor: qualityColors,
            borderColor: '#fff',
            borderWidth: 2
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            legend: {
              position: 'right'
            }
          }
        }
      });

      displayRandomItems();
    }

    function displayRandomItems() {
      const randomContainer = document.getElementById('randomItems');
      const items = getRandomItems(5);
      
      const randomHtml = items.map(item => `
        <a href="/item/${item.uiid.substring(0, 12)}" target="_blank" 
           class="item-card quality-${getItemQuality(item.uiid)}"
             onmouseover="showImage(event, '${item.uiid}')"
             onmouseout="hideImage(event)">
          <div class="item-image">
          <img src="https://gosupermodel.com/item/${item.uiid.substring(0, 12)}" alt="Item">
        </div>
          <div class="item-details">
            <div class="item-category">
              ${getCategoryLabel(item.uiid)}
            </div>
            <div class="item-meta">
              ${!item.tradeable ? '<span style="font-size: 0.8em; color: #e74c3c;">Non-Tradeable</span>' : ''}
              ${getItemValueDisplay(item.uiid)}
            </div>
          </div>
        </a>
      `).join('');

      randomContainer.innerHTML = randomHtml;
      currentRandomItems = items;
    }

    function shuffleRandomItems() {
      displayRandomItems();
    }

    function getRandomItems(count) {
      const uniqueItems = getUniqueItems();
      const shuffled = uniqueItems.sort(() => Math.random() - 0.5);
      return shuffled.slice(0, count);
    }

    function getDuplicateCount(uiid) {
      const shortUiid = uiid.substring(0, 12);
      const duplicate = analysisData.duplicates.find(dup => dup.uiid === shortUiid);
      return duplicate ? duplicate.count : 0;
    }

    function displayItemsGallery() {
      populateFilterOptions();
      
      const itemsGrid = document.getElementById('itemsGrid');
      const uniqueItems = getUniqueItems();
      
      const filteredItems = applyAllFilters(uniqueItems);
      
      let sortedItems = [...filteredItems];
      
      if (currentFilters.duplicates === 'duplicates-only') {
        sortedItems.sort((a, b) => {
          const countA = getDuplicateCount(a.uiid);
          const countB = getDuplicateCount(b.uiid);
          return countB - countA;
        });
      } else if (currentFilters.value === 'expensive' || currentFilters.value === 'cheap') {
      } else {
        sortedItems.sort((a, b) => {
          const timestampA = a.ts_added || 0;
          const timestampB = b.ts_added || 0;
          return isNewestFirst ? timestampB - timestampA : timestampA - timestampB;
        });
      }
      
      const totalItems = sortedItems.length;
      const totalPages = Math.ceil(totalItems / itemsPerPage);
      const startIndex = (currentItemsPage - 1) * itemsPerPage;
      const endIndex = Math.min(startIndex + itemsPerPage, totalItems);
      const itemsToShow = sortedItems.slice(startIndex, endIndex);
      
      const totalUnique = uniqueItems.length;
      const filterText = totalItems < totalUnique ? ` (${totalItems.toLocaleString('de-DE')} filtered)` : '';
      document.getElementById('galleryInfo').textContent = 
        `Showing ${startIndex + 1}-${endIndex} of ${totalItems.toLocaleString('de-DE')} items${filterText}`;
      
      const sortText = (currentFilters.value === 'expensive') ? 'Most Expensive' : 
                      (currentFilters.value === 'cheap') ? 'Cheapest' :
                      (isNewestFirst ? 'Newest First' : 'Oldest First');
      document.getElementById('sortBtn').innerHTML = 
        `<i class="bi bi-sort-down"></i> ${sortText}`;
      
      const itemsHtml = itemsToShow.map(item => {
        const duplicateCount = getDuplicateCount(item.uiid);
        const isDuplicatesMode = currentFilters.duplicates === 'duplicates-only';
        
        let categoryDisplay = getCategoryLabel(item.uiid);
        if (isDuplicatesMode && duplicateCount > 1) {
          categoryDisplay = `<span class="category-label" style="background-color: #e74c3c;">${duplicateCount}x Duplicates</span>`;
        }
        
        return `
        <a href="/item/${item.uiid.substring(0, 12)}" target="_blank" 
           class="item-card quality-${getItemQuality(item.uiid)}"
           onmouseover="showImage(event, '${item.uiid}')"
           onmouseout="hideImage(event)">
          <div class="item-image">
            <img src="https://gosupermodel.com/item/${item.uiid.substring(0, 12)}" alt="Item">
          </div>
          <div class="item-details">
            <div class="item-category">
                ${categoryDisplay}
            </div>
              <div class="item-meta">
                ${!item.tradeable ? '<span style="font-size: 0.8em; color: #e74c3c;">Non-Tradeable</span>' : ''}
                ${getItemValueDisplay(item.uiid)}
              </div>
          </div>
        </a>
        `;
      }).join('');

      itemsGrid.innerHTML = itemsHtml;
      
      displayItemsPagination(totalPages);
      
      updateFilterStatus();
    }

    function populateFilterOptions() {
      if (!analysisData) return;
      
      const currentCategory = currentFilters.category;
      const currentBrand = currentFilters.brand;
      const currentEra = currentFilters.era;
      
      const categorySelect = document.getElementById('categoryFilter');
      const categories = Object.keys(analysisData.categories.counts).sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));
      categorySelect.innerHTML = '<option value="">All Categories</option>' + 
        categories.map(cat => `<option value="${cat}">${cat}</option>`).join('');
      
      const brandSelect = document.getElementById('brandFilter');
      const brands = Object.keys(analysisData.brands.counts).sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));
      brandSelect.innerHTML = '<option value="">All Designers</option>' + 
        brands.map(brand => `<option value="${brand}">${brand}</option>`).join('');
      
      const eraSelect = document.getElementById('eraFilter');
      if (analysisData.era_distribution) {
        const eras = Object.keys(analysisData.era_distribution).sort((a, b) => parseInt(b) - parseInt(a));
        eraSelect.innerHTML = '<option value="">All Eras</option>' + 
          eras.map(era => `<option value="${era}">${getEraLabel(era)}</option>`).join('');
      }
      
      const colorSelect = document.getElementById('colorFilter');
      if (analysisData.color_distribution) {
        const colors = Object.keys(analysisData.color_distribution).sort();
        
        const colorOptions = colors.map(hexColor => {
          const colorName = getColorName(hexColor);
          const hexWithHash = `#${hexColor}`;
          return `<option value="${hexColor}" style="color: ${hexWithHash}; font-weight: bold;">${colorName}</option>`;
        }).join('');
        
        colorSelect.innerHTML = '<option value="">All Colors</option>' + colorOptions;
      }
      
      restoreFilterValues();
    }

    function restoreFilterValues() {
      document.getElementById('valueFilter').value = currentFilters.value || '';
      document.getElementById('qualityFilter').value = currentFilters.quality || '';
      document.getElementById('categoryFilter').value = currentFilters.category || '';
      document.getElementById('brandFilter').value = currentFilters.brand || '';
      document.getElementById('eraFilter').value = currentFilters.era || '';
      document.getElementById('colorFilter').value = currentFilters.color || '';
      document.getElementById('tradeableFilter').value = currentFilters.tradeable || 'all';
      document.getElementById('duplicatesFilter').value = currentFilters.duplicates || 'all';
    }

    function applyAllFilters(items) {
      let filtered = [...items];
      
      if (currentFilters.value && analysisData.values) {
        filtered = filtered.filter(item => {
          const shortUiid = item.uiid.substring(0, 12);
          const hasValue = analysisData.values.items && analysisData.values.items[shortUiid];
          
          if (currentFilters.value === 'no-value') {
            return !hasValue;
          } else if (currentFilters.value === 'expensive' || currentFilters.value === 'cheap') {
            return hasValue;
          }
          return true;
        });
        
        if (currentFilters.value === 'expensive') {
          filtered.sort((a, b) => {
            const valueA = getItemValue(a.uiid);
            const valueB = getItemValue(b.uiid);
            return valueB - valueA;
          });
        } else if (currentFilters.value === 'cheap') {
          filtered.sort((a, b) => {
            const valueA = getItemValue(a.uiid);
            const valueB = getItemValue(b.uiid);
            return valueA - valueB;
          });
        }
      }
      
      if (currentFilters.quality !== '') {
        filtered = filtered.filter(item => {
          return getItemQuality(item.uiid) == currentFilters.quality;
        });
      }
      
      if (currentFilters.category) {
        filtered = filtered.filter(item => {
          const shortUiid = item.uiid.substring(0, 12);
          const categoryItem = analysisData.categories.items.find(cat => cat.uiid === shortUiid);
          return categoryItem && categoryItem.category === currentFilters.category;
        });
      }
      
      if (currentFilters.brand) {
        filtered = filtered.filter(item => {
          const shortUiid = item.uiid.substring(0, 12);
          const brandItem = analysisData.brands.items.find(brand => brand.uiid === shortUiid);
          return brandItem && brandItem.brand === currentFilters.brand;
        });
      }
      
      if (currentFilters.era) {
        filtered = filtered.filter(item => {
          const shortUiid = item.uiid.substring(0, 12);
          const itemDetail = analysisData.item_details[shortUiid];
          return itemDetail && itemDetail.era == currentFilters.era;
        });
      }
      
      if (currentFilters.color) {
        filtered = filtered.filter(item => {
          const shortUiid = item.uiid.substring(0, 12);
          const itemDetail = analysisData.item_details[shortUiid];
          return itemDetail && itemDetail.custom_hex_colors && 
                 itemDetail.custom_hex_colors.includes(currentFilters.color);
        });
      }
      
      if (currentFilters.tradeable === 'tradeable') {
        filtered = filtered.filter(item => item.tradeable);
      } else if (currentFilters.tradeable === 'non-tradeable') {
        filtered = filtered.filter(item => !item.tradeable);
      }
      
      if (currentFilters.duplicates === 'duplicates-only') {
        const duplicateUiids = new Set(analysisData.duplicates.map(dup => dup.uiid));
        filtered = filtered.filter(item => {
          const shortUiid = item.uiid.substring(0, 12);
          return duplicateUiids.has(shortUiid);
        });
      } else if (currentFilters.duplicates === 'unique-only') {
        const duplicateUiids = new Set(analysisData.duplicates.map(dup => dup.uiid));
        filtered = filtered.filter(item => {
          const shortUiid = item.uiid.substring(0, 12);
          return !duplicateUiids.has(shortUiid);
        });
      }
      
      return filtered;
    }

    function applyFilters() {
      currentFilters.value = document.getElementById('valueFilter').value;
      currentFilters.quality = document.getElementById('qualityFilter').value;
      currentFilters.category = document.getElementById('categoryFilter').value;
      currentFilters.brand = document.getElementById('brandFilter').value;
      currentFilters.era = document.getElementById('eraFilter').value;
      currentFilters.color = document.getElementById('colorFilter').value;
      currentFilters.tradeable = document.getElementById('tradeableFilter').value;
      currentFilters.duplicates = document.getElementById('duplicatesFilter').value;
      
      const applyBtn = document.getElementById('applyFiltersBtn');
      applyBtn.style.animation = '';
      applyBtn.style.background = '';
      
      currentItemsPage = 1;
      displayItemsGallery();
      
      updateFilterStatus();
    }

    function updateFilterStatus() {
      const filterStatus = document.getElementById('filterStatus');
      const activeFilters = [];
      
      if (currentFilters.value) activeFilters.push('Value');
      if (currentFilters.quality) activeFilters.push('Quality');
      if (currentFilters.category) activeFilters.push('Category');
      if (currentFilters.brand) activeFilters.push('Designer');
      if (currentFilters.era) activeFilters.push('Era');
      if (currentFilters.color) {
        const colorName = getColorName(currentFilters.color);
        activeFilters.push(`Color (${colorName})`);
      }
      if (currentFilters.tradeable !== 'all') activeFilters.push('Tradeable');
      if (currentFilters.duplicates !== 'all') activeFilters.push('Duplicates');
      
      if (activeFilters.length === 0) {
        filterStatus.textContent = 'No active filters';
      } else {
        filterStatus.textContent = `${activeFilters.length} active filter${activeFilters.length > 1 ? 's' : ''}: ${activeFilters.join(', ')}`;
        filterStatus.style.color = 'var(--gst-background-pink)';
      }
    }

    function onFilterChange() {
      const filterStatus = document.getElementById('filterStatus');
      const applyBtn = document.getElementById('applyFiltersBtn');
      
      filterStatus.textContent = 'Filters changed - click Apply to update';
      filterStatus.style.color = '#f39c12';
      applyBtn.style.background = 'var(--gst-background-pink)';
      applyBtn.style.animation = 'pulse 1.5s infinite';
    }


    function clearAllFilters() {
      currentFilters = {
        value: '',
        quality: '',
        category: '',
        brand: '',
        era: '',
        color: '',
        tradeable: 'all',
        duplicates: 'all'
      };
      
      document.getElementById('valueFilter').value = '';
      document.getElementById('qualityFilter').value = '';
      document.getElementById('categoryFilter').value = '';
      document.getElementById('brandFilter').value = '';
      document.getElementById('eraFilter').value = '';
      document.getElementById('colorFilter').value = '';
      document.getElementById('tradeableFilter').value = 'all';
      document.getElementById('duplicatesFilter').value = 'all';
      
      currentItemsPage = 1;
      displayItemsGallery();
      updateFilterStatus();
    }

    function getItemValue(uiid) {
      if (!analysisData.values || !analysisData.values.items) return 0;
      const shortUiid = uiid.substring(0, 12);
      const valueData = analysisData.values.items[shortUiid];
      return valueData ? valueData.avg : 0;
    }

    function getItemValueDisplay(uiid) {
      const value = getItemValue(uiid);
      if (value > 0) {
        const formatter = new Intl.NumberFormat('de-DE');
        return `<span style="font-size: 0.8em; color: #f39c12;">${formatter.format(value)} goMoney</span>`;
      }
      return '';
    }

    function displayItemsPagination(totalPages) {
      const paginationContainer = document.getElementById('itemsPagination');
      
      if (totalPages <= 1) {
        paginationContainer.innerHTML = '';
        return;
      }

      let paginationHtml = '';
      
      if (currentItemsPage > 1) {
        paginationHtml += `
          <button class="btn btn-sm btn-outline-secondary me-2" onclick="changeItemsPage(${currentItemsPage - 1})">
            <i class="bi bi-chevron-left"></i> Previous
          </button>
        `;
      }
      
      const startPage = Math.max(1, currentItemsPage - 3);
      const endPage = Math.min(totalPages, currentItemsPage + 3);
      
      if (startPage > 1) {
        paginationHtml += `
          <button class="btn btn-sm btn-outline-secondary me-1" onclick="changeItemsPage(1)">1</button>
        `;
        if (startPage > 2) {
          paginationHtml += `<span class="me-1">...</span>`;
        }
      }
      
      for (let i = startPage; i <= endPage; i++) {
        const activeClass = i === currentItemsPage ? 'btn-primary' : 'btn-outline-secondary';
        paginationHtml += `
          <button class="btn btn-sm ${activeClass} me-1" onclick="changeItemsPage(${i})">${i}</button>
        `;
      }
      
      if (endPage < totalPages) {
        if (endPage < totalPages - 1) {
          paginationHtml += `<span class="me-1">...</span>`;
        }
        paginationHtml += `
          <button class="btn btn-sm btn-outline-secondary me-1" onclick="changeItemsPage(${totalPages})">${totalPages}</button>
        `;
      }
      
      if (currentItemsPage < totalPages) {
        paginationHtml += `
          <button class="btn btn-sm btn-outline-secondary ms-2" onclick="changeItemsPage(${currentItemsPage + 1})">
            Next <i class="bi bi-chevron-right"></i>
          </button>
      `;
      }
      
      paginationContainer.innerHTML = paginationHtml;
    }

    function changeItemsPage(page) {
      currentItemsPage = page;
      displayItemsGallery();
      
      document.getElementById('itemsGrid').scrollIntoView({ behavior: 'smooth' });
    }

    function toggleItemSort() {
      isNewestFirst = !isNewestFirst;
      currentItemsPage = 1;
      displayItemsGallery();
    }

    function displayTimeline() {
      const timelineContainer = document.getElementById('timelineContainer');
      
      const itemsByDate = {};
      wardrobeData.items.forEach(item => {
        const date = new Date(item.ts_added * 1000);
        const dateKey = date.toISOString().split('T')[0];
        
        if (!itemsByDate[dateKey]) {
          itemsByDate[dateKey] = [];
        }
        itemsByDate[dateKey].push(item);
      });

      const sortedDates = Object.keys(itemsByDate).sort().reverse();
      
      if (sortedDates.length === 0) {
        timelineContainer.innerHTML = '<div class="empty-state"><p>No timeline data available.</p></div>';
        return;
      }

      const endIndex = Math.min(timelineDaysShown + timelineDaysPerBatch, sortedDates.length);
      const datesToShow = sortedDates.slice(timelineDaysShown, endIndex);

      const timelineHtml = `
        <div class="timeline-container">
          ${datesToShow.map(date => {
            const items = itemsByDate[date];
            const formattedDate = new Date(date).toLocaleDateString('de-DE');
            const itemsToShow = items.slice(0, 20);
            const hasMore = items.length > 20;
            
            return `
              <div class="timeline-day">
                <h5>${formattedDate} <span class="day-count">(${items.length} items)</span></h5>
                <div class="timeline-items-grid">
                  ${itemsToShow.map(item => `
                    <a href="/item/${item.uiid.substring(0, 12)}" target="_blank"
                       class="timeline-item quality-${getItemQuality(item.uiid)}"
                       onmouseover="showImage(event, '${item.uiid}')"
                       onmouseout="hideImage(event)">
                      <div class="timeline-item-image">
                        <img src="https://gosupermodel.com/item/${item.uiid.substring(0, 12)}" alt="Item">
                      </div>
                    </a>
                  `).join('')}
                  ${hasMore ? `
                    <div class="timeline-more" onclick="openDayModal('${date}', '${formattedDate}')">
                      +${items.length - 21} more
                    </div>
                  ` : ''}
                </div>
              </div>
            `;
          }).join('')}
          ${endIndex < sortedDates.length ? `
            <div style="text-align: center; margin-top: 20px;">
              <button class="btn btn-primary" onclick="showMoreTimelineDays()">
                <i class="bi bi-chevron-down"></i> Show More Days (${sortedDates.length - endIndex} remaining)
              </button>
            </div>
          ` : ''}
        </div>
      `;

      timelineContainer.innerHTML = timelineHtml;
    }

    function displayStatistics() {
      const analysis = analysisData;

      const categoryEntries = Object.entries(analysis.categories.counts)
        .sort((a, b) => b[1] - a[1]);
      const topCategories = categoryEntries.slice(0, 10);
      const hasMoreCategories = categoryEntries.length > 10;
      
      let categoriesHtml = topCategories.map(([category, count]) => `
          <div class="category-item">
            <span class="category-label" style="background-color: var(--gst-background-pink);">
              ${category}
            </span>
            <span style="font-weight: bold;">${count} items</span>
          </div>
        `).join('');

      if (hasMoreCategories) {
        const hiddenCategories = categoryEntries.slice(10).map(([category, count]) => `
          <div class="category-item category-item-hidden">
            <span class="category-label" style="background-color: var(--gst-background-pink);">
              ${category}
            </span>
            <span style="font-weight: bold;">${count} items</span>
          </div>
        `).join('');
        
        categoriesHtml += hiddenCategories;
        categoriesHtml += `
          <div style="text-align: center; margin-top: 15px;">
            <button class="btn btn-sm btn-outline-secondary" onclick="toggleCategories()" id="categoriesToggleBtn">
              <i class="bi bi-chevron-down"></i> Show ${categoryEntries.length - 10} More
            </button>
          </div>
        `;
      }

      document.getElementById('categoriesContainer').innerHTML = categoriesHtml || '<div class="empty-state"><p>No category information available.</p></div>';

      const brandEntries = Object.entries(analysis.brands.counts)
        .sort((a, b) => b[1] - a[1]);
      const topBrands = brandEntries.slice(0, 10);
      const hasMoreBrands = brandEntries.length > 10;
      
      let brandsHtml = topBrands.map(([brand, count]) => `
          <div class="category-item">
            <span class="category-label" style="background-color: #B778C1;">
              ${brand}
            </span>
            <span style="font-weight: bold;">${count} items</span>
          </div>
        `).join('');

      if (hasMoreBrands) {
        const hiddenBrands = brandEntries.slice(10).map(([brand, count]) => `
          <div class="category-item brand-item-hidden">
            <span class="category-label" style="background-color: #B778C1;">
              ${brand}
            </span>
            <span style="font-weight: bold;">${count} items</span>
          </div>
        `).join('');
        
        brandsHtml += hiddenBrands;
        brandsHtml += `
          <div style="text-align: center; margin-top: 15px;">
            <button class="btn btn-sm btn-outline-secondary" onclick="toggleBrands()" id="brandsToggleBtn">
              <i class="bi bi-chevron-down"></i> Show ${brandEntries.length - 10} More
            </button>
          </div>
        `;
      }

      document.getElementById('brandsContainer').innerHTML = brandsHtml || '<div class="empty-state"><p>No brand information available.</p></div>';
    }

    function displayColors() {
      const analysis = analysisData;
      
      if (!analysis.color_distribution || Object.keys(analysis.color_distribution).length === 0) {
        document.getElementById('colorsContainer').innerHTML = '<div class="empty-state"><p>No custom color information available for your items.</p></div>';
        return;
      }

      const colorEntries = Object.entries(analysis.color_distribution)
        .sort((a, b) => b[1] - a[1])
        .slice(0, 20);

      const colorLabels = colorEntries.map(([color,]) => getColorName(color));
      const colorCounts = colorEntries.map(([, count]) => count);
      const colorValues = colorEntries.map(([color,]) => '#' + color);

      const colorCtx = document.getElementById('colorChart').getContext('2d');
      new Chart(colorCtx, {
        type: 'pie',
        data: {
          labels: colorLabels,
          datasets: [{
            data: colorCounts,
            backgroundColor: colorValues,
            borderColor: '#fff',
            borderWidth: 2
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            legend: {
              position: 'right',
              display: true
            },
            tooltip: {
              callbacks: {
                label: function(context) {
                  const label = context.label;
                  const value = context.parsed;
                  return `${label}: ${value} items`;
                }
              }
            }
          }
        }
      });

      const colorsHtml = colorEntries.slice(0, 10).map(([color, count]) => `
        <div class="color-item">
          <div class="color-label">
            <div class="color-preview" style="background-color: #${color};"></div>
            <span style="font-weight: 600;">${getColorName(color)}</span>
          </div>
          <span style="font-weight: bold;">${count} items</span>
        </div>
      `).join('');

      document.getElementById('colorsContainer').innerHTML = colorsHtml;
    }

    function displayEras() {
      const analysis = analysisData;
      
      if (!analysis.era_distribution || Object.keys(analysis.era_distribution).length === 0) {
        document.getElementById('erasContainer').innerHTML = '<div class="empty-state"><p>No era information available for your items.</p></div>';
        return;
      }

      const eraEntries = Object.entries(analysis.era_distribution).sort(([,a], [,b]) => b - a);
      
      const erasHtml = `
        <div class="pie-chart-container">
          <canvas id="eraChart"></canvas>
        </div>
        
        <div class="category-list">
                  ${eraEntries.map(([era, count]) => `
          <div class="category-item">
            <span class="category-label" style="background-color: #B778C1;">
              ${getEraLabel(era)}
            </span>
            <span style="font-weight: bold;">${count} items</span>
          </div>
        `).join('')}
        </div>
      `;

      document.getElementById('erasContainer').innerHTML = erasHtml;

      const eraLabels = eraEntries.map(([era,]) => getEraLabel(era));
      const eraCounts = eraEntries.map(([, count]) => count);
      const eraColors = eraEntries.map((_, index) => {
        const colors = ['#FF6B9D', '#B778C1', '#FF8A80', '#CE93D8', '#F8BBD9', '#FFB74D', '#81C784', '#64B5F6'];
        return colors[index % colors.length];
      });

      const eraCtx = document.getElementById('eraChart').getContext('2d');
      new Chart(eraCtx, {
        type: 'pie',
        data: {
          labels: eraLabels,
          datasets: [{
            data: eraCounts,
            backgroundColor: eraColors,
            borderColor: '#fff',
            borderWidth: 2
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            legend: {
              position: 'right'
            }
          }
        }
      });
    }

    function displayWorth() {
      const analysis = analysisData;
      const formatter = new Intl.NumberFormat('de-DE');

      if (!analysis.values) {
        const worthHtml = `
          <div style="text-align: center; padding: 40px; background-color: #f8f9fa; border-radius: 8px;">
            <h3><i class="bi bi-arrow-clockwise" style="animation: spin 1s linear infinite;"></i> Calculating Values...</h3>
            <p>This may take a moment for large wardrobes...</p>
          </div>
        `;
        document.getElementById('worthContainer').innerHTML = worthHtml;
        return;
      }

      if (analysis.values.message) {
        const worthHtml = `
          <div style="text-align: center; padding: 40px; background-color: #f8f9fa; border-radius: 8px;">
            <h3>Value Calculation Unavailable</h3>
            <p>${analysis.values.message}</p>
            <p style="color: var(--gst-graph-ticks); font-size: 0.9em; margin-top: 20px;">
              Values may be temporarily unavailable due to high server load or other technical issues.
            </p>
          </div>
        `;
        document.getElementById('worthContainer').innerHTML = worthHtml;
        return;
      }

      const totals = analysis.values.totals;
      let noteHtml = '';
      
      if (analysis.values.note) {
        noteHtml = `
          <div style="background-color: #fff3cd; border: 1px solid #ffeaa7; border-radius: 8px; padding: 15px; margin: 15px 0; color: #856404;">
            <strong>Note:</strong> ${analysis.values.note}
          </div>
        `;
      }

      const valuableItems = Object.entries(analysis.values.items)
        .map(([shortUiid, valueData]) => ({
          shortUiid,
          value: valueData.avg,
          ...valueData
        }))
        .sort((a, b) => b.value - a.value)
        .slice(0, 10);

      let topItemsHtml = '';
      if (valuableItems.length > 0) {
        const topItemsGrid = valuableItems.map(item => {
          const fullItem = wardrobeData.items.find(wardrobeItem => 
            wardrobeItem.uiid.substring(0, 12) === item.shortUiid
          );
          
          if (!fullItem) return '';
          
          return `
            <a href="/item/${item.shortUiid}" target="_blank" 
               class="item-card quality-${getItemQuality(fullItem.uiid)}"
               onmouseover="showImage(event, '${fullItem.uiid}')"
               onmouseout="hideImage(event)">
              <div class="item-image">
                <img src="https://gosupermodel.com/item/${item.shortUiid}" alt="Item">
              </div>
              <div class="item-details">
                <div class="item-category">
                  ${getCategoryLabel(fullItem.uiid)}
                </div>
                <div class="item-meta">
                  <span style="font-size: 0.9em; color: #f39c12; font-weight: 600;">
                    ${formatter.format(item.value)} goMoney
                  </span>
                  ${!fullItem.tradeable ? '<br><span style="font-size: 0.8em; color: #e74c3c;">Non-Tradeable</span>' : ''}
                </div>
              </div>
            </a>
          `;
        }).filter(html => html).join('');

        topItemsHtml = `
          <h3 style="margin-top: 30px;">Top 10 Most Valuable Items</h3>
          <div class="items-grid" style="margin-top: 15px;">
            ${topItemsGrid}
          </div>
        `;
      }

      const worthHtml = `
        ${noteHtml}
        <div class="stats-grid">
          <div class="stat-card">
            <div class="stat-title">High Estimate</div>
            <div class="stat-value">${formatter.format(totals.max)} goMoney</div>
          </div>
          <div class="stat-card">
            <div class="stat-title">Average Estimate</div>
            <div class="stat-value">${formatter.format(totals.avg)} goMoney</div>
          </div>
          <div class="stat-card">
            <div class="stat-title">Low Estimate</div>
            <div class="stat-value">${formatter.format(totals.min)} goMoney</div>
          </div>
        </div>
        
        ${topItemsHtml}
        
        <div style="margin-top: 30px; padding: 20px; background-color: var(--gst-background-white2); border-radius: 8px;">
          <h4>Worth Details</h4>
          <p>These estimates are based on goSupermodel auction history. Values may vary based on current market conditions.</p>
          <p><strong>Items with pricing data:</strong> ${Object.keys(analysis.values.items).length} out of ${analysis.unique_items}</p>
        </div>
      `;

      document.getElementById('worthContainer').innerHTML = worthHtml;
    }

    function displaySelling() {
      const analysis = analysisData;
      const sellingContainer = document.getElementById('sellingContainer');
      const sellingFiltersEl = document.getElementById('sellingFilters');
      const sellingPagination = document.getElementById('sellingPagination');
      const sellingHeader = document.getElementById('sellingHeader');
      
      if (!analysisData.selling) {
        sellingContainer.innerHTML = `
          <div style="text-align: center; padding: 40px; background-color: #f8f9fa; border-radius: 8px;">
            <h3>Selling Data Not Available</h3>
            <p>Selling analysis was not performed during wardrobe analysis.</p>
          </div>
        `;
        sellingFiltersEl.style.display = 'none';
        sellingPagination.style.display = 'none';
        if (sellingHeader) sellingHeader.style.display = 'none';
        return;
      }
      
      if (analysisData.selling.error) {
        sellingContainer.innerHTML = `
          <div style="text-align: center; padding: 40px; background-color: #f8f9fa; border-radius: 8px;">
            <h3>Error Loading Selling Data</h3>
            <p>${analysisData.selling.error}</p>
          </div>
        `;
        sellingFiltersEl.style.display = 'none';
        sellingPagination.style.display = 'none';
        if (sellingHeader) sellingHeader.style.display = 'none';
        return;
      }

      const selling = analysisData.selling;
      const opportunities = selling.opportunities;
        
        if (Object.keys(opportunities).length === 0) {
          sellingContainer.innerHTML = `
            <div style="text-align: center; padding: 40px; background-color: #f8f9fa; border-radius: 8px;">
              <h3>No Selling Opportunities Found</h3>
              <p>None of your items are currently wanted on public wishlists.</p>
              <p style="color: var(--gst-graph-ticks); font-size: 0.9em; margin-top: 15px;">
                Checked ${selling.wishlists_checked} public wishlists
              </p>
            </div>
          `;
        sellingFiltersEl.style.display = 'none';
        sellingPagination.style.display = 'none';
        if (sellingHeader) sellingHeader.style.display = 'none';
          return;
        }

      populateSellingFilters();
      sellingFiltersEl.style.display = 'block';

      displaySellingItems();
    }
    
    function populateSellingFilters() {
      const opportunities = analysisData.selling.opportunities;
      const categories = new Set();
        
        for (const [uiid, offers] of Object.entries(opportunities)) {
        const shortUiid = uiid.substring(0, 12);
        const categoryItem = analysisData.categories.items.find(item => item.uiid === shortUiid);
        if (categoryItem) {
          categories.add(categoryItem.category);
        }
      }
      
      const categorySelect = document.getElementById('sellingCategoryFilter');
      const sortedCategories = Array.from(categories).sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));
      categorySelect.innerHTML = '<option value="">All Categories</option>' + 
        sortedCategories.map(cat => `<option value="${cat}">${cat}</option>`).join('');
    }
    
    function displaySellingItems() {
      const opportunities = analysisData.selling.opportunities;
      let filteredItems = [];
      
      for (const [uiid, offers] of Object.entries(opportunities)) {
        const item = {
          uiid: uiid,
          offers: offers,
          bestOffer: offers[0],
          quality: getItemQuality(uiid + '000000000000'),
          category: getCategoryText(uiid + '000000000000'),
          offerValue: calculateOfferValue(offers[0])
        };
        filteredItems.push(item);
      }
      
      filteredItems = applySellingFilters(filteredItems);
      
      if (sellingFilters.price === 'highest') {
        filteredItems.sort((a, b) => b.offerValue - a.offerValue);
      } else if (sellingFilters.price === 'lowest') {
        filteredItems.sort((a, b) => a.offerValue - b.offerValue);
      }
      
      const totalItems = filteredItems.length;
      const totalPages = Math.ceil(totalItems / sellingItemsPerPage);
      const startIndex = (currentSellingPage - 1) * sellingItemsPerPage;
      const endIndex = Math.min(startIndex + sellingItemsPerPage, totalItems);
      const itemsToShow = filteredItems.slice(startIndex, endIndex);
      
      const sellingHeader = document.getElementById('sellingHeader');
      if (sellingHeader) {
        sellingHeader.style.display = 'none';
      }
      
      const sellingContainer = document.getElementById('sellingContainer');
      let sellingHtml = '<div class="items-grid">';
      
      itemsToShow.forEach(item => {
        const categoryLabel = getCategoryLabel(item.uiid + '000000000000');
          
          let bestOfferText = '';
        if (item.bestOffer.offer.makeAnOffer) {
            bestOfferText = 'Make an Offer';
          } else {
            const offerParts = [];
          if (item.bestOffer.offer.goMoney) offerParts.push(`<img src="../static/icons/money.png" style="width: 12px; height: 12px; margin-right: 2px; vertical-align: middle;">${parseInt(item.bestOffer.offer.goMoney).toLocaleString('de-DE')}`);
          if (item.bestOffer.offer.diamonds) offerParts.push(`<img src="../static/icons/dia.png" style="width: 12px; height: 12px; margin-right: 2px; vertical-align: middle;">${parseInt(item.bestOffer.offer.diamonds).toLocaleString('de-DE')}`);
          if (item.bestOffer.offer.vipDays) offerParts.push(`<img src="../static/icons/vip.png" style="width: 12px; height: 12px; margin-right: 2px; vertical-align: middle;">${parseInt(item.bestOffer.offer.vipDays)}`);
          if (item.bestOffer.offer.greetings) offerParts.push(`<img src="../static/icons/greet.png" style="width: 12px; height: 12px; margin-right: 2px; vertical-align: middle;">${parseInt(item.bestOffer.offer.greetings)}`);
            bestOfferText = offerParts.join(' + ') || '---';
          }
          
          sellingHtml += `
          <div class="item-card quality-${item.quality}">
            <a href="/item/${item.uiid}" target="_blank" 
               onmouseover="showImage(event, '${item.uiid}')"
                 onmouseout="hideImage(event)"
                 style="display: block; text-decoration: none;">
                <div class="item-image">
                <img src="https://gosupermodel.com/item/${item.uiid}" alt="Item">
                </div>
                <div class="item-details">
                  <div class="item-category">
                    ${categoryLabel}
                  </div>
                  <div class="item-meta">
                    <span style="font-size: 0.8em; color: #f39c12;">${bestOfferText}</span>
                  </div>
                </div>
              </a>
            <a href="/sale/wish.php?id=${item.bestOffer.wishlist_id}" target="_blank"
                 style="display: block; width: 100%; background-color: var(--gst-background-pink); color: white; border: none; padding: 6px; font-size: 0.8em; font-weight: 600; text-decoration: none; text-align: center; margin-top: 8px;">
                <i class="bi bi-heart"></i> Visit Wishlist
              </a>
            </div>
          `;
      });
        
        sellingHtml += '</div>';
        sellingContainer.innerHTML = sellingHtml;
      
      displaySellingPagination(totalPages);
      
      const sellingPagination = document.getElementById('sellingPagination');
      if (sellingPagination) {
        sellingPagination.style.display = totalPages > 1 ? 'block' : 'none';
      }
    }
    
    function applySellingFilters(items) {
      return items.filter(item => {
        if (sellingFilters.category && item.category !== sellingFilters.category) {
          return false;
        }
        
        if (sellingFilters.quality !== '' && item.quality != sellingFilters.quality) {
          return false;
        }
        
        if (sellingFilters.offer) {
          if (sellingFilters.offer === 'make-offer' && !item.bestOffer.offer.makeAnOffer) {
            return false;
          }
          if (sellingFilters.offer === 'fixed-offer' && item.bestOffer.offer.makeAnOffer) {
            return false;
          }
        }
        
        return true;
      });
    }
    
    function displaySellingPagination(totalPages) {
      const paginationContainer = document.getElementById('sellingPagination');
      
      if (totalPages <= 1) {
        paginationContainer.innerHTML = '';
        return;
      }

      let paginationHtml = '';
      
      if (currentSellingPage > 1) {
        paginationHtml += `
          <button class="btn btn-sm btn-outline-secondary me-2" onclick="changeSellingPage(${currentSellingPage - 1})">
            <i class="bi bi-chevron-left"></i> Previous
          </button>
        `;
      }
      
      const startPage = Math.max(1, currentSellingPage - 3);
      const endPage = Math.min(totalPages, currentSellingPage + 3);
      
      if (startPage > 1) {
        paginationHtml += `
          <button class="btn btn-sm btn-outline-secondary me-1" onclick="changeSellingPage(1)">1</button>
        `;
        if (startPage > 2) {
          paginationHtml += `<span class="me-1">...</span>`;
        }
      }
      
      for (let i = startPage; i <= endPage; i++) {
        const activeClass = i === currentSellingPage ? 'btn-primary' : 'btn-outline-secondary';
        paginationHtml += `
          <button class="btn btn-sm ${activeClass} me-1" onclick="changeSellingPage(${i})">${i}</button>
        `;
      }
      
      if (endPage < totalPages) {
        if (endPage < totalPages - 1) {
          paginationHtml += `<span class="me-1">...</span>`;
        }
        paginationHtml += `
          <button class="btn btn-sm btn-outline-secondary me-1" onclick="changeSellingPage(${totalPages})">${totalPages}</button>
        `;
      }
      
      if (currentSellingPage < totalPages) {
        paginationHtml += `
          <button class="btn btn-sm btn-outline-secondary ms-2" onclick="changeSellingPage(${currentSellingPage + 1})">
            Next <i class="bi bi-chevron-right"></i>
          </button>
      `;
      }
      
      paginationContainer.innerHTML = paginationHtml;
    }
    
    function getCategoryText(uiid) {
      const shortUiid = uiid.substring(0, 12);
      const categoryItem = analysisData.categories.items.find(item => item.uiid === shortUiid);
      return categoryItem ? categoryItem.category : 'Unknown';
    }
    
    function calculateOfferValue(offer) {
      if (offer.offer.makeAnOffer) {
        return 0;
      }
      
      let totalValue = 0;
      
      if (offer.offer.goMoney) {
        totalValue += parseInt(offer.offer.goMoney);
      }
      if (offer.offer.diamonds) {
        totalValue += parseInt(offer.offer.diamonds) * 100;
      }
      if (offer.offer.vipDays) {
        totalValue += parseInt(offer.offer.vipDays) * 50;
      }
      if (offer.offer.greetings) {
        totalValue += parseInt(offer.offer.greetings) * 10;
      }
      
      return totalValue;
    }
    
    function onSellingFilterChange() {
      sellingFilters.category = document.getElementById('sellingCategoryFilter').value;
      sellingFilters.quality = document.getElementById('sellingQualityFilter').value;
      sellingFilters.offer = document.getElementById('sellingOfferFilter').value;
      sellingFilters.price = document.getElementById('sellingPriceFilter').value;
      
      currentSellingPage = 1;
      displaySellingItems();
    }
    
    function changeSellingPage(page) {
      currentSellingPage = page;
      displaySellingItems();
      document.getElementById('sellingContainer').scrollIntoView({ behavior: 'smooth', block: 'start' });
    }

    function getItemQuality(uiid) {
      const shortUiid = uiid.substring(0, 12);
      const itemDetail = analysisData.item_details[shortUiid];
      return itemDetail ? itemDetail.quality : 0;
    }

    function getEraLabel(era) {
      if (era == 1) return 'gSm 1.0';
      if (era == 2) return 'gSm 2.0';
      return `Era ${era}`;
    }

    function getCategoryLabel(uiid) {
      const shortUiid = uiid.substring(0, 12);
      const categoryItem = analysisData.categories.items.find(item => item.uiid === shortUiid);
      
      if (categoryItem) {
        return `<span class="category-label" style="background-color: var(--gst-background-pink);">${categoryItem.category}</span>`;
      }
      
      return '<span class="category-label" style="background-color: var(--gst-graph-ticks);">Unknown</span>';
    }

    function getUniqueItems() {
      const uniqueMap = new Map();
      wardrobeData.items.forEach(item => {
        const shortUiid = item.uiid.substring(0, 12);
        if (!uniqueMap.has(shortUiid)) {
          uniqueMap.set(shortUiid, item);
        }
      });
      return Array.from(uniqueMap.values());
    }

    function showImage(event, uiid) {
      const shortenedUiid = uiid.substring(0, 12);
      const imageUrl = `https://gosupermodel.com/item/${shortenedUiid}`;

      const img = document.createElement('img');
      img.src = imageUrl;
      img.style.maxWidth = '100%';
      img.style.maxHeight = '100%';

      const grayBox = document.createElement('div');
      grayBox.className = 'gray-box';
      grayBox.style.position = 'fixed';
      grayBox.style.top = `${event.clientY + 10}px`;
      grayBox.style.left = `${event.clientX + 10}px`;
      grayBox.style.padding = '20px';
      grayBox.style.backgroundColor = '#ccc';
      grayBox.style.borderRadius = '10px';
      grayBox.style.zIndex = '1000';

      grayBox.appendChild(img);
      document.body.appendChild(grayBox);

      document.addEventListener('mousemove', (mouseEvent) => {
        grayBox.style.top = `${mouseEvent.clientY + 10}px`;
        grayBox.style.left = `${mouseEvent.clientX + 10}px`;
      });
    }

    function hideImage(event) {
      const grayBox = document.querySelector('.gray-box');
      if (grayBox) {
        grayBox.remove();
      }
    }

    function toggleCategories() {
      const hiddenItems = document.querySelectorAll('.category-item-hidden');
      const toggleBtn = document.getElementById('categoriesToggleBtn');
      
      if (hiddenItems.length === 0) return;
      
      const isShowing = hiddenItems[0].classList.contains('show');
      
      hiddenItems.forEach(item => {
        if (isShowing) {
          item.classList.remove('show');
        } else {
          item.classList.add('show');
        }
      });
      
      if (isShowing) {
        toggleBtn.innerHTML = `<i class="bi bi-chevron-down"></i> Show ${hiddenItems.length} More`;
      } else {
        toggleBtn.innerHTML = `<i class="bi bi-chevron-up"></i> Show Less`;
      }
    }

    function toggleBrands() {
      const hiddenItems = document.querySelectorAll('.brand-item-hidden');
      const toggleBtn = document.getElementById('brandsToggleBtn');
      
      if (hiddenItems.length === 0) return;
      
      const isShowing = hiddenItems[0].classList.contains('show');
      
      hiddenItems.forEach(item => {
        if (isShowing) {
          item.classList.remove('show');
        } else {
          item.classList.add('show');
        }
      });
      
      if (isShowing) {
        toggleBtn.innerHTML = `<i class="bi bi-chevron-down"></i> Show ${hiddenItems.length} More`;
      } else {
        toggleBtn.innerHTML = `<i class="bi bi-chevron-up"></i> Show Less`;
      }
    }

    function getColorName(hexColor) {
      const colorMap = {
        "000000": "Black",
        "FFFFFF": "White", 
        "808080": "Grey",
        "FFC0CB": "Pink",
        "8B4513": "Brown",
        "FF0000": "Red",
        "FFA500": "Orange", 
        "FFFF00": "Yellow",
        "008000": "Green",
        "0000FF": "Blue",
        "800080": "Purple",
        "F5F5DC": "Beige"
      };
      
      const cleanHex = hexColor.replace('#', '').toUpperCase();
      
      if (colorMap[cleanHex]) {
        return colorMap[cleanHex];
      }
      
      const targetRGB = hexToRgb(cleanHex);
      if (!targetRGB) return `#${cleanHex}`;
      
      let closestColor = cleanHex;
      let minDistance = Infinity;
      
      Object.keys(colorMap).forEach(hex => {
        const rgb = hexToRgb(hex);
        if (rgb) {
          const distance = Math.sqrt(
            Math.pow(targetRGB.r - rgb.r, 2) +
            Math.pow(targetRGB.g - rgb.g, 2) +
            Math.pow(targetRGB.b - rgb.b, 2)
          );
          if (distance < minDistance) {
            minDistance = distance;
            closestColor = hex;
          }
        }
      });
      
      if (minDistance < 100) {
        return colorMap[closestColor];
      }
      
      return `#${cleanHex}`;
    }
    
    function hexToRgb(hex) {
      const result = /^([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
      return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
      } : null;
    }

    async function shareAnalysis() {
      if (!wardrobeData) {
        Swal.fire('Error', 'Please analyze a wardrobe first', 'warning');
        return;
      }

      try {
        const result = await Swal.fire({
          title: 'Share Your Analysis',
          html: `
            <p>This will create a shareable link of your wardrobe analysis.</p>
            <p style="font-size: 12px; color: var(--gst-graph-ticks); margin-top: 15px;">
              Note: The shared analysis will be publicly accessible to anyone with the link.
            </p>
          `,
          icon: 'info',
          showCancelButton: true,
          confirmButtonText: 'Create Share Link',
          cancelButtonText: 'Cancel'
        });

        if (result.isConfirmed) {
          Swal.fire('Success', 'Share link created! (Feature coming soon)', 'success');
        }
      } catch (error) {
        Swal.fire('Error', 'Failed to create share link', 'error');
      }
    }

    function manageShare() {
      Swal.fire('Info', 'Manage share functionality coming soon!', 'info');
    }

    function showMoreTimelineDays() {
      timelineDaysShown += timelineDaysPerBatch;
      displayTimeline();
    }

    function openDayModal(date, formattedDate) {
      const itemsByDate = {};
      wardrobeData.items.forEach(item => {
        const itemDate = new Date(item.ts_added * 1000);
        const dateKey = itemDate.toISOString().split('T')[0];
        
        if (!itemsByDate[dateKey]) {
          itemsByDate[dateKey] = [];
        }
        itemsByDate[dateKey].push(item);
      });

      const dayItems = itemsByDate[date] || [];
      
      const modalItemsHtml = dayItems.map(item => `
        <a href="/item/${item.uiid.substring(0, 12)}" target="_blank" 
           class="item-card quality-${getItemQuality(item.uiid)}"
           onmouseover="showImage(event, '${item.uiid}')"
           onmouseout="hideImage(event)">
          <div class="item-image">
            <img src="https://gosupermodel.com/item/${item.uiid.substring(0, 12)}" alt="Item">
          </div>
          <div class="item-details">
            <div class="item-category">
              ${getCategoryLabel(item.uiid)}
            </div>
            <div class="item-meta">
              ${!item.tradeable ? '<span style="font-size: 0.8em; color: #e74c3c;">Non-Tradeable</span>' : ''}
              ${getItemValueDisplay(item.uiid)}
            </div>
          </div>
        </a>
      `).join('');

      Swal.fire({
        title: `${formattedDate}`,
        html: `
          <div style="text-align: center; margin-bottom: 20px;">
            ${dayItems.length} items added on this day
          </div>
          <div class="items-grid" style="max-height: 60vh; overflow-y: auto; padding: 10px;">
            ${modalItemsHtml}
          </div>
        `,
        width: '90%',
        showCloseButton: true,
        showConfirmButton: false,
        customClass: {
          popup: 'swal-wide'
        }
      });
    }

    async function loadSharedWardrobe(shareCode) {
      try {
        console.log('loadSharedWardrobe called with shareCode:', shareCode);
        const inputSection = document.querySelector('.unified-section');
        const resultsContainer = document.getElementById('resultsContainer');
        const errorMessage = document.getElementById('errorMessage');
        
        inputSection.style.display = 'none';
        if (errorMessage) errorMessage.style.display = 'none';
        
        Swal.fire({
          title: 'Loading Shared Wardrobe...',
          text: 'Please wait while we load the analysis',
          allowOutsideClick: false,
          showConfirmButton: false,
          willOpen: () => {
            Swal.showLoading();
          }
        });
        
        resultsContainer.style.display = 'block';

        const response = await fetch(`../api/analyzer-v2/load_shared_v2.php?code=${shareCode}`);
        console.log('Response status:', response.status, response.statusText);
        
        if (!response.ok) {
          throw new Error(`HTTP ${response.status}: ${response.statusText}`);
        }
        
        const responseText = await response.text();
        console.log('Response text:', responseText.substring(0, 200) + '...');
        
        let data;
        try {
          data = JSON.parse(responseText);
        } catch (jsonError) {
          console.error('JSON parse error:', jsonError);
          throw new Error(`Invalid JSON response: ${jsonError.message}`);
        }
        
        if (!data.success) {
          showError(data.message || 'Failed to load shared wardrobe');
          const analyzerHeader = document.querySelector('.analyzer-header');
          if (analyzerHeader) analyzerHeader.style.display = 'block';
          const unifiedSections = document.querySelectorAll('.unified-section');
          unifiedSections.forEach(section => section.style.display = 'block');
          resultsContainer.style.display = 'none';
          return;
        }

        currentAccountId = data.accountId;
        analysisData = data.analysisData;
        wardrobeData = data.wardrobeData;
        summaryData = data.summaryData;


        if (!analysisData || !wardrobeData) {
          throw new Error('Missing analysis or wardrobe data in shared response');
        }

        Swal.close();

        timelineDaysShown = 0;

        resultsContainer.style.display = 'block';
        const analyzerHeader = document.querySelector('.analyzer-header');
        if (analyzerHeader) analyzerHeader.style.display = 'none';
        const unifiedSections = document.querySelectorAll('.unified-section');
        unifiedSections.forEach(section => section.style.display = 'none');

        setTimeout(() => {
          try {
            displayResults();
            
            const sharedBanner = document.createElement('div');
            sharedBanner.style.cssText = `
              background-color: var(--gst-background-pink);
              color: white;
              padding: 15px;
              text-align: center;
              margin: 20px;
              border-radius: 8px;
              font-weight: 600;
            `;
            sharedBanner.innerHTML = `
              <i class="bi bi-share"></i> Viewing ${data.username}'s Wardrobe 
              <span style="opacity: 0.8;">(Last updated: ${formatDateTime(data.updatedAt)})</span>
            `;
            
            const container = document.querySelector('.column-container');
            container.insertBefore(sharedBanner, container.firstChild);

            const shareSection = document.getElementById('shareSection');
            if (shareSection) shareSection.style.display = 'none';
            
          } catch (displayError) {
            showError(`Failed to display results: ${displayError.message}`);
          }
        }, 100);

      } catch (error) {
        console.error('loadSharedWardrobe error:', error);
        const errorMessage = error.message || error.toString() || 'Unknown error occurred';
        showError(`Failed to load shared wardrobe: ${errorMessage}`);
        Swal.close();
        const resultsContainer = document.getElementById('resultsContainer');
        const analyzerHeader = document.querySelector('.analyzer-header');
        if (analyzerHeader) analyzerHeader.style.display = 'block';
        const unifiedSections = document.querySelectorAll('.unified-section');
        unifiedSections.forEach(section => section.style.display = 'block');
        resultsContainer.style.display = 'none';
      }
    }

    async function checkShareStatus() {
      try {
        const response = await fetch('../api/analyzer-v2/check_share_v2.php');
        const data = await response.json();
        
        const shareSection = document.getElementById('shareSection');
        const loadSavedSection = document.getElementById('loadSavedSection');
        
        if (data.hasShare) {
          shareSection.style.display = 'block';
          updateShareUI(data);
          
          if (loadSavedSection) {
            loadSavedSection.style.display = 'block';
            loadSavedSection.dataset.shareCode = data.shareCode;
          }
        } else {
          if (loadSavedSection) {
            loadSavedSection.style.display = 'none';
          }
        }
      } catch (error) {
        const loadSavedSection = document.getElementById('loadSavedSection');
        if (loadSavedSection) {
          loadSavedSection.style.display = 'none';
        }
      }
    }

    function updateShareUI(shareData) {
      const shareSection = document.getElementById('shareSection');
      
      shareSection.innerHTML = `
        <h3>Share Your Analysis</h3>
        <p>Your wardrobe analysis is already shared!</p>
        <button class="share-btn" onclick="shareAnalysis()">
          <i class="bi bi-pencil"></i> Update Share
        </button>
        <button class="share-btn" onclick="manageShare()" style="background-color: #6c757d;">
          <i class="bi bi-gear"></i> Manage Share
        </button>
        <p style="font-size: 12px; margin-top: 10px;">
          Last updated: ${shareData.updatedAt} • Views: ${shareData.views}
        </p>
      `;
    }

    async function shareAnalysis() {
      if (!analysisData || !wardrobeData || !currentAccountId) {
        Swal.fire('Error', 'Please analyze a wardrobe first', 'warning');
        return;
      }

      try {
        const checkResponse = await fetch('../api/analyzer-v2/check_share_v2.php');
        const checkData = await checkResponse.json();
        
        let confirmResult;
        if (checkData.hasShare) {
          confirmResult = await Swal.fire({
            title: 'Update Share',
            html: `
              <p>You already have a shared wardrobe analysis.</p>
              <p>Do you want to update it with the current analysis?</p>
              <p style="font-size: 12px; margin-top: 15px; color: var(--gst-graph-ticks);">
                The share link will remain the same, but the content will be updated.
              </p>
            `,
            icon: 'question',
            showCancelButton: true,
            confirmButtonText: 'Yes, update it',
            cancelButtonText: 'Cancel'
          });
        } else {
          confirmResult = await Swal.fire({
            title: 'Share Your Wardrobe Analysis',
            html: `
              <p>Create a shareable link of your wardrobe analysis.</p>
              <p style="font-size: 12px; color: var(--gst-graph-ticks); margin-top: 15px;">
                Note: The shared analysis will be publicly accessible to anyone with the link.
              </p>
            `,
            icon: 'info',
            showCancelButton: true,
            confirmButtonText: 'Create Share Link',
            cancelButtonText: 'Cancel'
          });
        }

        if (!confirmResult.isConfirmed) {
          return;
        }

        const loadingPopup = Swal.fire({
          title: 'Creating Share Link...',
          text: 'Please wait while we process your wardrobe data',
          allowOutsideClick: false,
          showConfirmButton: false,
          willOpen: () => {
            Swal.showLoading();
          }
        });

        const response = await fetch('../api/analyzer-v2/share_wardrobe_v2.php', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({
            accountId: currentAccountId,
            analysisData: analysisData,
            wardrobeData: wardrobeData,
            summaryData: summaryData,
            shareCode: checkData.hasShare ? checkData.shareCode : null
          })
        });
        
        const result = await response.json();
        loadingPopup.close();

        if (result.success) {
          const shareUrl = `${window.location.origin}${window.location.pathname}?code=${result.shareCode}`;
          
          await Swal.fire({
            title: 'Share Link Created!',
            html: `
              <div style="text-align: center;">
                <p>Share this link with others:</p>
                <div style="display: flex; gap: 10px; align-items: center; margin: 20px 0;">
                  <input type="text" value="${shareUrl}" readonly onclick="this.select()" 
                         style="flex: 1; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                  <button class="swal2-confirm swal2-styled" onclick="copyShareLink('${shareUrl}', this)" 
                          style="white-space: nowrap;">Copy Link</button>
                </div>
                <p style="font-size: 12px; color: var(--gst-graph-ticks);">
                  Anyone with this link can view your wardrobe analysis.
                </p>
              </div>
            `,
            showConfirmButton: false,
            showCloseButton: true
          });

          checkShareStatus();
        } else {
          if (result.message && result.message.toLowerCase().includes('not logged in')) {
            Swal.fire('Login Required', 'Please log into your goSupertools account to share your wardrobe analysis.', 'warning');
        } else {
          Swal.fire('Error', result.message || 'Failed to create share link', 'error');
          }
        }
      } catch (error) {
        Swal.fire('Error', 'Failed to create share link', 'error');
      }
    }

    async function manageShare() {
      try {
        const response = await fetch('../api/analyzer-v2/check_share_v2.php');
        const data = await response.json();
        
        if (data.hasShare) {
          const shareUrl = `${window.location.origin}${window.location.pathname}?code=${data.shareCode}`;
          
          await Swal.fire({
            title: 'Manage Share Link',
            html: `
              <div style="text-align: center;">
                <p><strong>Your current share link:</strong></p>
                <div style="display: flex; gap: 10px; align-items: center; margin: 20px 0;">
                  <input type="text" value="${shareUrl}" readonly onclick="this.select()" 
                         style="flex: 1; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                  <button class="swal2-confirm swal2-styled" onclick="copyShareLink('${shareUrl}', this)" 
                          style="white-space: nowrap;">Copy</button>
                </div>
                <div style="text-align: left; margin: 20px 0; font-size: 14px;">
                  <p><strong>Details:</strong></p>
                  <p>Last updated: ${data.updatedAt}</p>
                  <p>Total views: ${data.views}</p>
                  <p>Privacy: ${data.isPrivate ? 'Private' : 'Public'}</p>
                </div>
                <div style="display: flex; gap: 10px; justify-content: center; margin-top: 20px;">
                  <button class="swal2-confirm swal2-styled" onclick="togglePrivate()" style="background-color: #ffc107;">
                    ${data.isPrivate ? 'Make Public' : 'Set to Private'}
                  </button>
                  <button class="swal2-confirm swal2-styled" onclick="deleteShare()" style="background-color: #dc3545;">
                    Delete Share
                  </button>
                </div>
              </div>
            `,
            showConfirmButton: false,
            showCloseButton: true,
            width: '600px'
          });
        } else {
          if (data.error && data.error.toLowerCase().includes('not logged in')) {
            Swal.fire('Login Required', 'Please log into your goSupertools account to manage your share link.', 'warning');
        } else {
          Swal.fire('No Share Link', 'You currently don\'t have an active share link.', 'info');
          }
        }
      } catch (error) {
        Swal.fire('Error', 'Failed to manage share link', 'error');
      }
    }

    async function togglePrivate() {
      try {
        const response = await fetch('../api/analyzer/toggle_private.php', {
          method: 'POST'
        });
        const data = await response.json();
        
        if (data.success) {
          await Swal.fire('Success', `Share link is now ${data.isPrivate ? 'private' : 'public'}`, 'success');
          manageShare();
        } else {
          if (data.error && data.error.toLowerCase().includes('not logged in')) {
            Swal.fire('Login Required', 'Please log into your goSupertools account to manage your share settings.', 'warning');
          } else {
            Swal.fire('Error', data.message || data.error || 'Failed to update privacy status', 'error');
          }
        }
      } catch (error) {
        Swal.fire('Error', 'Failed to update privacy status', 'error');
      }
    }

    async function deleteShare() {
      try {
        const result = await Swal.fire({
          title: 'Delete Share Link',
          text: 'Are you sure you want to delete this share link? This action cannot be undone.',
          icon: 'warning',
          showCancelButton: true,
          confirmButtonText: 'Yes, delete it',
          cancelButtonText: 'No, keep it',
          confirmButtonColor: '#dc3545'
        });

        if (result.isConfirmed) {
          const response = await fetch('../api/analyzer/delete_share.php', {
            method: 'POST'
          });
          
          const data = await response.json();
          
          if (data.success) {
            await Swal.fire('Success', 'Share link has been deleted', 'success');
            const shareSection = document.getElementById('shareSection');
            if (shareSection) shareSection.style.display = 'none';
          } else {
            if (data.message && data.message.toLowerCase().includes('not logged in')) {
              Swal.fire('Login Required', 'Please log into your goSupertools account to delete your share link.', 'warning');
          } else {
            Swal.fire('Error', data.message || 'Failed to delete share link', 'error');
            }
          }
        }
      } catch (error) {
        Swal.fire('Error', 'Failed to delete share link', 'error');
      }
    }

    function copyShareLink(shareUrl, buttonElement) {
      navigator.clipboard.writeText(shareUrl).then(() => {
        const button = buttonElement || event.target;
        const originalText = button.textContent;
        button.textContent = 'Copied!';
        button.style.backgroundColor = '#28a745';
        setTimeout(() => {
          button.textContent = originalText;
          button.style.backgroundColor = '';
        }, 2000);
      }).catch(err => {
        const textArea = document.createElement('textarea');
        textArea.value = shareUrl;
        document.body.appendChild(textArea);
        textArea.select();
        document.execCommand('copy');
        document.body.removeChild(textArea);
        
        const button = buttonElement || event.target;
        const originalText = button.textContent;
        button.textContent = 'Copied!';
        button.style.backgroundColor = '#28a745';
        setTimeout(() => {
          button.textContent = originalText;
          button.style.backgroundColor = '';
        }, 2000);
      });
    }

    function formatDateTime(dateString) {
      if (!dateString) return '';
      
      try {
        const dateObj = new Date(dateString);
        if (isNaN(dateObj.getTime())) {
          return dateString;
        }
        
        const day = String(dateObj.getDate()).padStart(2, '0');
        const month = String(dateObj.getMonth() + 1).padStart(2, '0');
        const year = dateObj.getFullYear();
        const hours = String(dateObj.getHours()).padStart(2, '0');
        const minutes = String(dateObj.getMinutes()).padStart(2, '0');
        
        return `${day}.${month}.${year} ${hours}:${minutes}`;
      } catch (error) {
        return dateString;
      }
    }

    async function loadSavedWardrobe() {
      try {
        const loadSavedSection = document.getElementById('loadSavedSection');
        const shareCode = loadSavedSection ? loadSavedSection.dataset.shareCode : null;
        
        if (!shareCode) {
          Swal.fire('Error', 'No saved wardrobe found', 'error');
          return;
        }
        
        const shareUrl = `${window.location.origin}${window.location.pathname}?code=${shareCode}`;
        window.location.href = shareUrl;
        
      } catch (error) {
        console.error('Error loading saved wardrobe:', error);
        Swal.fire('Error', 'Failed to load saved wardrobe', 'error');
      }
    }


  </script>
</body>
</html>