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

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

import { SafeAreaView } from "react-native-safe-area-context";
import { ThemedText } from "@/components/misc/themed-text";
import { ThemedView } from "@/components/misc/themed-view";
import { ScreenLayout } from "@/components/ui/ScreenLayout";
import { useAuth } from "@/context/AuthContext";
import { Grid, Col, Row, Between, Center } from "@/components/ui/LayoutHelpers";
import { Card } from "@/components/ui/Cards";
import { Button } from "@/components/ui/Button";
import { Input, 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 } from "@/hooks";
import { useMoodEntryStore } from "@/stores";

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

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

import { apiClient } from "@/lib/api";

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

  const { initialMood } = useLocalSearchParams();
  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();

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

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

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

    await createMoodEntry.mutateAsync(data);

    reset();
    router.replace("/");
  };

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

  return (
    <View>
      <ScrollView scrollEventThrottle={16}>
        <View style={styles.container}>
          <Center>
            <ThemedText style={styles.statusPrefix}>
              Como você está se sentindo agora?
            </ThemedText>

            <ThemedText style={styles.statusText}>
              {selectedMood?.label || "Neutro"}
            </ThemedText>
          </Center>

          <Card style={styles.resumeCard}>
            <ThemedText 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.
            </ThemedText>

            <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"
              type="text"
              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..."
            />
          </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"
            />
          </Section>

          <Button
            title="Salvar Registro"
            onPress={saveMoodEntry}
            disabled={!components.length}
          />
        </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,
  },
  statusPrefix: {
    ...Typography.bodyMd,
  },
  annotationsCard: {
    padding: Spacing.cardGap,
  },
  resumeCard: {
    padding: Spacing.cardGap,
  },
});