import { ScrollView, Text, TouchableOpacity, View } from "react-native";
import { router } from "expo-router";
import { ScreenContainer } from "@/components/screen-container";
import { useColors } from "@/hooks/use-colors";
import {
  CATEGORY_ORDER,
  CATEGORY_DISPLAY,
  CATEGORY_ICONS,
  CATEGORY_UNIT,
  GUIDANCE,
} from "@/lib/health-data";

export default function AddReadingScreen() {
  const colors = useColors();

  return (
    <ScreenContainer>
      <ScrollView
        contentContainerStyle={{ padding: 16, paddingBottom: 32 }}
        showsVerticalScrollIndicator={false}
      >
        <Text className="text-2xl font-bold text-foreground mb-1">Add Reading</Text>
        <Text className="text-muted text-sm mb-5">Select a category to enter a new reading.</Text>

        {CATEGORY_ORDER.map((cat) => (
          <TouchableOpacity
            key={cat}
            onPress={() => router.push(`/entry/${cat}` as any)}
            style={{
              backgroundColor: colors.surface,
              borderRadius: 16,
              padding: 16,
              marginBottom: 10,
              borderWidth: 1,
              borderColor: colors.border,
              flexDirection: "row",
              alignItems: "center",
            }}
          >
            <Text style={{ fontSize: 30, marginRight: 14 }}>{CATEGORY_ICONS[cat]}</Text>
            <View style={{ flex: 1 }}>
              <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
                <Text style={{ color: colors.foreground, fontSize: 16, fontWeight: "700" }}>
                  {CATEGORY_DISPLAY[cat]}
                </Text>
                <Text
                  style={{
                    color: colors.primary,
                    fontSize: 11,
                    fontWeight: "600",
                    backgroundColor: colors.background,
                    paddingHorizontal: 8,
                    paddingVertical: 2,
                    borderRadius: 6,
                  }}
                >
                  {CATEGORY_UNIT[cat]}
                </Text>
              </View>
              <Text style={{ color: colors.muted, fontSize: 12, marginTop: 3 }} numberOfLines={2}>
                {GUIDANCE[cat]}
              </Text>
            </View>
            <Text style={{ color: colors.muted, fontSize: 20, marginLeft: 8 }}>›</Text>
          </TouchableOpacity>
        ))}
      </ScrollView>
    </ScreenContainer>
  );
}
