/**
 * Pie de página superpuesto sobre la foto.
 * Se posiciona en una de las cuatro esquinas según `config.overlayPosition`.
 * El diseño es compacto (recuadro con fondo semitransparente).
 */
import React from 'react';
import { Image, StyleSheet, Text, View, ViewStyle } from 'react-native';
import { FooterConfig, resolveFieldValue, StampMeta } from './footerConfig';

interface Props {
  config: FooterConfig;
  meta: StampMeta;
  imageWidth: number;
  rotation?: number; // Rotación extra para la preview de cámara
}

export function FooterOverlay({ config, meta, imageWidth, rotation = 0 }: Props) {
  if (!config.enabled) return null;

  const enabled = config.fields.filter((f) => f.enabled);
  if (enabled.length === 0 && !config.logoUri) return null;

  const fontSize = Math.max(10, Math.round(imageWidth * 0.022));
  const logoDim  = Math.max(40, Math.round(imageWidth * 0.10));
  const pad      = Math.max(8,  Math.round(imageWidth * 0.02));
  const lineH    = Math.round(fontSize * 1.3);

  // Determinar posición física
  const posStyle: ViewStyle = {};
  if (config.overlayPosition.includes('top')) posStyle.top = 20;
  else posStyle.bottom = 20;

  if (config.overlayPosition.includes('left')) posStyle.left = 20;
  else posStyle.right = 20;

  // Aplicar rotación si se indica (para la cámara)
  if (rotation !== 0) {
    posStyle.transform = [{ rotate: `${rotation}deg` }];
  }

  return (
    <View style={[styles.container, posStyle, { padding: pad }]}>
      {/* Logo */}
      {config.logoUri ? (
        <View
          style={[
            styles.logoWrap,
            { width: logoDim, height: logoDim, borderRadius: Math.round(logoDim * 0.1), marginBottom: 4 },
          ]}
        >
          <Image source={{ uri: config.logoUri }} style={styles.logoImg} resizeMode="contain" />
        </View>
      ) : null}

      {/* Campos */}
      <View style={styles.textBlock}>
        {enabled.map((f, i) => {
          const val = resolveFieldValue(f, meta);
          if (!val) return null;
          return (
            <Text
              key={f.id}
              style={[
                styles.line,
                { fontSize, lineHeight: lineH },
                i === 0 ? styles.bold : null,
              ]}
              numberOfLines={2}
            >
              {f.key === 'custom' ? `${f.label}: ${val}` : val}
            </Text>
          );
        })}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    backgroundColor: 'rgba(0,0,0,0.65)',
    borderRadius: 8,
    maxWidth: '70%', // Un poco más ancho para evitar cortes agresivos
    alignItems: 'flex-start',
    zIndex: 1000,
  },
  logoWrap: {
    backgroundColor: '#fff',
    overflow: 'hidden',
    justifyContent: 'center',
    alignItems: 'center',
  },
  logoImg: { width: '85%', height: '85%' },
  textBlock: { width: '100%' },
  line: { color: '#fff' },
  bold: { fontWeight: '700' },
});
