<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RAGSearch AI</title>
    <style>
        body {
            font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(to bottom, #ffefba, #ffffff);
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            min-height: 100vh;
        }

        .container {
            text-align: center;
            max-width: 900px;
            width: 100%;
            margin: 30px auto;
            padding: 25px;
            background-color: #ffffff;
            border-radius: 12px;
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
        }

        .title {
            font-size: 40px;
            color: #2c3e50;
            font-weight: 700;
            margin-bottom: 8px;
        }

        .subtitle {
            font-size: 18px;
            color: #7f8c8d;
            margin-bottom: 30px;
        }

        .data-info {
            text-align: left;
            background-color: #fafafa;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 20px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        }

        .query-box {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }

        .input-field {
            flex: 1;
            min-width: 300px;
            padding: 12px;
            font-size: 16px;
            border: 2px solid #ddd;
            border-radius: 8px;
            margin-right: 10px;
            outline: none;
            transition: border-color 0.3s ease;
        }

        .input-field:focus {
            border-color: #ffb347;
            box-shadow: 0 0 8px rgba(255, 179, 71, 0.5);
        }

        .submit-btn {
            padding: 12px 20px;
            font-size: 16px;
            color: white;
            background-color: #ffb347;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.2s ease;
        }

        .submit-btn:hover {
            background-color: #fb8500;
            transform: translateY(-2px);
        }

        .results {
            margin-top: 30px;
            font-size: 16px;
            text-align: left;
            border-top: 2px solid #ddd;
            padding-top: 20px;
        }

        .result-item {
            margin-bottom: 20px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            background-color: #fafafa;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }

        .result-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }

        .result-item strong {
            color: #333;
        }

        .error {
            color: red;
            font-weight: 600;
        }

        header, footer {
            background-color: #2c3e50;
            color: white;
            padding: 10px 0;
            text-align: center;
        }

        footer {
            margin-top: auto;
        }
    </style>
</head>
<body>
    <header>
        <h1>ragsearch</h1>
    </header>
    <div class="container">
        <div class="subtitle">Transform your natural language queries into actionable insights</div>

        <!-- Data Info Section -->
        <div id="dataInfo" class="data-info">
            <h3>Data Info</h3>
            <p>Loading dataset information...</p>
        </div>

        <div class="query-box">
            <input
                id="queryInput"
                class="input-field"
                type="text"
                placeholder="Ask your question..."
            />
            <button id="submitBtn" class="submit-btn">Search</button>
        </div>
        <div id="results" class="results"></div>
    </div>
    <footer>
        <p>&copy; 2024 ragsearch. All rights reserved.</p>
    </footer>
    <script>
    // Fetch Data Info on page load
    async function fetchDataInfo() {
        const dataInfoDiv = document.getElementById('dataInfo');
        try {
            const response = await fetch('/data-info'); // Endpoint to fetch data info
            if (response.ok) {
                const data = await response.json();
                dataInfoDiv.innerHTML = `
                    <h3>Data Info</h3>
                    <p><strong>Dataset Name:</strong> ${data.file_name}</p>
                    <p><strong>Number of Records:</strong> ${data.num_records}</p>
                    <p><strong>Columns:</strong> ${data.columns.join(', ')}</p>
                `;
            } else {
                dataInfoDiv.innerHTML = "<p class='error'>Failed to load dataset information.</p>";
            }
        } catch (error) {
            dataInfoDiv.innerHTML = "<p class='error'>Network error. Unable to fetch dataset info.</p>";
        }
    }

    document.getElementById('submitBtn').addEventListener('click', search);
    document.getElementById('queryInput').addEventListener('keypress', (e) => {
        if (e.key === 'Enter') search();
    });

    async function search() {
        const query = document.getElementById('queryInput').value;
        const resultsDiv = document.getElementById('results');

        if (query.trim()) {
            resultsDiv.innerHTML = "<p>Processing your query...</p>";
            try {
                const response = await fetch('/query', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ query })
                });

                if (response.ok) {
                    const data = await response.json();
                    if (data.results.length > 0) {
                        resultsDiv.innerHTML = `
                            <h3>Results:</h3>
                            ${data.results.map(result => `
                                <div class="result-item">
                                    <pre>${JSON.stringify(result, null, 2)}</pre>
                                </div>
                            `).join('')}
                        `;
                    } else {
                        resultsDiv.innerHTML = "<p>No results found.</p>";
                    }
                } else {
                    resultsDiv.innerHTML = "<p class='error'>Error fetching results from the server.</p>";
                }
            } catch (error) {
                resultsDiv.innerHTML = "<p class='error'>Network error. Please try again later.</p>";
            }
        } else {
            resultsDiv.innerHTML = "<p class='error'>Please enter a query.</p>";
        }
    }

    // Call fetchDataInfo when the page loads
    window.onload = fetchDataInfo;
    </script>
</body>
</html>
