import React, { useEffect } from "react";
import { View, Text, StyleSheet, Alert } from "react-native";
import { useNavigation } from "@react-navigation/native";
import { colors, spacing } from "@/theme";
import { useAuth } from "@/auth/AuthProvider";

/**
 * Admin surface stub. Enforces the same RBAC rule as the web app: only
 * users with role === "admin" can render. Anyone else is bounced back to
 * Home with a toast-equivalent alert.
 */
export default function AdminScreen() {
  const { user } = useAuth();
  const nav = useNavigation<any>();

  useEffect(() => {
    if (user?.role !== "admin") {
      Alert.alert("Admin access required", "You don't have permission to view the admin panel.");
      nav.navigate("Home");
    }
  }, [user, nav]);

  if (user?.role !== "admin") return null;

  return (
    <View style={styles.wrap}>
      <Text style={styles.title}>Admin</Text>
      <Text style={styles.hint}>User management and branding controls are available on the web dashboard.</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  wrap: { flex: 1, backgroundColor: colors.bg, padding: spacing.lg },
  title: { color: colors.text, fontSize: 22, fontWeight: "700" },
  hint: { color: colors.textMuted, marginTop: spacing.sm },
});