import { StyleSheet, Text, View } from '@react-pdf/renderer';

import { PDF_TOKENS } from './tokens';

const styles = StyleSheet.create({
  band: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    paddingHorizontal: PDF_TOKENS.spacing.pagePadding,
    paddingVertical: 12,
    flexDirection: 'row',
    alignItems: 'center',
    borderTopWidth: 1,
    borderTopColor: PDF_TOKENS.colors.border,
    minHeight: PDF_TOKENS.spacing.footerHeight,
  },
  left: {
    fontFamily: PDF_TOKENS.fonts.sans,
    fontSize: PDF_TOKENS.sizes.caption,
    color: PDF_TOKENS.colors.textMuted,
  },
  right: {
    marginLeft: 'auto',
    fontFamily: PDF_TOKENS.fonts.sans,
    fontSize: PDF_TOKENS.sizes.caption,
    color: PDF_TOKENS.colors.textMuted,
  },
});

export interface FooterProps {
  portName: string;
  generatedAt?: Date;
  confidential?: boolean;
}

export function Footer({ portName, generatedAt, confidential = true }: FooterProps) {
  const tag = confidential ? `${portName} · Confidential` : portName;
  const stamp = (generatedAt ?? new Date()).toISOString().replace('T', ' ').slice(0, 19) + ' UTC';
  return (
    <View style={styles.band} fixed>
      <Text style={styles.left}>
        {tag} · Generated {stamp}
      </Text>
      <Text
        style={styles.right}
        render={({ pageNumber, totalPages }) => `Page ${pageNumber} of ${totalPages}`}
      />
    </View>
  );
}
