import os
import json
import base64
import mimetypes
from urllib.parse import unquote

# --- CONFIGURATION ---
JSON_FILE = "commissioninfo.json"
OUTPUT_HTML = "Commission_Standalone.html"

def get_base64_image(filename):
    """Reads a local file and converts it to a base64 data URI."""
    if not os.path.exists(filename):
        print(f"  [!] Warning: Could not find local file '{filename}'")
        return None
    
    mime_type, _ = mimetypes.guess_type(filename)
    if not mime_type:
        mime_type = 'application/octet-stream'
        
    with open(filename, "rb") as image_file:
        encoded_string = base64.b64encode(image_file.read()).decode('utf-8')
        return f"data:{mime_type};base64,{encoded_string}"

def extract_filename(url):
    """Extracts the filename from a URL and decodes characters like %20 to spaces."""
    return unquote(url.split('/')[-1])

def main():
    print(f"Reading {JSON_FILE}...")
    try:
        with open(JSON_FILE, 'r', encoding='utf-8') as f:
            data = json.load(f)
    except FileNotFoundError:
        print(f"Error: Could not find {JSON_FILE} in the current directory.")
        return

    # 1. Process Main Gallery Images
    print("Converting main gallery images to Base64...")
    for i, url in enumerate(data.get("imageUrls", [])):
        filename = extract_filename(url)
        b64 = get_base64_image(filename)
        if b64:
            data["imageUrls"][i] = b64

    # 2. Process Background Image
    print("Converting background image to Base64...")
    bg_url = data.get("backgroundImageUrl")
    if bg_url:
        filename = extract_filename(bg_url)
        b64 = get_base64_image(filename)
        if b64:
            data["backgroundImageUrl"] = b64
            
    # 3. Process Commission Slots Images
    print("Converting commission slot images to Base64...")
    for i, commission in enumerate(data.get("commissions", [])):
        c_url = commission.get("imageUrl")
        if c_url:
            filename = extract_filename(c_url)
            b64 = get_base64_image(filename)
            if b64:
                data["commissions"][i]["imageUrl"] = b64

    # Convert the updated data back to a JSON string
    json_string = json.dumps(data, indent=4)

    print("Building final HTML file...")
    # Read the template HTML and inject the JSON
    final_html = HTML_TEMPLATE.replace('__INJECT_JSON_HERE__', json_string)
    
    with open(OUTPUT_HTML, 'w', encoding='utf-8') as f:
        f.write(final_html)
        
    print(f"\nSuccess! Created highly portable file: {OUTPUT_HTML}")
    print("You can now open this file in any browser, offline, and it will work perfectly.")

