<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Upload Dataset - MHA Flow</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <!-- Navigation -->
    <nav class="navbar navbar-dark bg-dark sticky-top">
        <div class="container-fluid">
            <span class="navbar-brand mb-0 h1">
                <i class="fas fa-brain"></i> MHA Flow
            </span>
            <ul class="nav navbar-nav ms-auto">
                <li class="nav-item"><a class="nav-link" href="/">Home</a></li>
                <li class="nav-item"><a class="nav-link" href="/dashboard">Dashboard</a></li>
                <li class="nav-item"><a class="nav-link" href="/dataset-upload">Upload Data</a></li>
                <li class="nav-item"><a class="nav-link" href="/levify">Levify</a></li>
                <li class="nav-item"><a class="nav-link" href="/results">Results</a></li>
            </ul>
        </div>
    </nav>

    <div class="container py-5">
        <div class="row">
            <div class="col-lg-8 mx-auto">
                <h1 class="mb-4"><i class="fas fa-upload"></i> Upload Dataset</h1>
                
                <!-- File Upload Area -->
                <div class="card shadow-sm mb-4">
                    <div class="card-body">
                        <div class="upload-area border-2 border-dashed rounded-3 p-5 text-center cursor-pointer" id="uploadArea">
                            <i class="fas fa-cloud-upload-alt fa-3x text-primary mb-3"></i>
                            <h5>Drag and drop your dataset here</h5>
                            <p class="text-muted mb-3">or click to browse</p>
                            <p class="small text-muted">
                                Supported formats: CSV, Excel, JSON, TXT, NumPy
                            </p>
                            <input type="file" id="fileInput" class="d-none" accept=".csv,.xlsx,.json,.txt,.npy,.npz">
                        </div>
                    </div>
                </div>

                <!-- Problem Type Selection -->
                <div class="card shadow-sm mb-4">
                    <div class="card-header bg-light">
                        <h6 class="mb-0"><i class="fas fa-tasks"></i> Problem Type</h6>
                    </div>
                    <div class="card-body">
                        <div class="form-group mb-3">
                            <label for="problemType">Select Problem Type (optional)</label>
                            <select class="form-select" id="problemType">
                                <option value="auto">Auto-detect</option>
                                <option value="continuous">Numerical Continuous</option>
                                <option value="discrete">Numerical Discrete</option>
                                <option value="combinatorial">Combinatorial</option>
                                <option value="feature_selection">Feature Selection</option>
                                <option value="parameter_tuning">Parameter Tuning</option>
                                <option value="classification">Classification</option>
                                <option value="regression">Regression</option>
                                <option value="clustering">Clustering</option>
                            </select>
                        </div>
                    </div>
                </div>

                <!-- Upload Status -->
                <div id="uploadStatus" class="alert alert-info d-none" role="alert">
                    <div class="spinner-border spinner-border-sm me-2" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    <span id="statusMessage">Processing your dataset...</span>
                </div>

                <!-- Error Alert -->
                <div id="errorAlert" class="alert alert-danger d-none" role="alert">
                    <strong>Error:</strong> <span id="errorMessage"></span>
                </div>

                <!-- Success Alert -->
                <div id="successAlert" class="alert alert-success d-none" role="alert">
                    <strong>Success!</strong> <span id="successMessage">Dataset uploaded and analyzed successfully</span>
                </div>

                <!-- Dataset Profile (Hidden until uploaded) -->
                <div id="profileSection" class="d-none">
                    <h3 class="mt-5 mb-3">Dataset Profile</h3>
                    
                    <div class="row mb-4">
                        <div class="col-md-3">
                            <div class="card text-center">
                                <div class="card-body">
                                    <h6 class="card-title">Samples</h6>
                                    <h3 id="numSamples">-</h3>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card text-center">
                                <div class="card-body">
                                    <h6 class="card-title">Features</h6>
                                    <h3 id="numFeatures">-</h3>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card text-center">
                                <div class="card-body">
                                    <h6 class="card-title">Complexity</h6>
                                    <h3 id="complexity">-</h3>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card text-center">
                                <div class="card-body">
                                    <h6 class="card-title">Quality</h6>
                                    <h3 id="quality">-</h3>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Characteristics -->
                    <div class="card mb-4">
                        <div class="card-header bg-light">
                            <h6 class="mb-0"><i class="fas fa-tag"></i> Characteristics</h6>
                        </div>
                        <div class="card-body" id="characteristics"></div>
                    </div>

                    <!-- Recommendations -->
                    <div class="card mb-4">
                        <div class="card-header bg-light">
                            <h6 class="mb-0"><i class="fas fa-lightbulb"></i> Recommended Algorithms</h6>
                        </div>
                        <div class="card-body" id="recommendations"></div>
                    </div>

                    <!-- Next Steps -->
                    <div class="d-flex gap-3">
                        <a href="/levify" class="btn btn-primary btn-lg">
                            <i class="fas fa-magic"></i> Apply Levify Transform
                        </a>
                        <a href="/optimization" class="btn btn-success btn-lg">
                            <i class="fas fa-play"></i> Run Optimization
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="{{ url_for('static', filename='js/dataset_upload.js') }}"></script>
</body>
</html>
