import { View, TouchableOpacity, ScrollView, StyleSheet, ActivityIndicator } from 'react-native';
import { Text } from '@/components/ui/Text';
import { useState } from 'react';
import { router, useLocalSearchParams } from 'expo-router';
import { Ionicons, MaterialIcons } from '@expo/vector-icons';
import { Button } from '@/components/ui/Button';
import { Spacing, Typography, Colors, BorderRadius } from '@/constants/theme';
import { useTriggers, useLinkMoodToTrigger } from '@/hooks';
import { getTriggerCategory } from '@/constants/trigger-categories';
import { Trigger } from '@/lib/api';

type FlowState = 'PICK_TRIGGER' | 'PICK_IMPACT';

export default function PostMoodLinks() {
  const { moodId } = useLocalSearchParams<{ moodId: string }>();
  const [flowState, setFlowState] = useState<FlowState>('PICK_TRIGGER');
  const [selectedTrigger, setSelectedTrigger] = useState<Trigger | null>(null);
  const [impact, setImpact] = useState<number>(3);

  const { data, isLoading } = useTriggers({ limit: 5 });
  const linkMood = useLinkMoodToTrigger();

  const triggers = data?.entries ?? [];

  const handleSelectTrigger = (trigger: Trigger) => {
    setSelectedTrigger(trigger);
    setFlowState('PICK_IMPACT');
  };

  const handleSaveLink = async () => {
    if (!selectedTrigger || !moodId) return;
    await linkMood.mutateAsync({
      triggerId: String(selectedTrigger.id),
      moodId,
      perceivedImpact: impact,
    });
    router.back();
  };

  if (flowState === 'PICK_TRIGGER') {
    return (
      <View style={styles.container}>
        <View style={styles.header}>
          <Text style={styles.title}>Algo influenciou esse humor?</Text>
          <Text style={styles.subtitle}>
            Selecione um gatilho recente para vincular
          </Text>
        </View>

        <ScrollView contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={false}>
          {isLoading && <ActivityIndicator style={{ marginTop: 20 }} />}

          {!isLoading && triggers.length === 0 && (
            <Text style={styles.emptyText}>Nenhum gatilho recente</Text>
          )}

          {triggers.map((trigger) => {
            const cat = getTriggerCategory(trigger.category);
            return (
              <TouchableOpacity
                key={trigger.id}
                style={styles.triggerCard}
                activeOpacity={0.7}
                onPress={() => handleSelectTrigger(trigger)}
              >
                <View style={[styles.triggerIcon, { backgroundColor: cat.iconBackground }]}>
                  <MaterialIcons name={cat.icon} size={18} color={cat.color} />
                </View>
                <View style={styles.triggerText}>
                  <Text style={styles.triggerCategory}>{cat.label}</Text>
                  {trigger.comment ? (
                    <Text style={styles.triggerComment} numberOfLines={1}>{trigger.comment}</Text>
                  ) : null}
                </View>
                <Ionicons name="chevron-forward" size={16} color={Colors.light.disabled} />
              </TouchableOpacity>
            );
          })}

          <Button title="Pular" variant="ghost" onPress={() => router.back()} />
        </ScrollView>
      </View>
    );
  }

  // PICK_IMPACT
  const cat = selectedTrigger ? getTriggerCategory(selectedTrigger.category) : null;
  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.title}>Qual foi o impacto?</Text>
        <Text style={styles.subtitle}>De 1 (leve) a 5 (muito forte)</Text>
      </View>

      {selectedTrigger && cat && (
        <View style={styles.selectedTrigger}>
          <View style={[styles.triggerIcon, { backgroundColor: cat.iconBackground }]}>
            <MaterialIcons name={cat.icon} size={18} color={cat.color} />
          </View>
          <Text style={styles.selectedTriggerLabel}>{cat.label}</Text>
        </View>
      )}

      <View style={styles.impactRow}>
        {[1, 2, 3, 4, 5].map((v) => (
          <TouchableOpacity
            key={v}
            style={[styles.impactDot, impact === v && styles.impactDotActive]}
            activeOpacity={0.7}
            onPress={() => setImpact(v)}
          >
            <Text style={[styles.impactLabel, impact === v && styles.impactLabelActive]}>{v}</Text>
          </TouchableOpacity>
        ))}
      </View>

      <Button
        title="Vincular"
        onPress={handleSaveLink}
        loading={linkMood.isPending}
        style={{ marginTop: 8 }}
      />
      <Button
        title="Voltar"
        variant="ghost"
        onPress={() => setFlowState('PICK_TRIGGER')}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingHorizontal: Spacing.containerPadding,
    paddingTop: 24,
    paddingBottom: 36,
    gap: 16,
  },
  header: { gap: 6 },
  title: { ...Typography.headlineMd },
  subtitle: { ...Typography.bodyMd, color: Colors.light.textSecondary },
  scrollContent: { gap: 10, paddingBottom: 20 },
  emptyText: { ...Typography.bodyMd, color: Colors.light.textSecondary, textAlign: 'center', marginTop: 20 },
  triggerCard: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#fff',
    borderRadius: BorderRadius.lg,
    padding: Spacing.cardGap,
    borderWidth: 1,
    borderColor: Colors.light.divider,
    gap: 12,
  },
  triggerIcon: {
    width: 36,
    height: 36,
    borderRadius: BorderRadius.md,
    alignItems: 'center',
    justifyContent: 'center',
  },
  triggerText: { flex: 1, gap: 2 },
  triggerCategory: { ...Typography.bodyMd, fontWeight: '600' },
  triggerComment: { ...Typography.labelSm, color: Colors.light.textSecondary },
  selectedTrigger: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 12,
    padding: Spacing.cardGap,
    backgroundColor: Colors.light.surface,
    borderRadius: BorderRadius.lg,
    borderWidth: 1,
    borderColor: Colors.light.divider,
  },
  selectedTriggerLabel: { ...Typography.bodyMd, fontWeight: '600' },
  impactRow: {
    flexDirection: 'row',
    justifyContent: 'center',
    gap: 12,
    marginVertical: 8,
  },
  impactDot: {
    width: 48,
    height: 48,
    borderRadius: 24,
    borderWidth: 2,
    borderColor: Colors.light.divider,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#fff',
  },
  impactDotActive: {
    borderColor: Colors.light.tint,
    backgroundColor: Colors.light.tint + '1A',
  },
  impactLabel: { fontSize: 18, fontWeight: '600', color: Colors.light.textSecondary },
  impactLabelActive: { color: Colors.light.text },
});