{% extends "base.html" %}

{% block content %}
<div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
    <div class="px-4 py-6 sm:px-0">
        <h1 class="text-3xl font-bold text-gray-900 mb-8">在线智能预测</h1>

        <div class="flex flex-col md:flex-row gap-6">
            <!-- 表单区域 -->
            <div class="w-full md:w-1/2 bg-white overflow-hidden shadow sm:rounded-lg">
                <div class="px-4 py-5 sm:p-6">
                    <form action="{{ url_for('main.predict') }}" method="POST" class="space-y-6">

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700">性别</label>
                                <select name="gender"
                                    class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                                    <option value="Male">男性 (Male)</option>
                                    <option value="Female">女性 (Female)</option>
                                    <option value="Other">其他 (Other)</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700">年龄</label>
                                <input type="number" name="age" step="0.1" required
                                    class="mt-1 block w-full py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                            </div>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700">高血压</label>
                                <select name="hypertension"
                                    class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                                    <option value="0">无 (No)</option>
                                    <option value="1">有 (Yes)</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700">心脏病</label>
                                <select name="heart_disease"
                                    class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                                    <option value="0">无 (No)</option>
                                    <option value="1">有 (Yes)</option>
                                </select>
                            </div>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700">婚姻状况</label>
                            <select name="ever_married"
                                class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                                <option value="Yes">已婚 (Yes)</option>
                                <option value="No">未婚 (No)</option>
                            </select>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700">工作类型</label>
                                <select name="work_type"
                                    class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                                    <option value="Private">私人企业 (Private)</option>
                                    <option value="Self-employed">自雇 (Self-employed)</option>
                                    <option value="Govt_job">政府工作 (Govt_job)</option>
                                    <option value="children">儿童 (children)</option>
                                    <option value="Never_worked">从未工作 (Never_worked)</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700">居住类型</label>
                                <select name="Residence_type"
                                    class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                                    <option value="Urban">城市 (Urban)</option>
                                    <option value="Rural">农村 (Rural)</option>
                                </select>
                            </div>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700">平均血糖</label>
                                <input type="number" name="avg_glucose_level" step="0.01" required
                                    class="mt-1 block w-full py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700">BMI指数</label>
                                <input type="number" name="bmi" step="0.1" required
                                    class="mt-1 block w-full py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                            </div>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700">吸烟状况</label>
                            <select name="smoking_status"
                                class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                                <option value="formerly smoked">曾经吸烟 (formerly smoked)</option>
                                <option value="never smoked">从不吸烟 (never smoked)</option>
                                <option value="smokes">吸烟 (smokes)</option>
                                <option value="Unknown">未知 (Unknown)</option>
                            </select>
                        </div>

                        <div>
                            <button type="submit"
                                class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                                开始预测
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- 结果区域 -->
            <div class="w-full md:w-1/2">
                {% if result %}
                <div class="bg-white overflow-hidden shadow sm:rounded-lg">
                    <div class="px-4 py-5 sm:p-6 text-center">
                        <h3 class="text-2xl font-bold text-gray-900 mb-6">预测结果</h3>

                        <div class="mb-8">
                            <span
                                class="inline-flex items-center justify-center h-24 w-24 rounded-full {{ 'bg-red-100 text-red-500' if result.prediction == 1 else 'bg-green-100 text-green-500' }}">
                                {% if result.prediction == 1 %}
                                <svg class="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                                </svg>
                                {% else %}
                                <svg class="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                                </svg>
                                {% endif %}
                            </span>
                        </div>

                        <div class="mb-4">
                            {% if result.prediction == 1 %}
                            <p class="text-xl font-semibold text-red-600">存在中风风险</p>
                            <p class="text-gray-500 mt-2">模型预测患病概率为 <span class="font-bold">{{ result.probability
                                    }}%</span></p>
                            {% else %}
                            <p class="text-xl font-semibold text-green-600">中风风险较低</p>
                            <p class="text-gray-500 mt-2">模型预测患病概率为 <span class="font-bold">{{ result.probability
                                    }}%</span></p>
                            {% endif %}
                        </div>

                        <div class="bg-yellow-50 p-4 rounded-md text-left text-sm text-yellow-800">
                            <strong>免责声明：</strong>
                            此结果仅基于机器学习模型预测，不作为医疗诊断依据。如果您感到不适，请立即就医。
                        </div>
                    </div>
                </div>
                {% else %}
                <div
                    class="bg-gray-50 overflow-hidden shadow sm:rounded-lg h-full flex items-center justify-center text-gray-400">
                    <div class="text-center p-6">
                        <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24"
                            stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
                        </svg>
                        <h3 class="mt-2 text-sm font-medium text-gray-900">暂无结果</h3>
                        <p class="mt-1 text-sm text-gray-500">请在左侧填写信息并提交以获取预测结果。</p>
                    </div>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}