import { useState, useEffect } from "react";
import { format } from "date-fns";
import { getWeather, getForecast, getRandomImage } from "./api";

export default function Dashboard() {
  const [time, setTime] = useState(new Date());
  const [weather, setWeather] = useState(null);
  const [forecast, setForecast] = useState([]);
  const [bgImage, setBgImage] = useState("");

  useEffect(() => {
    const interval = setInterval(() => setTime(new Date()), 1000);
    fetchWeatherData();
    return () => clearInterval(interval);
  }, []);

  async function fetchWeatherData() {
    try {
      const weatherData = await getWeather();
      setWeather(weatherData);
      const forecastData = await getForecast();
      setForecast(forecastData);
      const imageUrl = await getRandomImage(weatherData.description);
      setBgImage(imageUrl);
    } catch (error) {
      console.error("Error fetching weather data:", error);
    }
  }

  return (
    <div className="h-screen w-screen flex">
      {/* Left Panel */}
      <div
        className="w-1/4 p-4 flex flex-col items-center justify-center text-white"
        style={{ backgroundImage: `url(${bgImage})`, backgroundSize: "cover" }}
      >
        <h1 className="text-6xl font-bold">{format(time, "HH:mm:ss")}</h1>
        <p className="text-2xl mt-2">{format(time, "EEEE, MMM d")}</p>
        {weather && (
          <div className="mt-6 text-center">
            <p className="text-4xl">{weather.temp}°C</p>
            <p className="text-lg">{weather.description}</p>
          </div>
        )}
        <div className="mt-6">
          {forecast.map((day, index) => (
            <p key={index} className="text-sm">
              {day.date}: {day.temp}°C
            </p>
          ))}
        </div>
      </div>

      {/* Right Panel - Google Calendar */}
      <div className="w-3/4 bg-gray-100">
        <iframe
          src="https://calendar.google.com/calendar/embed?src=your_calendar_id&ctz=your_timezone"
          className="w-full h-full"
        ></iframe>
      </div>
    </div>
  );
}