import { BlurView } from "expo-blur";
import React from "react";
import { Platform, Pressable, Text, View } from "react-native";
import { SheetManager } from "react-native-actions-sheet";
import useMinuit from "react-native-minuit/src/hooks/useMinuit";
import Animated, { Easing, FadeIn, FadeOut } from "react-native-reanimated";
import { arrayRemove, playlistsRef } from "../config/firebase";
import { Palette } from "../styles";
import { FONT_FAMILY } from "../styles/Fonts";
import { Portal } from "@gorhom/portal";

const MoreMenu = ({
  visible = false,
  top = 0,
  onClose = () => {},
  inPlaylist = false,
  playlistId = null,
  projectId = null,
  extraItems = [],
}) => {
  const { setTooltip } = useMinuit();
  if (!visible) return null;

  const removeFromPlaylist = async () => {
    try {
      if (inPlaylist && playlistId && projectId) {
        await playlistsRef
          .doc(playlistId)
          .update({ musics: arrayRemove(projectId), updatedAt: new Date() });
        setTooltip({ type: "success", text: "Supprimé de la playlist" });
      }
    } catch (e) {
      console.log("Remove from playlist error", e?.message);
      setTooltip({
        type: "error",
        text: e?.message || "Suppression impossible",
      });
    } finally {
      onClose?.();
    }
  };

  const addToPlaylist = () => {
    if (projectId) {
      SheetManager.show("Playlist", { payload: { projectId } });
    } else {
      SheetManager.show("Playlist");
    }
    onClose?.();
  };

  return (
    <Portal>
      <View
        style={{
          position: "absolute",
          left: 0,
          right: 0,
          top: 0,
          bottom: 0,
          zIndex: 9999,
          elevation: 9999,
        }}
      >
        {/* Background overlay to close on outside press */}
        <Pressable
          onPress={onClose}
          style={{
            position: "absolute",
            left: 0,
            right: 0,
            top: 0,
            bottom: 0,
            zIndex: 1,
          }}
        />
        <Animated.View
          entering={FadeIn.duration(300).easing(Easing.ease)}
          exiting={FadeOut.duration(300).easing(Easing.ease)}
          style={{
            position: "absolute",
            right: 0,
            top,
            zIndex: 2,
            elevation: 2,
          }}
        >
          <View style={{ gap: 2 }}>
            {inPlaylist && (
              <Pressable onPress={removeFromPlaylist}>
                <BlurView
                  intensity={Platform.OS !== "ios" ? 10 : 20}
                  style={{
                    paddingHorizontal: 12,
                    paddingVertical: 10,
                    backgroundColor: Palette.glass,
                    borderRadius: 12,
                    overflow: "hidden",
                  }}
                  // experimentalBlurMethod={
                  //   Platform.OS !== "ios" ? "dimezisBlurView" : "none"
                  // }
                >
                  <Text
                    style={{
                      fontSize: 14,
                      color: Palette.white,
                      fontFamily: FONT_FAMILY.InterRegular,
                    }}
                  >
                    Supprimer de la playlist
                  </Text>
                </BlurView>
              </Pressable>
            )}

            <Pressable onPress={addToPlaylist}>
              <BlurView
                intensity={Platform.OS !== "ios" ? 10 : 20}
                style={{
                  paddingHorizontal: 12,
                  paddingVertical: 10,
                  backgroundColor: Palette.glass,
                  borderRadius: 12,
                  overflow: "hidden",
                }}
                // experimentalBlurMethod={
                //   Platform.OS !== "ios" ? "dimezisBlurView" : "none"
                // }
              >
                <Text
                  style={{
                    fontSize: 14,
                    color: Palette.white,
                    fontFamily: FONT_FAMILY.InterRegular,
                  }}
                >
                  Ajouter à une playlist
                </Text>
              </BlurView>
            </Pressable>

            {Array.isArray(extraItems) &&
              extraItems.map((item, idx) => (
                <Pressable
                  key={idx}
                  onPress={() => {
                    try {
                      item?.onPress?.();
                    } finally {
                      onClose?.();
                    }
                  }}
                >
                  <BlurView
                    intensity={Platform.OS !== "ios" ? 10 : 20}
                    style={{
                      paddingHorizontal: 12,
                      paddingVertical: 10,
                      backgroundColor: Palette.glass,
                      borderRadius: 12,
                      overflow: "hidden",
                    }}
                    // experimentalBlurMethod={
                    //   Platform.OS !== "ios" ? "dimezisBlurView" : "none"
                    // }
                  >
                    <Text
                      style={{
                        fontSize: 14,
                        color: Palette.white,
                        fontFamily: FONT_FAMILY.InterRegular,
                      }}
                    >
                      {item?.label || "Action"}
                    </Text>
                  </BlurView>
                </Pressable>
              ))}
          </View>
        </Animated.View>
      </View>
    </Portal>
  );
};

export default MoreMenu;