import { BlurView } from "expo-blur";
import React, { useMemo, useState } from "react";
import { FlatList, Image, Platform, Text, View } from "react-native";
import { responsiveHeight } from "react-native-responsive-dimensions";
import { useGlobal } from "reactn";
import { background, img } from "../../assets";
import alert from "../../components/Alert";
import GradientButton from "../../components/GradientButton";
import MoreMenu from "../../components/MoreMenu";
import { projectsRef } from "../../config/firebase";
import Page from "../../layouts/Page";
import { Routes } from "../../navigation";
import { navigate } from "../../navigation/NavigationService";
import { useUser } from "../../providers/UserDataProvider";
import { getArtistDisplayName } from "../../utils/artistName";
import { getProjectLikes, LIKE_TARGET } from "../../utils/likes";
import { Palette } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import MusicCard from "../Library/components/MusicCard";

const HomeSave = () => {
  const {
    userProjects = [],
    resetSelectedProject,
    selectProject,
    currentUserData,
  } = useUser();
  const projects = useMemo(
    () => (Array.isArray(userProjects) ? userProjects : []),
    [userProjects]
  );
  const ownerDisplayName = useMemo(
    () => getArtistDisplayName(currentUserData, "MusicLand"),
    [currentUserData]
  );
  const [, setTooltip] = useGlobal("_tooltip");
  const [menuPosition, setMenuPosition] = useState(null);
  const [showMenu, setShowMenu] = useState(false);
  const [menuProjectId, setMenuProjectId] = useState(null);

  return (
    <Page backgroundImg={background.homeBG} headerType="NONE">
      <View style={{ flex: 1 }}>
        <Image
          source={img.goodVibe}
          style={{ alignSelf: "center", position: "absolute" }}
        />
        {projects.length > 0 && (
          <View
            style={{
              height: responsiveHeight(70),
              paddingTop: responsiveHeight(6),
            }}
          >
            <BlurView
              intensity={Platform.OS !== "ios" ? 10 : 20}
              style={{
                flex: 1,
                borderRadius: 20,
                overflow: "hidden",
                backgroundColor: Palette.glass,
                padding: 12,
                gap: 8,
              }}
              // experimentalBlurMethod={
              //   Platform.OS !== "ios" ? "dimezisBlurView" : "none"
              // }
            >
              <Text
                style={{
                  fontSize: 22,
                  color: Palette.white,
                  fontFamily: FONT_FAMILY.InterSemiBold,
                  marginBottom: 8,
                  textAlign: "center",
                }}
              >
                Musiques en cours
              </Text>
              <FlatList
                data={projects}
                keyExtractor={(item) => item.id}
                contentContainerStyle={{ gap: 10, paddingBottom: 10 }}
                renderItem={({ item }) => (
                  <MusicCard
                    title={item?.title || "Sans titre"}
                    subtitle={item?.userName || ownerDisplayName}
                    imageUri={item?.coverUrl || null}
                    projectId={item?.id}
                    likedBy={getProjectLikes(item, LIKE_TARGET.SONG)}
                    onPress={() => {
                      selectProject(item.id);
                      navigate(Routes.Home);
                    }}
                    onPressMore={(posTop) => {
                      setMenuProjectId(item.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={menuProjectId}
                extraItems={[
                  {
                    label: "Supprimer",
                    onPress: () =>
                      alert(
                        "Confirmer la suppression",
                        "Cette action supprimera définitivement ce projet.",
                        [
                          { text: "Annuler", style: "cancel" },
                          {
                            text: "Supprimer",
                            style: "destructive",
                            onPress: async () => {
                              try {
                                if (!menuProjectId) return;
                                await projectsRef.doc(menuProjectId).delete();
                                setTooltip({
                                  type: "success",
                                  text: "Projet supprimé",
                                });
                              } catch (e) {
                                setTooltip({
                                  type: "error",
                                  text: e?.message || "Suppression impossible",
                                });
                              }
                            },
                          },
                        ],
                        { cancelable: true }
                      ),
                  },
                ]}
              />
            </BlurView>
          </View>
        )}
        <View style={{ paddingTop: 12, marginBottom: responsiveHeight(10) }}>
          <GradientButton
            title="Créer une nouvelle musique"
            containerStyle={{ width: "80%", alignSelf: "center" }}
            onPress={() => {
              resetSelectedProject();
              navigate(Routes.Home);
            }}
          />
        </View>
      </View>
    </Page>
  );
};

export default Home;