/**
 * Brand theming for the client-facing surfaces: the accent/typography theme
 * block derived from a brand definition, the brand bar, hero tagline, status
 * chip and the brand book section. Extracted verbatim from `render.ts`
 * (roadmap Phase 3d).
 */
import type { PreviewPortalBrand, PreviewPortalProject, PreviewPortalSurface } from './types.js';
import { esc, escAttr } from './render-primitives.js';

/* ── Brand theming: palette-driven accent, client wordmark/logo, brand book ──
   Sourced from artifacts/brand-definition.json (discovered onto project.brand).
   No brand → every helper returns '' and the stock theme renders unchanged. */

/** Surfaces that carry the client's identity (vs the operator's utilitarian view). */
function isClientSurface(surface: PreviewPortalSurface): boolean {
  return surface === 'preview' || surface === 'client-review';
}

/** WCAG relative luminance of a #RRGGBB color. */
function relativeLuminance(hex: string): number {
  const channel = (i: number) => {
    const c = parseInt(hex.slice(i, i + 2), 16) / 255;
    return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
  };
  return 0.2126 * channel(1) + 0.7152 * channel(3) + 0.0722 * channel(5);
}

/**
 * Pick the brand accent: the first palette role (metallic → primary → secondary
 * → contrast) bright enough to read on the near-black portal background
 * (luminance ≥ 0.2 ≈ 4.5:1 contrast). All-dark palettes return null and the
 * stock amber accent stays — readability beats brand fidelity.
 */
function pickBrandAccent(brand: PreviewPortalBrand): string | null {
  for (const role of ['metallic', 'primary', 'secondary', 'contrast']) {
    const color = brand.palette.find((entry) => entry.role === role);
    if (color && relativeLuminance(color.hex) >= 0.2) return color.hex;
  }
  return null;
}

function hexToRgba(hex: string, alpha: number): string {
  const r = parseInt(hex.slice(1, 3), 16);
  const g = parseInt(hex.slice(3, 5), 16);
  const b = parseInt(hex.slice(5, 7), 16);
  return `rgba(${r},${g},${b},${alpha})`;
}

/** First numeric CSS weight found in the artifact's free-form weight string. */
function fontWeightOf(weight: string): string | null {
  const m = /\d{3}/.exec(weight);
  return m ? m[0] : null;
}

/**
 * Reduce a brand font name to the characters a Google-font family legitimately
 * uses (letters, digits, spaces). This is the one guard for BOTH the Google
 * Fonts URL and the `:root{}` font-family values: an unsanitized name carrying
 * `& ; } :` would otherwise corrupt the font-link query string or break out of
 * the inline `<style>` block. Returns '' when nothing survives (caller skips it).
 */
function sanitizeFontFamily(name: string): string {
  return name.replace(/[^A-Za-z0-9 ]/g, '').replace(/\s+/g, ' ').trim();
}

/** Typography level lookup with a fallback chain (display falls back to headline). */
function typographyFor(brand: PreviewPortalBrand, levels: string[]): { font: string; weight: string } | null {
  for (const level of levels) {
    const entry = brand.typography.find((t) => t.level === level && t.font.trim());
    if (entry) return { font: entry.font.trim(), weight: entry.weight };
  }
  return null;
}

/**
 * The themed head block: a Google Fonts stylesheet link (client surfaces only —
 * progressive enhancement, full system-font fallback stacks keep the page
 * presentable offline/file://) plus a `:root` override of the accent/glow/font
 * variables. Review/edit get the accent variables only.
 */
export function renderBrandTheme(project: PreviewPortalProject, surface: PreviewPortalSurface): string {
  const brand = project.brand;
  if (!brand) return '';
  const vars: string[] = [];
  const accent = pickBrandAccent(brand);
  if (accent) {
    vars.push(`--accent:${accent}`);
    vars.push(`--glow:${hexToRgba(accent, 0.07)}`);
  }
  let fontLinks = '';
  if (isClientSurface(surface)) {
    const display = typographyFor(brand, ['display', 'headline', 'wordmark']);
    const body = typographyFor(brand, ['body']);
    const wordmark = typographyFor(brand, ['wordmark', 'display']);
    const families = new Map<string, Set<string>>();
    for (const entry of [display, body, wordmark]) {
      if (!entry) continue;
      const weights = families.get(entry.font) ?? new Set<string>();
      weights.add(fontWeightOf(entry.weight) ?? '400');
      if (entry === display || entry === wordmark) weights.add('700');
      families.set(entry.font, weights);
    }
    if (families.size > 0) {
      const familyParams = [...families.entries()]
        .map(([font, weights]) => ({ clean: sanitizeFontFamily(font), weights }))
        .filter((entry) => entry.clean)
        .map((entry) => `family=${entry.clean.replace(/ /g, '+')}:wght@${[...entry.weights].sort().join(';')}`)
        .join('&');
      if (familyParams) {
        fontLinks = `\n<link rel="preconnect" href="https://fonts.googleapis.com">\n<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>\n<link rel="stylesheet" href="https://fonts.googleapis.com/css2?${familyParams}&display=swap">`;
      }
    }
    const displayClean = display ? sanitizeFontFamily(display.font) : '';
    const bodyClean = body ? sanitizeFontFamily(body.font) : '';
    const wordmarkClean = wordmark ? sanitizeFontFamily(wordmark.font) : '';
    if (displayClean) vars.push(`--font-display:'${displayClean}',var(--font-body)`);
    if (bodyClean) vars.push(`--font-body:'${bodyClean}',-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,sans-serif`);
    if (wordmarkClean) vars.push(`--font-wordmark:'${wordmarkClean}',var(--font-display)`);
  }
  if (!vars.length && !fontLinks) return '';
  return `${fontLinks}\n<style>:root{${vars.join(';')}}</style>`;
}

