Upload 4 files

app.py

@@ -0,0 +1,119 @@
+import os
+import json
+import pandas as pd
+import requests
+from flask import Flask, render_template, request, jsonify
+from dotenv import load_dotenv
+import google.generativeai as genai
+
+load_dotenv()
+
+app = Flask(__name__)
+
+GOOGLE_API_KEY = os.getenv("GOOGLE_API_KEY")
+CSV_PATH = "dam.csv"
+
+# Initialize Gemini API
+genai.configure(api_key=GOOGLE_API_KEY)
+gemini_model = genai.GenerativeModel('gemini-1.5-flash')
+
+# Load dams CSV with latitude, longitude, dam_name columns
+dams_df = pd.read_csv(CSV_PATH)
+dams_df['latitude'] = pd.to_numeric(dams_df['latitude'], errors='coerce')
+dams_df['longitude'] = pd.to_numeric(dams_df['longitude'], errors='coerce')
+dams_df.dropna(subset=['latitude', 'longitude', 'dam_name'], inplace=True)
+
+@app.route('/')
+def index():
+    dams = dams_df.to_dict(orient='records')
+    return render_template('index.html', dams=dams)
+
+@app.route('/dam_details', methods=['POST'])
+def dam_details():
+    data = request.json
+    dam_name = data.get('dam_name')
+    lat = data.get('latitude')
+    lon = data.get('longitude')
+    current_level = data.get('current_water_level')
+
+    # Gemini: Get dam info
+    prompt = f"""
+    Provide the following information for the dam "{dam_name}" in JSON format:
+    {{
+      "capacity_mcm": "N/A if unknown",
+      "number_of_spillway_gates": "N/A if unknown",
+      "gate_type": "N/A if unknown",
+      "dam_height_meters": "N/A if unknown",
+      "purpose": "N/A if unknown",
+      "river_name": "N/A if unknown",
+      "country": "N/A if unknown"
+    }}
+    """
+    try:
+        response = gemini_model.generate_content(prompt)
+        text = response.text.strip()
+        # Extract JSON from response text
+        json_start = text.find('{')
+        json_end = text.rfind('}') + 1
+        dam_info = json.loads(text[json_start:json_end])
+    except Exception as e:
+        return jsonify({"error": f"Gemini API error: {e}"})
+
+    # Fetch rainfall forecast
+    try:
+        forecast_url = "https://api.open-meteo.com/v1/forecast"
+        params = {
+            "latitude": lat,
+            "longitude": lon,
+            "daily": "precipitation_sum",
+            "forecast_days": 10,
+            "timezone": "auto"
+        }
+        r = requests.get(forecast_url, params=params, timeout=10)
+        r.raise_for_status()
+        forecast_data = r.json()
+        dates = forecast_data['daily']['time']
+        rain = forecast_data['daily']['precipitation_sum']
+        rainfall_list = [{"date": d, "rainfall_mm": v} for d, v in zip(dates, rain)]
+    except Exception as e:
+        return jsonify({"error": f"Rainfall API error: {e}"})
+
+    # Prepare prompt for operational advice
+    rain_summary = "\n".join([f"{r['date']}: {r['rainfall_mm']} mm" for r in rainfall_list])
+    advice_prompt = f"""
+    You are an expert dam operations advisor. For the dam "{dam_name}", here is the info:
+    Capacity (MCM): {dam_info.get('capacity_mcm', 'N/A')}
+    Spillway gates: {dam_info.get('number_of_spillway_gates', 'N/A')} ({dam_info.get('gate_type', 'N/A')})
+    Height: {dam_info.get('dam_height_meters', 'N/A')} meters
+    Purpose: {dam_info.get('purpose', 'N/A')}
+    River: {dam_info.get('river_name', 'N/A')}
+    Country: {dam_info.get('country', 'N/A')}
+
+    Current water level: {current_level} % of capacity.
+
+    Rainfall forecast for next 10 days:
+    {rain_summary}
+
+    Based on this data, provide operational recommendations with key performance indicators (KPIs).
+    Format your response with:
+    KEY RECOMMENDATIONS:
+    - Overall Status: [NORMAL, WATCH, WARNING, EMERGENCY]
+    - Action Required: [MAINTAIN CURRENT, OPEN GATES, CLOSE GATES, MONITOR CLOSELY]
+    - Urgency and timing if opening gates
+    - Suggested % of gate opening
+    - Other notes
+    """
+    try:
+        advice_resp = gemini_model.generate_content(advice_prompt)
+        advice_text = advice_resp.text.strip()
+    except Exception as e:
+        advice_text = f"Error generating advice: {e}"
+
+    return jsonify({
+        "dam_info": dam_info,
+        "rainfall_forecast": rainfall_list,
+        "operational_advice": advice_text
+    })
+
+if __name__ == "__main__":
+    app.run(debug=True)

dam.csv

@@ -0,0 +1,18 @@
+dam_name,latitude,longitude
+Bhakra Dam,31.4166,76.4333
+Hirakud Dam,21.5700,83.8700
+Nagarjuna Sagar Dam,16.5750,79.3130
+Mettur Dam,11.7969,77.8008
+Koyna Dam,17.3998,73.7514
+Tungabhadra Dam,15.3268,76.3362
+Hoover Dam,36.0156,-114.7378
+Three Gorges Dam,30.8231,111.0037
+Glen Canyon Dam,36.9375,-111.4844
+Alqueva Dam,38.2000,-7.4833
+Kariba Dam, -16.5200, 28.7900
+Aswan High Dam,23.9667,32.8833
+Itaipu Dam,-25.4081,-54.5889
+Tehri Dam,30.3780,78.4800
+Sardar Sarovar Dam,21.8300,73.7400
+Krishnarajasagara Dam,12.4247,76.5773
+Linganamakki Dam,14.1819,74.8486

