package hrp

import (
	"bufio"
	"encoding/base64"
	"encoding/json"
	"fmt"
	"html/template"
	"os"
	"path/filepath"
	"strings"
	"time"

	"github.com/httprunner/httprunner/v5/internal/builtin"
	"github.com/httprunner/httprunner/v5/uixt"
	"github.com/pkg/errors"
	"github.com/rs/zerolog/log"
)

// GenerateHTMLReportFromFiles is a convenience function to generate HTML report
func GenerateHTMLReportFromFiles(summaryFile, logFile, outputFile string) error {
	generator, err := NewHTMLReportGenerator(summaryFile, logFile)
	if err != nil {
		return errors.Wrap(err, "failed to create HTML report generator")
	}
	err = generator.GenerateReport(outputFile)
	if err != nil {
		return errors.Wrap(err, "failed to generate HTML report")
	}
	return nil
}

// HTMLReportGenerator generates comprehensive HTML test reports
type HTMLReportGenerator struct {
	SummaryFile    string
	LogFile        string
	SummaryData    *Summary
	LogData        []LogEntry
	ReportDir      string
	SummaryContent string // Raw summary.json content for download
	LogContent     string // Raw hrp.log content for download
}

// LogEntry represents a single log entry
type LogEntry struct {
	Time    string         `json:"time"`
	Level   string         `json:"level"`
	Message string         `json:"message"`
	Fields  map[string]any `json:"-"` // Store all other fields
}

// NewHTMLReportGenerator creates a new HTML report generator
func NewHTMLReportGenerator(summaryFile, logFile string) (*HTMLReportGenerator, error) {
	generator := &HTMLReportGenerator{
		SummaryFile: summaryFile,
		LogFile:     logFile,
		ReportDir:   filepath.Dir(summaryFile),
	}

	// Load summary data
	if err := generator.loadSummaryData(); err != nil {
		return nil, fmt.Errorf("failed to load summary data: %w", err)
	}

	// Load log data if provided
	if logFile != "" {
		if err := generator.loadLogData(); err != nil {
			log.Warn().Err(err).Msg("failed to load log data, continuing without logs")
		}
	}

	return generator, nil
}

// loadSummaryData loads test summary data from JSON file
func (g *HTMLReportGenerator) loadSummaryData() error {
	data, err := os.ReadFile(g.SummaryFile)
	if err != nil {
		return err
	}

	// Parse JSON data first
	g.SummaryData = &Summary{}
	err = json.Unmarshal(data, g.SummaryData)
	if err != nil {
		return err
	}

	// Re-encode the summary data to ensure proper UTF-8 encoding for download
	// This fixes Chinese character encoding issues in legacy summary.json files
	buffer := new(strings.Builder)
	encoder := json.NewEncoder(buffer)
	encoder.SetEscapeHTML(false)
	encoder.SetIndent("", "    ")

	err = encoder.Encode(g.SummaryData)
	if err != nil {
		// Fallback to original content if re-encoding fails
		g.SummaryContent = string(data)
		return nil
	}

	// Store the properly encoded content for download
	g.SummaryContent = strings.TrimSpace(buffer.String())

	return nil
}

// loadLogData loads test log data from log file
func (g *HTMLReportGenerator) loadLogData() error {
	if g.LogFile == "" || !builtin.FileExists(g.LogFile) {
		return nil
	}

	// Read raw log content for download
	logData, err := os.ReadFile(g.LogFile)
	if err != nil {
		return err
	}
	g.LogContent = string(logData)

	file, err := os.Open(g.LogFile)
	if err != nil {
		return err
	}
	defer file.Close()

	scanner := bufio.NewScanner(file)
	for scanner.Scan() {
		line := strings.TrimSpace(scanner.Text())
		if line == "" {
			continue
		}

		// First parse into a generic map to get all fields
		var rawEntry map[string]any
		if err := json.Unmarshal([]byte(line), &rawEntry); err != nil {
			// Skip invalid JSON lines
			continue
		}

		// Create LogEntry with basic fields
		logEntry := LogEntry{
			Fields: make(map[string]any),
		}

		// Extract standard fields
		if time, ok := rawEntry["time"].(string); ok {
			logEntry.Time = time
		}
		if level, ok := rawEntry["level"].(string); ok {
			logEntry.Level = level
		}
		if message, ok := rawEntry["message"].(string); ok {
			logEntry.Message = message
		}

		// Store all other fields in Fields map
		for key, value := range rawEntry {
			if key != "time" && key != "level" && key != "message" {
				logEntry.Fields[key] = value
			}
		}

		g.LogData = append(g.LogData, logEntry)
	}

	return scanner.Err()
}

// getStepLogs filters log entries for a specific test step based on time range
func (g *HTMLReportGenerator) getStepLogs(stepName string, startTime int64, elapsed int64) []LogEntry {
	if len(g.LogData) == 0 {
		return nil
	}

	var stepLogs []LogEntry

	// startTime is in seconds, elapsed is in milliseconds
	// Calculate end time (startTime in seconds + elapsed in milliseconds converted to seconds)
	endTime := startTime + elapsed/1000

	// Convert Unix timestamps to time.Time for comparison
	startTimeObj := time.Unix(startTime, 0)
	endTimeObj := time.Unix(endTime, 0)

	for _, logEntry := range g.LogData {
		// Parse log entry time
		logTime, err := g.parseLogTime(logEntry.Time)
		if err != nil {
			continue
		}

		// Check if log entry falls within step time range
		if (logTime.Equal(startTimeObj) || logTime.After(startTimeObj)) &&
			(logTime.Equal(endTimeObj) || logTime.Before(endTimeObj)) {
			stepLogs = append(stepLogs, logEntry)
		}
	}

	return stepLogs
}

// parseLogTime parses various time formats from log entries
func (g *HTMLReportGenerator) parseLogTime(timeStr string) (time.Time, error) {
	// Handle different time formats that might appear in logs
	formats := []string{
		time.RFC3339Nano,
		time.RFC3339,
		"2006-01-02T15:04:05.000Z07:00",
		"2006-01-02T15:04:05.000+08:00",
		"2006-01-02T15:04:05Z07:00",
		"2006-01-02T15:04:05+08:00",
		"2006-01-02T15:04:05.000Z",
		"2006-01-02T15:04:05Z",
	}

	// Replace common timezone formats
	timeStr = strings.ReplaceAll(timeStr, "Z", "+00:00")
	timeStr = strings.ReplaceAll(timeStr, "+0800", "+08:00")

	for _, format := range formats {
		if t, err := time.Parse(format, timeStr); err == nil {
			return t, nil
		}
	}

	return time.Time{}, fmt.Errorf("unable to parse time: %s", timeStr)
}

// encodeImageToBase64 encodes an image file to base64 string with compression
func (g *HTMLReportGenerator) encodeImageToBase64(imagePath string) string {
	// Convert relative path to absolute path
	if !filepath.IsAbs(imagePath) {
		imagePath = filepath.Join(g.ReportDir, imagePath)
	}

	if !builtin.FileExists(imagePath) {
		log.Warn().Str("path", imagePath).Msg("image file not found")
		return ""
	}

	// Read and compress the image using the unified compression function
	// Enable resize with max width 800px for HTML reports
	compressedData, err := uixt.CompressImageFile(imagePath, true, 800)
	if err != nil {
		log.Warn().Err(err).Str("path", imagePath).Msg("failed to compress image, using original")
		// Fallback to original image if compression fails
		data, readErr := os.ReadFile(imagePath)
		if readErr != nil {
			log.Warn().Err(readErr).Str("path", imagePath).Msg("failed to read image file")
			return ""
		}
		return base64.StdEncoding.EncodeToString(data)
	}

	return base64.StdEncoding.EncodeToString(compressedData)
}

