// Base do kit tunel: cores, fontes, curvas e medidas. Todo número visual sai daqui.
// Os elementos importam só este arquivo, 'react' e 'remotion'. Nada de fora da pasta do kit.
import {continueRender, delayRender} from 'remotion';
import fonteA from './fontes/syncopate-latin.woff2';
import fonteB from './fontes/chakra-latin.woff2';

// ---------- tela ----------
export const LARGURA = 1080, ALTURA = 1920, FPS = 30;
// área segura (Reels/TikTok): o que se lê fica entre estas linhas
export const SEGURA = {topo: 168, base: 1330, lado: 96};
export const LARGURA_UTIL = LARGURA - SEGURA.lado * 2; // 888 px

// ---------- cor ----------
export const COR = {
  creme: '#F1E9DA',
  tinta: '#111111',
  vermelho: '#FF4A1C',
  mostarda: '#FFB400',
  verde: '#00A6A6',
  osso: '#E3D7C0',
};

export const CORES_FAIXA = [COR.vermelho, COR.creme, COR.tinta, COR.mostarda, COR.osso, COR.verde];
/** vértices de um polígono regular de `n` lados com apótema `a` (lado "reto" pra cima), centro (cx, cy), giro `rot` em rad */
export const poligono = (n: number, a: number, cx: number, cy: number, rot = 0) => {
  const R = a / Math.cos(Math.PI / n);
  return Array.from({length: n}, (_, k) => `${(cx + Math.cos(rot + (2 * Math.PI * k) / n + Math.PI / n - Math.PI / 2) * R).toFixed(1)},${(cy + Math.sin(rot + (2 * Math.PI * k) / n + Math.PI / n - Math.PI / 2) * R).toFixed(1)}`).join(' ');
};
export const CENTRO_Y = 760;

// ---------- fonte ----------
// Famílias com o prefixo do kit, pra não colidir com outro kit no mesmo estúdio.
export const FAM_A = 'TN Syncopate';
export const FONTE_A = '"TN Syncopate", Impact, sans-serif';
export const FAM_B = 'TN Chakra Petch';
export const FONTE_B = '"TN Chakra Petch", system-ui, sans-serif';

// As medidas de texto (caber) só valem depois das fontes: a Montagem espera `esperarFontes()` antes de desenhar.
const TOTAL_FONTES = 2;
let nProntas = 0;
const aguardando: (() => void)[] = [];
const marcarFonte = () => {nProntas++; if (nProntas >= TOTAL_FONTES) aguardando.splice(0).forEach((r) => r());};
export const fontesProntas = () => nProntas >= TOTAL_FONTES || typeof document === 'undefined';
export const esperarFontes = () => new Promise<void>((res) => {if (fontesProntas()) res(); else aguardando.push(res);});
if (typeof document !== 'undefined' && !(globalThis as Record<string, unknown>).__tnA) {
  (globalThis as Record<string, unknown>).__tnA = true;
  const hA = delayRender('tunel: TN Syncopate');
  new FontFace('TN Syncopate', `url(${fonteA}) format('woff2')`, {weight: '700', style: 'normal'}).load()
    .then((ff) => {document.fonts.add(ff); marcarFonte(); continueRender(hA);})
    .catch(() => {marcarFonte(); continueRender(hA);});
}
if (typeof document !== 'undefined' && !(globalThis as Record<string, unknown>).__tnB) {
  (globalThis as Record<string, unknown>).__tnB = true;
  const hB = delayRender('tunel: TN Chakra Petch');
  new FontFace('TN Chakra Petch', `url(${fonteB}) format('woff2')`, {weight: '600', style: 'normal'}).load()
    .then((ff) => {document.fonts.add(ff); marcarFonte(); continueRender(hB);})
    .catch(() => {marcarFonte(); continueRender(hB);});
}

// ---------- tempo e curva ----------
export const c01 = (t: number) => Math.max(0, Math.min(1, t));
/** progresso 0..1 de f entre a e b */
export const seg = (f: number, a: number, b: number) => c01((f - a) / (b - a));
/** saída rápida e pouso longo, ≈ cubic-bezier(.2,.8,.2,1) */
export const e5 = (t: number) => 1 - Math.pow(1 - c01(t), 5);
/** saída com overshoot (passa de 1 e volta): toda entrada do kit usa esta ou a e5 */
export const ob = (t: number, s = 1.7) => {const x = c01(t) - 1; return 1 + (s + 1) * x * x * x + s * x * x;};
export const lerp = (a: number, b: number, t: number) => a + (b - a) * t;
/** pseudo-aleatório estável (0..1) a partir de um inteiro */
export const rnd = (n: number) => {const x = Math.sin(n * 127.1 + 311.7) * 43758.5453; return x - Math.floor(x);};
/** uma batida da trilha do kit em quadros */
export const BATIDA = 14.0625;

// ---------- medida de texto ----------
let canvas: HTMLCanvasElement | null = null;
const cache = new Map<string, number>();
export const larguraTexto = (texto: string, tamanho: number, fam: string, peso = 800, trackingEm = 0): number => {
  const chave = `${texto}|${tamanho}|${fam}|${peso}|${trackingEm}`;
  const c = cache.get(chave); if (c !== undefined) return c;
  if (typeof document === 'undefined') return texto.length * tamanho * 0.58;
  canvas = canvas || document.createElement('canvas');
  const ctx = canvas.getContext('2d'); if (!ctx) return texto.length * tamanho * 0.58;
  const fonte = `${peso} ${tamanho}px "${fam}"`;
  ctx.font = fonte;
  const w = ctx.measureText(texto).width + texto.length * trackingEm * tamanho;
  if (fontesProntas() && document.fonts.check(fonte)) cache.set(chave, w);
  return w;
};
/** o maior tamanho até `tamanho` em que o texto cabe em `largura` (nunca palavra cortada) */
export const caber = (texto: string, tamanho: number, fam: string, largura = LARGURA_UTIL, peso = 800, trackingEm = 0) => {
  const w = larguraTexto(texto, tamanho, fam, peso, trackingEm);
  return w > largura ? Math.floor(tamanho * (largura / w)) : tamanho;
};
/** tira os asteriscos de destaque: "Usar *IA*" -> "Usar IA" */
export const textoLimpo = (t: string) => t.replace(/\*/g, '');
/** corta "a *b* c" em [{t:'a ', d:false}, {t:'b', d:true}, {t:' c', d:false}] */
export const partes = (t: string) => t.split('*').map((p, i) => ({t: p, d: i % 2 === 1})).filter((p) => p.t.length > 0);