import React, { useState } from "react";
import { View } from "react-native";
import { SheetManager } from "react-native-actions-sheet";
import { useGlobal } from "reactn";
import MoreMenu from "../../../components/MoreMenu";
import { projectsRef } from "../../../config/firebase";
import { Routes } from "../../../navigation";
import { navigate } from "../../../navigation/NavigationService";
import { useUser } from "../../../providers/UserDataProvider";
import CardContainer from "./CardContainer";
import MusicCard from "./MusicCard";
const MyMusic = () => {
  const { userProjects = [] } = useUser();
  const [menuPosition, setMenuPosition] = useState(null);
  const [showMenu, setShowMenu] = useState(false);
  const [selectedProjectId, setSelectedProjectId] = useState(null);
  const projects = Array.isArray(userProjects) ? userProjects.slice(0, 3) : [];

  const [, setTooltip] = useGlobal("_tooltip");

  return (
    <CardContainer
      label="Mes musiques"
      onPress={() =>
        navigate(Routes.AllMyList, {
          title: "Mes musiques",
          scope: "music",
          liked: false,
        })
      }
    >
      <View style={{ gap: 10 }}>
        {Array.isArray(projects) &&
          projects.map((p) => (
            <MusicCard
              key={p.id}
              title={p?.title}
              subtitle={"MusicLand"}
              imageUri={p?.coverUrl || null}
              projectId={p?.id}
              likedBy={p?.likedBy || []}
              onPress={() => navigate(Routes.MusicDetails, { projectId: p.id })}
              onPressMore={(posTop) => {
                setSelectedProjectId(p.id);
                setMenuPosition(posTop);
                setShowMenu(
                  (prev) => !prev || posTop?.top !== (menuPosition?.top ?? null)
                );
              }}
            />
          ))}
        <MoreMenu
          visible={showMenu}
          top={menuPosition?.top ?? 0}
          position={menuPosition}
          onClose={() => setShowMenu(false)}
          inPlaylist={false}
          projectId={selectedProjectId}
          extraItems={[
            {
              label: "Supprimer",
              onPress: () =>
                SheetManager.show("Delete", {
                  payload: {
                    title: "Supprimer le projet",
                    message:
                      "Cette action supprimera définitivement ce projet.",
                    onConfirm: async () => {
                      try {
                        if (!selectedProjectId) return;
                        await projectsRef.doc(selectedProjectId).delete();
                        setTooltip({
                          type: "success",
                          text: "Projet supprimé",
                        });
                      } catch (e) {
                        setTooltip({
                          type: "error",
                          text: e?.message || "Suppression impossible",
                        });
                      }
                    },
                  },
                }),
            },
          ]}
        />
      </View>
    </CardContainer>
  );
};

export default MyMusic;