import { Text } from '@/aesthetics/Text';
import { font, radius, spacing, useColors } from '@/aesthetics/styles';
import { useStrings } from '@/common/hooks/useStrings';
import { Card } from '@/see-log/aesthetics/Card';
import { RecommendedFoodItems } from '@/see-log/food-recommendation/RecommendedFoodItems';
import type { FoodRecommendation } from '@/types/foodlog';
import { FileText } from 'lucide-react-native';
import { ActivityIndicator, Pressable, StyleSheet, View } from 'react-native';
import { IngredientChip } from './DashboardUI';

type FoodRecoCardProps = {
  ingredients: string[];
  foods: FoodRecommendation[];
  loading: boolean;
  hasGenerated: boolean;
  canGenerate: boolean;
  onGenerate: () => void;
};

export function FoodRecoCard({
  ingredients,
  foods,
  loading,
  hasGenerated,
  canGenerate,
  onGenerate,
}: FoodRecoCardProps) {
  const c = useColors();
  const strings = useStrings();

  if (loading) {
    return (
      <Card>
        <View style={styles.loadingContainer}>
          <ActivityIndicator size="small" color={c.accent} />
          <Text style={[styles.loadingText, { color: c.tertiaryText }]}>
            {strings.seeLog.report.generating}
          </Text>
        </View>
      </Card>
    );
  }

  if (hasGenerated) {
    return (
      <Card>
        <View style={styles.content}>
          {ingredients.length > 0 && (
            <View style={styles.section}>
              <Text style={[styles.sectionTitle, { color: c.secondaryText }]}>
                {strings.seeLog.report.ingredientsToEat}
              </Text>
              <View style={styles.chipGrid}>
                {ingredients.map((name, i) => (
                  <IngredientChip key={`${i}-${name}`} name={name} />
                ))}
              </View>
            </View>
          )}
          {foods.length > 0 && (
            <View style={styles.section}>
              <Text style={[styles.sectionTitle, { color: c.secondaryText }]}>
                {strings.seeLog.report.recipeIdeas}
              </Text>
              <RecommendedFoodItems items={foods} />
            </View>
          )}
          {canGenerate && (
            <Pressable
              onPress={onGenerate}
              style={({ pressed }) => [
                styles.regenerateButton,
                { borderColor: c.border },
                pressed && { opacity: 0.6 },
              ]}
            >
              <FileText size={16} color={c.secondaryText} strokeWidth={2} />
              <Text style={[styles.regenerateButtonText, { color: c.secondaryText }]}>
                {strings.seeLog.report.regenerate}
              </Text>
            </Pressable>
          )}
        </View>
      </Card>
    );
  }

  return (
    <Card>
      <View style={styles.generateContainer}>
        {canGenerate ? (
          <Pressable
            onPress={onGenerate}
            style={({ pressed }) => [
              styles.generateButton,
              { backgroundColor: c.accent },
              pressed && { opacity: 0.8 },
            ]}
          >
            <FileText size={18} color="#fff" strokeWidth={2} />
            <Text style={styles.generateButtonText}>{strings.seeLog.report.generate}</Text>
          </Pressable>
        ) : (
          <Text style={[styles.generateHint, { color: c.tertiaryText }]}>
            {strings.seeLog.report.logToGenerate}
          </Text>
        )}
      </View>
    </Card>
  );
}

const styles = StyleSheet.create({
  loadingContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    gap: spacing.md,
    paddingVertical: spacing.xl,
  },
  loadingText: {
    fontSize: font.sm,
  },
  content: {
    gap: spacing.xl,
  },
  section: {
    gap: spacing.md,
  },
  sectionTitle: {
    fontSize: font.md,
    fontWeight: '600',
  },
  chipGrid: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    gap: spacing.sm,
  },
  generateContainer: {
    alignItems: 'center',
    paddingVertical: spacing.xl,
  },
  generateButton: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: spacing.sm,
    paddingHorizontal: spacing.xl,
    paddingVertical: spacing.md,
    borderRadius: radius.pill,
  },
  generateButtonText: {
    color: '#fff',
    fontSize: font.md,
    fontWeight: '600',
  },
  generateHint: {
    fontSize: font.sm,
    fontStyle: 'italic',
  },
  regenerateButton: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    gap: spacing.sm,
    paddingVertical: spacing.md,
    borderWidth: 1,
    borderRadius: radius.md,
  },
  regenerateButtonText: {
    fontSize: font.sm,
    fontWeight: '500',
  },
});