/**
 * Sistema de Tipografia Adaptativa para RH
 * Baseado no design do Zoho Books - Fonte suave, tamanhos maiores, pesos moderados
 * Usando vw/vh com clamp() para adaptação automática a qualquer interface
 * Baseado nos agents: FontQualityAgent e UIAdaptationAgent
 * 
 * PRINCÍPIO: Usar clamp(min, preferred, max) com vw/vh para garantir:
 * - Limites mínimos (legibilidade melhorada - 16px+ para body)
 * - Escalabilidade fluida (vw/vh)
 * - Limites máximos (não ficar gigante)
 * - Fonte Inter (similar ao Zoho Books) para leitura suave
 * - Pesos moderados (semibold/medium em vez de black/bold)
 * 
 * Isso garante que acertamos UMA VEZ e funciona em QUALQUER interface
 */

/**
 * Sistema de Tipografia Adaptativa - Estilo Zoho Books
 * Usa clamp() com vw para escalabilidade fluida
 * 
 * Fórmula: clamp(minSize, preferredSize, maxSize)
 * - minSize: Tamanho mínimo garantido (legibilidade melhorada)
 * - preferredSize: Tamanho baseado em vw (escala com viewport)
 * - maxSize: Tamanho máximo permitido (não fica gigante)
 */
