// components/history/cards/MoodHistoryCard.tsx

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

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

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

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

import type { HistoryCard } from '@/lib/history/types';

import type { MoodEntry } from '@/lib/api';

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

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

import { format } from 'date-fns';

function inferBadge(anxiety: number, stress: number, energy: number) {

  if (anxiety >= 7) return { label: 'Ansiedade alta', variant: 'red'    } as const

  if (stress  >= 7) return { label: 'Estresse alto',  variant: 'orange' } as const

  if (energy  <= 3) return { label: 'Energia baixa',  variant: 'yellow' } as const

  return undefined

}

// TODO: Perhaps we could move these into the constants instead and use it everywhere?

const MOOD_META: Record<string, { color: string; bg: string }> = {

  GREAT:   { color: '#16a34a', bg: '#dcfce7' },

  GOOD:    { color: '#2563eb', bg: '#dbeafe' },

  NEUTRAL: { color: '#d97706', bg: '#fef3c7' },

  SAD:     { color: '#7c3aed', bg: '#ede9fe' },

  ANGRY:   { color: '#dc2626', bg: '#fee2e2' },

}

type Props = { card: HistoryCard & { raw: MoodEntry } }

export function MoodHistoryCard({ card }: Props) {

  const meta = MOOD_META[card.raw.selectedMood] ?? MOOD_META.NEUTRAL

  const badge = inferBadge(card.raw.anxietyLevel, card.raw.stressLevel, card.raw.energyLevel)

  const time = format(card.timestamp, 'HH:mm')

  const moodDef = getMood(card.raw.selectedMood.toLowerCase());

  return (

    <Card style={styles.card}>

      <View style={styles.row}>

        <View style={[styles.iconWrap, { backgroundColor: meta.bg }]}>

          <Text style={styles.moodIconEmoji}>{moodDef?.icon ?? '😐'}</Text>

          {false && (<MaterialIcons name={meta.icon} size={22} color={meta.color} />)}

        </View>

        <View style={styles.body}>

          <View style={styles.titleRow}>

            <Text style={styles.title}>{moodDef.label}</Text>

            <Text style={styles.time}>{time}</Text>

          </View>

          {card.raw.annotation ? (

            <Text style={styles.summary} numberOfLines={2}>

              {card.raw.annotation?.trim()}

            </Text>

          ) : null}

          {badge ? (

            <Badge label={badge.label}

                   variant={badge.variant}

                   style={styles.badge}

            /> : null

          )}

        </View>

      </View>

    </Card>

  )

}

const styles = StyleSheet.create({

  card: {

    padding: Spacing.cardGap

  },

  row: {

    flexDirection: 'row',

    alignItems: 'flex-start',

    gap: 12

  },

  iconWrap: {

    width: 40,

    height: 40,

    borderRadius: 20,

    alignItems: 'center',

    justifyContent: 'center',

    marginTop: 1

  },

  body: { flex: 1 },

  titleRow: {

    flexDirection: 'row',

    justifyContent: 'space-between',

    alignItems: 'center',

    marginBottom: 2

  },

  title: {

    fontSize: 15,

    fontWeight: '600'

  },

  moodIconEmoji: {

    fontSize: 26,

  },

  time: {

    fontSize: 13,

    opacity: 0.45

  },

  summary: {

    fontSize: 13,

    opacity: 0.6,

    lineHeight: 18,

    marginBottom: 6,

    fontStyle: 'italic'

  },

  badge: {

    alignSelf: 'flex-start',

    marginTop: 4,

    maxWidth: '50%'

  }

})