#!/bin/bash

# Simple Browser Log Collection - Manual but Reliable
# This script helps you collect browser logs step-by-step with clear instructions

set -e

BASE_URL="http://localhost:3030"
TIMESTAMP=$(date +"%Y%m%d_%H%M%S")
LOG_DIR="simple-browser-logs-${TIMESTAMP}"

# Colors
GREEN='\033[0;32m'
BLUE='\033[0;34m'
YELLOW='\033[1;33m'
RED='\033[0;31m'
NC='\033[0m'

echo -e "${BLUE}🔍 Simple Browser Log Collection${NC}"
echo -e "${BLUE}=================================${NC}"
echo ""

# Get pages to test
if [ $# -eq 0 ]; then
    pages=("/" "/contact" "/about")
    echo -e "${BLUE}📋 Testing default pages: ${pages[*]}${NC}"
else
    IFS=',' read -ra pages <<< "$1"
    echo -e "${BLUE}📋 Testing specified pages: ${pages[*]}${NC}"
fi

# Create log directory
mkdir -p "$LOG_DIR"
echo -e "${GREEN}✅ Created directory: $LOG_DIR${NC}"
echo ""

# Process each page
for i in "${!pages[@]}"; do
    page="${pages[$i]}"
    page_num=$((i + 1))
    total_pages=${#pages[@]}
    page_name=$(echo "$page" | sed 's|/||g' | sed 's|^$|root|')
    
    echo "[$page_num/$total_pages] =========================================="
    echo -e "${YELLOW}🔍 Page: $page${NC}"
    echo -e "${BLUE}📱 URL: $BASE_URL$page${NC}"
    echo ""
    
    # Step 1: Open browser
    echo -e "${BLUE}Step 1: Opening browser...${NC}"
    osascript -e "
    tell application \"Google Chrome\"
        if not (exists window 1) then
            make new window
        end if
        set URL of active tab of window 1 to \"$BASE_URL$page\"
        activate
    end tell
    " 2>/dev/null || {
        echo -e "${RED}❌ Failed to open Chrome${NC}"
        continue
    }
    
    echo -e "${GREEN}✅ Browser opened to: $BASE_URL$page${NC}"
    echo ""
    
    # Step 2: Wait for hydration
    echo -e "${BLUE}Step 2: Waiting for page hydration (8 seconds)...${NC}"
    sleep 8
    echo -e "${GREEN}✅ Hydration period completed${NC}"
    echo ""
    
    # Step 3: Instructions for Claude Code
    echo -e "${YELLOW}Step 3: Now collect browser logs in Claude Code:${NC}"
    echo ""
    echo -e "${BLUE}   Run these MCP tools in Claude Code:${NC}"
    echo -e "   ${BLUE}1. mcp__browser-tools__getConsoleLogs${NC}"
    echo -e "   ${BLUE}2. mcp__browser-tools__getConsoleErrors${NC}"
    echo -e "   ${BLUE}3. mcp__browser-tools__getNetworkErrors${NC}"
    echo ""
    
    # Create placeholder log file
    log_file="$LOG_DIR/${page_name}.log"
    cat > "$log_file" << EOF
========================================
Simple Browser Log Collection: $page_name
URL: $BASE_URL$page
Timestamp: $(date)
========================================

[$(date '+%H:%M:%S')] Browser opened to $BASE_URL$page
[$(date '+%H:%M:%S')] Page hydration completed
[$(date '+%H:%M:%S')] Ready for MCP log collection

--- PASTE CLAUDE CODE MCP RESULTS BELOW ---

=== CONSOLE LOGS ===
(Paste mcp__browser-tools__getConsoleLogs results here)

=== CONSOLE ERRORS ===
(Paste mcp__browser-tools__getConsoleErrors results here)

=== NETWORK ERRORS ===
(Paste mcp__browser-tools__getNetworkErrors results here)

--- END MCP RESULTS ---

Log file: $log_file
EOF
    
    echo -e "${GREEN}✅ Created log file: ${page_name}.log${NC}"
    echo -e "${BLUE}   You can paste MCP results into: $log_file${NC}"
    echo ""
    
    # Wait for user
    if [ $page_num -lt $total_pages ]; then
        echo -e "${YELLOW}Press Enter when you've collected the logs to continue to next page...${NC}"
        read -r
        echo ""
    fi
done

echo "=========================================="
echo -e "${GREEN}🎉 Collection completed!${NC}"
echo ""
echo -e "${BLUE}📁 Log directory: $LOG_DIR${NC}"
echo -e "${BLUE}📋 Log files created:${NC}"
for page in "${pages[@]}"; do
    page_name=$(echo "$page" | sed 's|/||g' | sed 's|^$|root|')
    echo -e "   ${BLUE}- ${page_name}.log${NC}"
done
echo ""
echo -e "${YELLOW}💡 Next steps:${NC}"
echo -e "   ${BLUE}1. Paste MCP results into each log file${NC}"
echo -e "   ${BLUE}2. Use files for error analysis${NC}"
echo -e "   ${BLUE}3. Compare patterns across pages${NC}"
echo ""