import { BlurView } from "expo-blur";
import { Image as ExpoImage } from "expo-image";
import React, { useState } from "react";
import {
  FlatList,
  Image,
  Platform,
  Pressable,
  ScrollView,
  StyleSheet,
  Text,
  View,
} from "react-native";
import { SheetManager } from "react-native-actions-sheet";
import { responsiveHeight } from "react-native-responsive-dimensions";
import { useGlobal } from "reactn";
import { background, icons, img } from "../../assets";
import BorderGradient from "../../components/BorderGradient/BorderGradient";
import MoreMenu from "../../components/MoreMenu";
import { projectsRef } from "../../config/firebase";
import Page from "../../layouts/Page";
import { Routes } from "../../navigation";
import { navigate, push } from "../../navigation/NavigationService";
import { useUser } from "../../providers/UserDataProvider";
import { Palette } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import Style, { gutters, size } from "../../styles/Style";
import MusicCard from "../Library/components/MusicCard";

const Profile = () => {
  const [selected, setSelected] = useState("Chansons");
  const { userProjects, userPlaybacks, followingCount, currentUserData } =
    useUser();
  const [, setTooltip] = useGlobal("_tooltip");
  const [menuTop, setMenuTop] = useState(0);
  const [showMenu, setShowMenu] = useState(false);
  const [selectedProjectId, setSelectedProjectId] = useState(null);
  const onPressMenu = (item) => {
    setSelected(item);
  };

  // Composant factorisé pour afficher la liste de musiques
  const MusicListSection = ({ data, emptyText }) => (
    <ScrollView style={{ flex: 1 }}>
      {Array.isArray(data) && data.length > 0 ? (
        <FlatList
          data={data}
          contentContainerStyle={{
            gap: 10,
          }}
          keyExtractor={(item) => item.id}
          renderItem={({ item }) => (
            <MusicCard
              title={item?.title || "Sans titre"}
              subtitle={currentUserData?.userName || "MusicLand"}
              imageUri={item?.coverUrl || null}
              projectId={item?.id}
              likedBy={item?.likedBy || []}
              onPress={() =>
                navigate(Routes.MusicDetails, { projectId: item.id })
              }
              onPressMore={(posTop) => {
                setSelectedProjectId(item.id);
                setMenuTop(posTop);
                setShowMenu((prev) => !prev || posTop !== menuTop);
              }}
            />
          )}
        />
      ) : (
        <EmptyText text={emptyText} />
      )}
      <MoreMenu
        visible={showMenu}
        top={menuTop}
        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",
                      });
                    }
                  },
                },
              }),
          },
        ]}
      />
    </ScrollView>
  );

  const EmptyText = ({ text }) => (
    <View style={{ flex: 1, ...Style.containerCenter, paddingTop: 20 }}>
      <Text
        style={{
          fontSize: 14,
          color: Palette.white,
          fontFamily: FONT_FAMILY.InterRegular,
          opacity: 0.8,
        }}
      >
        {text}
      </Text>
    </View>
  );

  return (
    <Page
      backgroundImg={background.profileBG}
      headerType="NAVIGATE"
      hideBackButton
      contentContainerStyle={{
        paddingBottom: gutters * 2,
      }}
      containerStyle={{
        backgroundColor: "#0000004D",
      }}
      rightComponent={() => (
        <Pressable onPress={() => SheetManager.show("ProfileSettings")}>
          <Image source={icons.more} style={{ ...size({ size: 24 }) }} />
        </Pressable>
      )}
    >
      <View style={{ flex: 1, marginTop: responsiveHeight(2), gap: 20 }}>
        <View style={{ borderRadius: 20, overflow: "hidden" }}>
          <BlurView
            intensity={20}
            style={{
              paddingVertical: 14,
              backgroundColor: Palette.glass,
              paddingHorizontal: 20,
            }}
            experimentalBlurMethod={
              Platform.OS !== "ios" ? "dimezisBlurView" : "none"
            }
          >
            <View style={{ alignItems: "center" }}>
              <ExpoImage
                source={
                  currentUserData?.profilePictureURL
                    ? {
                        uri: currentUserData?.profilePictureURL,
                      }
                    : img.profile
                }
                cachePolicy="memory-disk"
                priority="high"
                contentFit="cover"
                transition={100}
                style={{
                  ...size({ size: 108 }),
                  borderRadius: 100,
                }}
              />
              <Text
                style={{
                  fontSize: 22,
                  color: Palette.white,
                  fontFamily: FONT_FAMILY.InterSemiBold,
                }}
              >
                {currentUserData?.userName}
              </Text>
            </View>
            <View style={{ ...Style.containerRow, gap: 10, marginTop: 10 }}>
              <View style={{ flex: 1, alignItems: "center" }}>
                <Text style={styles.value}>{userProjects?.length || 0}</Text>
                <Text style={styles.label}>projets</Text>
              </View>
              <Pressable
                style={{ flex: 1, alignItems: "center" }}
                onPress={() => push(Routes.Follows, { selected: "Abonnés" })}
              >
                <Text style={styles.value}>
                  {currentUserData?.followedBy?.length || 0}
                </Text>
                <Text style={styles.label}>abonnés</Text>
              </Pressable>
              <Pressable
                style={{ flex: 1, alignItems: "center" }}
                onPress={() =>
                  push(Routes.Follows, { selected: "Abonnements" })
                }
              >
                <Text style={styles.value}>{followingCount}</Text>
                <Text style={styles.label}>abonnements</Text>
              </Pressable>
            </View>
          </BlurView>
        </View>
        <View
          style={{
            ...Style.containerRow,
            gap: 6,
          }}
        >
          {["Chansons", "Playbacks", "Clips"].map((item, index) => (
            <Pressable
              key={index}
              onPress={() => onPressMenu(item)}
              style={{ flex: 1 }}
            >
              <BorderGradient
                gradientProps={{
                  colors:
                    selected === item
                      ? ["#FFFFFF00", "#FFFFFF"]
                      : [Palette.tran, Palette.tran],
                  locations: [0, 1],
                  start: { x: 0, y: 0 },
                  end: { x: 1, y: 0 },
                }}
                style={styles.borderGradient}
              />
              <View style={styles.blurContainer}>
                <BlurView
                  intensity={20}
                  style={styles.blurView}
                  experimentalBlurMethod={
                    Platform.OS !== "ios" ? "dimezisBlurView" : "none"
                  }
                >
                  <Text style={styles.menu}>{item}</Text>
                </BlurView>
              </View>
            </Pressable>
          ))}
        </View>
        {selected === "Playbacks" && (
          <MusicàListàSection
            data={userPlaybacks}
            emptyText="Aucun playback pour le moment"
          />
        )}
        {selected === "Chansons" && (
          <MusicListSection
            data={userProjects}
            emptyText="Aucune chanson pour le moment"
          />
        )}

        {selected === "Clips" && (
          <View style={{ flex: 1 }}>
            <EmptyText text={"Aucun clip pour le moment"} />
          </View>
        )}
      </View>
    </Page>
  );
};

export default Profile;

const styles = StyleSheet.create({
  value: {
    fontSize: 16,
    color: Palette.white,
    fontFamily: FONT_FAMILY.InterRegular,
  },
  label: {
    fontSize: 12,
    color: Palette.white,
    fontFamily: FONT_FAMILY.InterRegular,
  },
  menu: {
    fontSize: 12,
    color: Palette.white,
    fontFamily: FONT_FAMILY.InterRegular,
  },
  borderGradient: {
    borderWidth: 1,
    borderRadius: 10,
    height: 33,
    position: "absolute",
    zIndex: 1,
    width: "100%",
  },
  blurContainer: {
    height: 33,
    zIndex: -1,
    borderRadius: 10,
    overflow: "hidden",
    backgroundColor: Palette.glass,
  },
  blurView: {
    width: "100%",
    height: "100%",
    paddingHorizontal: 10,
    ...Style.containerCenter,
  },
});