import React from "react";
import { ActivityIndicator, StyleSheet, Text, TouchableOpacity, View } from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { useServiceStatus } from "../context/ServiceStatusContext";

/**
 * Persistent (deliberately NOT dismissible) banner shown wherever a new
 * download can be started — it should stay visible the whole time
 * something is actually wrong, not something a user swipes away and
 * forgets about. Renders nothing at all while healthy.
 */
export default function ServiceStatusBanner() {
  const { serviceStatus, refreshServiceStatus, isRefreshing } = useServiceStatus();

  if (!serviceStatus || serviceStatus.status !== "degraded") return null;

  return (
    <View style={styles.banner}>
      <Ionicons name="warning-outline" size={18} color="#FFB74D" style={{ marginTop: 1 }} />
      <Text style={styles.text}>{serviceStatus.message}</Text>
      <TouchableOpacity onPress={refreshServiceStatus} disabled={isRefreshing} hitSlop={8}>
        {isRefreshing ? (
          <ActivityIndicator size="small" color="#FFB74D" />
        ) : (
          <Ionicons name="refresh" size={20} color="#FFB74D" />
        )}
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  banner: {
    flexDirection: "row",
    alignItems: "flex-start",
    backgroundColor: "#3D2E12",
    borderWidth: 1,
    borderColor: "#FFB74D",
    borderRadius: 8,
    padding: 12,
    marginBottom: 12,
    gap: 10,
  },
  text: { flex: 1, color: "#FFD9A0", fontSize: 12.5, lineHeight: 17 },
});