requirements.txt

@@ -0,0 +1,5 @@
+Flask
+pandas
+requests
+python-dotenv
+google-generativeai

templates/index.html

@@ -0,0 +1,1004 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <title>Dam Operation Simulator</title>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
+    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" crossorigin="" />
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet" />
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet" />
+    <style>
+        :root {
+            --primary: #0891b2;
+            --primary-dark: #0e7490;
+            --secondary: #0ea5e9;
+            --accent: #06b6d4;
+            --light: #ecfeff;
+            --dark: #164e63;
+            --danger: #f43f5e;
+            --success: #10b981;
+            --warning: #f59e0b;
+        }
+
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
+            min-height: 100vh;
+            padding: 0;
+            margin: 0;
+        }
+
+        .page-container {
+            max-width: 1400px;
+            margin: 0 auto;
+            padding: 1.5rem;
+        }
+
+        .app-header {
+            background: linear-gradient(to right, var(--primary), var(--secondary));
+            color: white;
+            padding: 1.5rem;
+            border-radius: 10px;
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+            margin-bottom: 2rem;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .app-header h1 {
+            font-weight: 700;
+            margin: 0;
+            position: relative;
+            z-index: 2;
+        }
+
+        .water-ripple {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPgogIDxkZWZzPgogICAgPHBhdHRlcm4gaWQ9IndhdmUiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHdpZHRoPSIxMDAiIGhlaWdodD0iMjAiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSgwKSI+CiAgICAgIDxwYXRoIGQ9Ik0wLDEwIHH1LDEwIDI1LDAgdC0yNSwwIHoiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC4xKSIgLz4KICAgIDwvcGF0dGVybj4KICA8L2RlZnM+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCN3YXZlKSIgLz4KPC9zdmc+');
+            opacity: 0.2;
+            z-index: 1;
+        }
+
+        .card {
+            border-radius: 10px;
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+            background-color: white;
+            overflow: hidden;
+        }
+
+        .card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+        }
+
+        .card-header {
+            background: linear-gradient(to right, var(--primary), var(--accent));
+            color: white;
+            padding: 1rem;
+            font-weight: 600;
+            border-bottom: none;
+        }
+
+        #map {
+            height: 500px;
+            border-radius: 10px;
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+        }
+
+        .btn-primary {
+            background: var(--primary);
+            border-color: var(--primary);
+            position: relative;
+            overflow: hidden;
+            transition: background-color 0.3s ease;
+        }
+
+        .btn-primary:hover {
+            background: var(--primary-dark);
+            border-color: var(--primary-dark);
+        }
+
+        .btn-primary:active {
+            transform: scale(0.98);
+        }
+
+        .btn-ripple {
+            position: relative;
+            overflow: hidden;
+        }
+
+        .btn-ripple .ripple {
+            position: absolute;
+            border-radius: 50%;
+            background-color: rgba(255, 255, 255, 0.4);
+            transform: scale(0);
+            animation: ripple 0.6s linear;
+        }
+
+        @keyframes ripple {
+            to {
+                transform: scale(4);
+                opacity: 0;
+            }
+        }
+
+        .water-level-container {
+            background-color: #f0f9ff;
+            border-radius: 10px;
+            padding: 1rem;
+            margin-bottom: 1.5rem;
+            border: 1px solid #bae6fd;
+            position: relative;
+        }
+
+        .water-level-value {
+            font-size: 2rem;
+            font-weight: bold;
+            color: var(--primary);
+            text-align: center;
+            margin-bottom: 0.5rem;
+            transition: color 0.3s ease;
+        }
+
+        .water-tank {
+            height: 150px;
+            width: 50px;
+            border: 2px solid #94a3b8;
+            border-radius: 5px;
+            margin: 0 auto;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .water-fill {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: linear-gradient(to bottom, var(--primary), var(--secondary));
+            height: 60%;
+            transition: height 0.5s ease;
+        }
+
+        .water-waves {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 8px;
+            background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPgogIDxkZWZzPgogICAgPHBhdHRlcm4gaWQ9IndhdmUiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHdpZHRoPSIyMCIgaGVpZ2h0PSI4IiBwYXR0ZXJuVHJhbnNmb3JtPSJyb3RhdGUoMCkiPgogICAgICA8cGF0aCBkPSJNMCw0IGMxLDIgNCwyIDUsMyBzNCwtNSAxMCwtNSBzNSw1IDUsMSIgc3Ryb2tlPSJyZ2JhKDI1NSwyNTUsMjU1LDAuNSkiIGZpbGw9Im5vbmUiIC8+CiAgICA8L3BhdHRlcm4+CiAgPC9kZWZzPgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjd2F2ZSkiIC8+Cjwvc3ZnPg==');
+            animation: waveAnimation 2s linear infinite;
+        }
+
+        @keyframes waveAnimation {
+            0% {
+                background-position: 0 0;
+            }
+            100% {
+                background-position: 20px 0;
+            }
+        }
+
+        .info-box { /* For Dam Information Table */
+            max-height: 400px;
+            overflow-y: auto;
+            border-radius: 10px;
+            padding: 1rem;
+            background-color: white;
+            border: 1px solid #e2e8f0;
+            /* These were making the table text monospace, removed for consistency with recommendations */
+            /* white-space: pre-wrap;
+            font-family: monospace; */
+            font-size: 0.9rem;
+            line-height: 1.5;
+        }
+
+        .info-box::-webkit-scrollbar {
+            width: 8px;
+        }
+
+        .info-box::-webkit-scrollbar-track {
+            background: #f1f1f1;
+            border-radius: 10px;
+        }
+
+        .info-box::-webkit-scrollbar-thumb {
+            background: var(--primary);
+            border-radius: 10px;
+        }
+
+        .info-box::-webkit-scrollbar-thumb:hover {
+            background: var(--primary-dark);
+        }
+
+        /* Styles for Operational Recommendations content */
+        #operational-advice-content {
+            max-height: 450px; /* Or your desired height */
+            overflow-y: auto;
+            padding-right: 10px; /* For scrollbar */
+        }
+        #operational-advice-content::-webkit-scrollbar {
+            width: 8px;
+        }
+        #operational-advice-content::-webkit-scrollbar-track {
+            background: #f1f1f1;
+            border-radius: 10px;
+        }
+        #operational-advice-content::-webkit-scrollbar-thumb {
+            background: var(--primary);
+            border-radius: 10px;
+        }
+        #operational-advice-content::-webkit-scrollbar-thumb:hover {
+            background: var(--primary-dark);
+        }
+        .recommendation-item h6 strong {
+            color: var(--primary-dark);
+        }
+
+
+        .loading-animation {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 2rem;
+        }
+
+        .loading-drops {
+            display: flex;
+            align-items: flex-end;
+        }
+
+        .drop {
+            width: 8px;
+            height: 30px;
+            margin: 0 5px;
+            background-color: var(--primary);
+            border-radius: 50% 50% 0 0 / 80% 80% 0 0;
+            animation: drip 1.5s ease-in-out infinite;
+        }
+
+        .drop:nth-child(2) {
+            animation-delay: 0.2s;
+            height: 35px;
+        }
+
+        .drop:nth-child(3) {
+            animation-delay: 0.4s;
+            height: 40px;
+        }
+
+        .drop:nth-child(4) {
+            animation-delay: 0.6s;
+            height: 35px;
+        }
+
+        .drop:nth-child(5) {
+            animation-delay: 0.8s;
+            height: 30px;
+        }
+
+        @keyframes drip {
+            0%, 100% {
+                transform: scaleY(0.8);
+            }
+            50% {
+                transform: scaleY(1.2);
+            }
+        }
+
+        .dam-control-panel {
+            margin-bottom: 1.5rem;
+        }
+
+        .form-select {
+            background-color: white;
+            border: 1px solid #bae6fd;
+            transition: border-color 0.3s ease, box-shadow 0.3s ease;
+        }
+
+        .form-select:focus {
+            border-color: var(--primary);
+            box-shadow: 0 0 0 0.25rem rgba(8, 145, 178, 0.25);
+        }
+
+        .form-range {
+            height: 1.5rem;
+        }
+
+        .form-range::-webkit-slider-thumb {
+            background: var(--primary);
+        }
+
+        .form-range::-moz-range-thumb {
+            background: var(--primary);
+        }
+
+        .form-range::-webkit-slider-runnable-track {
+            background: linear-gradient(to right, #e0f2fe, #0ea5e9);
+            border-radius: 0.5rem;
+            height: 0.5rem;
+        }
+
+        .form-range::-moz-range-track {
+            background: linear-gradient(to right, #e0f2fe, #0ea5e9);
+            border-radius: 0.5rem;
+            height: 0.5rem;
+        }
+
+        .badge-status {
+            padding: 0.5rem 1rem;
+            border-radius: 20px;
+            font-weight: 600;
+            display: inline-block;
+            margin-top: 0.5rem;
+        }
+
+        .badge-normal {
+            background-color: var(--success);
+            color: white;
+        }
+
+        .badge-watch {
+            background-color: var(--warning);
+            color: white;
+        }
+
+        .badge-warning { /* This was --danger, but visually a bit strong, using a slightly lighter red */
+            background-color: #dc2626; /* Tailwind red-600 */
+            color: white;
+        }
+
+        .badge-emergency {
+            background-color: #b91c1c; /* Tailwind red-700 / Darker red */
+            color: white;
+            animation: pulse 1.5s infinite;
+        }
+
+        @keyframes pulse {
+            0% {
+                transform: scale(1);
+            }
+            50% {
+                transform: scale(1.05);
+            }
+            100% {
+                transform: scale(1);
+            }
+        }
+
+        .rainfall-chart {
+            margin-top: 1rem;
+            height: 150px;
+            position: relative;
+        }
+
+        .rainfall-bar {
+            position: absolute;
+            bottom: 0;
+            background: linear-gradient(to top, var(--primary), var(--secondary));
+            border-radius: 5px 5px 0 0;
+            transition: height 0.5s ease;
+            width: 8%; /* Adjusted for better spacing with more bars */
+            margin-right: 1%;
+        }
+
+        .rainfall-date {
+            position: absolute;
+            bottom: -20px;
+            font-size: 0.7rem;
+            width: 8%; /* Should match bar width */
+            text-align: center;
+            transform: rotate(-45deg);
+            transform-origin: top left;
+            white-space: nowrap;
+        }
+
+        .rainfall-value {
+            position: absolute;
+            top: -20px;
+            font-size: 0.7rem;
+            width: 100%;
+            text-align: center;
+            font-weight: bold;
+            color: var(--primary-dark);
+        }
+    </style>
+</head>
+<body>
+    <div class="page-container">
+        <div class="app-header animate__animated animate__fadeIn">
+            <div class="water-ripple"></div>
+            <h1><i class="fas fa-water me-2"></i> Dam Operation Simulator</h1>
+            <p class="mb-0 mt-2">Monitor and simulate water levels, rainfall forecasts and get operational advice</p>
+        </div>
+
+        <div class="row g-4">
+            <div class="col-lg-8 animate__animated animate__fadeInLeft">
+                <div class="card h-100">
+                    <div class="card-header">
+                        <i class="fas fa-map-location-dot me-2"></i> Interactive Dam Map
+                    </div>
+                    <div class="card-body p-2">
+                        <div id="map"></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="col-lg-4 animate__animated animate__fadeInRight">
+                <div class="card dam-control-panel">
+                    <div class="card-header">
+                        <i class="fas fa-sliders me-2"></i> Dam Controls
+                    </div>
+                    <div class="card-body">
+                        <div class="mb-3">
+                            <label for="dam-select" class="form-label">
+                                <i class="fas fa-database me-2"></i> Select Dam:
+                            </label>
+                            <select id="dam-select" class="form-select">
+                                <option value="" selected disabled>Select a dam</option>
+                                {% for dam in dams %}
+                                <option value="{{ dam.dam_name }}" data-lat="{{ dam.latitude }}" data-lon="{{ dam.longitude }}">
+                                    {{ dam.dam_name }}
+                                </option>
+                                {% endfor %}
+                            </select>
+                        </div>
+
+                        <div class="water-level-container mb-3">
+                            <label for="water-level" class="form-label">
+                                <i class="fas fa-fill-drip me-2"></i> Current Water Level:
+                            </label>
+                            <div class="water-level-value" id="water-level-val">60%</div>
+
+                            <div class="d-flex align-items-center">
+                                <div class="flex-grow-1">
+                                    <input type="range" id="water-level" min="0" max="100" value="60" step="1" class="form-range" />
+                                </div>
+                                <div class="ms-3">
+                                    <div class="water-tank">
+                                        <div class="water-fill" id="water-tank-fill">
+                                            <div class="water-waves"></div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <button id="get-info-btn" class="btn btn-primary w-100 btn-ripple">
+                            <i class="fas fa-sync me-2"></i> Get Dam Info & Advice
+                        </button>
+                    </div>
+                </div>
+
+                <div class="card">
+                    <div class="card-header">
+                        <i class="fas fa-info-circle me-2"></i> Dam Information
+                    </div>
+                    <div class="card-body p-0">
+                        <div class="info-box" id="dam-info-box">
+                            <div class="text-center text-muted py-5">
+                                <i class="fas fa-water fa-3x mb-3"></i>
+                                <p>Select a dam and click "Get Dam Info & Advice" to view details</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div id="rainfall-visualization" class="card mt-4 animate__animated animate__fadeInUp d-none">
+            <div class="card-header">
+                <i class="fas fa-cloud-rain me-2"></i> 10-Day Rainfall Forecast
+            </div>
+            <div class="card-body p-3">
+                <div class="rainfall-chart" id="rainfall-chart">
+                    <!-- Rainfall bars will be added here via JS -->
+                </div>
+            </div>
+        </div>
+
+        <div id="operation-advice-card" class="card mt-4 animate__animated animate__fadeInUp d-none">
+            <div class="card-header">
+                <i class="fas fa-clipboard-list me-2"></i> Operational Recommendations
+            </div>
+            <div class="card-body">
+                <div id="status-badge" class="text-center mb-3">
+                    <!-- Status badge will be inserted here -->
+                </div>
+                <div id="operational-advice-content">
+                    <!-- Operational advice will be inserted here -->
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="https://unpkg.com/[email protected]/dist/leaflet.js" crossorigin=""></script>
+    <script>
+        // Ensure dams is defined, even if empty, to prevent errors if server doesn't provide it.
+        const dams = typeof {{ dams|tojson }} !== 'undefined' ? {{ dams|tojson }} : [];
+        let map, activeMarker;
+        let markers = {}; // Keep track of markers
+
+        // Initialize map with custom marker icons
+        function initMap() {
+            map = L.map('map').setView([20, 0], 2); // Default view
+
+            L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+                maxZoom: 18,
+                attribution: '© OpenStreetMap contributors'
+            }).addTo(map);
+
+            const damIcon = L.icon({
+                iconUrl: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iIzA4OTFiMiIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ij48cGF0aCBkPSJNMTIgM0w2IDE2aDEyTDEyIDN6TTEyIDZsMy41IDdsLTcgMEwxMiA2eiIvPjxyZWN0IHg9IjQiIHk9IjE4IiB3aWR0aD0iMTYiIGhlaWdodD0iMyIgcng9IjEiLz48L3N2Zz4=',
+                iconSize: [32, 32],
+                iconAnchor: [16, 32],
+                popupAnchor: [0, -32]
+            });
+
+            const activeIcon = L.icon({
+                iconUrl: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iI2Y1OWUwYiIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ij48cGF0aCBkPSJNMTIgM0w2IDE2aDEyTDEyIDN6TTEyIDZsMy41IDdsLTcgMEwxMiA2eiIvPjxyZWN0IHg9IjQiIHk9IjE4IiB3aWR0aD0iMTYiIGhlaWdodD0iMyIgcng9IjEiLz48L3N2Zz4=',
+                iconSize: [38, 38],
+                iconAnchor: [19, 38],
+                popupAnchor: [0, -32]
+            });
+
+            dams.forEach(dam => {
+                if (dam.latitude && dam.longitude) {
+                    const marker = L.marker([dam.latitude, dam.longitude], { icon: damIcon })
+                        .addTo(map)
+                        .bindPopup(`
+                            <div class="text-center">
+                                <strong>${dam.dam_name}</strong>
+                                <hr class="my-2">
+                                <button class="btn btn-sm btn-primary select-dam-btn" data-dam-name="${dam.dam_name}">Select Dam</button>
+                            </div>
+                        `);
+
+                    marker.on('click', () => {
+                        if (activeMarker && activeMarker !== marker) {
+                            activeMarker.setIcon(damIcon);
+                        }
+                        marker.setIcon(activeIcon);
+                        activeMarker = marker;
+                    });
+
+                    marker.on('popupopen', (e) => {
+                        const popupNode = e.popup.getElement();
+                        const selectBtn = popupNode.querySelector('.select-dam-btn');
+                        if (selectBtn) {
+                            selectBtn.addEventListener('click', () => {
+                                const damNameToSelect = selectBtn.getAttribute('data-dam-name');
+                                document.getElementById('dam-select').value = damNameToSelect;
+                                // Manually trigger change event for the select
+                                document.getElementById('dam-select').dispatchEvent(new Event('change'));
+                                marker.closePopup();
+                            });
+                        }
+                    });
+                    markers[dam.dam_name] = marker;
+                }
+            });
+            return markers; // markers is already a global variable, but returning is fine
+        }
+
+        // Center map to selected dam
+        function centerMapToDam(lat, lon, damName) {
+            map.setView([lat, lon], 10);
+
+            const damIcon = L.icon({ // Re-define here or make global
+                iconUrl: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iIzA4OTFiMiIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ij48cGF0aCBkPSJNMTIgM0w2IDE2aDEyTDEyIDN6TTEyIDZsMy41IDdsLTcgMEwxMiA2eiIvPjxyZWN0IHg9IjQiIHk9IjE4IiB3aWR0aD0iMTYiIGhlaWdodD0iMyIgcng9IjEiLz48L3N2Zz4=',
+                iconSize: [32, 32], iconAnchor: [16, 32], popupAnchor: [0, -32]
+            });
+            const activeIcon = L.icon({ // Re-define here or make global
+                 iconUrl: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iI2Y1OWUwYiIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ij48cGF0aCBkPSJNMTIgM0w2IDE2aDEyTDEyIDN6TTEyIDZsMy41IDdsLTcgMEwxMiA2eiIvPjxyZWN0IHg9IjQiIHk9IjE4IiB3aWR0aD0iMTYiIGhlaWdodD0iMyIgcng9IjEiLz48L3N2Zz4=',
+                iconSize: [38, 38], iconAnchor: [19, 38], popupAnchor: [0, -32]
+            });
+
+            if (activeMarker) {
+                activeMarker.setIcon(damIcon);
+            }
+            activeMarker = markers[damName];
+            if (activeMarker) {
+                activeMarker.setIcon(activeIcon);
+                activeMarker.openPopup(); // Optionally open popup
+            }
+        }
+
+        function setupWaterLevelControl() {
+            const waterLevelInput = document.getElementById('water-level');
+            const waterLevelVal = document.getElementById('water-level-val');
+            const waterTankFill = document.getElementById('water-tank-fill');
+
+            waterLevelInput.addEventListener('input', () => {
+                const val = waterLevelInput.value;
+                waterLevelVal.textContent = val + '%';
+                waterTankFill.style.height = val + '%';
+
+                if (val > 85) {
+                    waterLevelVal.style.color = 'var(--danger)';
+                    waterTankFill.style.background = `linear-gradient(to bottom, var(--danger), ${getComputedStyle(document.documentElement).getPropertyValue('--danger').trim()}dd)`;
+                } else if (val > 70) {
+                    waterLevelVal.style.color = 'var(--warning)';
+                    waterTankFill.style.background = `linear-gradient(to bottom, var(--warning), ${getComputedStyle(document.documentElement).getPropertyValue('--warning').trim()}dd)`;
+                } else {
+                    waterLevelVal.style.color = 'var(--primary)';
+                    waterTankFill.style.background = 'linear-gradient(to bottom, var(--primary), var(--secondary))';
+                }
+            });
+            waterTankFill.style.height = waterLevelInput.value + '%'; // Initialize
+        }
+
+        function setupRippleEffect() {
+            document.querySelectorAll('.btn-ripple').forEach(button => {
+                button.addEventListener('click', function(e) {
+                    const rect = e.target.getBoundingClientRect();
+                    const x = e.clientX - rect.left;
+                    const y = e.clientY - rect.top;
+
+                    const ripple = document.createElement('span');
+                    ripple.classList.add('ripple');
+                    ripple.style.left = `${x}px`;
+                    ripple.style.top = `${y}px`;
+                    this.appendChild(ripple);
+                    setTimeout(() => ripple.remove(), 600);
+                });
+            });
+        }
+
+        function showLoading(element) {
+            element.innerHTML = `
+                <div class="loading-animation">
+                    <div class="loading-drops">
+                        <div class="drop"></div><div class="drop"></div><div class="drop"></div><div class="drop"></div><div class="drop"></div>
+                    </div>
+                </div>
+                <div class="text-center mt-3 text-muted">Loading data...</div>`;
+        }
+
+        function displayRainfallChart(rainfallData) {
+            const container = document.getElementById('rainfall-chart');
+            container.innerHTML = '';
+            if (!rainfallData || rainfallData.length === 0) {
+                container.innerHTML = "<p class='text-center text-muted'>No rainfall data available.</p>";
+                document.getElementById('rainfall-visualization').classList.remove('d-none');
+                return;
+            }
+
+            const maxRainfall = Math.max(0.1, ...rainfallData.map(day => day.rainfall_mm)); // Avoid division by zero
+            const chartHeight = Math.max(50, container.offsetHeight - 40); // Min height 50, reserve 40px for labels
+
+            rainfallData.forEach((day, index) => {
+                const value = day.rainfall_mm;
+                const barHeight = value > 0 ? Math.max(2, (value / maxRainfall) * chartHeight) : 2; // Min height 2px for 0 rainfall
+
+                const barWrapper = document.createElement('div');
+                barWrapper.style.position = 'absolute';
+                barWrapper.style.left = (index * (100 / rainfallData.length)) + '%';
+                barWrapper.style.width = (100 / rainfallData.length - 1) + '%'; // -1 for margin
+                barWrapper.style.height = '100%';
+                barWrapper.style.display = 'flex';
+                barWrapper.style.flexDirection = 'column';
+                barWrapper.style.alignItems = 'center';
+
+
+                const bar = document.createElement('div');
+                bar.className = 'rainfall-bar animate__animated animate__fadeInUp';
+                bar.style.position = 'relative'; // For value label positioning
+                bar.style.width = '80%'; // Bar width within its wrapper
+                bar.style.height = barHeight + 'px';
+                bar.style.animationDelay = (index * 0.05) + 's';
+                bar.style.marginLeft = 'auto'; // Center bar in wrapper
+                bar.style.marginRight = 'auto';
+
+
+                const valueLabel = document.createElement('div');
+                valueLabel.className = 'rainfall-value';
+                valueLabel.textContent = value + ' mm';
+                bar.appendChild(valueLabel);
+
+                const dateLabel = document.createElement('div');
+                dateLabel.className = 'rainfall-date';
+                dateLabel.textContent = day.date.substring(5);
+                dateLabel.style.position = 'relative'; // Reset absolute
+                dateLabel.style.transform = 'none'; // Reset transform
+                dateLabel.style.textAlign = 'center';
+                dateLabel.style.width = '100%';
+                dateLabel.style.marginTop = '5px'; // Space between bar and date
+
+
+                barWrapper.appendChild(bar);
+                barWrapper.appendChild(dateLabel);
+                container.appendChild(barWrapper);
+            });
+            document.getElementById('rainfall-visualization').classList.remove('d-none');
+        }
+
+        function displayOperationalAdvice(adviceText) {
+            const adviceContentContainer = document.getElementById('operational-advice-content');
+            const statusBadgeContainer = document.getElementById('status-badge');
+            adviceContentContainer.innerHTML = '';
+            statusBadgeContainer.innerHTML = '';
+
+            let mutableAdviceText = adviceText.trim();
+
+            let status = null;
+            let actionForBadge = null;
+            let actionTextForDisplay = "";
+
+            const statusBlockMatch = mutableAdviceText.match(/^\*\*Overall Status\*\*\s*(\w+)/i);
+            if (statusBlockMatch) {
+                status = statusBlockMatch[1].toUpperCase();
+                mutableAdviceText = mutableAdviceText.substring(statusBlockMatch[0].length).trim();
+                if (mutableAdviceText.startsWith("- ")) {
+                    mutableAdviceText = mutableAdviceText.substring(2).trim();
+                }
+            }
+
+            const actionBlockMatch = mutableAdviceText.match(/^\*\*Action Required\*\*\s*(.*?)(?=\s*-\s*\*\*|$)/i);
+            if (actionBlockMatch) {
+                actionTextForDisplay = actionBlockMatch[1].trim();
+                if (actionTextForDisplay.match(/^(MAINTAIN CURRENT|OPEN GATES|CLOSE GATES|MONITOR CLOSELY)$/i)) {
+                    actionForBadge = actionTextForDisplay.toUpperCase();
+                }
+                mutableAdviceText = mutableAdviceText.substring(actionBlockMatch[0].length).trim();
+                if (mutableAdviceText.startsWith("- ")) {
+                    mutableAdviceText = mutableAdviceText.substring(2).trim();
+                }
+            }
+
+            if (status) {
+                let badgeClass = 'badge-normal';
+                if (status === 'WATCH') badgeClass = 'badge-watch';
+                if (status === 'WARNING') badgeClass = 'badge-warning';
+                if (status === 'EMERGENCY') badgeClass = 'badge-emergency';
+
+                let iconHtml = '';
+                if (status === 'NORMAL') iconHtml = '<i class="fas fa-check-circle me-2"></i>';
+                else if (status === 'WATCH') iconHtml = '<i class="fas fa-exclamation-circle me-2"></i>';
+                else if (status === 'WARNING') iconHtml = '<i class="fas fa-triangle-exclamation me-2"></i>';
+                else if (status === 'EMERGENCY') iconHtml = '<i class="fas fa-radiation me-2"></i>';
+
+                statusBadgeContainer.innerHTML = `
+                    <span class="badge-status ${badgeClass}">
+                        ${iconHtml}
+                        Status: ${status}
+                    </span>
+                    ${actionForBadge ? `<div class="mt-2"><strong>Action:</strong> ${actionForBadge}</div>` : (actionTextForDisplay ? `<div class="mt-2"><strong>Action Required:</strong> ${actionTextForDisplay.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')}</div>` : '')}
+                `;
+            } else if (actionTextForDisplay) {
+                 statusBadgeContainer.innerHTML = `
+                    <div class="mt-2"><strong>Action Required:</strong> ${actionTextForDisplay.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')}</div>
+                `;
+            }
+
+            let formattedAdviceHTML = "";
+            if (mutableAdviceText) {
+                const segments = mutableAdviceText.split(/\s*-\s*(?=\*\*)/);
+
+                segments.forEach(segment => {
+                    if (segment.trim() === "") return;
+
+                    const mainPointMatch = segment.match(/^\*\*(.*?)\*\*(.*)/s);
+                    if (mainPointMatch) {
+                        let title = mainPointMatch[1].trim();
+                        if (title.endsWith(":")) title = title.slice(0, -1);
+
+                        let content = mainPointMatch[2].trim();
+                        if (content.startsWith(":")) content = content.substring(1).trim();
+
+                        formattedAdviceHTML += `<div class="recommendation-item mb-3">`;
+                        formattedAdviceHTML += `  <h6 class="mb-1"><strong>${title}</strong></h6>`;
+
+                        let hasSubpoints = false;
+                        const subPointRegex = /\s*-\s*(?=\*\*)/; // Sub-points are separated by " - **"
+
+                        if (content.match(subPointRegex)) {
+                             hasSubpoints = true;
+                        }
+
+                        if (hasSubpoints) {
+                            formattedAdviceHTML += `<ul class="list-unstyled ms-3 mt-1">`;
+                            // The first part of content before " - **" is part of the main content description, if any
+                            const firstPartMatch = content.match(/^(.*?)(?=\s*-\s*\*\*)/s);
+                            if (firstPartMatch && firstPartMatch[1].trim()) {
+                                formattedAdviceHTML += `<li class="mb-1">${firstPartMatch[1].trim().replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>').replace(/\n/g, '<br>')}</li>`;
+                            }
+
+                            const subSegments = content.split(subPointRegex);
+                            subSegments.forEach((subSegmentData, idx) => {
+                                // Skip the first part if it was handled above, or if it's empty
+                                if (idx === 0 && firstPartMatch && firstPartMatch[1].trim()) return;
+                                if (idx === 0 && (!firstPartMatch || !firstPartMatch[1].trim()) && !subSegmentData.trim().startsWith("**")) return;
+
+
+                                let currentSubSegment = subSegmentData.trim();
+                                if (currentSubSegment === "") return;
+
+                                const subPointMatch = currentSubSegment.match(/^\*\*(.*?)\*\*(.*)/s);
+                                if (subPointMatch) {
+                                    let subTitle = subPointMatch[1].trim();
+                                    if (subTitle.endsWith(":")) subTitle = subTitle.slice(0, -1);
+                                    let subDetails = subPointMatch[2].trim();
+                                    if (subDetails.startsWith(":")) subDetails = subDetails.substring(1).trim();
+
+                                    formattedAdviceHTML += `<li class="mb-1"><strong>${subTitle}:</strong> ${subDetails.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>').replace(/\n/g, '<br>')}</li>`;
+                                } else {
+                                    formattedAdviceHTML += `<li class="mb-1">${currentSubSegment.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>').replace(/\n/g, '<br>')}</li>`;
+                                }
+                            });
+                            formattedAdviceHTML += `</ul>`;
+                        } else {
+                            formattedAdviceHTML += `  <div class="ms-3 mt-1">${content.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>').replace(/\n/g, '<br>')}</div>`;
+                        }
+                        formattedAdviceHTML += `</div>`;
+                    } else {
+                        formattedAdviceHTML += `<p class="mb-2">${segment.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>').replace(/\n/g, '<br>')}</p>`;
+                    }
+                });
+            } else if (!status && !actionTextForDisplay) {
+                formattedAdviceHTML = "<p class='text-muted text-center py-3'>No specific operational recommendations available.</p>";
+            } else if (mutableAdviceText.trim() === "" && (status || actionTextForDisplay)) {
+                formattedAdviceHTML = "<p class='text-muted text-center py-3'>Refer to status and action above. No further detailed recommendations.</p>";
+            }
+
+            adviceContentContainer.innerHTML = formattedAdviceHTML;
+            document.getElementById('operation-advice-card').classList.remove('d-none');
+        }
+
+
+        function displayDamInfo(data) {
+            const infoContainer = document.getElementById('dam-info-box');
+            let infoHTML = `
+                <div class="animate__animated animate__fadeIn">
+                    <table class="table table-sm table-borderless table-hover">
+                        <tbody>
+                            <tr><th>Capacity</th><td>${data.dam_info.capacity_mcm || 'N/A'} MCM</td></tr>
+                            <tr><th>Gates</th><td>${data.dam_info.number_of_spillway_gates || 'N/A'} (${data.dam_info.gate_type || 'N/A'})</td></tr>
+                            <tr><th>Height</th><td>${data.dam_info.dam_height_meters || 'N/A'} m</td></tr>
+                            <tr><th>Purpose</th><td>${data.dam_info.purpose || 'N/A'}</td></tr>
+                            <tr><th>River</th><td>${data.dam_info.river_name || 'N/A'}</td></tr>
+                            <tr><th>Country</th><td>${data.dam_info.country || 'N/A'}</td></tr>
+                        </tbody>
+                    </table>
+                </div>`;
+            infoContainer.innerHTML = infoHTML;
+
+            displayRainfallChart(data.rainfall_forecast);
+            displayOperationalAdvice(data.operational_advice);
+        }
+
+        async function fetchDamDetails() {
+            const damSelect = document.getElementById('dam-select');
+            const damName = damSelect.value;
+
+            if (!damName) {
+                showToast("Please select a dam first.");
+                return;
+            }
+
+            const selectedOption = damSelect.selectedOptions[0];
+            const lat = selectedOption.getAttribute('data-lat');
+            const lon = selectedOption.getAttribute('data-lon');
+            const current_level = document.getElementById('water-level').value;
+
+            const damInfoBox = document.getElementById('dam-info-box');
+            const opAdviceContent = document.getElementById('operational-advice-content');
+            const rainfallChart = document.getElementById('rainfall-chart');
+
+            showLoading(damInfoBox);
+            opAdviceContent.innerHTML = '<div class="text-center text-muted py-3">Loading recommendations...</div>'; // Placeholder
+            rainfallChart.innerHTML = '<div class="text-center text-muted py-3">Loading forecast...</div>'; // Placeholder
+
+
+            document.getElementById('rainfall-visualization').classList.add('d-none');
+            document.getElementById('operation-advice-card').classList.add('d-none');
+
+            try {
+                const res = await fetch('/dam_details', { // Replace with your actual endpoint
+                    method: 'POST',
+                    headers: {'Content-Type': 'application/json'},
+                    body: JSON.stringify({
+                        dam_name: damName,
+                        latitude: lat,
+                        longitude: lon,
+                        current_water_level: current_level
+                    })
+                });
+
+                if (!res.ok) {
+                    const errorData = await res.json().catch(() => ({error: "Server error with no JSON response"}));
+                    throw new Error(errorData.error || `HTTP error! status: ${res.status}`);
+                }
+
+                const data = await res.json();
+
+                if (data.error) {
+                    damInfoBox.innerHTML = `<div class="alert alert-danger m-2"><i class="fas fa-triangle-exclamation me-2"></i> Error: ${data.error}</div>`;
+                    opAdviceContent.innerHTML = '';
+                    rainfallChart.innerHTML = '';
+                    return;
+                }
+                displayDamInfo(data);
+
+            } catch (err) {
+                console.error("Fetch error:", err);
+                damInfoBox.innerHTML = `<div class="alert alert-danger m-2"><i class="fas fa-triangle-exclamation me-2"></i> Fetch error: ${err.message || err}</div>`;
+                opAdviceContent.innerHTML = '';
+                rainfallChart.innerHTML = '';
+                // Optionally hide the cards again on error
+                 document.getElementById('rainfall-visualization').classList.add('d-none');
+                 document.getElementById('operation-advice-card').classList.add('d-none');
+            }
+        }
+
+        function showToast(message) {
+            let toastContainer = document.querySelector('.toast-container');
+            if (!toastContainer) {
+                toastContainer = document.createElement('div');
+                toastContainer.className = 'toast-container position-fixed top-0 end-0 p-3';
+                document.body.appendChild(toastContainer);
+            }
+
+            const toastId = `toast-${Date.now()}`;
+            const toastHTML = `
+                <div id="${toastId}" class="toast show animate__animated animate__fadeInRight" role="alert" aria-live="assertive" aria-atomic="true">
+                    <div class="toast-header bg-primary text-white">
+                        <i class="fas fa-info-circle me-2"></i>
+                        <strong class="me-auto">Dam Simulator</strong>
+                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast" aria-label="Close"></button>
+                    </div>
+                    <div class="toast-body">${message}</div>
+                </div>`;
+            toastContainer.insertAdjacentHTML('beforeend', toastHTML);
+
+            const toastElement = document.getElementById(toastId);
+            const bsToast = new bootstrap.Toast(toastElement, { delay: 5000 });
+            bsToast.show();
+            toastElement.addEventListener('hidden.bs.toast', () => toastElement.remove());
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            markers = initMap(); // Initialize map and global markers
+            setupWaterLevelControl();
+            setupRippleEffect();
+
+            document.getElementById('dam-select').addEventListener('change', (e) => {
+                const selectedOption = e.target.selectedOptions[0];
+                const lat = selectedOption.getAttribute('data-lat');
+                const lon = selectedOption.getAttribute('data-lon');
+                if (lat && lon) {
+                     centerMapToDam(parseFloat(lat), parseFloat(lon), e.target.value);
+                }
+            });
+
+            document.getElementById('get-info-btn').addEventListener('click', fetchDamDetails);
+
+            // Example: Populate dams if not using server-side template
+            // This is for frontend-only testing if `{{ dams|tojson }}` is not available
+            if (dams.length === 0 && typeof {{ dams|tojson }} === 'undefined') {
+                 const damSelect = document.getElementById('dam-select');
+                 const sampleDams = [
+                     { dam_name: "Sample Dam 1", latitude: 30.0, longitude: 70.0 },
+                     { dam_name: "Sample Dam 2", latitude: 35.0, longitude: 75.0 }
+                 ];
+                 sampleDams.forEach(dam => {
+                     const option = document.createElement('option');
+                     option.value = dam.dam_name;
+                     option.textContent = dam.dam_name;
+                     option.setAttribute('data-lat', dam.latitude);
+                     option.setAttribute('data-lon', dam.longitude);
+                     damSelect.appendChild(option);
+                     // also add to JS dams array for map markers
+                     dams.push(dam);
+                 });
+                 markers = initMap(); // Re-init map if dams were added late
+            }
+        });
+    </script>
+</body>
+</html>