# --- HTML TEMPLATE ---
# This is the updated HTML that doesn't rely on the fetch API.
HTML_TEMPLATE = """<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ashwill's Commission Progress Tracker</title>
    <link rel="icon" href="data:,">
    
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
    <script src="https://unpkg.com/lucide@latest"></script>
    <style>
        body { 
            font-family: 'Inter', sans-serif; 
            background-color: #1f2937; 
            color: #f3f4f6;
            background-size: cover;
            background-attachment: fixed;
            background-position: center;
        }
        .content-container {
            background-color: rgba(0, 0, 0, 0.1);
            min-height: 100vh;
        }
        .card { transition: all 0.3s ease; }
        .status-pill { padding: 4px 12px; border-radius: 9999px; font-weight: 600; font-size: 0.8rem; }
        
        .status-In-Progress { background-color: #fcd34d; color: #78350f; } 
        .status-Awaiting-Feedback { background-color: #3b82f6; color: #eff6ff; } 
        .status-Pending-Payment { background-color: #f97316; color: #fff; } 
        .status-Delivered { background-color: #10b981; color: #fff; } 
        .status-In-Queue { background-color: #9ca3af; color: #fff; } 
        .status-On-Hold { background-color: #ef4444; color: #fff; } 
        .status-Awaiting-Commission { background-color: #7244ef; color: #fff; } 
        
        .scroll-container::-webkit-scrollbar { width: 8px; }
        .scroll-container::-webkit-scrollbar-thumb { background-color: #6b7280; border-radius: 10px; }
        .scroll-container::-webkit-scrollbar-track { background-color: #374151; }
        
        #info-description a {
            color: #818cf8;
            text-decoration: underline;
            font-weight: 600;
            transition: color 0.2s;
        }
        #info-description a:hover { color: #a5b4fc; }
    </style>
</head>
<body class="min-h-screen">
    <div class="content-container">

    <script>
        // Data injected by Python build script
        const builtInInfo = __INJECT_JSON_HERE__;

        function loadCommissionInfo() { return builtInInfo; }

        function renderCommissionInfo(info) {
            document.getElementById('info-title').textContent = info.title;
            
            let formattedDescription = info.description
                .replace(/\\n/g, '<br>')
                .replace(/\\*\\*(.*?)\\*\\*/g, '<b>$1</b>')
                .replace(/\\[([^\\]]+)\\]\\(([^)]+)\\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>');

            document.getElementById('info-description').innerHTML = formattedDescription;

            const imageContainer = document.getElementById('info-images');
            imageContainer.innerHTML = '';
            
            if (info.imageUrls && info.imageUrls.length > 0) {
                info.imageUrls.forEach((url, index) => {
                    const img = document.createElement('img');
                    img.src = url;
                    img.alt = `Part ${index + 1}`;
                    img.className = 'w-full h-auto object-cover rounded-lg shadow-md border border-gray-600';
                    img.onerror = function() { this.style.display='none'; }; 
                    imageContainer.appendChild(img);
                });
            }
        }

        function createStatusPill(currentStatus) {
            const span = document.createElement('span');
            const statusClass = currentStatus.replace(/ /g, '-'); 
            span.className = `status-pill status-${statusClass} inline-flex items-center`;
            span.textContent = currentStatus.replace(/-/g, ' '); 
            const iconSpan = document.createElement('span');
            iconSpan.className = 'ml-1';
            iconSpan.innerHTML = `<i data-lucide="lock" class="h-3 w-3 inline-block"></i>`;
            span.appendChild(iconSpan);
            return span;
        }

        function renderCommissions(commissions, info) {
            const container = document.getElementById('commissions-list');
            container.innerHTML = ''; 
            if (!commissions || commissions.length === 0) {
                container.innerHTML = `<div class="col-span-1 md:col-span-2 lg:col-span-3 text-center p-8 text-gray-300 bg-gray-800 rounded-xl">No commissions currently listed.</div>`;
                return;
            }

            const sortedCommissions = commissions.sort((a, b) => {
                return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
            });

            sortedCommissions.forEach(item => {
                const card = document.createElement('div');
                card.className = 'card bg-gray-900 p-4 rounded-xl shadow-xl flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 hover:shadow-2xl';

                const imageContainer = document.createElement('div');
                imageContainer.className = 'flex-shrink-0 w-full sm:w-48 h-48 sm:h-auto rounded-lg overflow-hidden border border-gray-700';
                imageContainer.innerHTML = `
                    <img src="${item.imageUrl || 'https://placehold.co/400x300/4b5563/fff?text=NO+IMAGE'}" 
                         class="w-full h-full object-cover" onerror="this.src='https://placehold.co/400x300/4b5563/fff?text=NO+IMAGE';">`;
                card.appendChild(imageContainer);

                const contentContainer = document.createElement('div');
                contentContainer.className = 'flex-grow flex flex-col justify-between';
                
                contentContainer.innerHTML = `
                    <div class="flex justify-between items-start w-full">
                        <h3 class="text-xl font-bold text-gray-100 break-words">${item.name}</h3>
                    </div>
                    <div class="flex flex-col space-y-2 mt-2">
                        <div class="flex items-center space-x-2">
                            <span class="text-sm font-semibold text-gray-400 w-24">Current Status:</span>
                            ${createStatusPill(item.status).outerHTML}
                        </div>
                        <p class="text-xs text-gray-500">Date Added: ${new Date(item.createdAt).toLocaleDateString()}</p>
                    </div>
                    <div class="mt-4 pt-4 border-t border-gray-700">
                        <p class="text-xs text-gray-500 font-semibold">
                            Payment: <span class="text-indigo-400">50% Deposit / 50% Final</span> via 
                            ${info.payPalLink ? `<a href="${info.payPalLink}" target="_blank" class="text-indigo-400 underline">PayPal</a>` : 'Pending'}
                        </p>
                    </div>
                `;
                card.appendChild(contentContainer);
                container.appendChild(card);
            });
            lucide.createIcons();
        }
        
        function renderDiscordButton(info) {
            const container = document.getElementById('discord-button-container');
            if (!container || !info.discordInviteCode) return;
            container.innerHTML = `
                <a href="https://discord.gg/${info.discordInviteCode}" target="_blank" 
                   class="inline-flex items-center px-6 py-3 border border-transparent text-base font-extrabold rounded-xl shadow-lg 
                          text-white bg-indigo-600 hover:bg-indigo-700 transition transform hover:scale-[1.03] active:scale-[0.98] mt-4 md:mt-0">
                    <i data-lucide="message-square-text" class="h-5 w-5 mr-2"></i> Request a Commission
                </a>`;
        }

        window.addEventListener('load', () => {
            const info = loadCommissionInfo(); 
            if(info.backgroundImageUrl) document.body.style.backgroundImage = `url('${info.backgroundImageUrl}')`;
            renderCommissionInfo(info);
            renderDiscordButton(info);
            renderCommissions(info.commissions, info);
            lucide.createIcons();
        });
    </script>
    
    <div class="max-w-7xl mx-auto p-4 sm:p-6 lg:p-8">
        <header class="mb-8 pb-4 flex flex-col md:flex-row justify-between items-center text-gray-100">
            <div>
                <h1 class="text-4xl font-extrabold tracking-tight">Commission Progress Dashboard</h1>
                <p class="text-gray-400 mt-1">Real-time status updates for existing commissions.</p>
            </div>
            <div class="flex flex-col items-end">
                <div id="discord-button-container" class="order-2 md:order-1 mb-4 md:mb-0"></div>
                <div id="auth-status-container" class="order-1 md:order-2 flex items-center space-x-3">
                    <span class="inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium bg-gray-800 text-teal-400 shadow-lg border border-teal-400">CLIENT VIEW</span>
                </div>
            </div>
        </header>
        
        <div class="bg-gray-800 rounded-xl shadow-2xl p-6 mb-8 border-t-4 border-indigo-500 text-gray-100">
            <h2 id="info-title" class="text-3xl font-bold mb-4">Loading...</h2>
            <p id="info-description" class="text-gray-300 mb-6">Loading...</p>
            <h3 class="text-lg font-semibold text-gray-300 mb-3">Price Sheet Assets:</h3>
            <div id="info-images" class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4"></div>
        </div>

        <h2 class="text-2xl font-semibold text-gray-300 mb-6">Active Commissions</h2>
        <div id="commissions-list" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 scroll-container max-h-[70vh] overflow-y-auto">
            <div class="col-span-3 text-center p-8 bg-gray-800 rounded-xl shadow-inner border-dashed border-2 border-gray-600">
                <p class="text-gray-300 font-semibold">Loading data...</p>
            </div>
        </div>
    </div>
    
    </div>
</body>
</html>"""

if __name__ == "__main__":
    main()