import { ComputedRef, Ref } from 'vue';
import type { Table, Settings } from 'src/stores/main/models';

/**
 * URL-scheme allowlist for sanitized cell HTML.
 *
 * sanitizeCellHtml filters tags/attributes but historically never validated
 * the *value* of href/src, so `javascript:` / `vbscript:` / `data:text/html`
 * payloads on <a>/<button>/<img> passed through and stayed clickable — the
 * button click handler navigates via `window.location.href = href`, which
 * executes a `javascript:` URL. This mirrors wp_kses's protocol check on the
 * server (see vTables::vtables_shortcode_render_handler).
 *
 * Returns true for scheme-less URLs (relative / anchor / protocol-relative)
 * and for an explicitly allowlisted scheme. Whitespace and control characters
 * are stripped before the scheme is read because the browser's URL parser
 * ignores them too — otherwise `java\tscript:` could smuggle a blocked scheme
 * past the check. Only the check string is stripped; the attribute is dropped
 * wholesale when unsafe, so the raw value is never used.
 */
export function isSafeCellUrl(raw: unknown, context: 'href' | 'src'): boolean {
  if (typeof raw !== 'string') return false;
  // Strip whitespace + C0/C1 control chars (incl. tab/LF/CR): the URL parser
  // ignores them, so `java<TAB>script:` must not smuggle a blocked scheme past
  // us. Only the check string is stripped; the attribute is dropped wholesale
  // when unsafe, so the raw value is never used.
  const value = Array.from(raw)
    .filter((ch) => {
      const code = ch.charCodeAt(0);
      return code > 0x20 && !(code >= 0x7f && code <= 0x9f);
    })
    .join('');
  if (value === '') return false;

  const schemeMatch = value.match(/^([a-z][a-z0-9+.-]*):/i);
  if (!schemeMatch) return true; // relative, #anchor, or //protocol-relative

  const scheme = schemeMatch[1].toLowerCase();
  if (context === 'src') {
    if (scheme === 'http' || scheme === 'https') return true;
    // data: only for genuine image media types — an <img> never executes
    // script from an image data URI, but data:text/html and friends must not
    // reach any other sink, so keep the allowlist tight.
    return /^data:image\/(png|jpe?g|gif|webp|bmp|avif|x-icon|svg\+xml)[;,]/i.test(
      value
    );
  }
  return (
    scheme === 'http' ||
    scheme === 'https' ||
    scheme === 'mailto' ||
    scheme === 'tel'
  );
}

/**
 * Style color settings hold either a legacy Quasar palette name ("blue-5") or
 * a hex value ("#2196F3"): palette names map to text-/bg- classes, hex only
 * works as an inline style (same split as the color helpers in TheTable.vue).
 */
function isHexColor(val: string | undefined): boolean {
  return /^#[0-9A-Fa-f]{3,8}$/.test(val ?? '');
}

/**
 * Cell formats rendered here: images, links, buttons and sanitized HTML (see
 * docs in readme.txt). Video, PDF, audio, maps, rating, progress and JSON
 * cells are vTables Pro formats — their raw value shows as text.
 */
export type CellKind = 'images' | 'links' | 'button' | 'html' | 'text';

interface Params {
  settings: ComputedRef<Settings>;
  selectedTable: Ref<Table | null>;
}

/**
 * Opens an image cell's picture in a new tab (the in-page preview dialog is a
 * vTables Pro option).
 */
export function openCellImage(src: string) {
  if (isSafeCellUrl(src, 'src')) {
    window.open(src, '_blank', 'noopener,noreferrer');
  }
}

