{% extends 'base.html' %}
{% block content %}
<section class="py-8">
    <h1 class="text-3xl font-bold mb-4">Machine Failure Prediction</h1>
    
    <div class="bg-gray-50 p-6 rounded shadow mb-6">
        <h2 class="text-2xl font-semibold mb-2">Upload Machine Failure Data (CSV)</h2>
        <form action="{{ url_for('machine_failure.upload_file_machine') }}" method="POST" enctype="multipart/form-data">
            <input type="file" name="machine_file" accept=".csv" class="mb-4 block">
            <button type="submit" class="btn-learn-more">Upload</button>
        </form>
    </div>

    {% if preview_data %}
    <div class="bg-white p-6 rounded shadow mb-6">
        <h2 class="text-2xl font-semibold mb-4">Data Preview (First 5 Rows)</h2>
        <div class="overflow-x-auto">
            <table id="preview-table" class="min-w-full table-auto">
                <thead>
                    <tr>
                        {% for column in columns %}
                        <th class="px-4 py-2 bg-gray-100">{{ column }}</th>
                        {% endfor %}
                    </tr>
                </thead>
                <tbody>
                    {% for row in preview_data %}
                    <tr>
                        {% for column in columns %}
                        <td class="border px-4 py-2">{{ row[column] }}</td>
                        {% endfor %}
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <div class="bg-white p-6 rounded shadow">
        <h2 class="text-2xl font-semibold mb-4">Summary Statistics</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="p-4 bg-blue-50 rounded">
                <p><strong>Total Rows:</strong> <span class="summary-total-rows">{{ summary_stats.total_rows }}</span></p>
                <p><strong>Total Columns:</strong> <span class="summary-total-cols">{{ summary_stats.total_columns }}</span></p>
            </div>
            <div class="p-4 bg-green-50 rounded">
                <p><strong>Numeric Columns:</strong> <span class="summary-numeric-cols">{{ summary_stats.numeric_columns|join(', ') }}</span></p>
                <p><strong>Categorical Columns:</strong> <span class="summary-categorical-cols">{{ summary_stats.categorical_columns|join(', ') }}</span></p>
            </div>
        </div>
    </div>

    <div id="feature-importance" class="bg-white p-6 rounded shadow mt-6 hidden">
        <h2 class="text-2xl font-semibold mb-4">Top 5 Feature Importances</h2>
        <div id="feature-importance-list"></div>
    </div>
        
    <div class="bg-white p-6 rounded shadow mt-6">
        <h2 class="text-2xl font-semibold mb-4">Failure Prediction Metrics</h2>
        <div class="flex flex-wrap gap-4 mb-4">
            <div>
                <label class="block font-semibold mb-1">Target Column</label>
                <select id="predictTargetCol" class="border rounded p-2">
                    {% for column in columns %}
                    <option value="{{ column }}">{{ column }}</option>
                    {% endfor %}
                </select>
            </div>
            <div>
                <label class="block font-semibold mb-1">Model</label>
                <select id="predictModel" class="border rounded p-2">
                    <option value="Random Forest">Random Forest</option>
                    <option value="XGBoost">XGBoost</option>
                    <option value="Logistic Regression">Logistic Regression</option>
                </select>
            </div>
            <div class="flex items-end">
                <button onclick="runPrediction()" class="btn-learn-more">Run Prediction</button>
            </div>
        </div>
        <div id="predict-metrics" class="mb-4"></div>
        <div id="predict-error" class="text-red-600 font-semibold mt-2"></div>
    </div>

    <div id="single-prediction-section" class="bg-white p-6 rounded shadow mt-6 hidden">
        <h2 class="text-2xl font-semibold mb-4">Predict for a Single Instance</h2>
        <form id="single-prediction-form" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-4">
            </form>
        <button onclick="predictSingleInstance()" class="btn-learn-more">Predict</button>
        <div id="single-prediction-result" class="mt-4 p-4 bg-blue-100 rounded hidden">
            <p class="font-semibold text-lg">Prediction: <span id="prediction-output" class="font-bold text-blue-800"></span></p>
            <div id="probability-output" class="mt-2 text-sm"></div>
        </div>
        <div id="single-prediction-error" class="text-red-600 font-semibold mt-2"></div>
    </div>
    {% endif %}

</section>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="{{ url_for('static', filename='index.js') }}"></script>
{% endblock %}