import {
  View,
  Text,
  StyleSheet,
  KeyboardAvoidingView,
  ScrollView,
} from "react-native";
import { useState } from "react";
import { router, useLocalSearchParams } from "expo-router";

import { Card } from "@/components/ui/Cards";
import { TextArea } from "@/components/ui/Input";
import { Button } from "@/components/ui/Button";
import { Section, SectionHeader } from "@/components/ui/Sections";
import { Spacing, Typography, Colors, BorderRadius } from "@/constants/theme";
import { Ionicons, MaterialIcons } from "@expo/vector-icons";
import { useCreateTrigger, useLinkMoodToTrigger, usePatchCareAction } from "@/hooks";
import { useToast } from "@/context/ToastContext";
import { ApiError } from "@/lib/api";
import { translateError } from "@/lib/errors/translations";
import { useCareActionLinkStore } from "@/stores";
import { CategoryChips, CategoryOption } from "@/components/ui/CategoryChips";
import { TriggerCategory } from "@/constants/triggers";
import { TRIGGER_CATEGORY_DEFINITIONS } from "@/constants/trigger-categories";
import { TimePicker } from "@/components/ui/TimePicker";

const TRIGGER_CATEGORIES: CategoryOption<TriggerCategory>[] =
  TRIGGER_CATEGORY_DEFINITIONS.map((d) => ({
    label: d.label,
    value: d.id,
    icon: <MaterialIcons size={16} color={d.color} name={d.icon} />,
  }));

export default function NewTrigger() {
  const [moment, setMoment] = useState(new Date());
  const [comment, setComment] = useState("");
  const { category: initialCategory, moodId: linkedMoodId } = 
    useLocalSearchParams<{ category?: string; moodId?: string }>();

  const [category, setCategory] = useState(initialCategory ?? "WORK");
  const createTrigger = useCreateTrigger();
  const linkMoodToTrigger = useLinkMoodToTrigger();
  const patchCareAction = usePatchCareAction();
  const { showToast } = useToast();

  const save = async () => {
    try {
      const data = { moment, comment, category };
      const result = await createTrigger.mutateAsync(data);

      const careActionId = useCareActionLinkStore.getState().linkTrigger();
      if (careActionId) {
        await patchCareAction.mutateAsync({
          id: String(careActionId),
          data: { triggerId: result.trigger.id },
        });
      }

      if (linkedMoodId) {
        await linkMoodToTrigger.mutateAsync({
          triggerId: String(result.trigger.id),
          moodId: linkedMoodId,
          perceivedImpact: 3,
        });
        router.back();
      } else {
        router.replace("/(tabs)/actions");
      }
    } catch (error: any) {
      showToast(
        error instanceof ApiError ? translateError(error.message) : 'Falha ao salvar o gatilho',
        'error',
      );
    }
  };

  return (
    <KeyboardAvoidingView behavior="height" style={styles.keyboardView}>
      <ScrollView scrollEventThrottle={16}>
        <View style={styles.container}>
          <View style={styles.header}>
            <View style={styles.innerHeaderWrapper}>
              <View style={[styles.headerIcon, { backgroundColor: "#FFF7ED" }]}>
                <Ionicons name="flash-outline" size={20} color="#EA580C" />
              </View>

              <View style={styles.headerTitleSubtitle}>
                <Text style={styles.headerTitle}>Aconteceu algo?</Text>
                <Text style={styles.headerSubtitle}>
                  Registre acontecimentos fora do padrão
                </Text>
              </View>
            </View>

            <Text style={styles.description}>
              Identificar gatilhos ajuda a entender melhor seus padrões
              emocionais
            </Text>
          </View>

          <Section>
            <SectionHeader title="Horário do Evento" />
            <TimePicker value={moment} onChange={setMoment} />
          </Section>

          <Section>
            <SectionHeader title="Selecionar uma categoria" />
            <CategoryChips
              options={TRIGGER_CATEGORIES}
              active={category}
              onChange={setCategory}
            />
          </Section>

          <Section>
            <SectionHeader title="Adicione detalhes" />

            <Card style={styles.mainCard}>
              <TextArea
                label="Comentários sobre"
                variant="darkGhost"
                onChangeText={(val) => setComment(val)}
                value={comment}
                minRows={5}
                maxRows={10}
                placeholder="Descreva o que gerou esse sentimento"
              />
            </Card>
          </Section>

          <Button title="Salvar Registro" onPress={save} />
        </View>
      </ScrollView>
    </KeyboardAvoidingView>
  );
}

const styles = StyleSheet.create({
  container: {
    gap: 24,
    paddingHorizontal: Spacing.containerPadding,
    paddingVertical: Spacing.sectionGap,
    marginBottom: 50,
  },
  mainCard: {
    padding: Spacing.cardGap,
  },
  // Header
  header: {},
  headerIcon: {
    paddingVertical: 15,
    paddingHorizontal: 14,
    width: 48,
    borderRadius: BorderRadius.md,
  },
  innerHeaderWrapper: {
    flex: 1,
    flexDirection: "row",
    alignItems: "center",
  },
  headerTitleSubtitle: {
    marginLeft: 10,
  },
  headerTitle: {
    ...Typography.headlineMd,
  },
  headerSubtitle: {
    ...Typography.bodyMd,
    color: Colors.light.textSecondary,
  },
  description: {
    ...Typography.bodyMd,
    color: Colors.light.textSecondary,
    marginTop: 20,
  },
  keyboardView: {
    flex: 1,
  },
  moodIconEmoji: {
    fontSize: 26,
  },
  iconWrap: {
    width: 40,
    height: 40,
    borderRadius: 20,
    alignItems: "center",
    justifyContent: "center",
    marginTop: 1,
  },
});