"use client";

import { useState, useEffect } from "react";
import { motion } from "framer-motion";
import ThemeToggle from "./ThemeToggle";

function getWeatherEmoji(code: string): string {
  const c = parseInt(code);
  if (c === 113) return "☀️";
  if (c === 116) return "⛅";
  if (c === 119 || c === 122) return "☁️";
  if (c >= 176 && c <= 182) return "🌦️";
  if (c >= 185 && c <= 200) return "🌧️";
  if (c >= 200 && c <= 210) return "⛈️";
  if (c >= 210 && c <= 260) return "❄️";
  if (c >= 260 && c <= 300) return "🌨️";
  if (c >= 300 && c <= 400) return "🌧️";
  return "🌤️";
}

interface Props {
  isDark: boolean;
  onToggleTheme: () => void;
  weather: any;
}

export default function TopBar({ isDark, onToggleTheme, weather }: Props) {
  const [time, setTime] = useState("");
  const [date, setDate] = useState("");

  useEffect(() => {
    const update = () => {
      const now = new Date();
      setTime(
        now.toLocaleTimeString("ru-RU", { hour: "2-digit", minute: "2-digit" })
      );
      setDate(
        now.toLocaleDateString("ru-RU", {
          weekday: "short",
          day: "numeric",
          month: "long",
        })
      );
    };
    update();
    const id = setInterval(update, 1000);
    return () => clearInterval(id);
  }, []);

  return (
    <motion.div
      className="glass-card px-6 py-3 flex items-center justify-between no-select"
      style={{ borderRadius: "20px" }}
      initial={{ opacity: 0, y: -20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.5 }}
    >
      {/* Time & Date */}
      <div className="flex items-baseline gap-4">
        <span
          className="font-black tracking-tight leading-none"
          style={{ fontSize: "42px", color: "var(--text-primary)" }}
        >
          {time}
        </span>
        <span
          className="text-sm font-medium capitalize"
          style={{ color: "var(--text-secondary)" }}
        >
          {date}
        </span>
      </div>

      {/* Weather pill */}
      {weather && (
        <motion.div
          className="flex items-center gap-3 px-5 py-2 rounded-2xl"
          style={{
            background: "rgba(59,130,246,0.1)",
            border: "1px solid rgba(59,130,246,0.22)",
          }}
          initial={{ opacity: 0, scale: 0.9 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ delay: 0.3 }}
        >
          <span className="text-2xl leading-none">
            {getWeatherEmoji(weather.weatherCode)}
          </span>
          <div>
            <div
              className="text-xl font-black leading-tight"
              style={{ color: "var(--text-primary)" }}
            >
              {weather.temp}°C
            </div>
            <div
              className="text-xs leading-tight"
              style={{ color: "var(--text-secondary)" }}
            >
              {weather.desc}
            </div>
          </div>
        </motion.div>
      )}

      {/* Theme toggle */}
      <div className="flex items-center gap-3">
        {weather?.demo && (
          <span
            className="text-xs px-2.5 py-1 rounded-full font-semibold"
            style={{
              background: "rgba(245,158,11,0.15)",
              color: "#f59e0b",
              border: "1px solid rgba(245,158,11,0.3)",
            }}
          >
            Demo
          </span>
        )}
        <ThemeToggle isDark={isDark} onToggle={onToggleTheme} />
      </div>
    </motion.div>
  );
}