MeowSpool/mobile/app/(app)/filaments/[id]/qrcode.tsx

import React from 'react';
import {
  View, Text, TouchableOpacity, StyleSheet, Alert, Share,
} from 'react-native';
import { useLocalSearchParams, useRouter } from 'expo-router';
import { Ionicons } from '@expo/vector-icons';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useFilamentStore } from '@store/filamentStore';
import { colors, typography, spacing, radius } from '@shared/theme';
import { Button } from '@presentation/components/ui/Button';

/**
 * Tela de QR Code — 1CF-0
 */
export default function QRCodeScreen(): React.ReactElement {
  const { id } = useLocalSearchParams<{ id: string }>();
  const router = useRouter();
  const { filaments } = useFilamentStore();

  const filament = filaments.find((f) => f.id === id);

  const slug = filament
    ? `${filament.brand.toLowerCase()}-${(filament.model ?? '').toLowerCase()}-${filament.colorHex.replace('#', '').toLowerCase()}`.replace(/\s+/g, '-')
    : 'desconhecido';

  const deepLink = `meowspool.app/f/${slug}`;

  async function handleShare(): Promise<void> {
    try {
      await Share.share({ message: `meowspool://filament/${id}`, url: `https://${deepLink}` });
    } catch {
      // cancelled
    }
  }

  async function handleCopyLink(): Promise<void> {
    // expo-clipboard not installed — show alert as placeholder
    Alert.alert('Link copiado', deepLink);
  }

  if (!filament) {
    return (
      <SafeAreaView style={styles.safe}>
        <View style={styles.notFound}>
          <Text style={styles.notFoundText}>Filamento não encontrado</Text>
        </View>
      </SafeAreaView>
    );
  }

  return (
    <SafeAreaView style={styles.safe}>
      {/* Header */}
      <View style={styles.header}>
        <TouchableOpacity onPress={() => router.back()}>
          <Ionicons name="chevron-back" size={24} color={colors.textPrimary} />
        </TouchableOpacity>
        <Text style={styles.headerTitle}>QR Code</Text>
        <View style={{ width: 24 }} />
      </View>

      {/* Filament identity */}
      <View style={styles.identity}>
        <View style={[styles.swatch, { backgroundColor: filament.colorHex }]} />
        <View>
          <Text style={styles.name}>
            {filament.brand}{filament.model ? ` ${filament.model}` : ''}
          </Text>
          <Text style={styles.meta}>
            {filament.brand} · {filament.material} · {filament.colorHex}
          </Text>
        </View>
      </View>

      {/* QR Code area */}
      <View style={styles.qrContainer}>
        <View style={styles.qrCard}>
          {/* Placeholder QR — real impl would use react-native-qrcode-svg */}
          <View style={styles.qrPlaceholder}>
            <Ionicons name="qr-code" size={160} color={colors.black} />
          </View>
        </View>
        <Text style={styles.qrHint}>Aponte a câmera para escanear</Text>
        <View style={styles.linkBadge}>
          <Text style={styles.linkText}>{deepLink}</Text>
        </View>
      </View>

      {/* Actions */}
      <View style={styles.footer}>
        <Button
          label="Compartilhar QR Code"
          leftIcon={<Ionicons name="share-outline" size={18} color={colors.bgBase} />}
          onPress={handleShare}
        />
        <TouchableOpacity style={styles.copyBtn} onPress={handleCopyLink}>
          <Text style={styles.copyBtnText}>Copiar link</Text>
        </TouchableOpacity>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safe: { flex: 1, backgroundColor: colors.bgBase },
  notFound: { flex: 1, alignItems: 'center', justifyContent: 'center' },
  notFoundText: { fontFamily: typography.fontFamily.ui, fontSize: typography.fontSize.base, color: colors.textSecondary },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: spacing[5],
    paddingVertical: spacing[4],
  },
  headerTitle: {
    fontFamily: typography.fontFamily.ui,
    fontSize: typography.fontSize.md,
    fontWeight: typography.fontWeight.semibold,
    color: colors.textPrimary,
  },
  identity: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: spacing[3],
    paddingHorizontal: spacing[5],
    paddingBottom: spacing[4],
  },
  swatch: { width: 44, height: 44, borderRadius: radius.md },
  name: {
    fontFamily: typography.fontFamily.ui,
    fontSize: typography.fontSize.base,
    fontWeight: typography.fontWeight.semibold,
    color: colors.textPrimary,
  },
  meta: {
    fontFamily: typography.fontFamily.ui,
    fontSize: typography.fontSize.sm,
    color: colors.textSecondary,
  },
  qrContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    gap: spacing[4],
    paddingHorizontal: spacing[5],
  },
  qrCard: {
    backgroundColor: '#F5EFE0',
    borderRadius: radius.xl,
    padding: spacing[6],
  },
  qrPlaceholder: {
    width: 200,
    height: 200,
    alignItems: 'center',
    justifyContent: 'center',
  },
  qrHint: {
    fontFamily: typography.fontFamily.ui,
    fontSize: typography.fontSize.sm,
    color: colors.textSecondary,
  },
  linkBadge: {
    backgroundColor: colors.bgSurface,
    paddingHorizontal: spacing[4],
    paddingVertical: spacing[2],
    borderRadius: radius.full,
    borderWidth: 1,
    borderColor: colors.border,
  },
  linkText: {
    fontFamily: typography.fontFamily.mono,
    fontSize: typography.fontSize.xs,
    color: colors.accent,
  },
  footer: {
    padding: spacing[5],
    gap: spacing[3],
    borderTopWidth: 1,
    borderTopColor: colors.border,
    backgroundColor: colors.bgBase,
  },
  copyBtn: { alignItems: 'center', paddingVertical: spacing[2] },
  copyBtnText: {
    fontFamily: typography.fontFamily.ui,
    fontSize: typography.fontSize.base,
    color: colors.textSecondary,
  },
});