import React from 'react';
import { StyleSheet, Text, View, type StyleProp, type ViewStyle } from 'react-native';
import QRCode from 'react-native-qrcode-svg';
import { gradients, m3Colors, m3Shape, m3Type, spacing } from '../theme/proulr-theme';

// `require` (padrão RN para assets estáticos) — import ESM de .png exigiria um
// ambient d.ts que consumers compilando o source em node_modules não enxergam.
const brandMarkAsset = require('../assets/proulr-brand-mark.png') as number;

export type BrandQrCodeProps = {
  value: string;
  size?: number;
};

/**
 * QR customizado da marca (ref. QR do Instagram): módulos no gradiente Proulr
 * (roxo → fúcsia) sobre fundo claro e brand mark no centro, com ECC "H" para
 * manter a leitura mesmo com o logo cobrindo o miolo. Componente único para
 * todo QR de produto (convidar amigos, convite de grupo, etc.).
 */
export function BrandQrCode({ value, size = 200 }: BrandQrCodeProps) {
  return (
    <QRCode
      value={value}
      size={size}
      backgroundColor={m3Colors.inverseSurface}
      enableLinearGradient
      linearGradient={[...gradients.brand]}
      ecl="H"
      logo={brandMarkAsset}
      logoSize={Math.round(size * 0.22)}
      logoBackgroundColor={m3Colors.inverseSurface}
      logoMargin={Math.max(3, Math.round(size * 0.02))}
      logoBorderRadius={m3Shape.cornerMedium}
    />
  );
}

export type BrandQrNametagProps = BrandQrCodeProps & {
  label?: string;
  style?: StyleProp<ViewStyle>;
};

/**
 * Nametag: cartão claro (inverseSurface) com o BrandQrCode e rótulo opcional
 * (ex.: @handle). É o "cartão de convite" padrão exibido em telas e bubbles.
 */
export function BrandQrNametag({ value, size = 200, label, style }: BrandQrNametagProps) {
  const cardPadding = size >= 160 ? spacing.xl : spacing.md;
  return (
    <View style={[styles.card, { padding: cardPadding }, style]}>
      <BrandQrCode value={value} size={size} />
      {label ? <Text style={styles.label}>{label}</Text> : null}
    </View>
  );
}

const styles = StyleSheet.create({
  card: {
    alignSelf: 'center',
    alignItems: 'center',
    gap: spacing.lg,
    backgroundColor: m3Colors.inverseSurface,
    borderRadius: m3Shape.cornerExtraLarge,
  },
  label: {
    ...m3Type.title,
    color: m3Colors.inverseOnSurface,
    letterSpacing: 2,
    textTransform: 'uppercase',
  },
});