import { ScrollView, View, Text, StyleSheet, Image } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { Ionicons } from "@expo/vector-icons";

import { COLORS } from "../constants/colors";
import CollectionCalendar from "../components/CollectionCalendar";

type Category = {
  key: string;
  title: string;
  color: string;
  bg: string;
  icon: keyof typeof Ionicons.glyphMap;
  image: any;
  examples: string[];
  tip: string;
};

const CATEGORIES: Category[] = [
  {
    key: "organico",
    title: "Orgánicos",
    color: "#22C55E",
    bg: "#ECFDF5",
    icon: "leaf",
    image: require("../../assets/illustrations/organic-food.png"),
    examples: [
      "Restos de comida (frutas, verduras, cáscaras)",
      "Bolsitas de té, residuos de café",
      "Hojas, ramas y poda de jardín",
    ],
    tip: "Escurre líquidos antes de tirar. Idealmente compostable.",
  },
  {
    key: "reciclable",
    title: "Reciclables",
    color: "#3B82F6",
    bg: "#EFF6FF",
    icon: "refresh-circle",
    image: require("../../assets/illustrations/pet-bottles.png"),
    examples: [
      "Botellas y envases PET limpios",
      "Cartón y papel seco",
      "Latas de aluminio, vidrio sin romper",
    ],
    tip: "Limpia y aplasta los envases para ocupar menos espacio.",
  },
  {
    key: "sanitario",
    title: "Sanitarios",
    color: "#6B7280",
    bg: "#F3F4F6",
    icon: "medkit",
    image: require("../../assets/illustrations/sanitary.png"),
    examples: [
      "Pañales y toallas femeninas",
      "Papel higiénico usado",
      "Curaciones y cubrebocas",
    ],
    tip: "Sepáralos siempre. NO van con orgánicos ni reciclables.",
  },
  {
    key: "especial",
    title: "Especiales",
    color: "#EF4444",
    bg: "#FEF2F2",
    icon: "warning",
    image: require("../../assets/illustrations/battery-meds.png"),
    examples: [
      "Pilas y baterías",
      "Electrónicos viejos",
      "Aceite de cocina usado",
      "Medicamentos caducados",
    ],
    tip: "NO los tires con la basura común. Llévalos a un centro de acopio.",
  },
];

