package templates

import (
    "track-gopher/models"
    "fmt"
    "strconv"
)

// RaceManage renders the race management view
templ RaceManage(groups []models.Group, currentGroup models.Group, heats []models.Heat, racers []models.Racer, currentHeatNum int, results []models.HeatResult) {
    @Layout("Race Management") {
        <div class="container-fluid mt-3">
            <div class="row mb-4">
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header bg-primary text-white">
                            <h4 class="mb-0">Race Control</h4>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label for="group-select" class="form-label">Racing Group</label>
                                <select id="group-select" class="form-select" hx-post="/api/race/set-group" hx-trigger="change" hx-swap="none">
                                    for _, group := range groups {
                                        <option value={ strconv.FormatInt(group.ID, 10) } selected?={ group.ID == currentGroup.ID }>
                                            { group.Name }
                                        </option>
                                    }
                                </select>
                            </div>
                            
                            <div class="mb-3">
                                <h5>Current Heat: { strconv.Itoa(currentHeatNum) } of { strconv.Itoa(len(heats)) }</h5>
                                <div class="btn-group" role="group">
                                    <button id="prev-heat-btn" class="btn btn-secondary" hx-post="/api/race/previous-heat" hx-swap="none" disabled?={ currentHeatNum <= 1 }>
                                        <i class="bi bi-arrow-left"></i> Previous Heat
                                    </button>
                                    <button id="next-heat-btn" class="btn btn-secondary" hx-post="/api/race/next-heat" hx-swap="none" disabled?={ currentHeatNum >= len(heats) }>
                                        Next Heat <i class="bi bi-arrow-right"></i>
                                    </button>
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <h5>Timer Control</h5>
                                <div class="d-flex align-items-center mb-2">
                                    <h3 id="timer" class="me-3">0.000</h3>
                                    <span id="status-indicator" class="badge mb-3 bg-secondary">Ready</span>
                                </div>
                                <div class="btn-group" role="group">
                                    <button class="btn btn-warning" onclick="resetTimer()">
                                        <i class="bi bi-arrow-repeat"></i> Reset Timer
                                    </button>
                                    <button class="btn btn-danger" onclick="forceEndHeat()">
                                        <i class="bi bi-flag-fill"></i> Force End
                                    </button>
                                    <button class="btn btn-info" hx-post="/api/race/rerun-heat" hx-swap="none">
                                        <i class="bi bi-arrow-counterclockwise"></i> Re-Run Heat
                                    </button>
                                </div>
                            </div>
                            
                            <div id="gate-status" class="alert alert-secondary">
                                <strong>Gate Status:</strong> <span id="gate-status-text">Unknown</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header bg-primary text-white">
                            <h4 class="mb-0">Heat Results</h4>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th>Heat</th>
                                            <th>Lane 1</th>
                                            <th>Lane 2</th>
                                            <th>Lane 3</th>
                                            <th>Lane 4</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        for _, result := range results {
                                            <tr class={ "table-primary" }>
                                                <td>{ strconv.Itoa(result.HeatNumber) }</td>
                                                <td>{ fmt.Sprintf("%.4f", result.Lane1Time) } ({ strconv.Itoa(result.Lane1Position) })</td>
                                                <td>{ fmt.Sprintf("%.4f", result.Lane2Time) } ({ strconv.Itoa(result.Lane2Position) })</td>
                                                <td>{ fmt.Sprintf("%.4f", result.Lane3Time) } ({ strconv.Itoa(result.Lane3Position) })</td>
                                                <td>{ fmt.Sprintf("%.4f", result.Lane4Time) } ({ strconv.Itoa(result.Lane4Position) })</td>
                                            </tr>
                                        }
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Current Heat Display -->
            @currentHeatDisplay(heats, racers, currentHeatNum, results)
            
            <!-- Next Heat Preview -->
            if currentHeatNum < len(heats) {
                <div class="card mb-4">
                    <div class="card-header bg-secondary text-white">
                        <h4 class="mb-0">Next Heat: { strconv.Itoa(currentHeatNum + 1) }</h4>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>Lane</th>
                                        <th>Racer</th>
                                        <th>Car #</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    for _, heat := range heats {
                                        if heat.HeatNum == currentHeatNum + 1 {
                                            if heat.Lane1ID != nil {
                                                @nextHeatRacer(1, *heat.Lane1ID, racers)
                                            }
                                            if heat.Lane2ID != nil {
                                                @nextHeatRacer(2, *heat.Lane2ID, racers)
                                            }
                                            if heat.Lane3ID != nil {
                                                @nextHeatRacer(3, *heat.Lane3ID, racers)
                                            }
                                            if heat.Lane4ID != nil {
                                                @nextHeatRacer(4, *heat.Lane4ID, racers)
                                            }
                                        }
                                    }
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            }
        </div>
        
        <script>
            // Set up SSE connection
            console.log("Setting up SSE connection...");
            
            const eventSource = new EventSource('/api/events');
            
            eventSource.onopen = function() {
                console.log("SSE connection opened");
            };
            
            eventSource.onerror = function(error) {
                console.error("SSE connection error:", error);
            };
            
            eventSource.addEventListener('debug', function(event) {
                console.log("Debug event received:", event.data);
            });
            
            eventSource.addEventListener('lane-finish', function(event) {
                console.log("Lane finish event received:", event.data);
                try {
                    const laneFinishData = JSON.parse(event.data);
                    const laneTimeElement = document.getElementById(`lane-${laneFinishData.lane}-time`);
                    if (laneTimeElement) {
                        laneTimeElement.textContent = laneFinishData.time.toFixed(4);
                    }
                    
                    const lanePositionElement = document.getElementById(`lane-${laneFinishData.lane}-position`);
                    if (lanePositionElement) {
                        lanePositionElement.textContent = laneFinishData.place;
                    }
                } catch (error) {
                    console.error("Error processing lane finish event:", error);
                }
            });
            
            eventSource.addEventListener('status', function(event) {
                console.log("Status event received:", event.data);
                try {
                    const statusData = JSON.parse(event.data);
                    let statusText = 'Unknown';
                    let statusClass = 'bg-secondary';
                    
                    if (statusData.status === 'idle') {
                        statusText = 'Ready';
                        statusClass = 'bg-primary';
                        
                        // Reset all times and positions
                        document.querySelectorAll('[id^="lane-"][id$="-time"]').forEach(el => {
                            el.textContent = '--.-';
                        });
                        
                        document.querySelectorAll('[id^="lane-"][id$="-position"]').forEach(el => {
                            el.textContent = '-';
                        });
                        
                    } else if (statusData.status === 'running') {
                        statusText = 'Race Running';
                        statusClass = 'bg-success';
                    } else if (statusData.status === 'finished') {
                        statusText = 'Race Complete';
                        statusClass = 'bg-info';
                        
                        // Save heat results
                        saveHeatResults();
                    }
                    
                    const statusIndicator = document.getElementById('status-indicator');
                    if (statusIndicator) {
                        statusIndicator.textContent = statusText;
                        statusIndicator.className = `badge mb-3 ${statusClass}`;
                    }
                    
                    const timerDisplay = document.getElementById('timer');
                    if (timerDisplay && statusData.status === 'idle') {
                        timerDisplay.textContent = '0.000';
                    }
                } catch (error) {
                    console.error("Error processing status event:", error);
                }
            });
            
            // Admin socket for admin-specific events
            const adminSocket = new WebSocket(`${window.location.protocol === 'https:' ? 'wss:' : 'ws:'}//${window.location.host}/ws/admin`);
            
            adminSocket.onmessage = function(event) {
                const data = JSON.parse(event.data);
                
                if (data === 'heat-changed' || data === 'group-changed' || data === 'heat-rerun') {
                    // Reload the page when heat or group changes
                    window.location.reload();
                }
            };
            
            // Add event listener for admin events
            eventSource.addEventListener('admin', function(event) {
                console.log("Admin event received:", event.data);
                try {
                    const adminData = JSON.parse(event.data);
                    
                    if (adminData.event === 'heat-changed' || 
                        adminData.event === 'group-changed' || 
                        adminData.event === 'heat-rerun') {
                        // Reload the page when heat or group changes
                        window.location.reload();
                    }
                } catch (error) {
                    console.error("Error processing admin event:", error);
                }
            });
            
            // Function to reset the timer
            function resetTimer() {
                fetch('/api/reset', { method: 'POST' })
                    .then(response => {
                        if (!response.ok) {
                            console.error('Failed to reset timer');
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                    });
            }
            
            // Function to force end the current heat
            function forceEndHeat() {
                fetch('/api/force-end', { method: 'POST' })
                    .then(response => {
                        if (!response.ok) {
                            console.error('Failed to force end heat');
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                    });
            }
            
            // Function to save heat results
            function saveHeatResults() {
                // Get lane times and positions from the UI
                const lanes = [1, 2, 3, 4];
                const results = {
                    group_id: parseInt(document.getElementById('group-select').value),
                    heat_number: parseInt('{ strconv.Itoa(currentHeatNum) }'),
                };
                
                lanes.forEach(lane => {
                    const timeElement = document.getElementById(`lane-${lane}-time`);
                    const positionElement = document.getElementById(`lane-${lane}-position`);
                    
                    if (timeElement && positionElement) {
                        const timeText = timeElement.textContent.trim();
                        const positionText = positionElement.textContent.trim();
                        
                        results[`lane${lane}_time`] = timeText !== '--.-' ? parseFloat(timeText) : 0;
                        results[`lane${lane}_position`] = positionText !== '-' ? parseInt(positionText) : 0;
                    }
                });
                
                // Save results to the server
                fetch('/api/race/save-result', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(results),
                })
                .then(response => {
                    if (!response.ok) {
                        console.error('Failed to save heat results');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                });
            }
            
            function getOrdinal(n) {
                const s = ["th", "st", "nd", "rd"];
                const v = n % 100;
                return n + (s[(v-20)%10] || s[v] || s[0]);
            }
        </script>
    }
}

// Find the current heat
templ currentHeatDisplay(heats []models.Heat, racers []models.Racer, currentHeatNum int, results []models.HeatResult) {
    {{
    // Find the current heat
    var currentHeat models.Heat
    for _, heat := range heats {
        if heat.HeatNum == currentHeatNum {
            currentHeat = heat
            break
        }
    }
    
    // Find the current result
    var currentResult *models.HeatResult
    for _, result := range results {
        if result.HeatNumber == currentHeatNum {
            currentResult = &result
            break
        }
    }
    }}
    <div class="card mb-4">
        <div class="card-header bg-primary text-white">
            <h4 class="mb-0">Current Heat: { strconv.Itoa(currentHeatNum) }</h4>
        </div>
        <div class="card-body">
            <div class="row">
                if currentHeat.Lane1ID != nil {
                    @raceLaneInfo(1, *currentHeat.Lane1ID, racers, currentResult)
                }
                if currentHeat.Lane2ID != nil {
                    @raceLaneInfo(2, *currentHeat.Lane2ID, racers, currentResult)
                }
                if currentHeat.Lane3ID != nil {
                    @raceLaneInfo(3, *currentHeat.Lane3ID, racers, currentResult)
                }
                if currentHeat.Lane4ID != nil {
                    @raceLaneInfo(4, *currentHeat.Lane4ID, racers, currentResult)
                }
            </div>
        </div>
    </div>
}

// Helper template for displaying a lane in the race manager
templ raceLaneInfo(lane int, racerID int64, racers []models.Racer, result *models.HeatResult) {
    {{
    // Find the racer
    var racer models.Racer
    for _, r := range racers {
        if r.ID == racerID {
            racer = r
            break
        }
    }
    
    // Get time and position from result if available
    var timeStr string = "--.-"
    var positionStr string = "-"
    
    if result != nil {
        if lane == 1 && result.Lane1Time > 0 {
            timeStr = fmt.Sprintf("%.4f", result.Lane1Time)
            positionStr = strconv.Itoa(result.Lane1Position)
        } else if lane == 2 && result.Lane2Time > 0 {
            timeStr = fmt.Sprintf("%.4f", result.Lane2Time)
            positionStr = strconv.Itoa(result.Lane2Position)
        } else if lane == 3 && result.Lane3Time > 0 {
            timeStr = fmt.Sprintf("%.4f", result.Lane3Time)
            positionStr = strconv.Itoa(result.Lane3Position)
        } else if lane == 4 && result.Lane4Time > 0 {
            timeStr = fmt.Sprintf("%.4f", result.Lane4Time)
            positionStr = strconv.Itoa(result.Lane4Position)
        }
    }
    }}
    <div class="col-md-3 mb-3">
        <div class="card h-100">
            <div class="card-header bg-secondary text-white">
                <h5 class="mb-0">Lane { strconv.Itoa(lane) }</h5>
            </div>
            <div class="card-body">
                <h5 class="card-title">{ racer.FirstName } { racer.LastName }</h5>
                <p class="card-text">Car #: { racer.CarNumber }</p>
                <div class="d-flex justify-content-between">
                    <div>
                        <strong>Time:</strong> <span id="lane-{strconv.Itoa(lane)}-time">{ timeStr }</span>
                    </div>
                    <div>
                        <strong>Position:</strong> <span id="lane-{strconv.Itoa(lane)}-position">{ positionStr }</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
}

// Helper template for displaying a racer in the next heat
templ nextHeatRacer(lane int, racerID int64, racers []models.Racer) {
    {{
    // Find racer
    var racer models.Racer
    for _, r := range racers {
        if r.ID == racerID {
            racer = r
            break
        }
    }
    }}
    <tr>
        <td>{ strconv.Itoa(lane) }</td>
        <td>{ racer.FirstName } { racer.LastName }</td>
        <td>{ racer.CarNumber }</td>
    </tr>
}