export const ADAPTIVE_TYPOGRAPHY = {
  /**
   * Família de fonte - Inter (similar ao Zoho Books)
   * Fonte suave e legível, não agressiva
   */
  FONT_FAMILY: 'font-sans', // Inter será aplicado via Tailwind config
  
  /**
   * Tamanhos adaptativos usando clamp() com vw
   * Escalam automaticamente com a largura da viewport
   * TAMANHOS AUMENTADOS para melhor legibilidade (baseado no Zoho Books)
   */
  SIZES: {
    // Texto mínimo legível (16px mínimo, escala até 18px) - AUMENTADO de 14px
    tiny: 'text-[clamp(1rem,1.2vw,1.125rem)]',      // 16px-18px (aumentado de 14-16px)
    // Labels e captions (16px mínimo, escala até 17px) - AUMENTADO de 14px
    label: 'text-[clamp(1rem,1.1vw,1.0625rem)]',  // 16px-17px (aumentado de 14-15px)
    // Corpo de texto padrão (16px mínimo, escala até 20px) - AUMENTADO de 14px
    body: 'text-[clamp(1rem,1.4vw,1.25rem)]',  // 16px-20px (aumentado de 14-18px)
    // Corpo de texto maior (18px mínimo, escala até 22px) - AUMENTADO de 16px
    bodyLarge: 'text-[clamp(1.125rem,1.6vw,1.375rem)]',  // 18px-22px (aumentado de 16-20px)
    // Subtítulos (18px mínimo, escala até 24px) - AUMENTADO de 16px
    subtitle: 'text-[clamp(1.125rem,2vw,1.5rem)]',  // 18px-24px (aumentado de 16-22px)
    // Títulos médios (20px mínimo, escala até 30px) - AUMENTADO de 18px
    title: 'text-[clamp(1.25rem,2.4vw,1.875rem)]',  // 20px-30px (aumentado de 18-28px)
    // Títulos grandes (24px mínimo, escala até 36px) - AUMENTADO de 20px
    titleLarge: 'text-[clamp(1.5rem,3vw,2.25rem)]', // 24px-36px (aumentado de 20-32px)
    // Títulos extra grandes (28px mínimo, escala até 42px) - AUMENTADO de 24px
    titleXLarge: 'text-[clamp(1.75rem,3.8vw,2.625rem)]', // 28px-42px (aumentado de 24-40px)
    // Números em cards (24px mínimo, escala até 36px) - AUMENTADO e mais suave
    numberCard: 'text-[clamp(1.5rem,2.8vw,2.25rem)]',     // 24px-36px (aumentado de 20-32px)
    // Números grandes (28px mínimo, escala até 40px) - AUMENTADO de 24px
    number: 'text-[clamp(1.75rem,3.4vw,2.5rem)]',     // 28px-40px (aumentado de 24-36px)
    // Números extra grandes (32px mínimo, escala até 48px) - AUMENTADO de 28px
    numberXLarge: 'text-[clamp(2rem,4.2vw,3rem)]', // 32px-48px (aumentado de 28-48px)
  },

  /**
   * Espaçamentos adaptativos usando vw/vh
   * Garantem espaçamento proporcional ao viewport
   */
  SPACING: {
    // Padding adaptativo (escala com viewport width)
    paddingTiny: 'p-[clamp(0.25rem,0.5vw,0.5rem)]',      // 4px-8px
    paddingSmall: 'p-[clamp(0.5rem,1vw,0.75rem)]',      // 8px-12px
    paddingMedium: 'p-[clamp(0.75rem,1.5vw,1rem)]',    // 12px-16px
    paddingLarge: 'p-[clamp(1rem,2vw,1.5rem)]',        // 16px-24px
    paddingXLarge: 'p-[clamp(1.5rem,3vw,2.5rem)]',      // 24px-40px
    
    // Gap adaptativo
    gapTiny: 'gap-[clamp(0.25rem,0.5vw,0.5rem)]',       // 4px-8px
    gapSmall: 'gap-[clamp(0.5rem,1vw,0.75rem)]',       // 8px-12px
    gapMedium: 'gap-[clamp(0.75rem,1.5vw,1rem)]',      // 12px-16px
    gapLarge: 'gap-[clamp(1rem,2vw,1.5rem)]',          // 16px-24px
    gapXLarge: 'gap-[clamp(1.5rem,3vw,2.5rem)]',       // 24px-40px
    
    // Margin adaptativo
    marginTiny: 'm-[clamp(0.25rem,0.5vw,0.5rem)]',      // 4px-8px
    marginSmall: 'm-[clamp(0.5rem,1vw,0.75rem)]',      // 8px-12px
    marginMedium: 'm-[clamp(0.75rem,1.5vw,1rem)]',     // 12px-16px
    marginLarge: 'm-[clamp(1rem,2vw,1.5rem)]',         // 16px-24px
    marginXLarge: 'm-[clamp(1.5rem,3vw,2.5rem)]',     // 24px-40px
  },

  /**
   * Larguras e alturas adaptativas
   */
  DIMENSIONS: {
    // Larguras mínimas para colunas de tabela
    columnNarrow: 'min-w-[clamp(60px,8vw,100px)]',     // 60px-100px
    columnMedium: 'min-w-[clamp(100px,12vw,180px)]',  // 100px-180px
    columnWide: 'min-w-[clamp(150px,18vw,300px)]',    // 150px-300px
    columnXWide: 'min-w-[clamp(200px,25vw,400px)]',   // 200px-400px
    
    // Alturas adaptativas
    heightSmall: 'h-[clamp(32px,4vh,48px)]',          // 32px-48px
    heightMedium: 'h-[clamp(40px,5vh,60px)]',         // 40px-60px
    heightLarge: 'h-[clamp(48px,6vh,72px)]',          // 48px-72px
  },

  /**
   * Pesos de fonte - Estilo Zoho Books (moderados, não pesados)
   * Evitar font-black (900) e font-bold excessivo (700)
   * Preferir semibold (600) e medium (500) para hierarquia suave
   */
  WEIGHT: {
    normal: 'font-normal',      // 400 - Corpo de texto, valores
    medium: 'font-medium',     // 500 - Labels, descrições
    semibold: 'font-semibold', // 600 - Títulos, números importantes (RECOMENDADO)
    bold: 'font-bold',         // 700 - Apenas para ênfase extrema (USAR COM MODERAÇÃO)
    // black removido - muito pesado para leitura confortável
  },

  /**
   * Cores de texto (acessibilidade)
   */
  COLOR: {
    primary: 'text-slate-800 dark:text-white',
    secondary: 'text-slate-600 dark:text-slate-300',
    muted: 'text-slate-500 dark:text-slate-400',
    caption: 'text-slate-500 dark:text-slate-400',
    success: 'text-green-600 dark:text-green-400',
    warning: 'text-yellow-600 dark:text-yellow-400',
    error: 'text-red-600 dark:text-red-400',
  }
};

/**
 * Helper para aplicar tipografia adaptativa
 * @param {string} type - Tipo de texto (tiny, label, body, subtitle, title, etc)
 * @param {object} options - Opções adicionais
 * @returns {string} Classes CSS aplicadas
 */
