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

import { Text } from '@/components/ui/Text'

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

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

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

import type { SleepRecord } from '@/lib/api'

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

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

import { router } from 'expo-router'

function sleepBadge(hours: number) {

  if (hours >= 7) return { label: 'Excelente', variant: 'green'  } as const

  if (hours >= 5) return { label: 'Regular', variant: 'yellow' } as const

  return {

    label: 'Ruim', variant: 'red'

  } as const

}

// TODO: Move this into the time utilities

function formatDuration(average: number) {

  const h = Math.floor(average)

  const m = Math.round((average - h) * 60)

  return `${h}h ${m.toString().padStart(2, '0')}min`

}

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

export function SleepRecordCard({ card }: Props) {

  const badge    = sleepBadge(card.raw.average)

  const duration = formatDuration(card.raw.average)

  return (

    <Card style={styles.card} onPress={() => router.push(`/sleep/${card.raw.id}`)}>

      <View style={styles.row}>

        <View style={[styles.iconWrap, { backgroundColor: '#ede9fe' }]}>

          <MaterialIcons name="bedtime" size={22} color="#7c3aed" />

        </View>

        <View style={styles.body}>

          <View style={styles.titleRow}>

            <Text style={styles.title}>Sono</Text>

          </View>

          <View style={styles.durationRow}>

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

          </View>

          {card.raw.annotations ? (

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

              {card.raw.annotations.trim()}

            </Text>

          ) : null}

          <Badge label={badge.label} variant={badge.variant} style={styles.badge} />

        </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: 4

  },

  title: {

    fontSize: 15,

    fontWeight: '600'

  },

  durationRow: {

    flexDirection: 'row',

    alignItems: 'center',

    gap: 8,

    marginBottom: 4

  },

  duration: {

    fontSize: 13,

    fontWeight: '500',

    opacity: 0.75

  },

  summary: {

    fontSize: 13,

    opacity: 0.6,

    lineHeight: 18,

    marginTop: 4,

    fontStyle: 'italic'

  },

  badge: {

    alignSelf: 'flex-start',

    marginTop: 4,

    maxWidth: '50%'

  },

})