import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { motion, AnimatePresence } from "framer-motion";
import {
  Plus,
  List,
  MoreVertical,
  Play,
  Copy,
  Trash2,
  Edit,
  Calendar,
  ChevronRight,
  Music,
} from "lucide-react";

function WorshipListsPanel() {
  const navigate = useNavigate();
  const [lists, setLists] = useState([
    {
      id: "1",
      name: "Sunday Morning",
      date: "Jan 26, 2026",
      songs: 5,
      status: "upcoming",
    },
    {
      id: "2",
      name: "Wednesday Night",
      date: "Jan 22, 2026",
      songs: 4,
      status: "past",
    },
    {
      id: "3",
      name: "Youth Service",
      date: "Jan 24, 2026",
      songs: 6,
      status: "past",
    },
  ]);
  const [showMenu, setShowMenu] = useState(null);

  const handleCreateList = () => {
    navigate("/worship-lists");
  };

  const handleOpenList = (id) => {
    navigate(`/worship-lists/${id}`);
  };

  const handleDuplicateList = (id) => {
    const list = lists.find((l) => l.id === id);
    if (list) {
      const newList = {
        ...list,
        id: Date.now().toString(),
        name: `${list.name} (Copy)`,
      };
      setLists([...lists, newList]);
    }
    setShowMenu(null);
  };

  const handleDeleteList = (id) => {
    setLists(lists.filter((l) => l.id !== id));
    setShowMenu(null);
  };

  return (
    <div className="glass-card p-6 h-full">
      <div className="flex items-center justify-between mb-4">
        <div className="flex items-center gap-2">
          <List className="w-5 h-5 text-primary-600" />
          <h3 className="font-semibold text-gray-800">Worship Lists</h3>
        </div>
        <button
          onClick={handleCreateList}
          className="p-2 hover:bg-primary-50 rounded-xl text-primary-600 transition-colors"
        >
          <Plus className="w-5 h-5" />
        </button>
      </div>

      <div className="space-y-3">
        <AnimatePresence>
          {lists.map((list) => (
            <motion.div
              key={list.id}
              layout
              initial={{ opacity: 0, x: -20 }}
              animate={{ opacity: 1, x: 0 }}
              exit={{ opacity: 0, x: 20 }}
              className="group relative"
            >
              <div
                onClick={() => handleOpenList(list.id)}
                className="flex items-center gap-3 p-3 rounded-xl hover:bg-gray-50 cursor-pointer transition-colors"
              >
                <div
                  className={`w-10 h-10 rounded-xl flex items-center justify-center ${
                    list.status === "upcoming"
                      ? "bg-primary-100"
                      : "bg-gray-100"
                  }`}
                >
                  <Music
                    className={`w-5 h-5 ${
                      list.status === "upcoming"
                        ? "text-primary-600"
                        : "text-gray-500"
                    }`}
                  />
                </div>

                <div className="flex-1 min-w-0">
                  <h4 className="font-medium text-gray-800 truncate">
                    {list.name}
                  </h4>
                  <div className="flex items-center gap-2 text-sm text-gray-500">
                    <Calendar className="w-3.5 h-3.5" />
                    <span>{list.date}</span>
                    <span>•</span>
                    <span>{list.songs} songs</span>
                  </div>
                </div>

                {list.status === "upcoming" && (
                  <span className="px-2 py-1 bg-primary-100 text-primary-700 text-xs font-medium rounded-lg">
                    Upcoming
                  </span>
                )}

                <button
                  onClick={(e) => {
                    e.stopPropagation();
                    setShowMenu(showMenu === list.id ? null : list.id);
                  }}
                  className="p-1.5 hover:bg-gray-100 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity"
                >
                  <MoreVertical className="w-4 h-4 text-gray-500" />
                </button>
              </div>

              {/* Dropdown Menu */}
              <AnimatePresence>
                {showMenu === list.id && (
                  <motion.div
                    initial={{ opacity: 0, scale: 0.95, y: -10 }}
                    animate={{ opacity: 1, scale: 1, y: 0 }}
                    exit={{ opacity: 0, scale: 0.95, y: -10 }}
                    className="absolute right-0 top-full mt-1 z-10 w-40 glass-card py-1 shadow-lg"
                  >
                    <button
                      onClick={(e) => {
                        e.stopPropagation();
                        handleOpenList(list.id);
                      }}
                      className="w-full flex items-center gap-2 px-3 py-2 text-left text-gray-700 hover:bg-gray-50"
                    >
                      <Edit className="w-4 h-4" />
                      Edit
                    </button>
                    <button
                      onClick={(e) => {
                        e.stopPropagation();
                        handleDuplicateList(list.id);
                      }}
                      className="w-full flex items-center gap-2 px-3 py-2 text-left text-gray-700 hover:bg-gray-50"
                    >
                      <Copy className="w-4 h-4" />
                      Duplicate
                    </button>
                    <button
                      onClick={(e) => {
                        e.stopPropagation();
                        handleDeleteList(list.id);
                      }}
                      className="w-full flex items-center gap-2 px-3 py-2 text-left text-red-600 hover:bg-red-50"
                    >
                      <Trash2 className="w-4 h-4" />
                      Delete
                    </button>
                  </motion.div>
                )}
              </AnimatePresence>
            </motion.div>
          ))}
        </AnimatePresence>

        {lists.length === 0 && (
          <div className="text-center py-8">
            <div className="w-12 h-12 mx-auto mb-3 rounded-full bg-gray-100 flex items-center justify-center">
              <List className="w-6 h-6 text-gray-400" />
            </div>
            <p className="text-gray-500 mb-3">No worship lists yet</p>
            <button onClick={handleCreateList} className="btn-primary text-sm">
              Create First List
            </button>
          </div>
        )}
      </div>

      {lists.length > 0 && (
        <button
          onClick={() => navigate("/worship-lists")}
          className="w-full mt-4 py-2 text-primary-600 text-sm font-medium hover:bg-primary-50 rounded-xl transition-colors flex items-center justify-center gap-1"
        >
          View All Lists
          <ChevronRight className="w-4 h-4" />
        </button>
      )}
    </div>
  );
}

export default WorshipListsPanel;
