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

import { useQueryClient } from '@tanstack/react-query';
import { router, useLocalSearchParams } from 'expo-router';
import { 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 { useWorkOrder } from '@/api/exploitation';
import { useHorsLigne } from '@/auth/session';
import { BoutonTel, Carte, ChipStatut, EnteteFiche, LigneInfo } from '@/composants/ui';
import { CartePhotos } from '@/composants/carte-photos';
import { enfilerTransition } from '@/file/actions';
import { useFile } from '@/file/store';
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. Depuis R4.3, chaque geste part en file
 *  (D1) : l'écran montre l'état local tout de suite, la synchro suit. */
export default function PageFicheOT() {
  const t = useTokens();
  const horsLigne = useHorsLigne();
  const { id } = useLocalSearchParams<{ id: string }>();
  const { data: ot } = useWorkOrder(id);
  const queryClient = useQueryClient();
  const file = useFile();

  if (!ot) return null;

  const grille = progression(ot.checklist);
  const enFile = file.filter((s) => s.otId === ot.id);
  const peutDemarrer = ot.allowedTransitions.includes('IN_PROGRESS');
  const peutCloturer = ot.allowedTransitions.includes('DONE');
  const peutSuspendre = ot.allowedTransitions.includes('ON_HOLD');

  const demarrer = () => enfilerTransition(queryClient, ot, 'IN_PROGRESS');

  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: t.fond }} edges={['top']}>
      <ScrollView contentContainerStyle={{ padding: 14, gap: 10 }}>
        <EnteteFiche
          titre={ot.reference}
          apres={
            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
              {enFile.length ? (
                <Text
                  style={{
                    fontFamily: 'Manrope_800ExtraBold',
                    fontSize: 10,
                    color: t.stAttente,
                    backgroundColor: t.stAttenteFond,
                    paddingHorizontal: 7,
                    paddingVertical: 2,
                    borderRadius: 999,
                    overflow: 'hidden',
                  }}
                >
                  {enFile.length} en file
                </Text>
              ) : null}
              <ChipStatut statut={ot.status} />
            </View>
          }
        />
        <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 — vos gestes partent en file et se synchroniseront au retour du réseau.
            </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'}
            surAppui={demarrer}
          />
        ) : null}
        {peutCloturer ? (
          <BoutonTel
            libelle="Clôturer l'intervention"
            variante="vert"
            surAppui={() => router.push(`/ot/${ot.id}/cloture`)}
          />
        ) : null}
        {peutSuspendre ? (
          <BoutonTel
            libelle="Mettre en attente"
            variante="contour"
            surAppui={() => enfilerTransition(queryClient, ot, 'ON_HOLD')}
          />
        ) : null}

        <CartePhotos ot={ot} />

        <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>
  );
}