import FontAwesome from "@expo/vector-icons/FontAwesome";
import { BlurView } from "expo-blur";
import React from "react";
import { Image, Platform, Pressable, Text, View } from "react-native";
import { ai, background } from "../assets";
import Page from "../layouts/Page";
import { Routes } from "../navigation";
import { navigate } from "../navigation/NavigationService";
import { useUserData } from "../providers/UserDataProvider";
import { Palette } from "../styles";
import { FONT_FAMILY } from "../styles/Fonts";
import palette from "../styles/Palette";

const CREATE_DATA = [
  {
    img: ai.nathalie,
    bg: background.writingBG,
    label: "Nathalie",
    desc: "Let’s write lyrics together !",
    type: "Songwriter",
  },
  {
    img: ai.theo,
    bg: background.studioBG,
    label: "Theo",
    desc: "Come back, when\nyou’ll have lyrics!",
    type: "Beatmaker",
  },
  {
    img: ai.bena,
    bg: background.productionBG,
    label: "Bena",
    desc: "Come back when you want\nto generate cover!",
    type: "Designer",
  },
  {
    img: ai.john,
    bg: background.playbackBG,
    label: "John",
    desc: "Come back when your\naudio is ready!",
    type: "Director",
  },
];

const NewMusicOptions = () => {
  const { selectedProject } = useUserData();

  // Lock rules per option index:
  // 0 (Songwriter): allowed if no project OR no songUrl
  // 1 (Beatmaker): allowed only if lyrics exist and no songUrl
  // 2 (Designer): allowed only if songUrl exists and no coverUrl
  // 3 (Director): allowed only if coverUrl exists
  const isLocked = (index) => {
    const songUrl = selectedProject?.songUrl || null;
    const coverUrl = selectedProject?.coverUrl || null;
    const playbackUrl = selectedProject?.songUrl || null;
    const lyricsLen = Array.isArray(selectedProject?.lyrics)
      ? selectedProject.lyrics.length
      : 0;

    switch (index) {
      case 0: // Songwriter
        return !!songUrl; // locked if a song already exists
      case 1: // Beatmaker
        return !(lyricsLen > 0 && !songUrl);
      case 2: // Designer
        return !(!!songUrl && !!playbackUrl);
      case 3: // Director
        return !!!coverUrl;
      default:
        return true;
    }
  };

  const onPressOption = (index, item) => {
    if (isLocked(index)) return;
    switch (index) {
      case 0:
        if (selectedProject?.lyrics?.length) {
          navigate(Routes.Lyrics);
        } else {
          navigate(Routes.WritingLyrics);
        }
        break;
      case 1:
        if (selectedProject?.musicStatus === "GENERATING") {
          navigate(Routes.GeneratingSong);
        } else if (selectedProject?.musicStatus === "GENERATED") {
          navigate(Routes.SongReady);
        } else {
          navigate(Routes.Compose);
        }
        break;
      case 2:
        if (selectedProject?.coverUrl) {
          navigate(Routes.ValidateCover);
        } else {
          navigate(Routes.ChooseCoverType);
        }
        break;
      case 3:
        console.log("test");
        navigate(Routes.Playback, {
          project: selectedProject,
        });
      default:
        break;
    }
  };

  return (
    <Page
      backgroundImg={background.homeBG}
      headerType="NAVIGATION"
      title={!!selectedProject ? "Continuer la création" : "Nouvelle musique"}
      scrollEnabled={true}
    >
      <View style={{ gap: 10 }}>
        {CREATE_DATA.map((item, index) => {
          const locked = isLocked(index);
          return (
            <Pressable key={index} onPress={() => onPressOption(index, item)}>
              <BlurView
                tint="dark"
                intensity={Platform.OS !== "ios" ? 10 : 20}
                style={{
                  position: "absolute",
                  zIndex: 1,
                  left: 110,
                  top: 10,
                  paddingVertical: 8,
                  paddingHorizontal: 12,
                  borderRadius: 14,
                  borderBottomLeftRadius: 0,
                  overflow: "hidden",
                  backgroundColor: Palette.glass,
                }}
                // experimentalBlurMethod={
                //   Platform.OS !== "ios" ? "dimezisBlurView" : "none"
                // }
              >
                <Text
                  style={{
                    fontSize: 13,
                    color: Palette.white,
                    fontFamily: FONT_FAMILY.InterSemiBold,
                  }}
                >
                  {item.label}, {item.type}
                </Text>
                <Text
                  style={{
                    fontSize: 14,
                    color: Palette.white,
                    fontFamily: FONT_FAMILY.InterRegular,
                  }}
                >
                  {item.desc}
                </Text>
              </BlurView>
              <Image
                source={item.bg}
                style={{
                  width: "100%",
                  height: 152,
                  borderRadius: 20,
                  position: "absolute",
                  bottom: 0,
                }}
              />
              <Image
                source={item.img}
                style={{ width: 130, height: 200 }}
                resizeMode="contain"
              />
              {locked && (
                <View
                  pointerEvents="none"
                  style={{
                    position: "absolute",
                    left: 0,
                    right: 0,
                    top: 0,
                    bottom: 0,
                    backgroundColor: "rgba(0,0,0,0.35)",
                    borderRadius: 20,
                    justifyContent: "center",
                    alignItems: "center",
                  }}
                >
                  <View
                    style={{
                      width: 36,
                      height: 36,
                      borderRadius: 18,
                      backgroundColor: "rgba(0,0,0,0.4)",
                      alignItems: "center",
                      justifyContent: "center",
                    }}
                  >
                    <FontAwesome
                      name="lock"
                      size={24}
                      color={palette.primary}
                    />
                  </View>
                </View>
              )}
            </Pressable>
          );
        })}
      </View>
    </Page>
  );
};

export default NewMusicOptions;