export function useCellRendering({ settings, selectedTable }: Params) {
  function getLinkType(str: string) {
    if (typeof str !== 'string') return;

    const buttonPattern =
      /^<button\b[^>]*\bhref\s*=\s*["'][^"']*["'][^>]*>.*<\/button>$/i;
    if (buttonPattern.test(str.trim())) return 'button';

    const regex = /http|https|jpg|jpeg|png|gif|bmp|tiff|webp|svg/i;
    if (!regex.test(str)) return;

    const linkPattern = /^(https?:\/\/\S+)$/i;
    const imageExtensions = /\.(jpg|jpeg|png|gif|bmp|tiff|webp|svg)$/i;
    // Normalize like the video/pdf/audio detectors: stray spaces must not
    // demote an image/link cell to text. The length guard matters —
    // every([]) is true, so a whitespace-only cell would classify as images.
    const strArr = str.trim().split(' ').filter(Boolean);
    const isLinks =
      strArr.length > 0 && strArr.every((el) => linkPattern.test(el));
    const isImages =
      strArr.length > 0 && strArr.every((el) => imageExtensions.test(el));

    if (isImages) return 'images';
    if (isLinks) return 'links';
  }

  function renderLinksAsImages(value: string) {
    return getLinkType(value) === 'images';
  }

  function renderLinksAsLinks(value: string) {
    return getLinkType(value) === 'links';
  }

  function renderLinksAsButtons(value: string) {
    return getLinkType(value) === 'button';
  }

  function containsAllowedHtml(value: unknown): value is string {
    if (typeof value !== 'string') return false;
    return /<(a|img|br|button)\b/i.test(value);
  }

  function sanitizeCellHtml(value: string): string {
    const container = document.createElement('div');
    container.innerHTML = value;

    const allowedTags = ['A', 'IMG', 'BR', 'BUTTON'];
    const walker = document.createTreeWalker(
      container,
      NodeFilter.SHOW_ELEMENT,
      null
    );
    const toRemove: Element[] = [];
    const toWrap: { el: HTMLElement; label: string }[] = [];

    while (walker.nextNode()) {
      const el = walker.currentNode as HTMLElement;

      if (!allowedTags.includes(el.tagName)) {
        toRemove.push(el);
        continue;
      }

      if (el.tagName === 'A') {
        const linkColor = selectedTable.value?.settings.content.linkTextColor;
        if (linkColor && !isHexColor(linkColor)) {
          el.classList.add(`text-${linkColor}`);
        }
        Array.from(el.attributes).forEach((attr) => {
          const name = attr.name.toLowerCase();
          if (!['href', 'title', 'target', 'rel', 'class'].includes(name)) {
            el.removeAttribute(attr.name);
          }
        });
        // After the strip above, so a user-supplied style attribute is still
        // dropped while the configured color survives.
        if (linkColor && isHexColor(linkColor)) {
          el.style.color = linkColor;
        }
        // Drop a dangerous-scheme href (javascript:/data:text/html/…): without
        // it the <a> is inert, so the payload can neither navigate nor execute.
        const href = el.getAttribute('href');
        if (href !== null && !isSafeCellUrl(href, 'href')) {
          el.removeAttribute('href');
        } else {
          el.setAttribute('rel', 'noopener noreferrer');
        }
        // if (el.getAttribute('target') === '_blank') {
        //   el.setAttribute('rel', 'noopener noreferrer');
        // }
      }

      if (el.tagName === 'BUTTON') {
        const btnTextColor =
          selectedTable.value?.settings.content.buttonTextColor;
        const btnBgColor = selectedTable.value?.settings.content.buttonBgColor;

        el.classList.add(
          'q-btn',
          'q-btn--unelevated',
          'q-btn--rectangle',
          'q-btn--square',
          'q-btn-item',
          'non-selectable',
          'no-outline',
          'rounded-borders',
          'text-caption'
        );
        if (btnTextColor && !isHexColor(btnTextColor)) {
          el.classList.add(`text-${btnTextColor}`);
        }
        if (btnBgColor && !isHexColor(btnBgColor)) {
          el.classList.add(`bg-${btnBgColor}`);
        }

        toWrap.push({ el, label: el.textContent || '' });

        Array.from(el.attributes).forEach((attr) => {
          const name = attr.name.toLowerCase();
          if (!['href', 'title', 'target', 'rel', 'class'].includes(name)) {
            el.removeAttribute(attr.name);
          }
        });
        // After the strip above, so a user-supplied style attribute is still
        // dropped while the configured colors survive.
        if (btnTextColor && isHexColor(btnTextColor)) {
          el.style.color = btnTextColor;
        }
        if (btnBgColor && isHexColor(btnBgColor)) {
          el.style.backgroundColor = btnBgColor;
        }

        // The button click handler (onHtmlCellClick) navigates via this href,
        // so a javascript:/data: URL here is directly executable — strip it.
        const btnHref = el.getAttribute('href');
        if (btnHref !== null && !isSafeCellUrl(btnHref, 'href')) {
          el.removeAttribute('href');
        }
        if (el.getAttribute('target') === '_blank') {
          el.setAttribute('rel', 'noopener noreferrer');
        }
      }

      if (el.tagName === 'IMG') {
        // Drop the whole <img> when its src scheme isn't allowlisted, rather
        // than leaving a broken node with a hostile src.
        const imgSrc = el.getAttribute('src');
        if (imgSrc !== null && !isSafeCellUrl(imgSrc, 'src')) {
          toRemove.push(el);
          continue;
        }

        Array.from(el.attributes).forEach((attr) => {
          const name = attr.name.toLowerCase();
          if (
            !['src', 'alt', 'title', 'class', 'width', 'height'].includes(name)
          ) {
            el.removeAttribute(attr.name);
          } else {
            el.style.height =
              settings.value?.content?.imageHeight + 'px' || '50px';
            el.style.width =
              settings.value?.content?.imageWidth + 'px' || '50px';
            el.style.objectFit = 'cover';
            el.classList.add('rounded-borders', 'cursor-pointer', 'q-mr-xs');
          }
        });
      }
    }

    toRemove.forEach((el) => {
      el.replaceWith(document.createTextNode(el.textContent || ''));
    });

    toWrap.forEach(({ el, label }) => {
      el.innerHTML = `<span class="q-btn__content text-center col items-center q-anchor--skip justify-center row"><span class="block">${label}</span></span>`;
    });

    return container.innerHTML;
  }

  function resolveCellKind(
    value: unknown,
    opts: { colName: string; allowHtml: boolean }
  ): CellKind {
    if (renderLinksAsImages(value as string)) return 'images';
    if (renderLinksAsLinks(value as string)) return 'links';
    if (renderLinksAsButtons(value as string)) return 'button';
    if (opts.allowHtml && containsAllowedHtml(value)) return 'html';
    return 'text';
  }

  function onHtmlCellClick(event: MouseEvent) {
    const target = event.target as HTMLElement | null;
    if (!target) return;

    const img = target.closest('img');
    if (img && img.src) {
      event.stopPropagation();
      openCellImage(img.src);
      return;
    }

    const btn = target.closest('button[href]') as HTMLElement | null;
    if (btn) {
      const href = btn.getAttribute('href');
      const openTarget = btn.getAttribute('target');
      if (href) {
        event.stopPropagation();
        if (openTarget === '_blank') {
          window.open(href, '_blank', 'noopener,noreferrer');
        } else {
          window.location.href = href;
        }
      }
    }
  }

  return {
    resolveCellKind,
    renderLinksAsImages,
    renderLinksAsLinks,
    renderLinksAsButtons,
    containsAllowedHtml,
    sanitizeCellHtml,
    onHtmlCellClick,
  };
}