import { Pressable, StyleSheet, Text, View } from 'react-native';
import { useTranslation } from 'react-i18next';
import { useAppearance } from '@/src/context/AppearanceContext';
import type { RecipeListItem } from '@/src/types/recipe';
import { categoryLabel } from '@/src/utils/recipe';

interface RecipeCardProps {
  recipe: RecipeListItem;
  onPress: () => void;
}

export function RecipeCard({ recipe, onPress }: RecipeCardProps) {
  const { t } = useTranslation();
  const { colors } = useAppearance();

  return (
    <Pressable
      onPress={onPress}
      style={({ pressed }) => [
        styles.card,
        {
          backgroundColor: colors.surface,
          borderColor: colors.border,
          opacity: pressed ? 0.9 : 1,
        },
      ]}
    >
      <Text style={[styles.name, { color: colors.text }]}>{recipe.name}</Text>
      <Text style={[styles.meta, { color: colors.textMuted }]}>
        {categoryLabel(recipe.mealCategory, t)}
        {recipe.calories != null ? ` · ${t('recipes.kcal', { count: recipe.calories })}` : ''}
        {recipe.prepTimeMinutes != null
          ? ` · ${t('recipes.minutes', { count: recipe.prepTimeMinutes })}`
          : ''}
      </Text>
    </Pressable>
  );
}

export function EmptyState({ title, description }: { title: string; description?: string }) {
  const { colors } = useAppearance();
  return (
    <View style={[styles.empty, { backgroundColor: colors.surface, borderColor: colors.border }]}>
      <Text style={[styles.emptyTitle, { color: colors.text }]}>{title}</Text>
      {description ? (
        <Text style={[styles.emptyDesc, { color: colors.textMuted }]}>{description}</Text>
      ) : null}
    </View>
  );
}

const styles = StyleSheet.create({
  card: {
    borderWidth: 1,
    borderRadius: 14,
    padding: 14,
    gap: 4,
  },
  name: {
    fontSize: 17,
    fontWeight: '600',
  },
  meta: {
    fontSize: 14,
  },
  empty: {
    borderWidth: 1,
    borderRadius: 14,
    padding: 20,
    gap: 6,
  },
  emptyTitle: {
    fontSize: 17,
    fontWeight: '600',
  },
  emptyDesc: {
    fontSize: 14,
    lineHeight: 20,
  },
});
