import React, { useMemo } from "react";
import { StyleSheet, Text, View } from "react-native";
import { useI18n } from "../i18n";
import { useTheme } from "../theme";
import type { AppTheme } from "../theme";

type EmpOverlayProps = {
  visible: boolean;
  reason?: string | null;
};

export default function EmpOverlay({ visible, reason }: EmpOverlayProps) {
  const { t } = useI18n();
  const theme = useTheme();
  const styles = useMemo(() => createStyles(theme), [theme]);

  if (!visible) return null;

  const reasonText = reason?.trim() || t("blackout.defaultReason");

  return (
    <View style={styles.overlay}>
      <Text style={styles.title}>{t("blackout.title")}</Text>
      <Text style={styles.subtitle}>
        {t("blackout.active")} · {reasonText}
      </Text>
    </View>
  );
}

const createStyles = (theme: AppTheme) =>
  StyleSheet.create({
    overlay: {
      ...StyleSheet.absoluteFillObject,
      backgroundColor: "rgba(12, 24, 36, 0.88)",
      alignItems: "center",
      justifyContent: "center",
      padding: 24,
      zIndex: 10,
    },
    title: {
      fontSize: 24,
      fontWeight: "700",
      color: "#ffffff",
      marginBottom: 8,
    },
    subtitle: {
      color: "rgba(255, 255, 255, 0.8)",
      textAlign: "center",
    },
  });
