import type { CSSProperties } from 'react';

export type ThemePresetId = 'pizarra' | 'azul' | 'verde' | 'terracota' | 'arena';

export type ThemePreset = {
  id: ThemePresetId;
  label: string;
  descripcion: string;
  primary: string; // color de marca
  primaryDark: string; // hover / énfasis
  contrast: string; // texto sobre el color de marca
  heading: 'sans' | 'serif'; // tipografía de los titulares de la landing
};

export const DEFAULT_THEME: ThemePresetId = 'pizarra';

export const THEME_PRESETS: Record<ThemePresetId, ThemePreset> = {
  pizarra: {
    id: 'pizarra',
    label: 'Pizarra',
    descripcion: 'Negro elegante. El look por defecto de Reformix.',
    primary: '#0a0a0a',
    primaryDark: '#1a1a1a',
    contrast: '#ffffff',
    heading: 'sans',
  },
  azul: {
    id: 'azul',
    label: 'Azul confianza',
    descripcion: 'Azul corporativo que transmite seguridad.',
    primary: '#0066ff',
    primaryDark: '#0052cc',
    contrast: '#ffffff',
    heading: 'sans',
  },
  verde: {
    id: 'verde',
    label: 'Verde natural',
    descripcion: 'Verde sereno para un estilo sostenible.',
    primary: '#0f7a52',
    primaryDark: '#0b5e3f',
    contrast: '#ffffff',
    heading: 'sans',
  },
  terracota: {
    id: 'terracota',
    label: 'Terracota',
    descripcion: 'Cálido y artesanal, con titulares en serif.',
    primary: '#b4502e',
    primaryDark: '#8f3d22',
    contrast: '#ffffff',
    heading: 'serif',
  },
  arena: {
    id: 'arena',
    label: 'Arena',
    descripcion: 'Neutro cálido, sobrio y premium. Titulares en serif.',
    primary: '#8a6d3b',
    primaryDark: '#6e562f',
    contrast: '#ffffff',
    heading: 'serif',
  },
};

export const THEME_LIST: ThemePreset[] = Object.values(THEME_PRESETS);

const HEX_RE = /^#[0-9a-fA-F]{6}$/;

export function isHexColor(value: string | null | undefined): value is string {
  return !!value && HEX_RE.test(value);
}

function darken(hex: string, amount = 0.16): string {
  const n = parseInt(hex.slice(1), 16);
  const r = Math.max(0, Math.round(((n >> 16) & 255) * (1 - amount)));
  const g = Math.max(0, Math.round(((n >> 8) & 255) * (1 - amount)));
  const b = Math.max(0, Math.round((n & 255) * (1 - amount)));
  return '#' + ((r << 16) | (g << 8) | b).toString(16).padStart(6, '0');
}

export type ResolvedTheme = {
  preset: ThemePreset;
  primary: string;
  primaryDark: string;
  contrast: string;
  heading: 'sans' | 'serif';
};

// Combina el preset elegido con el color personalizado opcional del reformista.
export function resolveTheme(
  presetId: string | null | undefined,
  customColor: string | null | undefined
): ResolvedTheme {
  const preset = THEME_PRESETS[presetId as ThemePresetId] ?? THEME_PRESETS[DEFAULT_THEME];
  if (isHexColor(customColor)) {
    return {
      preset,
      primary: customColor,
      primaryDark: darken(customColor),
      contrast: '#ffffff',
      heading: preset.heading,
    };
  }
  return {
    preset,
    primary: preset.primary,
    primaryDark: preset.primaryDark,
    contrast: preset.contrast,
    heading: preset.heading,
  };
}

// Variables CSS que cuelgan del contenedor de la landing y consumen los componentes.
export function themeStyle(
  presetId: string | null | undefined,
  customColor: string | null | undefined
): CSSProperties {
  const t = resolveTheme(presetId, customColor);
  return {
    '--brand': t.primary,
    '--brand-dark': t.primaryDark,
    '--brand-contrast': t.contrast,
  } as CSSProperties;
}
