// Hostile theme CSS samples — distilled from patterns observed in WordPress
// themes that have broken the legacy payment fields in production. The Shadow
// DOM in the new SDK should be immune to all of these.

export const HOSTILE_THEMES: ReadonlyArray<{ name: string; css: string }> = [
  {
    name: 'aggressive-form-reset',
    css: `
      input, button, select { font-size: 24px !important; padding: 30px !important; }
      div { background: hotpink !important; }
      * { color: limegreen !important; }
    `,
  },
  {
    name: 'storefront-like',
    css: `
      .woocommerce form .form-row input.input-text { padding: 1em !important; height: 60px !important; }
      .woocommerce-checkout .form-row { margin-bottom: 30px !important; }
      body { font-family: 'Comic Sans MS', cursive !important; }
    `,
  },
  {
    name: 'astra-like',
    css: `
      input[type="text"], input[type="email"] { border: 4px dashed orange !important; }
      .field { display: none !important; }
      #wcp-pf-test { transform: rotate(7deg) !important; }
    `,
  },
  {
    name: 'oceanwp-like',
    css: `
      div[class*="card"] { border-radius: 999px !important; }
      input { background: #000 !important; color: #fff !important; }
      img { filter: grayscale(100%) !important; }
    `,
  },
];

export function injectTheme(css: string): void {
  const mount = document.getElementById('hostile-theme-mount');
  if (mount) mount.textContent = css;
}

export function clearTheme(): void {
  const mount = document.getElementById('hostile-theme-mount');
  if (mount) mount.textContent = '';
}