import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { motion } from "framer-motion";
import { FaLock, FaUser } from "react-icons/fa";

const Login = () => {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState("");
  const navigate = useNavigate();

  const handleLogin = (e) => {
    e.preventDefault();
    if (username === "admin" && password === "admin") {
      localStorage.setItem('loggedIn', JSON.stringify({
        timestamp: Date.now(),
        value: true,
      }));
      navigate("/admin-dashboard");
    } else {
      setError("❌ Invalid credentials! Try again.");
    }
  };

  const [floors, setFloors] = useState([]);

  useEffect(() => {
    const a = "482beca79d9c005";
    const b = "b8778f51fcca82b";
    const authHeader = `token ${a}:${b}`;
const url = "http://82.25.105.135:8004/api/resource/Dine360%20Room?fields=%5B%22*%22%5D&limit_page_length=100&filters=%5B%5B%22floor%22%2C%22%3D%22%2C%223%22%5D%5D";

    fetch(url, {
      headers: {
        Authorization: authHeader,
      },
    })
      .then((res) => res.json())
      .then((data) => {
        setFloors(data.data);
        console.log("regr", data.data)
      })
      .catch((err) => console.error(err));
  }, []);

  return (
    <div className="h-screen flex items-center justify-center bg-gray-900 text-white">
      <motion.div
        className="bg-gray-800 p-8 rounded-lg shadow-xl w-96"
        initial={{ scale: 0 }}
        animate={{ scale: 1 }}
        transition={{ duration: 0.5 }}
      >
        {/* Animated Heading */}
        <motion.h2
          className="text-2xl font-bold text-center mb-6"
          initial={{ opacity: 0, y: -20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.3 }}
        >
          🔐 Admin Login
        </motion.h2>

        {/* Input Fields */}
        <form onSubmit={handleLogin} className="space-y-4">
          <div className="flex items-center border-b-2 border-gray-600 py-2">
            <FaUser className="text-gray-400 mr-2" />
            <input
              type="text"
              placeholder="Username"
              className="w-full bg-transparent border-none focus:outline-none text-lg"
              value={username}
              onChange={(e) => setUsername(e.target.value)}
            />
          </div>

          <div className="flex items-center border-b-2 border-gray-600 py-2">
            <FaLock className="text-gray-400 mr-2" />
            <input
              type="password"
              placeholder="Password"
              className="w-full bg-transparent border-none focus:outline-none text-lg"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
            />
          </div>

          {/* Error Message Animation */}
          {error && (
            <motion.p
              className="text-red-400 text-center"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
            >
              {error}
            </motion.p>
          )}

          {/* Login Button */}
          <motion.button
            type="submit"
            className="w-full bg-blue-600 py-2 mt-4 rounded-lg text-lg font-semibold hover:bg-blue-700 transition duration-300"
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.95 }}
          >
            🚀 Login
          </motion.button>
        </form>
      </motion.div>

      {/* Floating Emojis Animation */}
      <motion.div
        className="absolute top-10 left-10 text-5xl"
        animate={{ y: [0, -15, 0] }}
        transition={{ repeat: Infinity, duration: 2 }}
      >
        🔑
      </motion.div>

      <motion.div
        className="absolute bottom-10 right-10 text-5xl"
        animate={{ rotate: [0, 20, -20, 0] }}
        transition={{ repeat: Infinity, duration: 2 }}
      >
        🔥
      </motion.div>
    </div>
  );
};

export default Login;