export default function GuideScreen() {
  return (
    <SafeAreaView
      style={{ flex: 1, backgroundColor: COLORS.background }}
      edges={["top"]}
    >
      <ScrollView
        showsVerticalScrollIndicator={false}
        contentContainerStyle={{ padding: 20, paddingBottom: 130 }}
      >
        {/* Calendario de recolección (primer elemento) */}
        <CollectionCalendar />

        {/* Header con título grande + imagen */}
        <View style={styles.headerRow}>
          <View style={{ flex: 1, paddingRight: 8 }}>
            <Text style={styles.headerTitle}>Guía de{"\n"}separación</Text>
            <Text style={styles.headerSubtitle}>
              Separar correctamente reduce contaminación y ayuda a la ruta de
              recolección.
            </Text>
            <Text style={styles.headerOffline}>Funciona sin conexión.</Text>
          </View>
          <Image
            source={require("../../assets/illustrations/recycling.png")}
            style={styles.heroImage}
            resizeMode="contain"
          />
        </View>

        {CATEGORIES.map((cat) => (
          <View key={cat.key} style={styles.card}>
            {/* Icono circular */}
            <View
              style={[
                styles.iconWrap,
                { backgroundColor: cat.bg },
              ]}
            >
              <Ionicons name={cat.icon} size={28} color={cat.color} />
            </View>

            {/* Contenido */}
            <View style={styles.cardContent}>
              <View style={styles.cardTitleRow}>
                <Text style={[styles.cardTitle, { color: cat.color }]}>
                  {cat.title}
                </Text>
                <Ionicons name="chevron-forward" size={18} color="#9CA3AF" />
              </View>
              {cat.examples.map((ex, i) => (
                <Text key={i} style={styles.example}>
                  • {ex}
                </Text>
              ))}
              <View
                style={[
                  styles.tipBox,
                  { backgroundColor: cat.bg },
                ]}
              >
                <Ionicons name="bulb" size={14} color={cat.color} />
                <Text style={[styles.tipText, { color: cat.color }]}>
                  {cat.tip}
                </Text>
              </View>
            </View>

            {/* Imagen ilustrativa por categoría */}
            <Image
              source={cat.image}
              style={styles.categoryImage}
              resizeMode="contain"
            />
          </View>
        ))}

        {/* Recuerda */}
        <View style={styles.preventiveBox}>
          <View style={{ flex: 1 }}>
            <View style={styles.preventiveHeader}>
              <View style={styles.preventiveIcon}>
                <Ionicons name="notifications" size={20} color="#FFFFFF" />
              </View>
              <Text style={styles.preventiveTitle}>Recuerda</Text>
            </View>
            {[
              "Saca tu basura sólo dentro del horario.",
              "No persigas al camión, es peligroso.",
              "Si tu camión no pasó, usa el buzón.",
            ].map((t, i) => (
              <View key={i} style={styles.preventiveRow}>
                <Ionicons name="checkmark-circle" size={14} color="#92400E" />
                <Text style={styles.preventiveBody}>{t}</Text>
              </View>
            ))}
          </View>
          <Image
            source={require("../../assets/illustrations/truck-banner.png")}
            style={styles.preventiveImage}
            resizeMode="contain"
          />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  headerRow: {
    flexDirection: "row",
    alignItems: "center",
    marginBottom: 20,
    paddingHorizontal: 4,
  },
  headerTitle: {
    fontSize: 30,
    fontWeight: "800",
    color: "#0F172A",
    lineHeight: 34,
    marginBottom: 8,
  },
  headerSubtitle: {
    fontSize: 13,
    color: "#1E40AF",
    lineHeight: 18,
    marginBottom: 4,
  },
  headerOffline: {
    fontSize: 13,
    color: "#0E8A61",
    fontWeight: "700",
  },
  heroImage: {
    width: 120,
    height: 120,
  },
  card: {
    flexDirection: "row",
    alignItems: "flex-start",
    backgroundColor: "#FFFFFF",
    borderRadius: 18,
    padding: 14,
    marginBottom: 14,
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.05,
    shadowRadius: 8,
    elevation: 3,
  },
  iconWrap: {
    width: 50,
    height: 50,
    borderRadius: 25,
    justifyContent: "center",
    alignItems: "center",
    marginRight: 12,
  },
  cardContent: {
    flex: 1,
    paddingRight: 4,
  },
  cardTitleRow: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    marginBottom: 6,
  },
  cardTitle: { fontSize: 18, fontWeight: "800" },
  example: { fontSize: 12, color: "#4B5563", marginBottom: 2 },
  tipBox: {
    flexDirection: "row",
    alignItems: "center",
    marginTop: 8,
    padding: 8,
    borderRadius: 8,
  },
  tipText: {
    fontSize: 11,
    fontWeight: "600",
    marginLeft: 6,
    flex: 1,
    lineHeight: 14,
  },
  categoryImage: {
    width: 64,
    height: 80,
    marginLeft: 4,
    alignSelf: "center",
  },
  preventiveBox: {
    flexDirection: "row",
    alignItems: "center",
    marginTop: 8,
    padding: 14,
    backgroundColor: "#FEF3C7",
    borderRadius: 14,
  },
  preventiveHeader: {
    flexDirection: "row",
    alignItems: "center",
    marginBottom: 8,
  },
  preventiveIcon: {
    width: 32,
    height: 32,
    borderRadius: 16,
    backgroundColor: "#F59E0B",
    justifyContent: "center",
    alignItems: "center",
    marginRight: 10,
  },
  preventiveTitle: {
    fontSize: 16,
    fontWeight: "800",
    color: "#92400E",
  },
  preventiveRow: {
    flexDirection: "row",
    alignItems: "center",
    marginBottom: 4,
  },
  preventiveBody: {
    fontSize: 12,
    color: "#92400E",
    marginLeft: 6,
    flex: 1,
    lineHeight: 16,
  },
  preventiveImage: {
    width: 90,
    height: 90,
    marginLeft: 4,
  },
});
