chlova/mobile/app/(tabs)/review.tsx

import { useCallback, useEffect, useState } from "react";
import { View, Text, Pressable, FlatList, StyleSheet, Alert } from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { useAuth } from "@/auth";
import { api, ApiError, type Asset } from "@/api";
import { C } from "@/theme";

export default function Review() {
  const { token, logout } = useAuth();
  const [assets, setAssets] = useState<Asset[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const onErr = useCallback(
    (err: unknown): void => {
      if (err instanceof ApiError && err.status === 401) void logout();
      else setError(err instanceof Error ? err.message : "Erreur");
    },
    [logout],
  );

  const refresh = useCallback(async (): Promise<void> => {
    if (!token) return;
    setLoading(true);
    try {
      const { assets } = await api.review(token);
      setAssets(assets);
      setError(null);
    } catch (err) {
      onErr(err);
    } finally {
      setLoading(false);
    }
  }, [token, onErr]);

  useEffect(() => {
    void refresh();
  }, [refresh]);

  const decide = async (id: string, action: "approve" | "refuse"): Promise<void> => {
    if (!token) return;
    try {
      if (action === "approve") await api.approve(token, id);
      else await api.refuse(token, id);
      await refresh();
    } catch (err) {
      onErr(err);
    }
  };

  const confirmRefuse = (id: string): void => {
    Alert.alert("Refuser", `Refuser définitivement ${id} ?`, [
      { text: "Annuler", style: "cancel" },
      { text: "Refuser", style: "destructive", onPress: () => void decide(id, "refuse") },
    ]);
  };

  return (
    <View style={s.wrap}>
      <FlatList
        data={assets}
        keyExtractor={(a) => a.id}
        contentContainerStyle={{ padding: 12, gap: 8 }}
        onRefresh={() => void refresh()}
        refreshing={loading}
        ListEmptyComponent={!loading ? <Text style={s.muted}>Aucun asset en attente.</Text> : null}
        ListHeaderComponent={error ? <Text style={s.error}>{error}</Text> : null}
        renderItem={({ item: a }) => (
          <View style={s.card}>
            <Text style={s.id}>{a.id}</Text>
            <Text style={[s.tier, { color: a.riskTier === "privileged" ? C.danger : C.success }]}>
              {a.riskTier} · {a.status} · v{a.version}
            </Text>
            <View style={s.actions}>
              <Pressable style={[s.act, s.approve]} onPress={() => void decide(a.id, "approve")}>
                <Ionicons name="checkmark" size={16} color={C.success} />
                <Text style={[s.actText, { color: C.success }]}>Approuver</Text>
              </Pressable>
              <Pressable style={[s.act, s.refuse]} onPress={() => confirmRefuse(a.id)}>
                <Ionicons name="close" size={16} color={C.danger} />
                <Text style={[s.actText, { color: C.danger }]}>Refuser</Text>
              </Pressable>
            </View>
          </View>
        )}
      />
      <Pressable style={s.logout} onPress={() => void logout()}>
        <Ionicons name="log-out-outline" size={18} color={C.muted} />
        <Text style={s.muted}> Déconnexion</Text>
      </Pressable>
    </View>
  );
}

const s = StyleSheet.create({
  wrap: { flex: 1, backgroundColor: C.bg },
  muted: { color: C.muted, fontSize: 13 },
  error: { color: C.danger, fontSize: 13, marginBottom: 8 },
  card: { backgroundColor: C.surface, borderColor: C.border, borderWidth: 1, borderRadius: 10, padding: 12, gap: 6 },
  id: { color: C.fg, fontFamily: "monospace", fontSize: 13 },
  tier: { fontSize: 12 },
  actions: { flexDirection: "row", gap: 8, marginTop: 4 },
  act: { flexDirection: "row", alignItems: "center", gap: 4, borderWidth: 1, borderRadius: 8, paddingHorizontal: 10, paddingVertical: 6 },
  approve: { borderColor: C.success },
  refuse: { borderColor: C.danger },
  actText: { fontSize: 13 },
  logout: { flexDirection: "row", alignItems: "center", justifyContent: "center", padding: 12, borderTopWidth: 1, borderTopColor: C.border },
});