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

import type { ReportBranding } from './types';

/**
 * Builds a `StyleSheet` keyed off the port's primary color. Used by
 * every report template so per-port branding propagates without each
 * template wiring it manually.
 *
 * Color contrast is computed against the supplied primary so heading
 * text on the accent bar reads at AA. We don't try to drive every
 * surface off the primary - only the accent stripe, headings, and
 * footer separator. Body copy stays slate-700; surfaces stay white +
 * a subtle gray. Single primary keeps the report looking intentional
 * rather than chromatically chaotic.
 */
export function makeReportStyles(branding: ReportBranding) {
  // Pick foreground for the accent stripe: 0 / 256 luminance threshold
  // is loose; report headings are small enough that pure white reads
  // fine on any reasonable brand color and pure black reads fine on
  // pale brands.
  const accentFg = pickReadableForeground(branding.primaryColor);

  return StyleSheet.create({
    page: {
      paddingTop: 36,
      paddingBottom: 50,
      paddingHorizontal: 36,
      fontSize: 9.5,
      fontFamily: 'Helvetica',
      color: '#1f2937',
      backgroundColor: '#ffffff',
    },
    header: {
      flexDirection: 'row',
      alignItems: 'center',
      gap: 12,
      borderBottomWidth: 1,
      borderBottomColor: '#e5e7eb',
      paddingBottom: 10,
      marginBottom: 14,
    },
    logo: {
      width: 28,
      height: 28,
      objectFit: 'contain',
    },
    headerText: {
      flexDirection: 'column',
      flex: 1,
    },
    title: {
      fontSize: 16,
      fontFamily: 'Helvetica-Bold',
      color: branding.primaryColor,
      marginBottom: 2,
    },
    subtitle: {
      fontSize: 10,
      color: '#6b7280',
    },
    accentBar: {
      backgroundColor: branding.primaryColor,
      color: accentFg,
      paddingVertical: 4,
      paddingHorizontal: 8,
      borderRadius: 2,
      fontSize: 10,
      fontFamily: 'Helvetica-Bold',
      marginBottom: 8,
    },
    sectionTitle: {
      fontSize: 12,
      fontFamily: 'Helvetica-Bold',
      color: branding.primaryColor,
      marginTop: 14,
      marginBottom: 6,
    },
    sectionSubtitle: {
      fontSize: 9,
      color: '#6b7280',
      marginBottom: 8,
    },
    table: {
      width: '100%',
      flexDirection: 'column',
      borderTopWidth: 1,
      borderTopColor: '#e5e7eb',
    },
    tableHeader: {
      flexDirection: 'row',
      backgroundColor: '#f3f4f6',
      borderBottomWidth: 1,
      borderBottomColor: '#e5e7eb',
    },
    tableHeaderCell: {
      padding: 6,
      fontFamily: 'Helvetica-Bold',
      fontSize: 9,
      color: '#374151',
    },
    tableRow: {
      flexDirection: 'row',
      borderBottomWidth: 1,
      borderBottomColor: '#f3f4f6',
    },
    tableRowZebra: {
      flexDirection: 'row',
      borderBottomWidth: 1,
      borderBottomColor: '#f3f4f6',
      backgroundColor: '#fafafa',
    },
    tableCell: {
      padding: 6,
      fontSize: 9,
      color: '#1f2937',
    },
    muted: {
      color: '#6b7280',
    },
    kpiGrid: {
      flexDirection: 'row',
      flexWrap: 'wrap',
      gap: 8,
      marginBottom: 12,
    },
    kpiCard: {
      flexGrow: 1,
      flexBasis: '23%',
      minWidth: '23%',
      borderWidth: 1,
      borderColor: '#e5e7eb',
      borderRadius: 4,
      padding: 8,
    },
    kpiLabel: {
      fontSize: 8,
      color: '#6b7280',
      textTransform: 'uppercase',
      letterSpacing: 0.4,
      marginBottom: 2,
    },
    kpiValue: {
      fontSize: 16,
      fontFamily: 'Helvetica-Bold',
      color: branding.primaryColor,
    },
    kpiSubvalue: {
      fontSize: 9,
      color: '#6b7280',
      marginTop: 2,
    },
    footer: {
      position: 'absolute',
      bottom: 22,
      left: 36,
      right: 36,
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
      borderTopWidth: 1,
      borderTopColor: '#e5e7eb',
      paddingTop: 8,
      fontSize: 8,
      color: '#6b7280',
    },
  });
}

/**
 * Brand-color luminance check. Used to pick black or white text on
 * the accent stripe so the title reads regardless of how dark the
 * port's brand is. Standard relative-luminance formula; threshold
 * 0.55 picks white on mid-dark brands.
 */
function pickReadableForeground(hex: string): string {
  const cleaned = hex.replace('#', '');
  if (cleaned.length !== 6) return '#ffffff';
  const r = parseInt(cleaned.slice(0, 2), 16) / 255;
  const g = parseInt(cleaned.slice(2, 4), 16) / 255;
  const b = parseInt(cleaned.slice(4, 6), 16) / 255;
  const luminance = 0.2126 * srgbToLinear(r) + 0.7152 * srgbToLinear(g) + 0.0722 * srgbToLinear(b);
  return luminance > 0.55 ? '#0f172a' : '#ffffff';
}

function srgbToLinear(channel: number): number {
  return channel <= 0.03928 ? channel / 12.92 : Math.pow((channel + 0.055) / 1.055, 2.4);
}
