siop2/apps/mobile/app/(tabs)/preventif.tsx

import { router } from 'expo-router';
import { FlatList, Pressable, Text, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useWorkOrders } from '@/api/exploitation';
import { ChipStatut, EnteteTabs } from '@/composants/ui';
import { useTokens } from '@/theme/tokens';

/** Onglet Préventif : mes grilles du moment — chaque tuile mène à la
 *  checklist cochable (écran 6). Les OT viennent déjà scopés par l'API. */
export default function PagePreventif() {
  const t = useTokens();
  const { data: workOrders } = useWorkOrders();

  const grilles = (workOrders ?? [])
    .filter((w) => w.type === 'PREVENTIVE' && w.status !== 'DONE' && w.status !== 'CANCELLED')
    .sort((a, b) => (a.dueDate ?? '9999').localeCompare(b.dueDate ?? '9999'));

  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: t.fond }} edges={['top']}>
      <View style={{ flex: 1, padding: 14, gap: 10 }}>
        <EnteteTabs />
        <Text style={{ fontFamily: 'Manrope_800ExtraBold', fontSize: 19, color: t.encre }}>
          Préventif
        </Text>
        <FlatList
          data={grilles}
          keyExtractor={(w) => w.id}
          contentContainerStyle={{ gap: 8, paddingBottom: 12 }}
          ListEmptyComponent={
            <Text style={{ color: t.encre3, fontFamily: 'Manrope_600SemiBold', padding: 16, textAlign: 'center' }}>
              Aucune grille préventive en cours pour vous.
            </Text>
          }
          renderItem={({ item: w }) => (
            <Pressable
              accessibilityRole="button"
              onPress={() => router.push(`/ot/${w.id}/grille`)}
              style={{
                backgroundColor: t.surface,
                borderColor: t.bordure,
                borderWidth: 1,
                borderRadius: 12,
                padding: 12,
                gap: 2,
              }}
            >
              <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
                <Text
                  style={{
                    flex: 1,
                    fontFamily: 'Manrope_700Bold',
                    fontSize: 10.5,
                    letterSpacing: 0.6,
                    textTransform: 'uppercase',
                    color: t.encre2,
                  }}
                >
                  {w.reference}
                </Text>
                <ChipStatut statut={w.status} />
              </View>
              <Text style={{ fontFamily: 'Manrope_700Bold', fontSize: 14, color: t.encre }}>
                {w.title}
              </Text>
              <Text style={{ fontFamily: 'Manrope_400Regular', fontSize: 12, color: t.encre2 }}>
                Asc. {w.assetReference} — {w.siteName}
                {w.dueDate
                  ? ` · pour le ${new Intl.DateTimeFormat('fr-FR', { day: 'numeric', month: 'short' }).format(new Date(w.dueDate))}`
                  : ''}
              </Text>
            </Pressable>
          )}
        />
      </View>
    </SafeAreaView>
  );
}