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

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

/** Fiche pièce — R6.3. Consultation + une action courante (D4) : commander,
 *  pré-rempli depuis cette fiche, comme la maquette (écran 6). Les
 *  mouvements de stock (entrée manuelle, ajustement) restent au web. */
export default function PageFichePiece() {
  const t = useTokens();
  const { id } = useLocalSearchParams<{ id: string }>();
  const { data: piece } = usePart(id);
  const { can } = usePermissions();

  if (!piece) return null;

  const peutCommander = can('PURCHASE_ORDERS', 'create') && !!piece.supplierId;

  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: t.fond }} edges={['top']}>
      <ScrollView contentContainerStyle={{ padding: 14, gap: 10 }}>
        <EnteteFiche titre={piece.designation} />
        <Carte titre="Identité">
          <LigneInfo nom="Référence" valeur={piece.reference} />
          <LigneInfo
            nom="Stock"
            valeur={
              <Text
                style={{
                  color: piece.belowThreshold ? t.danger : t.encre,
                  fontFamily: 'Manrope_700Bold',
                  fontSize: 12.5,
                }}
              >
                {fmt.format(piece.stock)}
              </Text>
            }
          />
          <LigneInfo nom="Seuil d'alerte" valeur={fmt.format(piece.threshold)} />
          <LigneInfo nom="Fournisseur" valeur={piece.supplierName ?? '—'} />
          <LigneInfo
            nom="Dernier prix"
            valeur={piece.lastUnitPrice != null ? fmtMAD.format(piece.lastUnitPrice) : '—'}
          />
          {piece.compatible ? <LigneInfo nom="Compatible" valeur={piece.compatible} /> : null}
        </Carte>

        {peutCommander ? (
          <BoutonTel libelle="Commander" surAppui={() => router.push(`/stock/${piece.id}/commander`)} />
        ) : null}
        {!piece.supplierId && can('PURCHASE_ORDERS', 'create') ? (
          <Text style={{ color: t.encre3, fontFamily: 'Manrope_400Regular', fontSize: 12, textAlign: 'center' }}>
            Aucun fournisseur associé — commande depuis le web.
          </Text>
        ) : null}
      </ScrollView>
    </SafeAreaView>
  );
}