import React, { useState, useRef, useEffect } from "react";
import {
  View,
  Text,
  Image,
  StyleSheet,
  TouchableOpacity,
  Animated,
  BackHandler,
  FlatList,
  ScrollView,
  TextInput,
} from "react-native";
import axios from "axios";
import AsyncStorage from "@react-native-async-storage/async-storage";
import Container from "../components/Container";
import CardRecord from "../components/CardRecord";

const ScreenGula = ({ navigation }) => {
  const [token, setToken] = useState(null);

  const [profileId, setProfileId] = useState(null);
  const [profileName, setProfileName] = useState(null);
  const [profileSex, setProfileSex] = useState(null);
  const [profileDob, setProfileDob] = useState(null);
  const [profileAge, setProfileAge] = useState(null);

  const [result, setResult] = useState(""); // Glucose level
  const [unit, setUnit] = useState("mg/dL"); // Unit (mg/dL or mmol/L)
  const [method, setMethod] = useState("CBG"); // Method (CBG, FBG, OGTT, etc.)
  const [location, setLocation] = useState(""); // Test location
  const [tool, setTool] = useState(""); // Device/tool used

  const [recordList, setRecordList] = useState([]);

  const getToken = async () => {
    const savedToken = await AsyncStorage.getItem("auth_token");
    if (savedToken !== null) {
      setToken(savedToken);
    } else {
      //   navigation.navigate("Profile");
    }
  };

  const HttpRequest = (url, body, conf, handle) => {
    // string, object, object
    axios
      .post(url, body, conf)
      .then((response) => {
        handle(response.data);
      })
      .catch((error) => {
        console.error("Terjadi kesalahan:", error.stack);
      });
  };

  const handleProfileDetail = (data) => {
    if (data.status === "success") {
      setProfileId(data.data.id);
      setProfileName(data.data.name);
      setProfileSex(data.data.sex);
      setProfileDob(data.data.dob);
      if (data.data.dob !== null) {
        const tanggalLahir = new Date(data.data.dob);
        const today = new Date();
        const umur = today.getFullYear() - tanggalLahir.getFullYear();
        const bulanSekarang = today.getMonth() - tanggalLahir.getMonth();
        let umurTerupdate;
        if (
          bulanSekarang < 0 ||
          (bulanSekarang === 0 && today.getDate() < tanggalLahir.getDate())
        ) {
          umurTerupdate = umur - 1;
        } else {
          umurTerupdate = umur;
        }
        setProfileAge(umurTerupdate);
      }
    }
  };

  const fetchProfileDetail = async () => {
    try {
      const url = "https://uas.ditaajipratama.net/api/checkcare/profile/detail";
      const body = {};
      const auth_token = await AsyncStorage.getItem("auth_token");
      const config = {
        headers: {
          Authorization: `Bearer ${auth_token}`,
        },
      };
      console.log(`Bearer ${auth_token}`);
      console.log(token);
      if (auth_token !== null) {
        HttpRequest(url, body, config, handleProfileDetail);
      }
    } catch (error) {
      console.log(error.stack);
    }
  };

  const quickResult = (result, unit, method) => {
    var title = "Cek Gula Darah";
    var message = "Masukkan hasil pemeriksaan gula darah";
    var image = require("../img/thermometer.png"); // You'll change this
    var category = "unknown";

    const glucoseValue = parseFloat(result) || 0;

    if (glucoseValue === 0) {
      title = "Cek Gula Darah";
      message = "Masukkan hasil pemeriksaan gula darah";
      category = "input";
    } else {
      // Convert mmol/L to mg/dL if needed for consistent comparison
      let glucoseInMgDl = glucoseValue;
      if (unit === "mmol/L") {
        glucoseInMgDl = glucoseValue * 18;
      }

      // Determine category based on method and glucose level
      if (method === "FBG" || method === "Puasa") {
        // Fasting Blood Glucose
        if (glucoseInMgDl < 70) {
          title = "Hipoglikemia";
          message = "Gula darah rendah - Segera konsumsi makanan manis";
          category = "low";
        } else if (glucoseInMgDl >= 70 && glucoseInMgDl <= 100) {
          title = "Gula Darah Normal";
          message = "Gula darah puasa dalam batas normal";
          category = "normal";
        } else if (glucoseInMgDl >= 100 && glucoseInMgDl <= 125) {
          title = "Prediabetes";
          message = "Gula darah puasa sedikit tinggi - Perhatikan pola makan";
          category = "prediabetes";
        } else if (glucoseInMgDl >= 126) {
          title = "Diabetes";
          message = "Gula darah puasa tinggi - Konsultasi dengan dokter";
          category = "diabetes";
        }
      } else {
        // Random/Post-meal glucose
        if (glucoseInMgDl < 70) {
          title = "Hipoglikemia";
          message = "Gula darah rendah - Segera konsumsi makanan manis";
          category = "low";
        } else if (glucoseInMgDl < 140) {
          title = "Gula Darah Normal";
          message = "Gula darah dalam batas normal";
          category = "normal";
        } else if (glucoseInMgDl >= 140 && glucoseInMgDl <= 199) {
          title = "Prediabetes";
          message = "Gula darah sedikit tinggi - Perhatikan pola makan";
          category = "prediabetes";
        } else if (glucoseInMgDl >= 200) {
          title = "Diabetes";
          message = "Gula darah tinggi - Konsultasi dengan dokter";
          category = "diabetes";
        }
      }
    }

    return { title, message, image, category };
  };

  const reqRecordList = async () => {
    try {
      const url = "https://uas.ditaajipratama.net/api/checkcare/glucose/list";
      const body = {};
      const auth_token = await AsyncStorage.getItem("auth_token");
      const config = {
        headers: {
          Authorization: `Bearer ${auth_token}`,
        },
      };
      const handle = (data) => {
        setRecordList(data);
      };
      if (auth_token !== null) {
        HttpRequest(url, body, config, handle);
      }
    } catch (error) {
      console.log(error.stack);
    }
  };

  const reqAdd = async () => {
    try {
      const url = "https://uas.ditaajipratama.net/api/checkcare/glucose/add";
      const body = {
        result,
        unit,
        method,
        location,
        tool,
      };
      const auth_token = await AsyncStorage.getItem("auth_token");
      const config = {
        headers: {
          Authorization: `Bearer ${auth_token}`,
        },
      };
      const handle = (data) => {
        reqRecordList();
        setResult("");
        setUnit("mg/dL");
        setMethod("CBG");
        setLocation("");
        setTool("");
      };
      if (auth_token !== null) {
        HttpRequest(url, body, config, handle);
      }
    } catch (error) {
      console.log(error.stack);
    }
  };

  const ListItem = ({ item }) => {
    const quickRes = quickResult(item.result, item.unit, item.method);
    return (
      <CardRecord key="{item.id}">
        <Text style={styles.resultDate}>{item.when}</Text>
        <Text style={styles.resultValue}>
          {item.result} {item.unit} ({item.method})
        </Text>
        <Text style={[styles.resultStatus]}>{quickRes.title}</Text>
      </CardRecord>
    );
  };

  useEffect(() => {
    getToken();
    fetchProfileDetail();
    reqRecordList();
  }, []);

  return (
    <Container>
      <View style={styles.headerRow}>
        <View style={styles.illustrationContainer}>
          <Image
            source={quickResult(result, unit, method).image}
            style={styles.illustration}
            resizeMode="contain"
          />
        </View>
        <View style={styles.textContainer}>
          <Text style={styles.title}>
            {quickResult(result, unit, method).title}
          </Text>
          <Text style={styles.datetime}>
            {`Gula: ${result || 0} ${unit} (${method})`}
          </Text>
          <Text style={styles.description}>
            {quickResult(result, unit, method).message}
          </Text>
        </View>
      </View>

      <View style={styles.inputColumn}>
        <View style={styles.inputRow}>
          <TextInput
            style={styles.inputForm}
            placeholder="Hasil (angka)"
            placeholderTextColor="#888"
            keyboardType="numeric"
            onChangeText={(text) => setResult(text)}
            value={result}
          />
          <TextInput
            style={styles.inputForm}
            placeholder="Unit"
            placeholderTextColor="#888"
            onChangeText={(text) => setUnit(text)}
            value={unit}
          />
        </View>

        <View style={styles.inputRow}>
          <TextInput
            style={styles.inputForm}
            placeholder="Metode (CBG/FBG/OGTT)"
            placeholderTextColor="#888"
            onChangeText={(text) => setMethod(text)}
            value={method}
          />
          <TextInput
            style={styles.inputForm}
            placeholder="Lokasi"
            placeholderTextColor="#888"
            onChangeText={(text) => setLocation(text)}
            value={location}
          />
        </View>

        <TextInput
          style={styles.inputFormTool}
          placeholder="Alat yang digunakan"
          placeholderTextColor="#888"
          onChangeText={(text) => setTool(text)}
          value={tool}
        />

        <TouchableOpacity style={styles.inputButtonSubmit} onPress={reqAdd}>
          <Text style={styles.submitText}>Submit</Text>
        </TouchableOpacity>
      </View>

      <View style={{ flex: 2 }}>
        <FlatList
          data={recordList}
          renderItem={({ item }) => <ListItem item={item} />}
          keyExtractor={(item, index) => index.toString()}
        />
      </View>
    </Container>
  );
};

