// ... BASE_URL, ACCESS_TOKEN, PAGE_SIZE ...

export class MagentoApiFehler extends Error {
  constructor(nachricht, status) {
    super(nachricht);
    this.name = 'MagentoApiFehler';
    this.status = status;
  }
}

async function magentoFetch(path) {
  let response;
  try {
    response = await fetch(`${BASE_URL}${path}`, {
      headers: { Authorization: `Bearer ${ACCESS_TOKEN}` },
    });
  } catch {
    throw new MagentoApiFehler('Shop nicht erreichbar. Prüfen Sie Ihre Internetverbindung.', 0);
  }

  if (response.status === 401) {
    throw new MagentoApiFehler('Zugang abgelaufen oder ungültig. Bitte Token erneuern.', 401);
  }
  if (response.status === 404) {
    throw new MagentoApiFehler('Produkt nicht gefunden.', 404);
  }
  if (!response.ok) {
    throw new MagentoApiFehler(`Unerwarteter Fehler: ${response.status}`, response.status);
  }

  return response.json();
}

import { useEffect, useState } from 'react';
import { ScrollView, Text, Image, ActivityIndicator, Button, StyleSheet } from 'react-native';
import {
  fetchProductBySku,
  leseCustomAttribute,
  ermittleProduktbild,
  ermittleLagerbestand,
} from '../api/magentoApi';

export default function ProductDetailScreen({ route, navigation }) {
  const { sku } = route.params;
  const [produkt, setProdukt] = useState(null);
  const [ladend, setLadend] = useState(true);
  const [fehler, setFehler] = useState(null);

  useEffect(() => {
    setLadend(true);
    setFehler(null);
    async function laden() {
      try {
        const data = await fetchProductBySku(sku);
        setProdukt(data);
      } catch (error) {
        setFehler(error.message);
      } finally {
        setLadend(false);
      }
    }
    laden();
  }, [sku]);

  if (ladend) {
    return <ActivityIndicator style={styles.zentriert} size="large" />;
  }

  if (fehler) {
    return (
      <ScrollView contentContainerStyle={styles.zentriert}>
        <Text style={styles.fehlerText}>⚠ {fehler}</Text>
        <Button title="Zurück zur Produktliste" onPress={() => navigation.goBack()} />
      </ScrollView>
    );
  }

  const beschreibung = leseCustomAttribute(produkt, 'description');
  const bildUrl = ermittleProduktbild(produkt);
  const { aufLager, menge } = ermittleLagerbestand(produkt);

  return (
    <ScrollView style={styles.container}>
      {bildUrl && (
        <Image source={{ uri: bildUrl }} style={styles.bild} resizeMode="contain" />
      )}
      <Text style={styles.titel}>{produkt.name}</Text>
      <Text>SKU: {produkt.sku}</Text>
      <Text>{produkt.price} €</Text>
      <Text>{aufLager ? `Auf Lager (${menge} Stück)` : 'Ausverkauft'}</Text>
      {beschreibung && <Text style={styles.beschreibung}>{beschreibung}</Text>}
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  zentriert: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 16 },
  fehlerText: { marginBottom: 16, textAlign: 'center' },
  container: { padding: 16 },
  bild: { width: '100%', height: 250, marginBottom: 16 },
  titel: { fontSize: 20, fontWeight: 'bold', marginBottom: 8 },
  beschreibung: { marginTop: 16 },
});