/** Client identity bar above the hero: logo image when discovered, else the
 * brand name typeset in the wordmark face; right side names the recipient. */
export function renderBrandBar(project: PreviewPortalProject, surface: PreviewPortalSurface): string {
  const brand = project.brand;
  if (!brand || !isClientSurface(surface)) return '';
  const mark = brand.logoPath
    ? `<img src="${escAttr(brand.logoPath)}" alt="${escAttr(brand.brandName)}">`
    : `<span class="brand-wordmark">${esc(brand.brandName)}</span>`;
  const recipient = project.client ? `prepared for ${project.client}` : 'client delivery';
  return `<div class="brand-bar">${mark}<span class="brand-for">${esc(recipient)}</span></div>
  `;
}

/** Emotional tagline as the hero subline on client surfaces. */
export function renderHeroTagline(project: PreviewPortalProject, surface: PreviewPortalSurface): string {
  const line = project.brand?.taglines?.emotional;
  if (!line || !isClientSurface(surface)) return '';
  return `<p class="tagline">${esc(line)}</p>
  `;
}

/** Review-status chip in the hero eyebrow (preview only; silent while draft). */
export function renderStatusChip(project: PreviewPortalProject, surface: PreviewPortalSurface): string {
  if (surface !== 'preview' || project.status === 'draft') return '';
  const approved = project.status === 'client-approved' || project.status === 'final' || project.status === 'published';
  return `<span class="status-chip${approved ? ' st-approved' : ''}">${esc(project.status)}</span>`;
}

/** Prettify a camelCase palette role for the swatch label. */
function roleLabel(role: string): string {
  return role.replace(/([a-z])([A-Z])/g, '$1 $2').toLowerCase();
}

/**
 * The brand-book annex (preview only): palette swatches, typography specimens
 * rendered in their own faces, and the three taglines — the page doubles as a
 * mini brand portal the client can keep using after delivery.
 */
export function renderBrandBook(project: PreviewPortalProject): string {
  const brand = project.brand;
  if (!brand) return '';
  const swatches = brand.palette
    .map(
      (color) =>
        `<div class="swatch"><div class="sw" style="background:${escAttr(color.hex)}"></div><div class="sw-meta"><div class="sw-role">${esc(roleLabel(color.role))}</div>${color.name ? `<div class="sw-name">${esc(color.name)}</div>` : ''}<div class="sw-hex">${esc(color.hex)}</div></div></div>`,
    )
    .join('');
  const specimens = brand.typography
    .map((t) => {
      const weight = fontWeightOf(t.weight);
      const sample = t.level === 'wordmark' ? brand.brandName : 'Aa Bb Cc 0123';
      // Same sanitization as the head theme: a font name with `'`/`;`/`}` would
      // otherwise corrupt this inline font-family. Show the cleaned name too.
      const cleanFont = sanitizeFontFamily(t.font);
      const style = cleanFont
        ? `font-family:'${cleanFont}',var(--font-body)${weight ? `;font-weight:${weight}` : ''}`
        : weight ? `font-weight:${weight}` : '';
      return `<div class="type-specimen"><span class="ts-level">${esc(t.level)}</span><span class="ts-sample" style="${escAttr(style)}">${esc(sample)}</span><span class="ts-font">${esc(cleanFont || t.level)}${t.weight ? ` · ${esc(t.weight)}` : ''}</span></div>`;
    })
    .join('');
  const taglineKinds: Array<[string, string | undefined]> = [
    ['functional', brand.taglines?.functional],
    ['emotional', brand.taglines?.emotional],
    ['community', brand.taglines?.community],
  ];
  const taglines = taglineKinds.filter(([, line]) => line);
  const taglineHtml = taglines.length
    ? `<div class="tagline-list">${taglines
        .map(([kind, line]) => `<div class="tagline-card"><div class="tg-kind">${esc(kind)}</div><div class="tg-line">${esc(line as string)}</div></div>`)
        .join('')}</div>`
    : '';
  return `<section id="brand-book" data-toc="Brand">
  <div class="section-head"><h2>Brand</h2><div class="section-title">${esc(brand.brandName)} Brand System</div>${brand.positioning ? `<div class="section-sub">${esc(brand.positioning)}</div>` : ''}</div>
  ${swatches ? `<div class="swatch-grid">${swatches}</div>` : ''}
  ${specimens ? `<div class="type-specimens">${specimens}</div>` : ''}
  ${taglineHtml}
</section>`;
}