import React from 'react';

import {

  View,

  Text,

  ScrollView,

  Pressable,

  StyleSheet,

} from 'react-native';

import { router } from 'expo-router';

import { Ionicons } from '@expo/vector-icons';

import { ScaleSlider } from '@/components/ui/ScaleSlider';

import { Row, Grid } from '@/components/ui/LayoutHelpers';

import { Section, SectionHeader } from '@/components/ui/Sections';

import { Button } from '@/components/ui/Button';

import { Card } from '@/components/ui/Cards';

import { Theme } from '@/constants/theme';

import {

  MOOD_COMPONENTS,

  getMoodComponent,

  intensityLabel,

} from '@/constants/mood-components';

import {

  useMoodEntryStore,

} from '@/stores/moodEntry';

export default function MoodComponentsScreen() {

  const {

    selectedMood,

    components,

    addComponent,

    removeComponent,

    setComponentIntensity,

  } = useMoodEntryStore();

  const activeIds = components.map((c) => c.id);

  const available = MOOD_COMPONENTS.filter((d) => !activeIds.includes(d.id));

  const handleDone = () => {

    router.back();

  };

  return (

    <View style={styles.container}>

      {/* Header */}

      <View style={styles.header}>

        <Pressable onPress={() => router.back()} hitSlop={8}>

          <Ionicons name="close" size={24} color={Theme.colors.text} />

        </Pressable>

        <Text style={styles.headerTitle}>Editar Componentes</Text>

        <Pressable onPress={handleDone} hitSlop={8}>

          <Text style={styles.headerAction}>Pronto</Text>

        </Pressable>

      </View>

      <ScrollView

        contentContainerStyle={styles.content}

        showsVerticalScrollIndicator={false}

      >

        {/* Subtitle */}

        {selectedMood && (

          <View style={styles.subtitleBlock}>

            <Text style={styles.subtitleSmall}>Baseado no seu humor selecionado</Text>

            <Text style={styles.subtitleLarge}>{selectedMood.label}</Text>

          </View>

        )}

        {/* Active components */}

        {components.length > 0 && (

          <Section>

            <SectionHeader

              title="Intensidade dos Componentes"

              info={`Ativos: ${components.length}`} />

            {components.map((comp) => {

              const def = getMoodComponent(comp.id);

              if (!def) return null;

              return (

                <Card key={comp.id} style={styles.activeCard}>

                  {/* Card header */}

                  <Row style={styles.activeCardHeader}>

                    <View style={[styles.dot, { backgroundColor: def.color }]} />

                    <Text style={styles.activeCardLabel}>{def.label}</Text>

                    <Pressable

                      onPress={() => removeComponent(comp.id)}

                      hitSlop={8}

                    >

                      <Ionicons

                        name="remove-circle-outline"

                        size={22}

                        color="#F87171"

                      />

                    </Pressable>

                  </Row>

                  {/* Slider */}

                  <ScaleSlider

                    variant="compact"

                    label="Intensidade"

                    value={comp.intensity}

                    onValueChange={(v) => setComponentIntensity(comp.id, v)}

                    min={1}

                    max={3}

                    step={1}

                    minLabel="Suave"

                    maxLabel="Intensa"

                    style={styles.slider}

                  />

                </Card>

              );

            })}

          </Section>

        )}

        {/* Available to add */}

        {available.length > 0 && (

          <Section>

            <SectionHeader title="Adicionar outros" />

            <Grid gap={2}>

              {available.map((def) => (

                <Card key={def.id} style={styles.availableItem}>

                  <Pressable

                    onPress={() => addComponent(def.id)}

                    style={styles.availableItemInternalWrapper}

                  >

                    <Row gap={8} style={styles.availableInner}>

                      <View style={[styles.dot, { backgroundColor: def.color }]} />

                      <Text style={styles.availableLabel}>{def.label}</Text>

                    </Row>

                    <Ionicons

                      name="add-circle-outline"

                      size={20}

                      color={Theme.colors.light.smallAddButtonIcon}

                    />

                  </Pressable>

                </Card>

              ))}

            </Grid>

          </Section>

        )}

      </ScrollView>

    </View>

  );

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

  },

  header: {

    flexDirection: 'row',

    justifyContent: 'space-between',

    alignItems: 'center',

    paddingHorizontal: Theme.spacing.containerPadding,

    paddingVertical: 16,

    borderBottomWidth: 1,

    borderBottomColor: Theme.colors.light.divider,

  },

  headerTitle: {

    fontSize: Theme.typography.bodyLg.fontSize,

    fontWeight: '700',

    color: Theme.colors.light.text,

  },

  headerAction: {

    fontSize: Theme.typography.bodyMd.fontSize,

    fontWeight: '600',

    color: Theme.colors.light.tint,

  },

  content: {

    padding: Theme.spacing.containerPadding,

    gap: Theme.spacing.sectionGap,

    paddingBottom: 120,

  },

  subtitleBlock: {

    alignItems: 'center',

    gap: 4,

  },

  subtitleSmall: {

    fontSize: Theme.typography.bodyMd.fontSize,

    color: Theme.colors.light.textSecondary,

  },

  subtitleLarge: {

    fontSize: 28,

    fontWeight: '700',

    color: Theme.colors.light.text,

  },

  section: {

    gap: Theme.spacing.cardGap,

  },

  sectionHeader: {

    justifyContent: 'space-between',

    alignItems: 'center',

  },

  activeCard: {

    padding: Theme.spacing.cardGap,

  },

  activeCardHeader: {

    alignItems: 'center',

    justifyContent: 'space-between',

    marginBottom: 16

  },

  activeCardLabel: {

    flex: 1,

    ... { ...Theme.typography.bodyLg, lineHeight: 24 },

    color: Theme.colors.light.text,

    marginLeft: 4,

  },

  dot: {

    width: 12,

    height: 12,

    borderRadius: 6,

    flexShrink: 0,

  },

  slider: {

    marginTop: 4,

  },

  availableItem: {

    flexDirection: 'row',

    justifyContent: 'space-between',

    alignItems: 'center',

    paddingHorizontal: 12,

    paddingVertical: 10,

  },

  availableItemInternalWrapper: {

    flexDirection: 'row',

    width: '100%',

    justifyContent: 'space-between',

    alignItems: 'center',

  },

  availableInner: {

    alignItems: 'center',

    flexShrink: 1,

  },

  availableLabel: {

    fontSize: Theme.typography.bodyMd.fontSize,

    fontWeight: '500',

    color: Theme.colors.light.text,

  }

});