const styles = StyleSheet.create({
  headerRow: {
    flexDirection: "row",
    alignItems: "center",
  },
  illustration: {
    width: 100,
    height: 100,
  },
  illustrationContainer: {
    marginRight: 16,
  },
  textContainer: {
    flex: 1,
  },
  title: {
    fontSize: 28,
    fontWeight: "bold",
    color: "#111",
  },
  datetime: {
    fontSize: 12,
    color: "#444",
    marginVertical: 4,
  },
  description: {
    fontSize: 14,
    color: "#333",
    maxWidth: 320,
    marginBottom: 16,
  },
  inputColumn: {
    width: "100%",
    marginBottom: 10,
  },
  inputRow: {
    flexDirection: "row",
    justifyContent: "space-between",
    width: "100%",
    marginBottom: 10,
  },
  inputForm: {
    flex: 1,
    borderWidth: 1,
    borderColor: "#ccc",
    borderRadius: 30,
    paddingVertical: 10,
    paddingHorizontal: 16,
    marginHorizontal: 6,
    backgroundColor: "#fff",
    color: "#333",
  },
  inputFormTool: {
    borderWidth: 1,
    borderColor: "#ccc",
    borderRadius: 30,
    paddingVertical: 10,
    paddingHorizontal: 16,
    marginVertical: 6,
    backgroundColor: "#fff",
    color: "#333",
  },
  inputButtonSubmit: {
    borderRadius: 30,
    paddingVertical: 12,
    marginVertical: 6,
    backgroundColor: "#007bff",
  },
  submitText: {
    textAlign: "center",
    color: "#fff",
    fontWeight: "600",
  },
  resultDate: {
    flex: 1,
    color: "#333",
  },
  resultValue: {
    flex: 1,
    textAlign: "center",
    color: "#111",
    fontWeight: "500",
  },
  resultStatus: {
    flex: 1,
    textAlign: "right",
    fontWeight: "bold",
  },
});

export default ScreenGula;