FarmaFinder/apps/frontend-mobile/app/product/[source]/[id].tsx

import React, { useEffect, useState } from 'react';
import { View, Text, ScrollView, StyleSheet, Image, ActivityIndicator } from 'react-native';
import { useLocalSearchParams } from 'expo-router';
import { getProduct, Product } from '../../../services/products';
import { LoadingSpinner } from '../../../components/LoadingSpinner';
import { useThemeContext } from '../../../components/ThemeProvider';
import { spacing, borderRadius } from '../../../constants/theme';
import { useTranslation } from '../../../src/i18n';

export default function ProductDetailScreen() {
  const { source, id } = useLocalSearchParams<{ source: string; id: string }>();
  const { colors } = useThemeContext();
  const { t } = useTranslation();
  const [product, setProduct] = useState<Product | null>(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(false);

  useEffect(() => {
    if (!source || !id) return;

    const fetchProduct = async () => {
      try {
        const data = await getProduct(source, id);
        if (data) {
          setProduct(data);
        } else {
          setError(true);
        }
      } catch {
        setError(true);
      } finally {
        setIsLoading(false);
      }
    };

    fetchProduct();
  }, [source, id]);

  if (isLoading) {
    return <LoadingSpinner message={t('product.loading')} />;
  }

  if (error || !product) {
    return (
      <View style={[styles.errorContainer, { backgroundColor: colors.background }]}>
        <Text style={[styles.errorText, { color: colors.textSecondary }]}>{t('product.notFound')}</Text>
      </View>
    );
  }

  const isCima = product.source === 'cima';

  return (
    <ScrollView style={[styles.container, { backgroundColor: colors.background }]}>
      {product.image_url ? (
        <Image source={{ uri: product.image_url }} style={styles.image} resizeMode="contain" />
      ) : (
        <View style={[styles.imagePlaceholder, { backgroundColor: colors.surfaceLow }]}>
          <Text style={[styles.placeholderText, { color: colors.textSecondary }]}>{t('product.noImage')}</Text>
        </View>
      )}

      <View style={[styles.header, { backgroundColor: colors.card }]}>
        <View style={styles.nameRow}>
          <Text style={[styles.name, { color: colors.text }]}>{product.name}</Text>
          <View style={[styles.badge, { backgroundColor: isCima ? '#2b5bb5' : '#4caf50' }]}>
            <Text style={styles.badgeText}>{isCima ? 'CIMA' : t('product.parapharmacy')}</Text>
          </View>
        </View>
        {product.brand ? (
          <Text style={[styles.brand, { color: colors.textSecondary }]}>{product.brand}</Text>
        ) : null}
        {product.category ? (
          <Text style={[styles.category, { color: colors.textSecondary }]}>{product.category}</Text>
        ) : null}
      </View>

      {isCima ? (
        <View style={[styles.infoSection, { backgroundColor: colors.card }]}>
          <Text style={[styles.sectionTitle, { color: colors.text }]}>{t('product.cimaDetails')}</Text>
          {product.active_ingredient && (
            <InfoRow label={t('product.activeIngredient')} value={product.active_ingredient} colors={colors} />
          )}
          {product.dosage && (
            <InfoRow label={t('product.dosage')} value={product.dosage} colors={colors} />
          )}
          {product.form && (
            <InfoRow label={t('product.form')} value={product.form} colors={colors} />
          )}
          {product.prescription && (
            <InfoRow label={t('product.dispensation')} value={product.prescription} colors={colors} />
          )}
          <InfoRow label={t('product.commercialized')} value={product.commercialized ? t('product.yes') : t('product.no')} colors={colors} />
        </View>
      ) : (
        <View style={[styles.infoSection, { backgroundColor: colors.card }]}>
          <Text style={[styles.sectionTitle, { color: colors.text }]}>{t('product.productInfo')}</Text>
          {product.price != null && (
            <InfoRow label={t('product.price')} value={`${product.price} €`} colors={colors} />
          )}
          {product.original_price != null && product.original_price > (product.price || 0) && (
            <InfoRow label={t('product.previousPrice')} value={`${product.original_price} €`} colors={colors} />
          )}
          {product.category && (
            <InfoRow label={t('product.category')} value={product.category} colors={colors} />
          )}
          {product.brand && (
            <InfoRow label={t('product.brand')} value={product.brand} colors={colors} />
          )}
          {product.source_url && (
            <InfoRow label={t('product.source')} value={product.source || t('product.parapharmacy')} colors={colors} />
          )}
        </View>
      )}

      {isCima && product.photos && product.photos.length > 0 && (
        <View style={[styles.infoSection, { backgroundColor: colors.card }]}>
          <Text style={[styles.sectionTitle, { color: colors.text }]}>{t('product.images')}</Text>
          <ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.photosScroll}>
            {product.photos.map((photo, i) => (
              <View key={i} style={styles.photoItem}>
                <Image source={{ uri: photo.url }} style={styles.photoImage} resizeMode="contain" />
                <Text style={[styles.photoLabel, { color: colors.textSecondary }]}>{photo.tipo}</Text>
              </View>
            ))}
          </ScrollView>
        </View>
      )}
    </ScrollView>
  );
}

function InfoRow({ label, value, colors }: { label: string; value: string; colors: any }) {
  return (
    <View style={[styles.infoRow, { borderBottomColor: colors.border }]}>
      <Text style={[styles.infoLabel, { color: colors.textSecondary }]}>{label}</Text>
      <Text style={[styles.infoValue, { color: colors.text }]}>{value}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  image: {
    width: '100%',
    height: 260,
    backgroundColor: '#f5f5f5',
  },
  imagePlaceholder: {
    width: '100%',
    height: 160,
    alignItems: 'center',
    justifyContent: 'center',
  },
  placeholderText: {
    fontSize: 14,
  },
  header: {
    padding: spacing.lg,
  },
  nameRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'flex-start',
    gap: spacing.sm,
  },
  name: {
    flex: 1,
    fontSize: 22,
    fontWeight: 'bold',
  },
  badge: {
    paddingHorizontal: spacing.sm,
    paddingVertical: spacing.xs,
    borderRadius: borderRadius.full,
    overflow: 'hidden',
  },
  badgeText: {
    color: '#fff',
    fontSize: 12,
    fontWeight: '700',
  },
  brand: {
    fontSize: 15,
    marginTop: spacing.xs,
  },
  category: {
    fontSize: 13,
    marginTop: spacing.xs,
  },
  infoSection: {
    marginTop: spacing.sm,
    padding: spacing.lg,
  },
  sectionTitle: {
    fontSize: 16,
    fontWeight: '600',
    marginBottom: spacing.sm,
  },
  infoRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingVertical: spacing.sm,
    borderBottomWidth: 1,
  },
  infoLabel: {
    fontSize: 13,
    flexShrink: 0,
    marginRight: spacing.sm,
  },
  infoValue: {
    fontSize: 13,
    fontWeight: '500',
    flex: 1,
    textAlign: 'right',
  },
  infoValueMultiline: {
    fontSize: 13,
    fontWeight: '500',
    flex: 1,
    textAlign: 'right',
  },
  photosScroll: {
    marginTop: spacing.xs,
  },
  photoItem: {
    marginRight: spacing.md,
    alignItems: 'center',
    width: 120,
  },
  photoImage: {
    width: 120,
    height: 120,
    borderRadius: borderRadius.md,
    backgroundColor: '#f5f5f5',
  },
  photoLabel: {
    fontSize: 11,
    marginTop: spacing.xs,
  },
  errorContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  errorText: {
    fontSize: 16,
  },
});