use actix_web::{get, web, HttpResponse, Responder};
use sqlx::postgres::PgPool;

const HTML_TEMPLATE: &str = r#"<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>大气稳定度判定系统</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        .container {
            background: white;
            border-radius: 16px;
            padding: 48px;
            max-width: 480px;
            width: 100%;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            text-align: center;
        }
        h1 {
            color: #333;
            margin-bottom: 8px;
            font-size: 28px;
        }
        .subtitle {
            color: #666;
            margin-bottom: 32px;
            font-size: 14px;
        }
        .status-box {
            padding: 24px;
            border-radius: 12px;
            margin-bottom: 24px;
        }
        .status-ok {
            background: #d4edda;
            border: 1px solid #28a745;
        }
        .status-error {
            background: #f8d7da;
            border: 1px solid #dc3545;
        }
        .status-icon {
            font-size: 48px;
            margin-bottom: 16px;
        }
        .status-text {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 8px;
        }
        .status-ok .status-text { color: #155724; }
        .status-error .status-text { color: #721c24; }
        .status-detail {
            color: #495057;
            font-size: 14px;
        }
        .version {
            color: #999;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>大气稳定度判定系统</h1>
        <p class="subtitle">后端服务状态</p>

        <div class="status-box {status_class}">
            <div class="status-icon">{status_icon}</div>
            <div class="status-text">{status_text}</div>
            <div class="status-detail">
                <div>数据库: {database}</div>
            </div>
        </div>

        <div class="version">v{version}</div>
    </div>
</body>
</html>"#;

#[get("/")]
pub async fn root(pool: web::Data<PgPool>) -> impl Responder {
    let (status_class, status_icon, status_text, database) = match sqlx::query("SELECT 1")
        .fetch_one(pool.get_ref())
        .await
    {
        Ok(_) => ("status-ok", "✅", "服务正常", "已连接"),
        Err(_) => ("status-error", "❌", "服务异常", "未连接"),
    };

    let html = HTML_TEMPLATE
        .replace("{status_class}", status_class)
        .replace("{status_icon}", status_icon)
        .replace("{status_text}", status_text)
        .replace("{database}", database)
        .replace("{version}", env!("CARGO_PKG_VERSION"));

    HttpResponse::Ok()
        .content_type("text/html; charset=utf-8")
        .body(html)
}
