siop2/apps/mobile/app/stock/[id]/commander.tsx

import { router, useLocalSearchParams } from 'expo-router';
import { useState } from 'react';
import { ScrollView, Text, TextInput, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useCreatePurchaseOrder, usePart } from '@/api/ressources';
import { BoutonTel, Carte, EnteteFiche, LigneInfo } from '@/composants/ui';
import { useTokens } from '@/theme/tokens';

/** Nouveau BC pré-rempli depuis l'alerte stock — maquette écran 6. Une
 *  seule ligne (cette pièce) : le bon de commande multi-lignes détaillé
 *  reste au web (D4). */
export default function PageCommander() {
  const t = useTokens();
  const { id } = useLocalSearchParams<{ id: string }>();
  const { data: piece } = usePart(id);
  const creation = useCreatePurchaseOrder();
  const manquant = piece ? Math.max(piece.threshold - piece.stock, 1) : 1;
  const [quantite, setQuantite] = useState(String(manquant));
  const [prix, setPrix] = useState('');

  if (!piece || !piece.supplierId) return null;
  const prixDefaut = piece.lastUnitPrice != null ? String(piece.lastUnitPrice) : '';
  const prixSaisi = prix || prixDefaut;
  const qte = Number(quantite);
  const pu = Number(prixSaisi);
  const valide = qte > 0 && pu >= 0 && Number.isFinite(qte) && Number.isFinite(pu);

  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: t.fond }} edges={['top']}>
      <ScrollView contentContainerStyle={{ padding: 14, gap: 10 }}>
        <EnteteFiche titre="Nouveau BC" />
        <Carte titre="Ligne">
          <LigneInfo nom="Fournisseur" valeur={piece.supplierName ?? '—'} />
          <LigneInfo nom="Pièce" valeur={`${piece.designation} (${piece.reference})`} />
        </Carte>
        <View style={{ gap: 4 }}>
          <Text style={{ fontFamily: 'Manrope_700Bold', fontSize: 11, color: t.encre2 }}>Quantité</Text>
          <TextInput
            accessibilityLabel="Quantité"
            keyboardType="numeric"
            value={quantite}
            onChangeText={setQuantite}
            style={{
              borderWidth: 1.5,
              borderColor: t.bordureForte,
              borderRadius: 9,
              paddingHorizontal: 10,
              paddingVertical: 9,
              color: t.encre,
              fontFamily: 'Manrope_600SemiBold',
              fontSize: 13,
            }}
          />
        </View>
        <View style={{ gap: 4 }}>
          <Text style={{ fontFamily: 'Manrope_700Bold', fontSize: 11, color: t.encre2 }}>
            Prix unitaire (MAD)
          </Text>
          <TextInput
            accessibilityLabel="Prix unitaire"
            keyboardType="numeric"
            placeholder={prixDefaut || '0'}
            placeholderTextColor={t.encre3}
            value={prix}
            onChangeText={setPrix}
            style={{
              borderWidth: 1.5,
              borderColor: t.bordureForte,
              borderRadius: 9,
              paddingHorizontal: 10,
              paddingVertical: 9,
              color: t.encre,
              fontFamily: 'Manrope_600SemiBold',
              fontSize: 13,
            }}
          />
        </View>
        {creation.isError ? (
          <Text style={{ color: t.danger, fontFamily: 'Manrope_600SemiBold', fontSize: 12.5 }}>
            {creation.error.message}
          </Text>
        ) : null}
        <BoutonTel
          libelle="Créer le BC"
          desactive={!valide || creation.isPending}
          surAppui={() =>
            creation.mutate(
              {
                supplierId: piece.supplierId!,
                lines: [{ partId: piece.id, quantity: qte, unitPrice: pu }],
              },
              { onSuccess: () => (router.canGoBack() ? router.back() : router.replace('/stock')) },
            )
          }
        />
      </ScrollView>
    </SafeAreaView>
  );
}