import React, { useState } from "react";
import { Text, View } from "react-native";
import { SheetManager } from "react-native-actions-sheet";
import { useGlobal } from "reactn";
import GradientButton from "../../../components/GradientButton";
import MoreMenu from "../../../components/MoreMenu";
import { projectsRef } from "../../../config/firebase";
import useNavigateToMusicDetails from "../../../hooks/useNavigateToMusicDetails";
import { Routes } from "../../../navigation";
import { navigate } from "../../../navigation/NavigationService";
import { useUser } from "../../../providers/UserDataProvider";
import { Palette } from "../../../styles";
import { FONT_FAMILY } from "../../../styles/Fonts";
import { getProjectLikes, LIKE_TARGET } from "../../../utils/likes";
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 hasProjects = projects.length > 0;

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

  return (
    <CardContainer
      label="Mes musiques"
      onPress={() =>
        navigate(Routes.AllMyList, {
          title: "Mes musiques",
          scope: "music",
          liked: false,
        })
      }
      onPressPlus={() => navigate(Routes.WritingLyrics)}
    >
      {hasProjects ? (
        <View style={{ gap: 10 }}>
          {Array.isArray(projects) &&
            projects.map((p) => (
              <MusicCard
                key={p.id}
                title={p?.title}
                subtitle={p?.userName}
                imageUri={p?.coverUrl || null}
                projectId={p?.id}
                likedBy={getProjectLikes(p, LIKE_TARGET.SONG)}
                likeTarget={LIKE_TARGET.SONG}
                onPress={() =>
                  navigateToMusicDetails({
                    projectId: p.id,
                    songUrl: p?.songUrl,
                    project: p,
                  })
                }
                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>
      ) : (
        <View style={{ flexDirection: "column", gap: 10 }}>
          <Text
            style={{
              textAlign: "center",
              fontFamily: FONT_FAMILY.InterRegular,
              color: Palette.white,
              fontSize: 16,
            }}
          >
            Aucune musique pour l'instant
          </Text>
          <GradientButton
            containerStyle={{ padding: 2 }}
            onPress={() => navigate(Routes.WritingLyrics)}
            title="     Créer une musique"
          />
        </View>
      )}
    </CardContainer>
  );
};

export default MyMusic;