import { motion } from "framer-motion";
import { useAuth } from "@context/AuthContext";
import { Check, Plus, ChevronLeft, ChevronRight } from "lucide-react";
import { useState, useRef } from "react";

function ProfileSelector() {
  const { user, switchProfile } = useAuth();
  const scrollRef = useRef(null);

  const [profiles] = useState([
    { id: "1", name: "Pastor John", avatar: "👨‍💼", isActive: true },
    { id: "2", name: "Sarah", avatar: "👩‍🎤", isActive: false },
    { id: "3", name: "Mike", avatar: "🎛️", isActive: false },
    { id: "4", name: "Lisa", avatar: "🙋‍♀️", isActive: false },
    { id: "5", name: "David", avatar: "🎹", isActive: false },
  ]);
  const [selectedId, setSelectedId] = useState("1");

  const handleSelect = async (profileId) => {
    setSelectedId(profileId);
    // await switchProfile(profileId)
  };

  const scroll = (direction) => {
    if (scrollRef.current) {
      const scrollAmount = direction === "left" ? -150 : 150;
      scrollRef.current.scrollBy({ left: scrollAmount, behavior: "smooth" });
    }
  };

  return (
    <div className="glass-card p-4">
      <div className="flex items-center justify-between mb-3">
        <h3 className="text-sm font-medium text-gray-600">Active Profile</h3>
        <div className="flex gap-1">
          <button
            onClick={() => scroll("left")}
            className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors"
          >
            <ChevronLeft className="w-4 h-4 text-gray-500" />
          </button>
          <button
            onClick={() => scroll("right")}
            className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors"
          >
            <ChevronRight className="w-4 h-4 text-gray-500" />
          </button>
        </div>
      </div>

      <div
        ref={scrollRef}
        className="flex gap-3 overflow-x-auto scrollbar-hide pb-1 -mx-1 px-1"
        style={{ scrollbarWidth: "none", msOverflowStyle: "none" }}
      >
        {profiles.map((profile) => (
          <motion.button
            key={profile.id}
            whileHover={{ scale: 1.02 }}
            whileTap={{ scale: 0.98 }}
            onClick={() => handleSelect(profile.id)}
            className={`flex items-center gap-3 px-4 py-2.5 rounded-xl whitespace-nowrap transition-all flex-shrink-0 ${
              selectedId === profile.id
                ? "bg-primary-100 border-2 border-primary-500"
                : "bg-gray-50 border-2 border-transparent hover:bg-gray-100"
            }`}
          >
            <div
              className={`w-10 h-10 rounded-xl flex items-center justify-center text-xl ${
                selectedId === profile.id ? "bg-primary-200" : "bg-gray-200"
              }`}
            >
              {profile.avatar}
            </div>
            <div className="text-left">
              <p
                className={`font-medium ${selectedId === profile.id ? "text-primary-700" : "text-gray-800"}`}
              >
                {profile.name}
              </p>
              {selectedId === profile.id && (
                <span className="text-xs text-primary-600 flex items-center gap-1">
                  <Check className="w-3 h-3" />
                  Active
                </span>
              )}
            </div>
          </motion.button>
        ))}

        {/* Add Profile Button */}
        <motion.button
          whileHover={{ scale: 1.02 }}
          whileTap={{ scale: 0.98 }}
          className="flex items-center gap-2 px-4 py-2.5 rounded-xl border-2 border-dashed border-gray-300 hover:border-primary-400 text-gray-500 hover:text-primary-600 transition-all flex-shrink-0"
        >
          <div className="w-10 h-10 rounded-xl bg-gray-100 flex items-center justify-center">
            <Plus className="w-5 h-5" />
          </div>
          <span className="font-medium">Add</span>
        </motion.button>
      </div>
    </div>
  );
}

export default ProfileSelector;
