import { Ionicons } from "@expo/vector-icons";
import { useEffect, useState } from "react";
import { ActivityIndicator, Text, View } from "react-native";
import { Alert, getAlerts } from "../../api";
import { t } from "../../lib/locales";
import { colors } from "../../lib/theme";
import { Card, Divider, H2, Muted, Pill, Row, Screen } from "../../lib/ui";

export default function AlertsScreen() {
  const [alerts, setAlerts] = useState<Alert[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    console.log("AlertsScreen: Fetching alerts...");
    setLoading(true);
    getAlerts()
      .then((data) => {
        console.log("AlertsScreen: Received alerts:", data);
        setAlerts(data);
      })
      .catch((error) => {
        console.error("AlertsScreen: Error fetching alerts:", error);
      })
      .finally(() => {
        setLoading(false);
      });
  }, []);

  return (
    <Screen>
      {loading ? (
        <View style={{ padding: 20, alignItems: "center" }}>
          <ActivityIndicator size="large" color={colors.primary} />
          <Text style={{ color: colors.onSurfaceVariant, marginTop: 10 }}>
            {t("loadingAlerts")}
          </Text>
        </View>
      ) : alerts.length === 0 ? (
        <Card>
          <View style={{ alignItems: "center", padding: 20 }}>
            <Ionicons
              name="checkmark-circle"
              size={48}
              color={colors.onSurfaceVariant}
            />
            <H2>{t("allClearTitle")}</H2>
            <Muted style={{ textAlign: "center", marginTop: 5 }}>
              {t("noAlertsToReview")}
            </Muted>
          </View>
        </Card>
      ) : (
        alerts.map((alert) => (
          <Card key={alert.id}>
            <Row
              left={
                <View
                  style={{
                    flexDirection: "row",
                    alignItems: "center",
                    gap: 10,
                  }}
                >
                  <Ionicons
                    name={
                      alert.severity === "needs_attention"
                        ? "alert-circle"
                        : "information-circle"
                    }
                    size={18}
                    color={
                      alert.severity === "needs_attention"
                        ? colors.primary
                        : colors.onSurfaceVariant
                    }
                  />
                  <View style={{ flex: 1 }}>
                    <H2>{alert.title}</H2>
                    <Muted>{alert.timeLabel}</Muted>
                  </View>
                </View>
              }
              right={
                <Pill
                  label={
                    alert.severity === "needs_attention"
                      ? t("reviewPill")
                      : t("fyiPill")
                  }
                  tone={
                    alert.severity === "needs_attention"
                      ? "attention"
                      : "neutral"
                  }
                />
              }
            />

            <Divider />

            <H2>{t("whatHappened")}</H2>
            <Muted>{alert.whatHappened}</Muted>

            <H2>{t("whyItMatters")}</H2>
            <Muted>{alert.whyItMatters}</Muted>

            <H2>{t("suggestedNextStep")}</H2>
            <Muted>{alert.suggestedAction}</Muted>
          </Card>
        ))
      )}
    </Screen>
  );
}