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

// Prevent automatic word hyphenation, which can create multi-line table headers
// even when we try to keep them single-line.
Font.registerHyphenationCallback(word => [word]);

export const COLORS = {
  navy: '#0E2A47',
  mediumGray: '#6B7280',
  darkGray: '#1F2933',
  lightGray: '#E6E9ED',
  almostWhite: '#F8F9FA',
  headerBg: '#F6F8FB',
} as const;

export const styles = StyleSheet.create({
  page: {
    paddingTop: 54,
    paddingLeft: 54,
    paddingRight: 54,
    paddingBottom: 72,
    fontFamily: 'Helvetica',
    fontSize: 10,
    color: COLORS.darkGray,
    backgroundColor: '#FFFFFF',
  },

  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingVertical: 12,
    paddingHorizontal: 16,
    backgroundColor: COLORS.headerBg,
    borderBottomWidth: 1,
    borderBottomColor: COLORS.lightGray,
    marginBottom: 16,
  },
  headerLeft: { flexDirection: 'row', alignItems: 'center', gap: 10 },
  logo: { width: 110, height: 24, objectFit: 'contain' },
  brandFallback: { flexDirection: 'row', alignItems: 'baseline', gap: 6 },
  brandFallbackKlz: { fontSize: 18, fontWeight: 700, color: COLORS.navy },
  brandFallbackCables: { fontSize: 10, color: COLORS.mediumGray },
  headerRight: { flexDirection: 'row', alignItems: 'center', gap: 10 },
  headerTitle: { fontSize: 9, fontWeight: 700, color: COLORS.navy, letterSpacing: 0.2 },
  qr: { width: 34, height: 34, objectFit: 'contain' },

  footer: {
    position: 'absolute',
    left: 54,
    right: 54,
    bottom: 36,
    paddingTop: 10,
    borderTopWidth: 1,
    borderTopColor: COLORS.lightGray,
    flexDirection: 'row',
    justifyContent: 'space-between',
    fontSize: 8,
    color: COLORS.mediumGray,
  },

  h1: { fontSize: 18, fontWeight: 700, color: COLORS.navy, marginBottom: 6 },
  subhead: { fontSize: 10.5, color: COLORS.mediumGray, marginBottom: 14 },

  heroBox: {
    height: 110,
    borderWidth: 1,
    borderColor: COLORS.lightGray,
    backgroundColor: COLORS.almostWhite,
    marginBottom: 16,
    justifyContent: 'center',
    overflow: 'hidden',
  },
  heroImage: { width: '100%', height: '100%', objectFit: 'contain' },
  noImage: { fontSize: 8, color: COLORS.mediumGray, paddingHorizontal: 12 },

  section: {
    borderWidth: 1,
    borderColor: COLORS.lightGray,
    padding: 14,
    marginBottom: 14,
  },
  sectionPlain: {
    paddingVertical: 2,
    marginBottom: 12,
  },
  sectionTitle: {
    fontSize: 10,
    fontWeight: 700,
    color: COLORS.navy,
    marginBottom: 8,
    letterSpacing: 0.2,
  },
  body: { fontSize: 10, lineHeight: 1.5, color: COLORS.darkGray },

  kvGrid: {
    width: '100%',
    borderWidth: 1,
    borderColor: COLORS.lightGray,
  },
  kvRow: {
    flexDirection: 'row',
    borderBottomWidth: 1,
    borderBottomColor: COLORS.lightGray,
  },
  kvRowLast: { borderBottomWidth: 0 },
  kvCell: { paddingVertical: 6, paddingHorizontal: 8 },
  // Visual separator between (label,value) pairs in the 4-col KV grid.
  // Matches the engineering-table look and improves scanability.
  kvMidDivider: {
    borderRightWidth: 1,
    borderRightColor: COLORS.lightGray,
  },
  kvLabelText: { fontSize: 8.5, fontWeight: 700, color: COLORS.mediumGray },
  kvValueText: { fontSize: 9.5, color: COLORS.darkGray },

  tableWrap: { width: '100%', borderWidth: 1, borderColor: COLORS.lightGray },
  tableHeader: {
    width: '100%',
    flexDirection: 'row',
    backgroundColor: '#FFFFFF',
    borderBottomWidth: 1,
    borderBottomColor: COLORS.lightGray,
  },
  tableHeaderCell: {
    paddingVertical: 5,
    paddingHorizontal: 4,
    fontSize: 6.6,
    fontWeight: 700,
    color: COLORS.navy,
  },
  tableHeaderCellCfg: {
    paddingHorizontal: 6,
  },
  tableHeaderCellDivider: {
    borderRightWidth: 1,
    borderRightColor: COLORS.lightGray,
  },
  tableRow: { width: '100%', flexDirection: 'row', borderBottomWidth: 1, borderBottomColor: COLORS.lightGray },
  tableRowAlt: { backgroundColor: COLORS.almostWhite },
  tableCell: { paddingVertical: 4, paddingHorizontal: 4, fontSize: 6.6, color: COLORS.darkGray },
  tableCellCfg: {
    paddingHorizontal: 6,
  },
  tableCellDivider: {
    borderRightWidth: 1,
    borderRightColor: COLORS.lightGray,
  },
});