import React from "react";
import { View, Text, StyleSheet } from "react-native";
import { LinearGradient } from "expo-linear-gradient";
import { Ionicons } from "@expo/vector-icons";
import { theme } from "../styles/theme";

interface NutritionWidgetProps {
  current: number; // in kcal
  goal: number; // in kcal
}

export function NutritionWidget({ current, goal }: NutritionWidgetProps) {
  const percentage = Math.min(Math.max(current / goal, 0), 1);

  return (
    <View style={styles.container}>
      <LinearGradient
        colors={["#fef3c7", "#fde68a"]} // Light yellow background
        style={[styles.card, theme.shadows.subtle]}
      >
        <View style={styles.content}>
          <View style={styles.iconContainer}>
            <LinearGradient colors={theme.gradients.sunset} style={styles.icon}>
              <Ionicons name="nutrition" size={24} color="#fff" />
            </LinearGradient>
          </View>

          <View style={styles.info}>
            <Text style={styles.title}>Nutrition</Text>
            <Text style={styles.subtitle}>
              {current} / {goal} kcal
            </Text>
          </View>

          <View style={styles.percentageContainer}>
            <Text style={styles.percentage}>
              {Math.round(percentage * 100)}%
            </Text>
          </View>
        </View>

        <View style={styles.progressContainer}>
          <View style={styles.progressBarBg}>
            <LinearGradient
              colors={theme.gradients.sunset}
              start={{ x: 0, y: 0 }}
              end={{ x: 1, y: 0 }}
              style={[
                styles.progressBarFill,
                { width: `${percentage * 100}%` },
              ]}
            />
          </View>
        </View>
      </LinearGradient>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    marginHorizontal: 20,
    marginBottom: 24,
  },
  card: {
    borderRadius: 24,
    padding: 20,
    borderWidth: 1,
    borderColor: "#fcd34d",
  },
  content: {
    flexDirection: "row",
    alignItems: "center",
    marginBottom: 16,
  },
  iconContainer: {
    marginRight: 16,
  },
  icon: {
    width: 48,
    height: 48,
    borderRadius: 16,
    justifyContent: "center",
    alignItems: "center",
  },
  info: {
    flex: 1,
  },
  title: {
    fontSize: 16,
    fontWeight: "700",
    color: theme.colors.gray900,
    marginBottom: 4,
  },
  subtitle: {
    fontSize: 14,
    color: theme.colors.gray600,
    fontWeight: "500",
  },
  percentageContainer: {
    backgroundColor: "#fff",
    paddingHorizontal: 12,
    paddingVertical: 6,
    borderRadius: 12,
  },
  percentage: {
    fontSize: 14,
    fontWeight: "700",
    color: theme.colors.primary,
  },
  progressContainer: {
    height: 8,
  },
  progressBarBg: {
    height: 8,
    backgroundColor: "rgba(255, 255, 255, 0.5)",
    borderRadius: 4,
    overflow: "hidden",
  },
  progressBarFill: {
    height: "100%",
    borderRadius: 4,
  },
});