// formatDuration formats duration from milliseconds to human readable format
func (g *HTMLReportGenerator) formatDuration(duration any) string {
	var durationMs float64

	switch v := duration.(type) {
	case int64:
		durationMs = float64(v)
	case float64:
		durationMs = v
	case int:
		durationMs = float64(v)
	default:
		return "0ms"
	}

	if durationMs < 1000 {
		return fmt.Sprintf("%.0fms", durationMs)
	} else if durationMs < 60000 {
		return fmt.Sprintf("%.1fs", durationMs/1000)
	} else {
		minutes := int(durationMs / 60000)
		seconds := (durationMs - float64(minutes*60000)) / 1000
		return fmt.Sprintf("%dm %.1fs", minutes, seconds)
	}
}

// getStepLogsForTemplate is a template function to get filtered logs for a step
func (g *HTMLReportGenerator) getStepLogsForTemplate(step *StepResult) []LogEntry {
	if step == nil {
		return nil
	}
	return g.getStepLogs(step.Name, step.StartTime, step.Elapsed)
}

// calculateTotalActions calculates the total number of actions across all test cases
func (g *HTMLReportGenerator) calculateTotalActions() int {
	total := 0
	if g.SummaryData == nil || g.SummaryData.Details == nil {
		return total
	}

	for _, testCase := range g.SummaryData.Details {
		if testCase.Records == nil {
			continue
		}
		for _, step := range testCase.Records {
			if step.Actions != nil {
				total += len(step.Actions)
			}
		}
	}
	return total
}

// calculateTotalSubActions calculates the total number of sub-actions across all test cases
func (g *HTMLReportGenerator) calculateTotalSubActions() int {
	total := 0
	if g.SummaryData == nil || g.SummaryData.Details == nil {
		return total
	}

	for _, testCase := range g.SummaryData.Details {
		if testCase.Records == nil {
			continue
		}
		for _, step := range testCase.Records {
			if step.Actions != nil {
				for _, action := range step.Actions {
					// Count sub-actions from regular actions
					if action.SubActions != nil {
						total += len(action.SubActions)
					}
					// Count sub-actions from planning results
					if action.Plannings != nil {
						for _, planning := range action.Plannings {
							if planning.SubActions != nil {
								total += len(planning.SubActions)
							}
						}
					}
				}
			}
		}
	}
	return total
}

// calculateTotalPlannings calculates the total number of planning results across all test cases
func (g *HTMLReportGenerator) calculateTotalPlannings() int {
	total := 0
	if g.SummaryData == nil || g.SummaryData.Details == nil {
		return total
	}

	for _, testCase := range g.SummaryData.Details {
		if testCase.Records == nil {
			continue
		}
		for _, step := range testCase.Records {
			if step.Actions != nil {
				for _, action := range step.Actions {
					if action.Plannings != nil {
						total += len(action.Plannings)
					}
				}
			}
		}
	}
	return total
}

// calculateTotalUsage calculates the total token usage across all test cases
func (g *HTMLReportGenerator) calculateTotalUsage() map[string]interface{} {
	totalUsage := map[string]interface{}{
		"prompt_tokens":     0,
		"completion_tokens": 0,
		"total_tokens":      0,
	}

	if g.SummaryData == nil || g.SummaryData.Details == nil {
		return totalUsage
	}

	for _, testCase := range g.SummaryData.Details {
		if testCase.Records == nil {
			continue
		}
		for _, step := range testCase.Records {
			if step.Actions == nil {
				continue
			}
			for _, action := range step.Actions {
				if action.Plannings == nil {
					continue
				}
				for _, planning := range action.Plannings {
					if planning.Usage == nil {
						continue
					}
					totalUsage["prompt_tokens"] = totalUsage["prompt_tokens"].(int) + planning.Usage.PromptTokens
					totalUsage["completion_tokens"] = totalUsage["completion_tokens"].(int) + planning.Usage.CompletionTokens
					totalUsage["total_tokens"] = totalUsage["total_tokens"].(int) + planning.Usage.TotalTokens
				}
			}
		}
	}
	return totalUsage
}

// GenerateReport generates the complete HTML test report
func (g *HTMLReportGenerator) GenerateReport(outputFile string) error {
	if outputFile == "" {
		outputFile = filepath.Join(g.ReportDir, "report.html")
	}

	// Create template functions
	funcMap := template.FuncMap{
		"formatDuration":           g.formatDuration,
		"encodeImageBase64":        g.encodeImageToBase64,
		"getStepLogs":              g.getStepLogsForTemplate,
		"calculateTotalActions":    g.calculateTotalActions,
		"calculateTotalSubActions": g.calculateTotalSubActions,
		"calculateTotalPlannings":  g.calculateTotalPlannings,
		"calculateTotalUsage":      g.calculateTotalUsage,
		"getSummaryContentBase64": func() string {
			return base64.StdEncoding.EncodeToString([]byte(g.SummaryContent))
		},
		"getLogContentBase64": func() string {
			return base64.StdEncoding.EncodeToString([]byte(g.LogContent))
		},
		"safeHTML": func(s string) template.HTML {
			return template.HTML(s)
		},
		"toJSON": func(v any) string {
			var buf strings.Builder
			encoder := json.NewEncoder(&buf)
			encoder.SetEscapeHTML(false)
			_ = encoder.Encode(v)
			result := buf.String()
			return strings.TrimSpace(result)
		},
		"mul":   func(a, b float64) float64 { return a * b },
		"add":   func(a, b int) int { return a + b },
		"sub":   func(a, b int) int { return a - b },
		"lt":    func(a, b int) bool { return a < b },
		"gt":    func(a, b int) bool { return a > b },
		"base":  filepath.Base,
		"index": func(m map[string]any, key string) any { return m[key] },
	}

	// Parse template
	tmpl, err := template.New("report").Funcs(funcMap).Parse(htmlTemplate)
	if err != nil {
		return fmt.Errorf("failed to parse template: %w", err)
	}

	// Create output file with explicit UTF-8 handling
	file, err := os.OpenFile(outputFile, os.O_WRONLY|os.O_CREATE|os.O_TRUNC, 0o644)
	if err != nil {
		return fmt.Errorf("failed to create output file: %w", err)
	}
	defer file.Close()

	// Execute template (Go's html/template ensures UTF-8 encoding)
	if err := tmpl.Execute(file, g.SummaryData); err != nil {
		return fmt.Errorf("failed to execute template: %w", err)
	}

	// Ensure data is flushed to disk
	if err := file.Sync(); err != nil {
		return fmt.Errorf("failed to sync HTML report file: %w", err)
	}

	log.Info().Str("path", outputFile).Msg("HTML report generated successfully")
	return nil
}

