siop2/apps/mobile/app/ot/[id]/index.tsx

import { router, useLocalSearchParams } from 'expo-router';
import { Alert, ScrollView, Text, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import {
  WORK_ORDER_PRIORITY_LABELS,
  WORK_ORDER_TYPE_LABELS,
} from '@siop/shared';
import { useTransition, useWorkOrder } from '@/api/exploitation';
import { useHorsLigne } from '@/auth/session';
import { BoutonTel, Carte, ChipStatut, EnteteFiche, LigneInfo } from '@/composants/ui';
import { progression } from '@/lib/checklist';
import { useTokens } from '@/theme/tokens';

const fmt = new Intl.NumberFormat('fr-FR');

/** Écran 2 de la maquette R4 : la même machine à états que le web — UN
 *  bouton principal selon l'état, la garde de clôture visible. En R4.2 les
 *  écritures restent en ligne (la file arrive en R4.3 — assumé à l'écran). */
export default function PageFicheOT() {
  const t = useTokens();
  const horsLigne = useHorsLigne();
  const { id } = useLocalSearchParams<{ id: string }>();
  const { data: ot } = useWorkOrder(id);
  const transition = useTransition(id);

  if (!ot) return null;

  const grille = progression(ot.checklist);
  const peutDemarrer = ot.allowedTransitions.includes('IN_PROGRESS');
  const peutCloturer = ot.allowedTransitions.includes('DONE');
  const peutSuspendre = ot.allowedTransitions.includes('ON_HOLD');

  const demarrer = () =>
    transition.mutate(
      { to: 'IN_PROGRESS' },
      { onError: (e) => Alert.alert('Transition refusée', e.message) },
    );

  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: t.fond }} edges={['top']}>
      <ScrollView contentContainerStyle={{ padding: 14, gap: 10 }}>
        <EnteteFiche titre={ot.reference} apres={<ChipStatut statut={ot.status} />} />
        <Text style={{ fontFamily: 'Manrope_800ExtraBold', fontSize: 17, color: t.encre }}>
          {ot.title}
        </Text>
        {horsLigne ? (
          <View
            style={{
              backgroundColor: t.stAttenteFond,
              borderColor: t.stAttente,
              borderWidth: 1,
              borderRadius: 10,
              padding: 9,
            }}
          >
            <Text style={{ color: t.stAttente, fontFamily: 'Manrope_700Bold', fontSize: 12 }}>
              ⚠ Hors-ligne — lecture seule pour l’instant : les saisies hors réseau arrivent en R4.3 (file).
            </Text>
          </View>
        ) : null}

        <Carte titre="Intervention">
          <LigneInfo nom="Type" valeur={WORK_ORDER_TYPE_LABELS[ot.type]} />
          <LigneInfo
            nom="Équipement"
            valeur={`Asc. ${ot.assetReference} — ${ot.siteName}`}
          />
          <LigneInfo
            nom="Priorité"
            valeur={
              <Text
                style={{
                  fontFamily: 'Manrope_700Bold',
                  fontSize: 12.5,
                  color: ot.priority === 'PERSON_TRAPPED' || ot.priority === 'HIGH' ? t.prioHaute : t.encre,
                }}
              >
                {WORK_ORDER_PRIORITY_LABELS[ot.priority]}
              </Text>
            }
          />
          <LigneInfo
            nom="Échéance"
            valeur={
              ot.dueDate
                ? new Intl.DateTimeFormat('fr-FR', { dateStyle: 'long' }).format(new Date(ot.dueDate))
                : '—'
            }
          />
          {ot.request ? (
            <LigneInfo nom="Demande liée" valeur={`${ot.request.reference} · ${ot.request.requesterLabel}`} />
          ) : null}
        </Carte>

        <Carte titre={`Pièces & main-d'œuvre — ${fmt.format(ot.costs.total)} MAD`}>
          {ot.costs.parts.map((p) => (
            <LigneInfo key={p.id} nom={`${p.designation} × ${p.quantity}`} valeur={`${fmt.format(p.total)}`} />
          ))}
          {ot.costs.labor.map((l) => (
            <LigneInfo
              key={l.id}
              nom={`${l.displayName} · ${Math.floor(l.minutes / 60)} h ${String(l.minutes % 60).padStart(2, '0')} × ${fmt.format(l.hourlyRate)}/h`}
              valeur={`${fmt.format(l.total)}`}
            />
          ))}
          {!ot.costs.parts.length && !ot.costs.labor.length ? (
            <Text style={{ color: t.encre3, fontFamily: 'Manrope_400Regular', fontSize: 12.5 }}>
              Aucune consommation ni temps saisi. (Saisies pièces/temps : depuis le web en R4.2.)
            </Text>
          ) : null}
        </Carte>

        {ot.checklist.length ? (
          <Carte titre={`Checklist liée — ${grille.faits}/${grille.total}`}>
            <BoutonTel
              libelle={grille.faits === grille.total ? 'Grille complète ✓ — revoir' : 'Cocher la grille'}
              variante="contour"
              surAppui={() => router.push(`/ot/${ot.id}/grille`)}
            />
          </Carte>
        ) : null}

        {ot.closureBlockers.length && (peutCloturer || ot.status === 'IN_PROGRESS') ? (
          <Text style={{ color: t.alerte, fontFamily: 'Manrope_600SemiBold', fontSize: 12 }}>
            ⚠ {ot.closureBlockers.join(' · ')}
          </Text>
        ) : null}

        {peutDemarrer ? (
          <BoutonTel
            libelle={ot.status === 'ON_HOLD' ? 'Reprendre' : 'Démarrer'}
            desactive={horsLigne || transition.isPending}
            surAppui={demarrer}
          />
        ) : null}
        {peutCloturer ? (
          <BoutonTel
            libelle="Clôturer l'intervention"
            variante="vert"
            desactive={horsLigne}
            surAppui={() => router.push(`/ot/${ot.id}/cloture`)}
          />
        ) : null}
        {peutSuspendre ? (
          <BoutonTel
            libelle="Mettre en attente"
            variante="contour"
            desactive={horsLigne || transition.isPending}
            surAppui={() =>
              transition.mutate(
                { to: 'ON_HOLD' },
                { onError: (e) => Alert.alert('Transition refusée', e.message) },
              )
            }
          />
        ) : null}

        <Carte titre="Activité">
          {ot.events.slice(0, 5).map((e) => (
            <View key={e.id} style={{ gap: 1 }}>
              <Text style={{ fontFamily: 'Manrope_700Bold', fontSize: 12, color: t.encre }}>
                {e.kind}
                {e.message ? ` — ${e.message}` : ''}
              </Text>
              <Text style={{ fontFamily: 'Manrope_400Regular', fontSize: 11, color: t.encre3 }}>
                {new Intl.DateTimeFormat('fr-FR', { dateStyle: 'medium', timeStyle: 'short' }).format(
                  new Date(e.createdAt),
                )}
                {e.by ? ` · ${e.by.displayName}` : ''}
              </Text>
            </View>
          ))}
        </Carte>
      </ScrollView>
    </SafeAreaView>
  );
}