script.js

const apiKey = "55e1551653599c4936a7845d7111c387";  // replace with your OpenWeatherMap API key
const searchBtn = document.getElementById("searchBtn");
const weatherResult = document.getElementById("weatherResult");
const historyBox = document.getElementById("history");

const BACKEND_URL = "https://weatherdashboard-1-07nj.onrender.com/"; // <-- your Render app URL

searchBtn.addEventListener("click", () => {
  const city = document.getElementById("city").value.trim();
  if (!city) return alert("Please enter a city name");

  fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`)
    .then(res => res.json())
    .then(data => {
      if (data.cod === 200) {
        const icon = getWeatherIcon(data.weather[0].main);

        weatherResult.innerHTML = `
          <h2>${data.name}, ${data.sys.country}</h2>
          <p>${icon} <strong>${data.weather[0].description.toUpperCase()}</strong></p>
          <p>🌡️ Temperature: ${data.main.temp}°C</p>
          <p>💧 Humidity: ${data.main.humidity}%</p>
          <p>🌬️ Wind Speed: ${data.wind.speed} m/s</p>
        `;

        // Save search to deployed backend
        fetch(`${BACKEND_URL}/history`, {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ city: data.name })
        })
        .then(() => loadHistory())
        .catch(err => console.error("Error saving history:", err));

      } else {
        weatherResult.innerHTML = `<p>⚠️ City not found! Please try again.</p>`;
      }
    })
    .catch(err => {
      console.error("Error fetching weather data:", err);
      weatherResult.innerHTML = `<p>⚠️ Error fetching weather data</p>`;
    });
});

// Function to get weather icon
function getWeatherIcon(condition) {
  switch(condition.toLowerCase()) {
    case "clear": return "☀️";
    case "clouds": return "☁️";
    case "rain": return "🌧️";
    case "drizzle": return "🌦️";
    case "thunderstorm": return "⛈️";
    case "snow": return "❄️";
    case "mist":
    case "haze":
    case "fog": return "🌫️";
    default: return "🌍";
  }
}

// Load last 5 searches from deployed backend
function loadHistory() {
  fetch(`${BACKEND_URL}/history`)  // GET request
    .then(res => res.json())
    .then(data => {
      historyBox.innerHTML = "<h3>Recent Searches</h3><ul>" +
        data.map(item => `<li>📍 ${item.city} (${new Date(item.searched_at).toLocaleString()})</li>`).join("") +
        "</ul>";
    })
    .catch(err => {
      console.error("Error loading history:", err);
      historyBox.innerHTML = "<p>⚠️ Cannot load history</p>";
    });
}

// Load history on page load
loadHistory();