export const applyAdaptiveTypography = (type = 'body', options = {}) => {
  const {
    weight = 'normal',
    color = 'primary',
    spacing = null,
  } = options;
  
  const sizeClass = ADAPTIVE_TYPOGRAPHY.SIZES[type] || ADAPTIVE_TYPOGRAPHY.SIZES.body;
  const weightClass = ADAPTIVE_TYPOGRAPHY.WEIGHT[weight] || '';
  const colorClass = ADAPTIVE_TYPOGRAPHY.COLOR[color] || '';
  const spacingClass = spacing ? ADAPTIVE_TYPOGRAPHY.SPACING[spacing] || '' : '';
  
  return `${sizeClass} ${weightClass} ${colorClass} ${spacingClass}`.trim();
};

/**
 * Mapeamento de substituições para migração
 * Substitui tamanhos fixos por adaptativos
 */
export const TYPOGRAPHY_MIGRATION_MAP = {
  // Substituições de tamanhos fixos por adaptativos
  'text-xs': ADAPTIVE_TYPOGRAPHY.SIZES.tiny,
  'text-sm': ADAPTIVE_TYPOGRAPHY.SIZES.label,
  'text-base': ADAPTIVE_TYPOGRAPHY.SIZES.body,
  'text-lg': ADAPTIVE_TYPOGRAPHY.SIZES.subtitle,
  'text-xl': ADAPTIVE_TYPOGRAPHY.SIZES.title,
  'text-2xl': ADAPTIVE_TYPOGRAPHY.SIZES.titleLarge,
  'text-3xl': ADAPTIVE_TYPOGRAPHY.SIZES.titleXLarge,
  
  // Substituições de tamanhos customizados
  'text-[10px]': ADAPTIVE_TYPOGRAPHY.SIZES.tiny,
  'text-[11px]': ADAPTIVE_TYPOGRAPHY.SIZES.tiny,
  'text-[12px]': ADAPTIVE_TYPOGRAPHY.SIZES.tiny,
  'text-[13px]': ADAPTIVE_TYPOGRAPHY.SIZES.tiny,
  'text-[14px]': ADAPTIVE_TYPOGRAPHY.SIZES.label,
  'text-[15px]': ADAPTIVE_TYPOGRAPHY.SIZES.label,
  'text-[16px]': ADAPTIVE_TYPOGRAPHY.SIZES.body,
  'text-[18px]': ADAPTIVE_TYPOGRAPHY.SIZES.subtitle,
  'text-[20px]': ADAPTIVE_TYPOGRAPHY.SIZES.title,
  'text-[24px]': ADAPTIVE_TYPOGRAPHY.SIZES.titleLarge,
};

/**
 * Análise de problemas de tipografia
 * Retorna recomendações baseadas nos agents de UX
 */
export const analyzeTypographyIssues = (element) => {
  const issues = [];
  
  // Verificar fontes muito pequenas
  if (element.fontSize && parseFloat(element.fontSize) < 14) {
    issues.push({
      type: 'font_too_small',
      severity: 'high',
      message: `Fonte muito pequena (${element.fontSize}). Mínimo recomendado: 14px`,
      recommendation: `Usar ${ADAPTIVE_TYPOGRAPHY.SIZES.tiny} ou ${ADAPTIVE_TYPOGRAPHY.SIZES.label}`
    });
  }
  
  // Verificar espaços mal aproveitados
  if (element.availableSpace && element.usedSpace) {
    const utilization = (element.usedSpace / element.availableSpace) * 100;
    if (utilization < 30) {
      issues.push({
        type: 'poor_space_utilization',
        severity: 'medium',
        message: `Espaço mal aproveitado (${utilization.toFixed(0)}% utilizado)`,
        recommendation: 'Aumentar tamanhos de fonte ou reduzir padding/margin'
      });
    }
  }
  
  // Verificar fontes grandes em espaços pequenos
  if (element.fontSize && element.containerWidth) {
    const fontSize = parseFloat(element.fontSize);
    const containerWidth = parseFloat(element.containerWidth);
    if (fontSize > containerWidth * 0.3) {
      issues.push({
        type: 'large_font_small_space',
        severity: 'medium',
        message: `Fonte muito grande para o espaço disponível`,
        recommendation: 'Reduzir tamanho de fonte ou aumentar container'
      });
    }
  }
  
  return issues;
};
