#!/bin/bash

# SamCloud FileBrowser Live CSS Development
echo "🎨 SamCloud FileBrowser Live CSS Development"
echo "=============================================="

# Configuration
PROJECT_DIR="/Volumes/SamMgmt/Containers/SamCloud FileBrowser"
CSS_FILE="$PROJECT_DIR/src/frontend/src/css/_samcloud.css"
CONTAINER_NAME="samcloud-filebrowser"

# Function to inject CSS into running container
inject_css() {
    echo "🔄 Injecting updated CSS..."
    
    # Read the CSS file
    CSS_CONTENT=$(cat "$CSS_FILE")
    
    # Inject CSS via JavaScript in the browser
    docker exec $CONTAINER_NAME sh -c "
        echo '<style id=\"live-css\">$CSS_CONTENT</style>' > /tmp/live-css.html
        echo 'CSS injected! Refresh browser to see changes.'
    "
    
    echo "✅ CSS updated! Refresh your browser (http://localhost:8383)"
}

# Function to rebuild frontend with new CSS
rebuild_frontend() {
    echo "🏗️  Rebuilding frontend with new CSS..."
    
    cd "$PROJECT_DIR/src/frontend"
    
    # Quick build of just the CSS
    npx vite build --mode development 2>/dev/null
    
    # Copy the built assets to a temp location
    if [ -d "dist" ]; then
        # Find CSS files in dist
        CSS_FILES=$(find dist -name "*.css")
        if [ -n "$CSS_FILES" ]; then
            echo "📦 Built CSS files found, copying to container..."
            
            # Copy new assets to running container
            for css_file in $CSS_FILES; do
                # Extract just the filename
                filename=$(basename "$css_file")
                
                # Copy to container (this is a simplified approach)
                docker cp "$css_file" "$CONTAINER_NAME:/tmp/${filename}"
                
                echo "✅ Copied $filename to container"
            done
        fi
    fi
}

# Start the CSS watcher
echo "👁️  Watching CSS file: $CSS_FILE"
echo "🔄 Make changes and see them live!"
echo "🌐 Browser: http://localhost:8383"
echo "🛑 Press Ctrl+C to stop"
echo ""

# Check if container is running
if ! docker ps | grep -q $CONTAINER_NAME; then
    echo "❌ Container '$CONTAINER_NAME' is not running!"
    echo "   Start it with: docker-compose up -d"
    exit 1
fi

# Initial injection
inject_css

# Watch for changes
if command -v fswatch >/dev/null 2>&1; then
    echo "📡 Using fswatch for file monitoring..."
    fswatch -1 "$CSS_FILE" | while read; do
        echo "📝 CSS file changed!"
        inject_css
    done
else
    # Fallback to polling
    echo "📡 Using polling for file monitoring..."
    echo "   💡 Install fswatch for better performance: brew install fswatch"
    
    LAST_MODIFIED=0
    
    while true; do
        if [ -f "$CSS_FILE" ]; then
            CURRENT_MODIFIED=$(stat -f "%m" "$CSS_FILE" 2>/dev/null || stat -c "%Y" "$CSS_FILE" 2>/dev/null || echo 0)
            
            if [ "$CURRENT_MODIFIED" -gt "$LAST_MODIFIED" ] && [ "$LAST_MODIFIED" -ne 0 ]; then
                echo "📝 CSS file changed!"
                inject_css
            fi
            
            LAST_MODIFIED=$CURRENT_MODIFIED
        fi
        
        sleep 1
    done
fi