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 type { PurchaseOrderDto } from '@siop/shared';
import { useCreatePurchaseOrder, usePart } from '@/api/ressources';
import { BoutonTel, Carte, EnteteFiche, LigneInfo } from '@/composants/ui';
import { useTokens } from '@/theme/tokens';

const fmtMAD = new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'MAD' });

/** 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). Confirmation explicite après création (trouvé en
 *  recette 02/08 : la navigation instantanée en cas de succès ne donnait
 *  aucun retour visible — deux BC créés côté serveur sans que le référent
 *  s'en aperçoive dans l'app). */
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('');
  const [cree, setCree] = useState<PurchaseOrderDto | null>(null);

  if (!piece || !piece.supplierId) return null;

  if (cree) {
    return (
      <SafeAreaView style={{ flex: 1, backgroundColor: t.fond }} edges={['top']}>
        <ScrollView contentContainerStyle={{ padding: 14, gap: 12 }}>
          <EnteteFiche titre="BC créé" />
          <Carte titre="✓ Bon de commande enregistré">
            <LigneInfo nom="Référence" valeur={cree.reference} />
            <LigneInfo nom="Fournisseur" valeur={cree.supplierName} />
            <LigneInfo nom="Total" valeur={fmtMAD.format(cree.total)} />
            <LigneInfo nom="Statut" valeur="Brouillon" />
          </Carte>
          <Text style={{ color: t.encre3, fontFamily: 'Manrope_400Regular', fontSize: 11.5, textAlign: 'center' }}>
            L'envoi au fournisseur se fait depuis le web pour l'instant.
          </Text>
          <BoutonTel
            libelle="Terminé"
            surAppui={() => (router.canGoBack() ? router.back() : router.replace('/stock'))}
          />
        </ScrollView>
      </SafeAreaView>
    );
  }

  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: (bc) => setCree(bc) },
            )
          }
        />
      </ScrollView>
    </SafeAreaView>
  );
}