/**
 * Pie de página superpuesto sobre la foto antes de capturarla con ViewShot.
 * Se posiciona en la parte inferior de su contenedor con position:absolute.
 * Todos los tamaños son proporcionales al ancho de la imagen para que el pie
 * sea legible independientemente de la resolución del sensor.
 */
import React from 'react';
import { Image, StyleSheet, Text, View } from 'react-native';
import { FooterConfig, resolveFieldValue, StampMeta } from './footerConfig';

interface Props {
  config: FooterConfig;
  meta: StampMeta;
  imageWidth: number;
}

export function FooterOverlay({ config, meta, imageWidth }: 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(12, Math.round(imageWidth * 0.016));
  const logoDim  = Math.max(50, Math.round(imageWidth * 0.09));
  const pad      = Math.max(8,  Math.round(imageWidth * 0.012));
  const lineH    = Math.round(fontSize * 1.4);

  return (
    <View
      style={[
        styles.container,
        { paddingHorizontal: pad, paddingVertical: Math.round(pad * 0.65) },
      ]}
    >
      {/* Logo */}
      {config.logoUri ? (
        <>
          <View
            style={[
              styles.logoWrap,
              { width: logoDim, height: logoDim, borderRadius: Math.round(logoDim * 0.08) },
            ]}
          >
            <Image source={{ uri: config.logoUri }} style={styles.logoImg} resizeMode="contain" />
          </View>
          <View style={[styles.divider, { marginHorizontal: pad, height: logoDim }]} />
        </>
      ) : 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={1}
            >
              {f.key === 'custom' ? `${f.label}: ${val}` : val}
            </Text>
          );
        })}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: 'rgba(0,0,0,0.75)',
    flexDirection: 'row',
    alignItems: 'center',
  },
  logoWrap: {
    backgroundColor: '#fff',
    overflow: 'hidden',
    justifyContent: 'center',
    alignItems: 'center',
    flexShrink: 0,
  },
  logoImg: { width: '100%', height: '100%' },
  divider: { width: 1, backgroundColor: 'rgba(255,255,255,0.35)', flexShrink: 0 },
  textBlock: { flex: 1 },
  line: { color: '#fff' },
  bold: { fontWeight: '700' },
});
