import { useState, useEffect } from "react";
import { router, useLocalSearchParams } from "expo-router";

import { View, StyleSheet, ScrollView } from "react-native";

import { Text } from "@/components/ui/Text";
import { Grid, Col, Center } from "@/components/ui/LayoutHelpers";
import { Card } from "@/components/ui/Cards";
import { Button } from "@/components/ui/Button";
import { TextArea } from "@/components/ui/Input";
import { Section, SectionHeader } from "@/components/ui/Sections";
import { Spacing, Typography, Colors } from "@/constants/theme";
import { ScaleSlider } from "@/components/ui/ScaleSlider";
import { MoodComponentCard } from "@/components/ui/MoodComponentCard";
import { Ionicons } from "@expo/vector-icons";
import { useThemeColor, useCreateMoodEntry, usePatchCareAction } from "@/hooks";
import { useMoodEntryStore, useCareActionLinkStore } from "@/stores";

import { getMood } from "@/constants/moods";

import { intensityToValue } from "@/constants/mood-components";

export default function NewMoodEntry() {
  const tintColor = useThemeColor({}, "tint");

  const { initialMood } = useLocalSearchParams<{ initialMood?: string }>();
  const [annotation, setAnnotation] = useState('');
  const [stress, setStress] = useState(0);
  const [anxiety, setAnxiety] = useState(0);
  const [energy, setEnergy] = useState(0);

  const { selectedMood, setSelectedMood, components, reset } =
    useMoodEntryStore();

  const createMoodEntry = useCreateMoodEntry();
  const patchCareAction = usePatchCareAction();

  useEffect(() => {
    if (initialMood) setSelectedMood(initialMood);
  }, [initialMood, setSelectedMood]);

  useEffect(() => {
    return () => reset();
  }, [reset]);

  const saveMoodEntry = async () => {
    const data = {
      selectedMood: (selectedMood ?? 'neutral').toUpperCase(),
      stressLevel: stress,
      energyLevel: energy,
      anxietyLevel: anxiety,
      moment: new Date(),
      annotation: annotation,
      moodComponents: components.map((c) => ({
        component: c.id.toUpperCase(),
        intensity: intensityToValue(c.intensity),
      })),
    };

    const result = await createMoodEntry.mutateAsync(data);
    const moodId = result.mood.id;

    const careActionId = useCareActionLinkStore.getState().linkMood();
    if (careActionId && moodId) {
      await patchCareAction.mutateAsync({
        id: String(careActionId),
        data: { moodId },
      });
    }

    reset();

    router.replace(`/new/post-mood?moodId=${moodId}`);
  };

  const editComponents = () => {
    router.push("/entry/mood-components");
  };

  return (
    <View>
      <ScrollView scrollEventThrottle={16}>
        <View style={styles.container}>
          <Center>
            <Text style={styles.statusPrefix} testID="text-status-prefix">
              Como você está se sentindo agora?
            </Text>

            <Text style={styles.statusText}>
              {getMood(selectedMood ?? '')?.label ?? "Neutro"}
            </Text>
          </Center>

          <Card style={styles.resumeCard}>
            <Text style={styles.infoText}>
              Não existe resposta certa ou errada. Estime, de 0 a 10, como tu
              percebe tua energia, estresse e ansiedade neste momento. O
              objetivo é registrar uma impressão geral, não uma medida precisa.
            </Text>

            <Col gap={24}>
              <ScaleSlider
                variant="rich"
                label="Energia"
                value={energy}
                onValueChange={setEnergy}
                icon={
                  <Ionicons name="flower-outline" size={20} color={tintColor} />
                }
                minLabel="Baixa"
                maxLabel="Alta"
              />

              <ScaleSlider
                variant="rich"
                label="Ansiedade"
                value={anxiety}
                onValueChange={setAnxiety}
                icon={<Ionicons name="sad-outline" size={20} color="#FB923C" />}
                minLabel="Calmo"
                maxLabel="Ansioso"
              />

              <ScaleSlider
                variant="rich"
                label="Estresse"
                value={stress}
                onValueChange={setStress}
                icon={<Ionicons name="flame" size={20} color="#f87171" />}
                minLabel="Relaxado"
                maxLabel="Estressado"
              />
            </Col>
          </Card>

          <Card style={styles.annotationsCard}>
            <TextArea
              label="Notas sobre o dia"
              variant="darkGhost"
              onChangeText={(val) => setAnnotation(val)}
              value={annotation}
              minRows={4}
              maxRows={6}
              placeholder="Escreva uma nota rápida sobre o seu dia até o momento..."
              testID="input-notes"
            />
          </Card>

          <Section>
            <SectionHeader title="Também estou..." />
            {components.length > 0 ? (
              <Grid gap={2} style={{ marginTop: 8 }}>
                {components.map((comp) => (
                  <MoodComponentCard
                    key={comp.id}
                    id={comp.id}
                    intensity={comp.intensity}
                  />
                ))}
              </Grid>
            ) : null}

            <Button
              title="Adicionar estados & emoções"
              onPress={editComponents}
              textStyle={{ fontWeight: 500 }}
              variant="dashed"
              testID="button-add-mood-components"
            />
          </Section>

          <Button
            title="Salvar Registro"
            onPress={saveMoodEntry}
            disabled={!components.length}
            testID="button-save-entry"
          />
        </View>
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    gap: 24,
    paddingHorizontal: Spacing.containerPadding,
    paddingVertical: Spacing.sectionGap,
  },
  infoText: {
    ...Typography.labelSm,
    color: Colors.light.textSecondary,
    marginBottom: 20,
    fontWeight: "400" as const,
  },
  statusText: {
    ...Typography.headlineXg,
    fontWeight: 900
  },
  statusPrefix: {
    ...Typography.bodyMd,
  },
  annotationsCard: {
    padding: Spacing.cardGap,
  },
  resumeCard: {
    padding: Spacing.cardGap,
  },
});