// ── Page-script channels (namespace ATSP_TT_*) ──────────────

export const CHANNELS = {
  FETCH_BLOB_REQUEST: 'ATSP_TT_FETCH_BLOB_REQUEST',
  FETCH_BLOB_REPLY: 'ATSP_TT_FETCH_BLOB_REPLY',
};

export const SCRIPT_PATH = 'js/content/tiktok/script/fetch.js';

// ── Element IDs / class ─────────────────────────────────────

export const ELEMENT_IDS = {
  DOWNLOAD_BTN_CLASS: 'autoshopee-tiktok-download-btn',
  DOWNLOAD_BTN_FLAG: 'data-autoshopee-tt-download',
  POST_BTN_CLASS: 'autoshopee-tiktok-post-btn',
  TOAST_ID: 'autoshopee-tiktok-toast',
  TOOLTIP_ID: 'autoshopee-tiktok-tooltip',
  TOOLTIP_TITLE_ID: 'autoshopee-tiktok-tooltip-title',
};

export const ICON_PATH = 'icons/icon_48.png';

// ── DOM selectors (TikTok obfuscate class → bám class suffix + data-e2e) ──

export const SELECTORS = {
  ACTION_BAR: 'section[class*="SectionActionBarContainer"]',
  ARTICLE_CONTAINER: 'article[data-e2e="recommend-list-item-container"]',
  AUTHOR_LINK: 'a[href^="/@"]',
  BROWSE_LIKE_ICON: '[data-e2e="browse-like-icon"]',
  BROWSE_USERNAME: '[data-e2e="browse-username"]',
};

export const MEDIA_URL_PREFER_REGEX = /mime_type=video_mp4/;
export const MEDIA_URL_REGEX = /\/video\/tos\/|mime_type=video_mp4/;

// ── Regex ───────────────────────────────────────────────────

export const VIDEO_ID_REGEX = /\/video\/(\d+)/;
export const BIG_NUMBER_REGEX = /\d{18,20}/g;

// ── Button style (nút tròn khớp cột action TikTok) ──────────

export const DOWNLOAD_BTN_STYLE = [
  'display: flex',
  'align-items: center',
  'justify-content: center',
  'width: 48px',
  'height: 48px',
  'margin: 0 auto 12px auto',
  'padding: 0',
  'border: none',
  'border-radius: 50%',
  'background: #ee4d2d !important',
  'color: #ffffff !important',
  'cursor: pointer',
  'box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18)',
  'transition: all 0.15s ease',
].join(';');

// ── Button style cho browse-modal (action bar nằm ngang) ────

export const BROWSE_BTN_STYLE = [
  'display: flex',
  'align-items: center',
  'justify-content: center',
  'width: 32px',
  'height: 32px',
  'margin: 0 8px 0 0',
  'padding: 0',
  'border: none',
  'border-radius: 50%',
  'background: #ee4d2d !important',
  'color: #ffffff !important',
  'cursor: pointer',
  'box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18)',
  'transition: all 0.15s ease',
].join(';');

export const DOWNLOAD_ICON_SVG = `
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M12 3v12m0 0l-4-4m4 4l4-4" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
    <path d="M4 17v2a2 2 0 002 2h12a2 2 0 002-2v-2" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
  </svg>
`;

export const POST_ICON_SVG = `
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M4 5h16v11H4z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
    <path d="M10 9l5 2.5L10 14z" fill="currentColor"/>
    <path d="M8 20h8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
  </svg>
`;

// ── Badge logo AutoShopee gắn góc nút ───────────────────────

export const BRAND_BADGE_STYLE = [
  'position: absolute',
  'right: -2px',
  'bottom: -2px',
  'width: 18px',
  'height: 18px',
  'border-radius: 50%',
  'background: #ffffff',
  'object-fit: cover',
  'box-shadow: 0 0 0 1.5px rgba(0,0,0,0.15)',
  'pointer-events: none',
].join(';');

// ── Tooltip thương hiệu (hover) ─────────────────────────────

export const TOOLTIP_STYLE = [
  'position: fixed',
  'z-index: 2147483647',
  'display: none',
  'align-items: center',
  'gap: 8px',
  'padding: 8px 12px',
  'border-radius: 8px',
  'background: rgba(22, 24, 35, 0.96)',
  'color: #ffffff',
  'font-size: 13px',
  'font-weight: 600',
  'line-height: 1.3',
  'white-space: nowrap',
  'box-shadow: 0 4px 16px rgba(0,0,0,0.3)',
  'pointer-events: none',
].join(';');

export const TOOLTIP_ICON_STYLE = [
  'width: 20px',
  'height: 20px',
  'border-radius: 50%',
  'flex-shrink: 0',
].join(';');
