import { View, Dimensions } from "react-native";
import React, { useMemo, useRef, useState } from "react";
import { useRoute } from "@react-navigation/native";
import Page from "../../layouts/Page";
import MusicLandHeader from "../../components/MusicLandHeader";
import GradientButton from "../../components/GradientButton";
import { gutters } from "../../styles";
import { SwiperFlatList } from "react-native-swiper-flatlist";
import Goals from "./Goals";
import { goBack } from "../../navigation/NavigationService";
import SpecificityContext from "./SpecificityContext";
import EmotionConvey from "./EmotionConvey";
import SongStyle from "./SongStyle";
import SongTo from "./SongTo";
import SongStructure from "./SongStructure";
import CustomizeSongStructure from "./CustomizeSongStructure";
import Rhymes from "./Rhymes";
import CreatingLyrics from "./CreatingLyrics";
import { responsiveHeight } from "react-native-responsive-dimensions";

const { width } = Dimensions.get("window");

const CreateLyricsWithAi = () => {
  const scrollRef = useRef(null);
  const route = useRoute();
  const regenerateKey = route?.params?.regenerateKey;
  const [selectedIndex, setSelectedIndex] = useState(0);
  const [progress, setProgress] = useState(16);
  const [parentLayout, setparentLayout] = useState(null);

  // Collected state across steps
  const [objective, setObjective] = useState(
    __DEV__ ? "Pour mon entreprise" : null,
  ); // from Goals list
  const [otherObjective, setOtherObjective] = useState("");
  const [context, setContext] = useState(
    __DEV__
      ? "L'agence minuit est une agence de développement mobile et web qui accompagnes ses client dans la réalisations de projets divers et variés"
      : "",
  );
  const [emotion, setEmotion] = useState(
    __DEV__
      ? {
          title: "La Joie",
          description:
            "expose un bonheur profond, l'émerveillement, la gratitude, satisfaction intense, énergie positive",
        }
      : null,
  ); // { title, description }
  const [style, setStyle] = useState(__DEV__ ? "Upbeat" : null); // from list
  const [otherStyle, setOtherStyle] = useState("");
  const [audience, setAudience] = useState(
    __DEV__ ? "Aux clients de l'agence minuit" : "",
  );
  const [structure, setStructure] = useState(
    __DEV__ ? "1 couplet, 1 refrain, 1 couplet, 1 refrain" : null,
  ); // selected structure string
  const [rhymes, setRhymes] = useState(__DEV__ ? "Avec rimes" : null);
  const [customStructure, setCustomStructure] = useState(null); // array like ['couplet','refrain']

  const parsedStructure = useMemo(() => {
    // Parses strings like "1 couplet, 1 refrain, 1 couplet, 1 refrain"
    try {
      if (!structure || typeof structure !== "string") return null;
      const parts = structure.split(",");
      const result = [];
      parts.forEach((seg) => {
        const s = seg.trim().toLowerCase();
        const coupletMatch = s.match(/(\d+)\s+couplet/);
        const refrainMatch = s.match(/(\d+)\s+refrain/);
        if (coupletMatch) {
          const count = parseInt(coupletMatch[1], 10);
          for (let i = 0; i < count; i++) result.push("couplet");
        }
        if (refrainMatch) {
          const count = parseInt(refrainMatch[1], 10);
          for (let i = 0; i < count; i++) result.push("refrain");
        }
      });
      return result.length ? result : null;
    } catch (e) {
      return null;
    }
  }, [structure]);

  const lyricsConfig = useMemo(() => {
    return {
      objective: otherObjective?.trim()
        ? otherObjective.trim()
        : objective || undefined,
      context: context?.trim() ? context.trim() : undefined,
      emotion:
        emotion?.title && emotion?.description
          ? `${emotion.title} : ${emotion.description}`
          : undefined,
      style: otherStyle?.trim() ? otherStyle.trim() : style || undefined,
      audience: audience?.trim() ? audience.trim() : undefined,
      structure:
        (customStructure &&
        parsedStructure &&
        customStructure.length === parsedStructure.length
          ? customStructure
          : parsedStructure) || undefined,
      rhymes: rhymes || undefined,
    };
  }, [
    objective,
    otherObjective,
    context,
    emotion,
    style,
    otherStyle,
    audience,
    parsedStructure,
    rhymes,
    customStructure,
  ]);

  const onPressNext = () => {
    setSelectedIndex(selectedIndex + 1);
    setProgress(progress + 9);
    scrollRef.current.scrollToIndex({
      index: selectedIndex + 1,
      animated: true,
    });
  };

  const onPressBack = () => {
    if (selectedIndex > 0) {
      setSelectedIndex(selectedIndex - 1);
      setProgress(progress - 9);
      scrollRef.current.scrollToIndex({
        index: selectedIndex - 1,
        animated: true,
      });
    } else {
      goBack();
    }
  };

  return (
    <Page headerType="NONE">
      <MusicLandHeader
        onPressBack={onPressBack}
        progress={progress}
        showSkip={selectedIndex === 4}
      />
      <View
        style={{
          flex: 1,
          paddingBottom: gutters,
          gap: responsiveHeight(5),
        }}
      >
        <View
          style={{ flex: 1 }}
          onLayout={(e) => setparentLayout(e.nativeEvent.layout)}
        >
          <SwiperFlatList
            style={{ width, left: -gutters }}
            ref={scrollRef}
            disableGesture
          >
            <View
              style={{
                width: width,
                height: parentLayout?.height,
                paddingHorizontal: gutters,
              }}
            >
              <Goals
                selected={objective}
                setSelected={setObjective}
                otherObjective={otherObjective}
                setOtherObjective={setOtherObjective}
              />
            </View>
            <View
              style={{
                width: width,
                height: parentLayout?.height,
                paddingHorizontal: gutters,
              }}
            >
              <SpecificityContext context={context} setContext={setContext} />
            </View>
            <View
              style={{
                width: width,
                height: parentLayout?.height,
                paddingHorizontal: gutters,
              }}
            >
              <EmotionConvey selected={emotion} setSelected={setEmotion} />
            </View>
            <View
              style={{
                width: width,
                height: parentLayout?.height,
                paddingHorizontal: gutters,
              }}
            >
              <SongStyle
                selected={style}
                setSelected={setStyle}
                otherStyle={otherStyle}
                setOtherStyle={setOtherStyle}
              />
            </View>
            <View
              style={{
                width: width,
                height: parentLayout?.height,
                paddingHorizontal: gutters,
              }}
            >
              <SongTo audience={audience} setAudience={setAudience} />
            </View>
            <View
              style={{
                width: width,
                height: parentLayout?.height,
                paddingHorizontal: gutters,
              }}
            >
              <SongStructure selected={structure} setSelected={setStructure} />
            </View>
            <View
              style={{
                width: width,
                height: parentLayout?.height,
                paddingHorizontal: gutters,
              }}
            >
              <CustomizeSongStructure
                baseStructure={parsedStructure || []}
                onChange={setCustomStructure}
              />
            </View>
            <View
              style={{
                width: width,
                height: parentLayout?.height,
                paddingHorizontal: gutters,
              }}
            >
              <Rhymes selected={rhymes} setSelected={setRhymes} />
            </View>
            <View
              style={{
                width: width,
                height: parentLayout?.height,
                paddingHorizontal: gutters,
              }}
            >
              <CreatingLyrics
                active={selectedIndex === 8}
                config={lyricsConfig}
                regenerateKey={regenerateKey}
                selections={{
                  objective,
                  otherObjective,
                  context,
                  emotion,
                  style,
                  otherStyle,
                  audience,
                  structure,
                  parsedStructure,
                  customStructure,
                  rhymes,
                }}
              />
            </View>
          </SwiperFlatList>
        </View>
        {selectedIndex !== 8 && (
          <GradientButton title="Suivant" onPress={onPressNext} />
        )}
      </View>
    </Page>
  );
};

export default CreateLyricsWithAi;
