import { Pressable, StyleSheet, Text, View } from 'react-native';
import { useTranslation } from 'react-i18next';
import { useAppearance } from '@/src/context/AppearanceContext';
import { addDays, formatDisplayDate } from '@/src/utils/date';
import { todayIso } from '@/src/types/diet';

interface DateNavigatorProps {
  date: string;
  onChange: (date: string) => void;
}

export function DateNavigator({ date, onChange }: DateNavigatorProps) {
  const { t, i18n } = useTranslation();
  const { colors } = useAppearance();
  const isToday = date === todayIso();

  return (
    <View style={styles.row}>
      <Pressable
        onPress={() => onChange(addDays(date, -1))}
        style={[styles.btn, { borderColor: colors.border, backgroundColor: colors.surface }]}
      >
        <Text style={{ color: colors.text, fontWeight: '600' }}>‹</Text>
      </Pressable>
      <View style={[styles.center, { backgroundColor: colors.surface, borderColor: colors.border }]}>
        <Text style={{ color: colors.text, fontWeight: '700' }}>
          {formatDisplayDate(date, i18n.language)}
        </Text>
        {isToday ? (
          <Text style={{ color: colors.brand, fontSize: 11, fontWeight: '600' }}>{t('diet.today')}</Text>
        ) : null}
      </View>
      <Pressable
        onPress={() => onChange(addDays(date, 1))}
        style={[styles.btn, { borderColor: colors.border, backgroundColor: colors.surface }]}
      >
        <Text style={{ color: colors.text, fontWeight: '600' }}>›</Text>
      </Pressable>
      {!isToday ? (
        <Pressable
          onPress={() => onChange(todayIso())}
          style={[styles.todayBtn, { borderColor: colors.brand, backgroundColor: colors.surface }]}
        >
          <Text style={{ color: colors.brand, fontWeight: '600', fontSize: 12 }}>{t('diet.goToday')}</Text>
        </Pressable>
      ) : null}
    </View>
  );
}

const styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
    flexWrap: 'wrap',
  },
  btn: {
    borderWidth: 1,
    borderRadius: 10,
    width: 40,
    height: 40,
    alignItems: 'center',
    justifyContent: 'center',
  },
  center: {
    flex: 1,
    minWidth: 120,
    borderWidth: 1,
    borderRadius: 10,
    paddingVertical: 8,
    paddingHorizontal: 12,
    alignItems: 'center',
  },
  todayBtn: {
    borderWidth: 1,
    borderRadius: 10,
    paddingHorizontal: 12,
    paddingVertical: 10,
  },
});
