import React, { useState } from "react";
import { motion } from "framer-motion";
import {
  ChevronLeft,
  ChevronRight,
  UserPlus,
  Users,
  MessageSquare,
  LogOut,
} from "lucide-react";
import { Link, useNavigate } from "react-router-dom";
import { usePrivy } from "@privy-io/react-auth";

const Sidebar = () => {
  const [isOpen, setIsOpen] = useState(true);
  const {logout} = usePrivy()
  const navigate = useNavigate()
  const toggleSidebar = () => {
    setIsOpen(!isOpen);
  };

  const sidebarVariants = {
    open: {
      width: "300px",
      transition: {
        type: "spring",
        stiffness: 200,
        damping: 25,
      },
    },
    closed: {
      width: "0px",
      transition: {
        type: "spring",
        stiffness: 200,
        damping: 25,
      },
    },
  };

  const menuItems = [
    { icon: <UserPlus size={20} />, text: "Create Agent", link: "/create-agent" },
    { icon: <Users size={20} />, text: "Browse Agents", link: "/browse-agents" },
    { icon: <MessageSquare size={20} />, text: "Chat with Agent", link: "/chat" },
  ];

  return (
    <div className="relative">
      {/* Toggle Button - Positioned absolutely relative to the container */}
      <button
        onClick={toggleSidebar}
        className="fixed top-8 left-0 z-50 bg-yellow-400 rounded-full p-1.5 
        hover:bg-yellow-500 transition-colors"
        style={{
          left: isOpen ? "282px" : "12px",
          transition: "left 0.3s ease-in-out",
        }}
      >
        {isOpen ? <ChevronLeft size={16} /> : <ChevronRight size={16} />}
      </button>

      <motion.div
        initial="open"
        animate={isOpen ? "open" : "closed"}
        variants={sidebarVariants}
        className="h-screen bg-white shadow-lg flex flex-col overflow-hidden"
      >
        {isOpen && (
          <div className="flex flex-col h-full">
            {/* Logo Section */}
            <Link to="/" className="flex items-center p-4">
              <img src="/logo.svg" alt="Logo" className="w-[80%] h-auto" />
            </Link>

            {/* Navigation Items */}
            <div className="flex-1 px-3 py-8 flex flex-col gap-2 items-stretch">
              {menuItems.map((item, index) => (
                <Link to={item.link}>
                  <motion.button
                    key={index}
                    whileHover={{ scale: 1.02 }}
                    whileTap={{ scale: 0.98 }}
                    className="flex w-full items-center p-3 rounded-lg hover:bg-yellow-50 
                  text-gray-700 hover:text-yellow-600 transition-colors justify-start"
                  >
                    {item.icon}
                    <span className="ml-3 whitespace-nowrap">{item.text}</span>
                  </motion.button>
                </Link>
              ))}
            </div>

            {/* Logout Button */}
            <motion.button
              whileHover={{ scale: 1.02 }}
              whileTap={{ scale: 0.98 }}
              onClick={()=>{
                logout()
                navigate("/")
              }}
              className="m-4 p-3 flex items-center rounded-lg bg-yellow-400 
              hover:bg-yellow-500 text-gray-800 transition-colors justify-start"
            >
              <LogOut size={20} />
              <span className="ml-3 whitespace-nowrap">Logout</span>
            </motion.button>
          </div>
        )}
      </motion.div>
    </div>
  );
};

export default Sidebar;