// htmlTemplate contains the complete HTML template for test reports
const htmlTemplate = `<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HttpRunner Test Report</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f5f5f5;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 30px;
            border-radius: 10px;
            margin-bottom: 30px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }

        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .header-left h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
        }

        .header-left .subtitle {
            font-size: 1.2em;
            opacity: 0.9;
        }

        .header-right {
            text-align: right;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 15px;
        }

        .download-section {
            background: rgba(255, 255, 255, 0.2);
            padding: 15px 20px;
            border-radius: 8px;
            backdrop-filter: blur(10px);
            min-width: 240px;
            text-align: center;
        }

        .download-title {
            font-size: 0.9em;
            font-weight: 600;
            margin-bottom: 10px;
            opacity: 0.9;
        }

        .download-buttons {
            display: flex;
            gap: 10px;
            width: 100%;
        }

        .download-btn {
            background: rgba(255, 255, 255, 0.2);
            color: white;
            border: 2px solid rgba(255, 255, 255, 0.3);
            padding: 8px 12px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 0.85em;
            font-weight: 500;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
            text-decoration: none;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            flex: 1;
            text-align: center;
        }

        .download-btn:hover {
            background: rgba(255, 255, 255, 0.3);
            border-color: rgba(255, 255, 255, 0.5);
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }

        .download-btn:active {
            transform: translateY(0);
        }

        .summary {
            background: white;
            padding: 25px;
            border-radius: 10px;
            margin-bottom: 30px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .summary h2 {
            color: #2c3e50;
            margin-bottom: 20px;
            border-bottom: 2px solid #3498db;
            padding-bottom: 10px;
        }

        .summary-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 20px;
        }

        .summary-item {
            text-align: center;
            padding: 15px;
            border-radius: 8px;
            background: #f8f9fa;
        }

        .summary-item.success {
            background: #d4edda;
            border: 1px solid #c3e6cb;
        }

        .summary-item.failure {
            background: #f8d7da;
            border: 1px solid #f5c6cb;
        }

        .summary-item .value {
            font-size: 2em;
            font-weight: bold;
            color: #2c3e50;
        }

        .summary-item .label {
            color: #6c757d;
            margin-top: 5px;
        }

        .platform-info {
            background: #e9ecef;
            padding: 20px;
            border-radius: 8px;
            margin-top: 20px;
        }

        .platform-info h3 {
            margin-bottom: 15px;
            color: #495057;
        }

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

        .platform-item {
            background: white;
            padding: 15px;
            border-radius: 8px;
            text-align: center;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .platform-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        }

        .platform-label {
            font-size: 1.0em;
            color: #6c757d;
            margin-bottom: 8px;
            font-weight: 500;
        }

        .platform-value {
            font-size: 0.9em;
            font-weight: bold;
            color: #2c3e50;
            word-break: break-all;
        }

        .controls {
            background: white;
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 30px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            text-align: center;
        }

        .controls button {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            padding: 12px 24px;
            margin: 0 10px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.3s ease;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .controls button:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }

        .controls button:active {
            transform: translateY(0);
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .test-cases {
            margin-top: 20px;
        }

        .test-case {
            background: white;
            margin-bottom: 40px;
            border-radius: 15px;
            box-shadow: 0 6px 12px rgba(0,0,0,0.1);
            overflow: hidden;
            border: 2px solid #e9ecef;
            padding-bottom: 8px;
        }

        .test-case h2 {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            color: #495057;
            margin: 0;
            padding: 20px 30px;
            font-size: 1.5em;
            font-weight: 600;
            border-bottom: 2px solid #dee2e6;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .case-info {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .step-container {
            background: white;
            margin-bottom: 8px;
            border-radius: 12px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            overflow: hidden;
            border: 1px solid #e9ecef;
        }

        .step-container:first-of-type {
            margin-top: 8px;
        }

        .step-header {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            padding: 25px 30px;
            cursor: pointer;
            border-bottom: 2px solid #dee2e6;
            transition: all 0.3s ease;
        }

        .step-header:hover {
            background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .step-header h3 {
            display: flex;
            align-items: center;
            gap: 20px;
            margin: 0;
            font-size: 1.3em;
            font-weight: 500;
        }

        .step-info-group {
            margin-left: auto;
            display: flex;
            align-items: center;
            gap: 12px;
            min-width: 300px;
            justify-content: flex-end;
        }

        .step-status {
            min-width: 70px;
            text-align: center;
        }

        .step-duration {
            min-width: 80px;
            text-align: center;
        }

        .step-type-fixed {
            min-width: 120px;
            text-align: center;
        }

        .step-number {
            background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
            color: white;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.0em;
            font-weight: bold;
            box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3);
        }

        .status-badge {
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 0.85em;
            font-weight: bold;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .status-badge.success {
            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
            color: white;
        }

        .status-badge.failure {
            background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
            color: white;
        }

        .duration {
            background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
            color: white;
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 0.8em;
            box-shadow: 0 1px 3px rgba(0,0,0,0.2);
        }

        .toggle-icon {
            margin-left: auto;
            font-size: 0.8em;
            transition: transform 0.3s;
        }

        .toggle-icon.rotated {
            transform: rotate(-90deg);
        }

        .step-type {
            background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
            color: white;
            padding: 3px 10px;
            border-radius: 12px;
            font-size: 0.8em;
            box-shadow: 0 1px 3px rgba(0,0,0,0.2);
        }

        .step-content {
            padding: 30px;
            display: none;
            background: #fafbfc;
            border-top: 1px solid #e9ecef;
        }

        .step-content.show {
            display: block;
        }

        .actions-section, .validators-section, .screenshots-section, .logs-section {
            margin-bottom: 30px;
        }

        .actions-section h4, .validators-section h4, .screenshots-section h4, .logs-section h4 {
            color: #495057;
            margin-bottom: 20px;
            padding-bottom: 12px;
            border-bottom: 2px solid #dee2e6;
            font-size: 1.2em;
            font-weight: 600;
        }

        .action-item {
            background: white;
            border: 2px solid #e9ecef;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 6px rgba(0,0,0,0.08);
            transition: all 0.3s ease;
        }

        .action-item:hover {
            border-color: #007bff;
            box-shadow: 0 4px 12px rgba(0, 123, 255, 0.15);
            transform: translateY(-1px);
        }

        .action-header {
            display: flex;
            align-items: center;
            gap: 18px;
            margin-bottom: 15px;
            cursor: pointer;
            transition: all 0.3s ease;
            padding: 12px 15px;
            border-radius: 8px;
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border: 1px solid #dee2e6;
        }

        .action-header:hover {
            background: linear-gradient(135deg, rgba(0, 123, 255, 0.1) 0%, rgba(0, 123, 255, 0.05) 100%);
            border-color: #007bff;
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2);
        }

        .action-header strong {
            color: #007bff;
            font-size: 1.1em;
            font-weight: 600;
        }

        .action-description {
            color: #6c757d;
            font-style: italic;
            margin: 10px 0;
            padding: 10px 15px;
            white-space: pre-wrap;
            word-wrap: break-word;
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 4px;
            font-size: 0.9em;
            line-height: 1.4;
        }

        .action-toggle {
            margin-left: auto;
            font-size: 0.8em;
            color: #6c757d;
            transition: transform 0.3s;
        }

        .action-toggle.rotated {
            transform: rotate(-90deg);
        }

        .action-toggle.collapsed {
            transform: rotate(-90deg);
        }

        .action-content {
            display: none;
        }

        .action-content.expanded {
            display: block;
        }

        .error {
            color: #dc3545;
            font-weight: bold;
        }

        .planning-results {
            margin-top: 15px;
            padding: 15px;
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border: 1px solid #dee2e6;
            border-radius: 12px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .planning-item {
            background: white;
            border: 1px solid #dee2e6;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 15px;
        }

        .planning-item:last-child {
            margin-bottom: 0;
        }

        .planning-header {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #dee2e6;
        }

        .planning-label {
            background: #007bff;
            color: white;
            padding: 4px 12px;
            border-radius: 15px;
            font-size: 0.9em;
            font-weight: bold;
        }



        .planning-three-columns {
            display: flex;
            gap: 20px;
            margin: 15px 0;
        }

        .planning-column-screenshot {
            flex: 0.9;
            min-width: 250px;
            max-width: 35%;
        }

        .planning-column-right-container {
            flex: 1.6;
            min-width: 350px;
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .planning-column-model, .planning-column-actions {
            flex: 1;
            min-width: 0;
        }

        .planning-step-compact {
            background: white;
            border: 1px solid #dee2e6;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            height: fit-content;
        }

        .planning-column-screenshot .planning-step-compact {
            height: auto;
        }

        .step-header-compact {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            padding: 10px 12px;
            border-bottom: 1px solid #dee2e6;
            border-radius: 8px 8px 0 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .step-name {
            font-weight: 600;
            color: #495057;
            font-size: 0.9em;
        }

        .screenshot-display {
            padding: 12px;
        }

        .screenshot-item-compact {
            text-align: center;
        }

        .screenshot-item-compact .screenshot-image {
            padding: 15px;
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border-radius: 6px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            overflow: hidden;
        }

        .screenshot-item-compact .screenshot-image img {
            width: 100%;
            height: auto;
            max-height: 400px;
            border-radius: 4px;
            cursor: pointer;
            transition: transform 0.2s;
            object-fit: contain;
            box-shadow: 0 2px 6px rgba(0,0,0,0.1);
            display: block;
        }

        /* Handle very tall screenshots */
        .screenshot-item-compact .screenshot-image img[style*="height"] {
            max-height: 400px;
            width: auto;
            max-width: 100%;
        }

        .screenshot-item-compact .screenshot-image img:hover {
            transform: scale(1.02);
        }

        .actions-details {
            padding: 12px;
            max-height: 300px;
            overflow-y: auto;
        }

        .action-detail-item {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 6px;
            padding: 8px;
            margin: 6px 0;
            font-size: 0.85em;
        }

        .action-detail-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 6px;
        }

        .action-detail-header .action-name {
            background: #6f42c1;
            color: white;
            padding: 2px 6px;
            border-radius: 10px;
            font-size: 0.8em;
            font-weight: bold;
        }

        .action-detail-header .duration {
            background: #6c757d;
            color: white;
            padding: 1px 4px;
            border-radius: 8px;
            font-size: 0.75em;
        }

        .action-detail-header .success {
            color: #28a745;
            font-size: 0.9em;
        }

        .action-detail-header .error {
            color: #dc3545;
            font-size: 0.9em;
        }

        .action-arguments {
            background: #ffffff;
            border: 1px solid #dee2e6;
            border-radius: 4px;
            padding: 4px 6px;
            margin: 4px 0;
            font-family: monospace;
            font-size: 0.8em;
            color: #495057;
            word-break: break-all;
        }

        .action-requests {
            margin-top: 6px;
        }

        .requests-toggle-compact {
            background: #6c757d;
            color: white;
            border: none;
            padding: 4px 8px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.8em;
            margin-bottom: 6px;
            transition: background-color 0.3s;
            display: block;
            width: 100%;
            text-align: left;
        }

        .requests-toggle-compact:hover {
            background: #5a6268;
        }

        .requests-content-compact {
            display: none;
        }

        .requests-content-compact.show {
            display: block;
        }

        .request-item-compact {
            background: #ffffff;
            border: 1px solid #e9ecef;
            border-radius: 4px;
            padding: 6px;
            margin: 4px 0;
            font-size: 0.75em;
        }

        .request-header-compact {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 4px;
            flex-wrap: wrap;
        }

        .request-header-compact .method {
            background: #007bff;
            color: white;
            padding: 1px 4px;
            border-radius: 3px;
            font-size: 0.7em;
            font-weight: bold;
        }

        .url-compact {
            color: #495057;
            font-family: monospace;
            font-size: 0.7em;
            word-break: break-all;
            flex: 1;
            min-width: 0;
        }

        .request-header-compact .status.success {
            color: #28a745;
            font-weight: bold;
            font-size: 0.7em;
        }

        .request-header-compact .status.failure {
            color: #dc3545;
            font-weight: bold;
            font-size: 0.7em;
        }

        .request-header-compact .duration {
            background: #6c757d;
            color: white;
            padding: 1px 4px;
            border-radius: 8px;
            font-size: 0.7em;
            font-weight: 500;
        }

        .request-body-compact, .response-body-compact {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 3px;
            padding: 4px;
            margin: 2px 0;
            font-family: monospace;
            font-size: 0.7em;
            max-height: 60px;
            overflow-y: auto;
            word-break: break-all;
        }

        .model-output-compact {
            padding: 12px;
        }

        .model-info, .tool-calls-info, .actions-info, .usage-info {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 4px;
            padding: 8px 10px;
            margin: 6px 0;
            font-size: 0.85em;
            color: #495057;
        }

        @media screen and (max-width: 768px) {
            .planning-three-columns {
                flex-direction: column;
                gap: 15px;
            }

            .planning-column-screenshot {
                flex: none;
                min-width: auto;
                max-width: none;
            }

            .planning-column-right-container {
                flex: none;
                min-width: auto;
                gap: 10px;
            }

            .screenshot-item-compact .screenshot-image {
                padding: 10px;
            }

            .screenshot-item-compact .screenshot-image img {
                width: 100%;
                height: auto;
            }
        }

        .raw-content {
            margin-top: 10px;
        }

        .raw-content pre {
            background: #f1f3f4;
            border: 1px solid #dadce0;
            border-radius: 4px;
            padding: 8px;
            font-size: 0.8em;
            max-height: 150px;
            overflow-y: auto;
            white-space: pre-wrap;
            word-wrap: break-word;
        }

        .step-screenshots {
            margin-top: 10px;
        }

        .action-details {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .action-details .action-name {
            background: #6f42c1;
            color: white;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 0.8em;
            font-weight: bold;
        }

        .action-details .action-desc {
            color: #6c757d;
            font-style: italic;
            font-size: 0.9em;
        }







        .thought {
            background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
            border: 2px solid #2196f3;
            border-radius: 12px;
            padding: 15px;
            margin: 10px 0;
            font-style: italic;
            color: #1565c0;
            font-size: 1.0em;
            font-weight: 500;
            box-shadow: 0 2px 8px rgba(33, 150, 243, 0.15);
            display: flex;
            align-items: flex-start;
            gap: 10px;
        }

        .thought::before {
            content: "💭";
            font-size: 1.2em;
            flex-shrink: 0;
            margin-top: 0px;
            line-height: 1;
        }

        .model-name-container {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 6px;
            padding: 8px 12px;
            margin: 8px 0;
            font-size: 0.9em;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .model-label {
            font-weight: 600;
            color: #495057;
        }

        .model-value {
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            background: #e9ecef;
            padding: 2px 6px;
            border-radius: 4px;
            color: #495057;
            font-size: 0.85em;
        }

        .arguments {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 4px;
            padding: 6px;
            margin: 6px 0;
            font-family: monospace;
            font-size: 0.9em;
        }

        .requests {
            margin-top: 15px;
        }

        .requests-toggle {
            background: #6c757d;
            color: white;
            border: none;
            padding: 6px 12px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.8em;
            margin-bottom: 10px;
            transition: background-color 0.3s;
        }

        .requests-toggle:hover {
            background: #5a6268;
        }

        .requests-content {
            display: none;
        }

        .requests-content.show {
            display: block;
        }

        .request-item {
            background: #f1f3f4;
            border: 1px solid #dadce0;
            border-radius: 4px;
            padding: 8px;
            margin: 6px 0;
        }

        .request-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 6px;
        }

        .method {
            background: #007bff;
            color: white;
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 0.8em;
            font-weight: bold;
        }

        .url {
            color: #495057;
            font-family: monospace;
            font-size: 0.9em;
        }

        .status {
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 0.8em;
            font-weight: bold;
        }

        .status.success {
            background: #d4edda;
            color: #155724;
        }

        .status.failure {
            background: #f8d7da;
            color: #721c24;
        }

        .request-body, .response-body {
            background: #ffffff;
            border: 1px solid #e9ecef;
            border-radius: 4px;
            padding: 6px;
            margin: 4px 0;
            font-family: monospace;
            font-size: 0.8em;
            max-height: 100px;
            overflow-y: auto;
        }

        .screenshots-section {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border: 2px solid #28a745;
            border-radius: 12px;
            padding: 12px;
            box-shadow: 0 4px 12px rgba(40, 167, 69, 0.15);
        }

        .screenshots-section h4 {
            color: #155724;
            margin-bottom: 10px;
            font-size: 1.0em;
            font-weight: 600;
        }

        .screenshots-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 10px;
        }

        .screenshot-item {
            background: white;
            border: 1px solid #dee2e6;
            border-radius: 8px;
            padding: 10px;
            margin-bottom: 15px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .screenshot-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        }

        .screenshot-item.small {
            margin-bottom: 10px;
        }

        .screenshot-info {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 8px;
        }

        .filename {
            font-family: monospace;
            font-size: 0.9em;
            color: #495057;
        }

        .resolution {
            background: #6c757d;
            color: white;
            padding: 2px 6px;
            border-radius: 10px;
            font-size: 0.8em;
        }

        .screenshot-image {
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 300px;
            padding: 20px 0;
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border-radius: 8px;
            margin: 10px 0;
        }

        .screenshot-image img {
            max-width: 100%;
            max-height: 400px;
            border-radius: 6px;
            cursor: pointer;
            transition: transform 0.2s;
            object-fit: contain;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        .screenshot-image img:hover {
            transform: scale(1.02);
        }

        .screenshot-item.small .screenshot-image {
            min-height: 250px;
            padding: 15px 0;
        }

        .screenshot-item.small .screenshot-image img {
            max-height: 200px;
        }

        .validator-item {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 8px;
            padding: 12px;
            margin-bottom: 10px;
        }

        .validator-item.success {
            border-color: #28a745;
            background: #d4edda;
        }

        .validator-item.failure {
            border-color: #dc3545;
            background: #f8d7da;
        }

        .validator-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 8px;
        }

        .check-type, .assert-type {
            background: #6c757d;
            color: white;
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 0.8em;
        }

        .result {
            font-weight: bold;
        }

        .validator-expect,         .validator-message {
            margin: 4px 0;
            font-size: 0.9em;
        }

        .logs-section {
            margin-top: 20px;
        }

        .logs-header {
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            padding: 8px;
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 6px;
            transition: background-color 0.3s;
            margin-bottom: 10px;
        }

        .logs-header:hover {
            background: #e9ecef;
        }

        .logs-header h4 {
            margin: 0;
            color: #495057;
        }

        .logs-toggle {
            margin-left: auto;
            font-size: 0.8em;
            color: #6c757d;
            transition: transform 0.3s;
        }

        .logs-toggle.collapsed {
            transform: rotate(-90deg);
        }

        .logs-container {
            max-height: 400px;
            overflow-y: auto;
            border: 1px solid #dee2e6;
            border-radius: 6px;
            background: #f8f9fa;
            display: none;
        }

        .logs-container.show {
            display: block;
        }

        .log-entry {
            border-bottom: 1px solid #e9ecef;
            padding: 4px 8px;
            font-family: monospace;
            font-size: 0.8em;
            line-height: 1.2;
        }

        .log-entry:last-child {
            border-bottom: none;
        }

        .log-entry.debug {
            background: #f8f9fa;
        }

        .log-entry.info {
            background: #d1ecf1;
        }

        .log-entry.warn {
            background: #fff3cd;
        }

        .log-entry.error {
            background: #f8d7da;
        }

        .log-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 2px;
            flex-wrap: nowrap;
            cursor: pointer;
            transition: background-color 0.2s;
        }

        .log-header:hover {
            background-color: rgba(0,0,0,0.05);
        }

        .log-time {
            color: #6c757d;
            font-size: 0.75em;
            white-space: nowrap;
            min-width: 180px;
        }

        .log-level {
            padding: 1px 4px;
            border-radius: 3px;
            font-size: 0.65em;
            font-weight: bold;
            text-transform: uppercase;
            min-width: 45px;
            text-align: center;
        }

        .log-level.debug {
            background: #6c757d;
            color: white;
        }

        .log-level.info {
            background: #17a2b8;
            color: white;
        }

        .log-level.warn {
            background: #ffc107;
            color: #212529;
        }

        .log-level.error {
            background: #dc3545;
            color: white;
        }

        .log-message {
            color: #495057;
            word-wrap: break-word;
            flex: 1;
            margin-left: 10px;
        }

        .log-toggle {
            color: #6c757d;
            font-size: 0.8em;
            margin-left: auto;
            transition: transform 0.3s;
        }

        .log-toggle.rotated {
            transform: rotate(-90deg);
        }

        .log-fields {
            background: #f8f9fa;
            border-left: 3px solid #dee2e6;
            padding: 2px 6px;
            margin: 2px 0;
            font-size: 0.75em;
            color: #6c757d;
            max-height: 80px;
            overflow-y: auto;
            word-break: break-all;
            transition: max-height 0.3s ease-out;
        }

        .log-fields.collapsed {
            max-height: 0;
            padding: 0 6px;
            margin: 0;
            overflow: hidden;
        }

        .controls {
            text-align: center;
            margin-bottom: 20px;
        }

        .controls button {
            background: #007bff;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            margin: 0 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .controls button:hover {
            background: #0056b3;
        }

        /* Modal styles */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.9);
        }

        .modal-content {
            margin: auto;
            display: block;
            width: 80%;
            max-width: 700px;
            max-height: 80%;
            object-fit: contain;
        }

        .close {
            position: absolute;
            top: 15px;
            right: 35px;
            color: #f1f1f1;
            font-size: 40px;
            font-weight: bold;
            transition: 0.3s;
            cursor: pointer;
        }

        .close:hover,
        .close:focus {
            color: #bbb;
            text-decoration: none;
        }

        /* Responsive design */
        @media screen and (max-width: 768px) {
            .container {
                padding: 10px;
            }

            .header-content {
                flex-direction: column;
                align-items: flex-start;
                gap: 20px;
            }

            .header-left h1 {
                font-size: 2em;
            }

            .header-right {
                text-align: center;
                width: 100%;
                flex-direction: column;
                align-items: center;
                gap: 15px;
            }

            .download-section {
                width: 100%;
                text-align: center;
                min-width: auto;
            }

            .download-buttons {
                justify-content: center;
                width: 100%;
            }

            .download-btn {
                padding: 6px 10px;
                font-size: 0.75em;
            }

            .platform-grid {
                grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
                gap: 10px;
            }

            .platform-item {
                padding: 12px;
            }

            .platform-label {
                font-size: 0.8em;
            }

            .platform-value {
                font-size: 1em;
            }

            .summary-grid {
                grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
                gap: 10px;
            }

            .step-header h3 {
                font-size: 1.2em;
                gap: 15px;
                flex-direction: column;
                align-items: flex-start;
            }

            .step-info-group {
                min-width: auto;
                width: 100%;
                justify-content: space-between;
                margin-left: 0;
                margin-top: 8px;
            }

            .step-status {
                min-width: 60px;
            }

            .step-duration {
                min-width: 70px;
            }

            .step-type-fixed {
                min-width: 100px;
            }

            .step-number {
                width: 32px;
                height: 32px;
                font-size: 0.9em;
            }

            .test-case h2 {
                font-size: 1.3em;
                padding: 15px 20px;
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
            }

            .case-info {
                align-self: flex-end;
            }

            .step-header {
                padding: 20px 25px;
            }

            .step-content {
                padding: 25px 20px;
            }

            .action-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 8px;
            }

            .controls button {
                padding: 6px 10px;
                font-size: 0.8em;
                margin: 2px;
            }

            .logs-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 5px;
            }

            .logs-header h4 {
                font-size: 0.9em;
            }

            .request-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 6px;
            }



            .screenshots-grid {
                grid-template-columns: 1fr;
                gap: 10px;
            }

            .screenshot-image {
                min-height: 250px;
                padding: 15px 0;
            }

            .screenshot-image img {
                max-height: 250px;
            }

            .screenshot-item.small .screenshot-image {
                min-height: 200px;
                padding: 10px 0;
            }

            .screenshot-item.small .screenshot-image img {
                max-height: 150px;
            }

            .log-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 4px;
            }

            .log-time {
                min-width: auto;
                font-size: 0.7em;
            }

            .log-level {
                min-width: 35px;
                font-size: 0.6em;
            }

            .log-message {
                margin-left: 0;
                font-size: 0.75em;
            }

            .log-fields {
                margin: 2px 0;
                font-size: 0.7em;
            }

            .log-fields.collapsed {
                margin: 0;
            }
        }

        .action-content {
            margin-top: 10px;
        }

        .action-content strong {
            color: #6f42c1;
            display: block;
            margin-bottom: 8px;
            font-size: 0.95em;
        }

        .action-output {
            background: #f8f9fa;
            border: 2px solid #6f42c1;
            border-radius: 6px;
            padding: 10px;
            font-size: 0.85em;
            max-height: 120px;
            overflow-y: auto;
            white-space: pre-wrap;
            word-wrap: break-word;
            color: #495057;
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            line-height: 1.4;
        }


    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="header-content">
                <div class="header-left">
                    <h1>🚀 HttpRunner Test Report</h1>
                    <div class="subtitle">Start Time: {{.Time.StartAt.Format "2006-01-02 15:04:05"}}</div>
                </div>
                <div class="header-right">
                    <div class="download-section">
                        <div class="download-title">📥 Download</div>
                        <div class="download-buttons">
                            <button class="download-btn" onclick="downloadSummary()">
                                <span>📄</span>
                                <span>summary.json</span>
                            </button>
                            <button class="download-btn" onclick="downloadLog()">
                                <span>📋</span>
                                <span>hrp.log</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="summary">
            <h2>📊 Test Summary</h2>
            <div class="summary-grid">
                <div class="summary-item success">
                    <div class="value">{{.Stat.TestCases.Success}}</div>
                    <div class="label">Passed TestCases</div>
                </div>
                <div class="summary-item failure">
                    <div class="value">{{.Stat.TestCases.Fail}}</div>
                    <div class="label">Failed TestCases</div>
                </div>
                <div class="summary-item">
                    <div class="value">{{.Stat.TestSteps.Total}}</div>
                    <div class="label">Total Steps</div>
                </div>
                <div class="summary-item">
                    <div class="value">{{calculateTotalActions}}</div>
                    <div class="label">Total Actions</div>
                </div>
                <div class="summary-item">
                    <div class="value">{{calculateTotalSubActions}}</div>
                    <div class="label">Total Sub-Actions</div>
                </div>
                <div class="summary-item">
                    <div class="value">{{calculateTotalPlannings}}</div>
                    <div class="label">Total Plannings</div>
                </div>
                <div class="summary-item">
                    <div class="value">{{printf "%.1f" .Time.Duration}}s</div>
                    <div class="label">Duration</div>
                </div>
                {{$usage := calculateTotalUsage}}
                <div class="summary-item">
                    <div class="value">{{index $usage "prompt_tokens"}}</div>
                    <div class="label">Input Tokens</div>
                </div>
                <div class="summary-item">
                    <div class="value">{{index $usage "completion_tokens"}}</div>
                    <div class="label">Output Tokens</div>
                </div>
                <div class="summary-item">
                    <div class="value">{{index $usage "total_tokens"}}</div>
                    <div class="label">Total Tokens</div>
                </div>
            </div>

            <div class="platform-info">
                <h3>🔧 Platform Information</h3>
                <div class="platform-grid">
                    <div class="platform-item">
                        <div class="platform-label">HttpRunner Version</div>
                        <div class="platform-value">{{.Platform.HttprunnerVersion}}</div>
                    </div>
                    <div class="platform-item">
                        <div class="platform-label">Go Version</div>
                        <div class="platform-value">{{.Platform.GoVersion}}</div>
                    </div>
                    <div class="platform-item">
                        <div class="platform-label">Platform</div>
                        <div class="platform-value">{{.Platform.Platform}}</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="controls">
            <button id="toggleStepsBtn" onclick="toggleAllSteps()">Collapse All Steps</button>
            <button id="toggleActionsBtn" onclick="toggleAllActions()">Expand All Actions</button>
        </div>

        <div class="test-cases">
            {{range $caseIndex, $testCase := .Details}}
            <div class="test-case">
                <h2>
                    <span>📋 {{$testCase.Name}}</span>
                    <div class="case-info">
                        <span class="status-badge {{if $testCase.Success}}success{{else}}failure{{end}}">
                            {{if $testCase.Success}}✓ PASS{{else}}✗ FAIL{{end}}
                        </span>
                        <span class="duration">{{printf "%.1f" $testCase.Time.Duration}}s</span>
                    </div>
                </h2>

                {{range $stepIndex, $step := $testCase.Records}}
                <div class="step-container">
                    <div class="step-header" onclick="toggleStep({{$stepIndex}})">
                        <h3>
                            <span class="step-number">{{add $stepIndex 1}}</span>
                            {{$step.Name}}
                            <div class="step-info-group">
                                <span class="status-badge step-status {{if $step.Success}}success{{else}}failure{{end}}">
                                    {{if $step.Success}}✓ PASS{{else}}✗ FAIL{{end}}
                                </span>
                                <span class="duration step-duration">{{formatDuration $step.Elapsed}}</span>
                                <span class="step-type step-type-fixed">{{$step.StepType}}</span>
                                <span class="toggle-icon" id="toggle-{{$stepIndex}}">▼</span>
                            </div>
                        </h3>
                    </div>

                    <div class="step-content" id="step-{{$stepIndex}}">
                        <!-- Actions -->
                        {{if $step.Actions}}
                        <div class="actions-section">
                            <h4>Actions</h4>
                            {{range $actionIndex, $action := $step.Actions}}
                            <div class="action-item">
                                <div class="action-header" onclick="toggleAction({{$stepIndex}}, {{$actionIndex}})">
                                    <strong>{{$action.Method}}</strong>
                                    <span class="duration">{{formatDuration $action.Elapsed}}</span>
                                    {{if $action.Error}}<span class="error">Error: {{$action.Error}}</span>{{end}}
                                    <span class="action-toggle collapsed" id="action-toggle-{{$stepIndex}}-{{$actionIndex}}">▶</span>
                                </div>
                                <div class="action-description">{{$action.Params}}</div>
                                <div class="action-content" id="action-content-{{$stepIndex}}-{{$actionIndex}}">

                                {{if $action.Plannings}}
                                <div class="planning-results">
                                    {{range $planningIndex, $planning := $action.Plannings}}
                                    <div class="planning-item">
                                        <div class="planning-header">
                                            <span class="planning-label">🧠 Planning & Execution {{add $planningIndex 1}}</span>
                                            <span class="duration">{{formatDuration $planning.Elapsed}}</span>
                                            {{if $planning.Error}}<span class="error">Error: {{$planning.Error}}</span>{{end}}
                                        </div>

                                        {{if $planning.Thought}}
                                        <div class="thought">{{$planning.Thought}}</div>
                                        {{end}}

                                        <!-- Three-column layout: screenshot left, model output and actions right -->
                                        <div class="planning-three-columns">
                                                <!-- Left column: Screenshot (larger) -->
                                                <div class="planning-column-screenshot">
                                                    <div class="planning-step-compact">
                                                        <div class="step-header-compact">
                                                            <span class="step-name">📸 Take Screenshot</span>
                                                            <span class="duration">{{formatDuration $planning.ScreenshotElapsed}}</span>
                                                        </div>
                                                        {{if $planning.ScreenResult}}
                                                        <div class="screenshot-display">
                                                            {{$screenshot := $planning.ScreenResult}}
                                                            {{$base64Image := encodeImageBase64 $screenshot.ImagePath}}
                                                            {{if $base64Image}}
                                                            <div class="screenshot-item-compact">
                                                                <div class="screenshot-image">
                                                                    <img src="data:image/jpeg;base64,{{$base64Image}}" alt="Planning Screenshot" onclick="openImageModal(this.src)" />
                                                                </div>
                                                            </div>
                                                            {{end}}
                                                        </div>
                                                        {{end}}
                                                    </div>
                                                </div>

                                                <!-- Right column: Model Output and Actions -->
                                                <div class="planning-column-right-container">
                                                    <!-- Top right: Model Output -->
                                                    <div class="planning-column-model">
                                                        <div class="planning-step-compact">
                                                            <div class="step-header-compact">
                                                                <span class="step-name">🤖 Call Model & Parse Result</span>
                                                                <span class="duration">{{formatDuration $planning.ModelCallElapsed}}</span>
                                                            </div>
                                                            <div class="model-output-compact">
                                                                {{if $planning.ModelName}}
                                                                <div class="model-info">🤖 Model: {{$planning.ModelName}}</div>
                                                                {{end}}
                                                                {{if $planning.Usage}}
                                                                <div class="usage-info">📊 Tokens: {{$planning.Usage.PromptTokens}} in / {{$planning.Usage.CompletionTokens}} out / {{$planning.Usage.TotalTokens}} total</div>
                                                                {{end}}
                                                                {{if $planning.ToolCallsCount}}
                                                                <div class="tool-calls-info">🔧 Tool Calls: {{$planning.ToolCallsCount}}</div>
                                                                {{end}}
                                                                {{if $planning.ActionNames}}
                                                                <div class="actions-info">🎯 Actions: {{safeHTML (toJSON $planning.ActionNames)}}</div>
                                                                {{end}}
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <!-- Bottom right: Actions Details -->
                                                    {{if $planning.SubActions}}
                                                    <div class="planning-column-actions">
                                                        <div class="planning-step-compact">
                                                            <div class="step-header-compact">
                                                                <span class="step-name">🎯 Actions ({{len $planning.SubActions}})</span>
                                                            </div>
                                                            <div class="actions-details">
                                                                {{range $subAction := $planning.SubActions}}
                                                                <div class="action-detail-item">
                                                                    <div class="action-detail-header">
                                                                        <span class="action-name">{{$subAction.ActionName}}</span>
                                                                        <span class="duration">{{formatDuration $subAction.Elapsed}}</span>
                                                                        {{if $subAction.Error}}<span class="error">❌</span>{{else}}<span class="success">✅</span>{{end}}
                                                                    </div>
                                                                    {{if $subAction.Arguments}}
                                                                    <div class="action-arguments">{{safeHTML (toJSON $subAction.Arguments)}}</div>
                                                                    {{end}}
                                                                    {{if $subAction.Requests}}
                                                                    <div class="action-requests">
                                                                        <button class="requests-toggle-compact" onclick="toggleRequestsCompact(this)">
                                                                            📡 {{len $subAction.Requests}} request(s)
                                                                        </button>
                                                                        <div class="requests-content-compact">
                                                                            {{range $request := $subAction.Requests}}
                                                                            <div class="request-item-compact">
                                                                                <div class="request-header-compact">
                                                                                    <span class="method">{{$request.RequestMethod}}</span>
                                                                                    <span class="url-compact">{{$request.RequestUrl}}</span>
                                                                                    <span class="status {{if $request.Success}}success{{else}}failure{{end}}">{{$request.ResponseStatus}}</span>
                                                                                    <span class="duration">{{formatDuration $request.ResponseDuration}}</span>
                                                                                </div>
                                                                                {{if $request.RequestBody}}
                                                                                <div class="request-body-compact">Request: {{$request.RequestBody}}</div>
                                                                                {{end}}
                                                                                {{if $request.ResponseBody}}
                                                                                <div class="response-body-compact">Response: {{$request.ResponseBody}}</div>
                                                                                {{end}}
                                                                            </div>
                                                                            {{end}}
                                                                        </div>
                                                                    </div>
                                                                    {{end}}
                                                                </div>
                                                                {{end}}
                                                            </div>
                                                        </div>
                                                    </div>
                                                    {{end}}
                                                </div>
                                            </div>

                                        {{/* SubActions are now displayed in the right panel, so we don't show them here */}}
                                    </div>
                                    {{end}}
                                </div>
                                {{end}}

                                {{if $action.SubActions}}
                                <div class="sub-actions">
                                    {{range $subAction := $action.SubActions}}
                                    <div class="sub-action-item">
                                        <div class="sub-action-header">
                                            <span class="action-name">{{$subAction.ActionName}}</span>
                                            <span class="duration">{{formatDuration $subAction.Elapsed}}</span>
                                        </div>

                                        <div class="sub-action-content">
                                            <div class="sub-action-left">
                                                {{if $subAction.Arguments}}
                                                <div class="arguments">Arguments: {{safeHTML (toJSON $subAction.Arguments)}}</div>
                                                {{end}}

                                                {{if $subAction.Requests}}
                                                <div class="requests">
                                                    <button class="requests-toggle" onclick="toggleRequests(this)">
                                                        📡 Show Requests ({{len $subAction.Requests}})
                                                    </button>
                                                    <div class="requests-content">
                                                        {{range $request := $subAction.Requests}}
                                                        <div class="request-item">
                                                            <div class="request-header">
                                                                <span class="method">{{$request.RequestMethod}}</span>
                                                                <span class="url">{{$request.RequestUrl}}</span>
                                                                <span class="status {{if $request.Success}}success{{else}}failure{{end}}">Status: {{$request.ResponseStatus}}</span>
                                                                <span class="duration">{{formatDuration $request.ResponseDuration}}</span>
                                                            </div>
                                                            {{if $request.RequestBody}}
                                                            <div class="request-body">Request: {{$request.RequestBody}}</div>
                                                            {{end}}
                                                            {{if $request.ResponseBody}}
                                                            <div class="response-body">Response: {{$request.ResponseBody}}</div>
                                                            {{end}}
                                                        </div>
                                                        {{end}}
                                                    </div>
                                                </div>
                                                {{end}}
                                            </div>

                                            {{if $subAction.ScreenResults}}
                                            <div class="sub-action-right">
                                                <div class="sub-action-screenshots">
                                                    <h5>📸 Screenshots</h5>
                                                    <div class="screenshots-grid">
                                                        {{range $screenshot := $subAction.ScreenResults}}
                                                        {{$base64Image := encodeImageBase64 $screenshot.ImagePath}}
                                                        {{if $base64Image}}
                                                        <div class="screenshot-item small">
                                                            <div class="screenshot-info">
                                                                <span class="filename">{{base $screenshot.ImagePath}}</span>
                                                                {{if $screenshot.Resolution}}
                                                                <span class="resolution">{{$screenshot.Resolution.Width}}x{{$screenshot.Resolution.Height}}</span>
                                                                {{end}}
                                                            </div>
                                                            <div class="screenshot-image">
                                                                <img src="data:image/jpeg;base64,{{$base64Image}}" alt="Screenshot" onclick="openImageModal(this.src)" />
                                                            </div>
                                                        </div>
                                                        {{end}}
                                                        {{end}}
                                                    </div>
                                                </div>
                                            </div>
                                            {{end}}
                                        </div>
                                    </div>
                                    {{end}}
                                    </div>
                                    {{end}}
                                </div>
                            </div>
                            {{end}}
                        </div>
                        {{end}}

                        <!-- Validators -->
                        {{if and $step.Data $step.Data.validators}}
                        <div class="validators-section">
                            <h4>Validators</h4>
                            {{range $validator := $step.Data.validators}}
                            <div class="validator-item {{if eq $validator.check_result "pass"}}success{{else}}failure{{end}}">
                                <div class="validator-header">
                                    <span class="check-type">{{$validator.check}}</span>
                                    <span class="assert-type">{{$validator.assert}}</span>
                                    <span class="result">{{$validator.check_result}}</span>
                                </div>
                                <div class="validator-expect">Expected: {{$validator.expect}}</div>
                                {{if and $validator.msg (ne $validator.check_result "pass")}}
                                    <div class="validator-message">{{$validator.msg}}</div>
                                {{end}}
                            </div>
                            {{end}}
                        </div>
                        {{end}}

                        <!-- Screenshots -->
                        {{if $step.Attachments}}
                        {{$attachments := $step.Attachments}}
                        {{if eq (printf "%T" $attachments) "map[string]interface {}"}}
                        {{if index $attachments "screen_results"}}
                        <div class="screenshots-section">
                            <h4>Screenshots</h4>
                            {{range $screenshot := index $attachments "screen_results"}}
                            {{$base64Image := encodeImageBase64 $screenshot.ImagePath}}
                            {{if $base64Image}}
                            <div class="screenshot-item">
                                <div class="screenshot-info">
                                    <span class="filename">{{base $screenshot.ImagePath}}</span>
                                    {{if $screenshot.Resolution}}
                                    <span class="resolution">{{$screenshot.Resolution.Width}}x{{$screenshot.Resolution.Height}}</span>
                                    {{end}}
                                </div>
                                <div class="screenshot-image">
                                    <img src="data:image/jpeg;base64,{{$base64Image}}" alt="Screenshot" onclick="openImageModal(this.src)" />
                                </div>
                            </div>
                            {{end}}
                            {{end}}
                        </div>
                        {{end}}
                        {{end}}
                        {{end}}

                        <!-- Step Logs -->
                        {{$stepLogs := getStepLogs $step}}
                        {{if $stepLogs}}
                        <div class="logs-section">
                            <div class="logs-header" onclick="toggleStepLogs({{$stepIndex}})">
                                <h4>📋 Step Logs ({{len $stepLogs}})</h4>
                                <span class="logs-toggle collapsed" id="logs-toggle-{{$stepIndex}}">▶</span>
                            </div>
                            <div class="logs-container" id="logs-container-{{$stepIndex}}">
                                {{range $logEntry := $stepLogs}}
                                 <div class="log-entry {{$logEntry.Level}}">
                                     <div class="log-header" {{if $logEntry.Fields}}onclick="toggleLogFields(this)"{{end}}>
                                         <span class="log-time">{{$logEntry.Time}}</span>
                                         <span class="log-level {{$logEntry.Level}}">{{$logEntry.Level}}</span>
                                         <span class="log-message">{{$logEntry.Message}}</span>
                                         {{if $logEntry.Fields}}
                                         <span class="log-toggle">▼</span>
                                         {{end}}
                                     </div>
                                     {{if $logEntry.Fields}}
                                     <div class="log-fields collapsed">{{safeHTML (toJSON $logEntry.Fields)}}</div>
                                     {{end}}
                                 </div>
                                {{end}}
                            </div>
                        </div>
                        {{end}}
                    </div>
                </div>
                {{end}}
            </div>
            {{end}}
        </div>
    </div>

    <!-- Image Modal -->
    <div id="imageModal" class="modal">
        <span class="close" onclick="closeModal()">&times;</span>
        <img class="modal-content" id="modalImage">
    </div>

    <script>
        // Embedded file contents for download (Base64 encoded)
        const summaryContentBase64 = "{{getSummaryContentBase64}}";
        const logContentBase64 = "{{getLogContentBase64}}";

        // Decode Base64 content with proper UTF-8 handling
        function decodeBase64UTF8(base64) {
            if (!base64) return "";
            try {
                // Use TextDecoder for proper UTF-8 decoding
                const binaryString = atob(base64);
                const bytes = new Uint8Array(binaryString.length);
                for (let i = 0; i < binaryString.length; i++) {
                    bytes[i] = binaryString.charCodeAt(i);
                }
                return new TextDecoder('utf-8').decode(bytes);
            } catch (e) {
                console.error('Failed to decode Base64 content:', e);
                return "";
            }
        }

        const summaryContent = decodeBase64UTF8(summaryContentBase64);
        const logContent = decodeBase64UTF8(logContentBase64);

        // Download functions
        function downloadSummary() {
            if (!summaryContent) {
                alert('Summary content not available');
                return;
            }
            downloadFile(summaryContent, 'summary.json', 'application/json');
        }

        function downloadLog() {
            if (!logContent) {
                alert('Log content not available');
                return;
            }
            downloadFile(logContent, 'hrp.log', 'text/plain');
        }

        function downloadFile(content, filename, mimeType) {
            const blob = new Blob([content], { type: mimeType + ';charset=utf-8' });
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = filename;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            window.URL.revokeObjectURL(url);
        }

        function toggleStep(stepIndex) {
            const content = document.getElementById('step-' + stepIndex);
            const icon = document.getElementById('toggle-' + stepIndex);

            if (content.classList.contains('show')) {
                content.classList.remove('show');
                icon.classList.remove('rotated');
            } else {
                content.classList.add('show');
                icon.classList.add('rotated');
            }
        }

        function toggleLogFields(headerElement) {
            const logEntry = headerElement.parentElement;
            const fieldsElement = logEntry.querySelector('.log-fields');
            const toggleIcon = headerElement.querySelector('.log-toggle');

            if (fieldsElement && toggleIcon) {
                if (fieldsElement.classList.contains('collapsed')) {
                    fieldsElement.classList.remove('collapsed');
                    toggleIcon.classList.add('rotated');
                } else {
                    fieldsElement.classList.add('collapsed');
                    toggleIcon.classList.remove('rotated');
                }
            }
        }

        function toggleStepLogs(stepIndex) {
            const container = document.getElementById('logs-container-' + stepIndex);
            const toggle = document.getElementById('logs-toggle-' + stepIndex);

            if (container.classList.contains('show')) {
                container.classList.remove('show');
                toggle.classList.add('collapsed');
                toggle.textContent = '▶';
            } else {
                container.classList.add('show');
                toggle.classList.remove('collapsed');
                toggle.textContent = '▼';
            }
        }

                function toggleRequests(buttonElement) {
            const requestsDiv = buttonElement.parentElement;
            const requestsContent = requestsDiv.querySelector('.requests-content');

            if (requestsContent.classList.contains('show')) {
                requestsContent.classList.remove('show');
                buttonElement.textContent = buttonElement.textContent.replace('Hide', 'Show');
            } else {
                requestsContent.classList.add('show');
                buttonElement.textContent = buttonElement.textContent.replace('Show', 'Hide');
            }
        }

        function toggleRequestsCompact(buttonElement) {
            const requestsDiv = buttonElement.parentElement;
            const requestsContent = requestsDiv.querySelector('.requests-content-compact');

            if (requestsContent.classList.contains('show')) {
                requestsContent.classList.remove('show');
                buttonElement.textContent = buttonElement.textContent.replace('Hide', 'Show');
            } else {
                requestsContent.classList.add('show');
                buttonElement.textContent = buttonElement.textContent.replace('Show', 'Hide');
            }
        }

        function toggleAction(stepIndex, actionIndex) {
            const content = document.getElementById('action-content-' + stepIndex + '-' + actionIndex);
            const toggle = document.getElementById('action-toggle-' + stepIndex + '-' + actionIndex);

            if (content.classList.contains('expanded')) {
                content.classList.remove('expanded');
                toggle.classList.add('collapsed');
                toggle.textContent = '▶';
            } else {
                content.classList.add('expanded');
                toggle.classList.remove('collapsed');
                toggle.textContent = '▼';
            }
        }

        function openImageModal(src) {
            const modal = document.getElementById('imageModal');
            const modalImg = document.getElementById('modalImage');
            modal.style.display = 'block';
            modalImg.src = src;
        }

        function closeModal() {
            document.getElementById('imageModal').style.display = 'none';
        }

        // Close modal when clicking outside the image
        window.onclick = function(event) {
            const modal = document.getElementById('imageModal');
            if (event.target == modal) {
                modal.style.display = 'none';
            }
        }

        // Toggle all steps
        function toggleAllSteps() {
            const contents = document.querySelectorAll('.step-content');
            const icons = document.querySelectorAll('.toggle-icon');
            const button = document.getElementById('toggleStepsBtn');

            // Check if any step is currently expanded
            const anyExpanded = Array.from(contents).some(content => content.classList.contains('show'));

            if (anyExpanded) {
                // Collapse all
                contents.forEach(content => content.classList.remove('show'));
                icons.forEach(icon => icon.classList.remove('rotated'));
                button.textContent = 'Expand All Steps';
            } else {
                // Expand all
                contents.forEach(content => content.classList.add('show'));
                icons.forEach(icon => icon.classList.add('rotated'));
                button.textContent = 'Collapse All Steps';
            }
        }

        // Toggle all actions
        function toggleAllActions() {
            const contents = document.querySelectorAll('.action-content');
            const toggles = document.querySelectorAll('.action-toggle');
            const button = document.getElementById('toggleActionsBtn');

            // Check if any action is currently expanded
            const anyExpanded = Array.from(contents).some(content => content.classList.contains('expanded'));

            if (anyExpanded) {
                // Collapse all
                contents.forEach(content => content.classList.remove('expanded'));
                toggles.forEach(toggle => {
                    toggle.classList.add('collapsed');
                    toggle.textContent = '▶';
                });
                button.textContent = 'Expand All Actions';
            } else {
                // Expand all
                contents.forEach(content => content.classList.add('expanded'));
                toggles.forEach(toggle => {
                    toggle.classList.remove('collapsed');
                    toggle.textContent = '▼';
                });
                button.textContent = 'Collapse All Actions';
            }
        }

        // Auto-expand all steps on load to show actions
        document.addEventListener('DOMContentLoaded', function() {
            // Expand all steps to show the actions list
            const contents = document.querySelectorAll('.step-content');
            const icons = document.querySelectorAll('.toggle-icon');
            const stepsButton = document.getElementById('toggleStepsBtn');

            contents.forEach(content => content.classList.add('show'));
            icons.forEach(icon => icon.classList.add('rotated'));

            // Update button text to reflect current state (steps are expanded)
            if (stepsButton) {
                stepsButton.textContent = 'Collapse All Steps';
            }
        });
    </script>
</body>
</html>`