/**
 * The scene contract — the EXACT submit payload (prompt, reference slots,
 * voice clones, JSON) the review surfaces show before spend. "Preview is the
 * contract": this output is the operator's review contract, so it is kept
 * byte-identical across moves. Extracted verbatim from `render.ts` (roadmap
 * Phase 3d).
 */
import type { PreviewPortalAsset, PreviewPortalProject, PreviewPortalReferenceSlot, PreviewPortalScene, PreviewPortalVoiceClone } from './types.js';
import { aspectForProject, esc, escAttr } from './render-primitives.js';

/**
 * The per-scene "contract": the exact prompt text that will be submitted to the
 * provider plus the identity-lock reference sheets for the scene's characters.
 * This turns each storyboard card from a thumbnail-and-caption gallery into a
 * "what you will actually get" review surface — the operator sees the submit
 * prompt and the locked references inline, before any spend. Rendered expanded
 * (no click-to-reveal) so the contract is always visible. Returns an empty
 * string when a scene carries neither a prompt nor a matchable reference.
 */
export function renderSceneContract(scene: PreviewPortalScene, project: PreviewPortalProject): string {
  const prompt = scene.scenePrompt;
  const rows: string[] = [];
  // The resolved provider submit text (13-block packet) is the authoritative
  // contract; show it first and in full when present.
  if (scene.renderPrompt) rows.push(promptRow('Submit', scene.renderPrompt));
  if (prompt?.imagePrompt) rows.push(promptRow('Image', prompt.imagePrompt));
  if (prompt?.animationPrompt) rows.push(promptRow('Motion', prompt.animationPrompt));
  if (prompt?.styleFooter) rows.push(promptRow('Style', prompt.styleFooter));
  const promptBlock = rows.length
    ? `<div class="contract-block"><div class="contract-label">Submit prompt · what the model receives</div>${rows.join('')}</div>`
    : '';

  // Identity-lock references: the character reference sheets discovered for the
  // names this scene casts. A character image can surface either from the
  // characters.json appender (label "<Name> reference") or the generic dir scan
  // (filename-based label/path), so match the slugified character name against
  // both the label and the path. De-duped by path so a character listed twice
  // does not double-render.
  const wantNames = (scene.characters ?? []).map(contractSlug).filter(Boolean);
  const seen = new Set<string>();
  const refs = project.assets.filter((asset) => {
    if (asset.kind !== 'image' || asset.section !== 'characters' || seen.has(asset.path)) return false;
    const haystacks = [contractSlug(asset.label), contractSlug(asset.path)];
    if (!wantNames.some((name) => haystacks.some((hay) => hay.includes(name)))) return false;
    seen.add(asset.path);
    return true;
  });
  // Reference-slot contract: which slot locks this scene, ready vs pending, and
  // the bound Asset:// URI for identity. Falls back to the discovered character
  // thumbnails when no resolved slots exist yet.
  const slotRows = (scene.referenceSlots ?? []).map(renderReferenceSlot).join('');
  const thumbs = refs.length
    ? `<div class="scene-refs">${refs
        .map(
          (ref) =>
            `<img class="scene-ref" data-downloadable data-lightbox-group="storyboard-refs" data-lb-caption="${escAttr(ref.label)}" src="${escAttr(ref.path)}" alt="${escAttr(ref.label)}">`,
        )
        .join('')}</div>`
    : '';
  const refBlock = slotRows || thumbs
    ? `<div class="contract-block"><div class="contract-label">References · identity lock</div>${slotRows ? `<div class="ref-slots">${slotRows}</div>` : ''}${thumbs}</div>`
    : '';

  // Voice design: the cloned-voice references bound to this scene's cast. Each
  // cast character with a matching voice clone gets a labeled row carrying a
  // videoAssetId/videoAssetId2-style pill AND a playable <audio> so the operator
  // can HEAR the voice before spend. Ordered by cast order; first → videoAssetId,
  // second → videoAssetId2, etc. (matches the exact-submit JSON below).
  const sceneVoices = sceneVoiceClones(scene, project);
  const voiceBlock = sceneVoices.length
    ? `<div class="contract-block"><div class="contract-label">Voice design · cloned voice</div>${sceneVoices
        .map(
          (voice, index) =>
            `<div class="voice-row"><span class="ref-role va-pill">${esc(videoAssetIdField(index))}</span><span class="voice-label">${esc(voice.label)}${voice.durationSeconds ? ` · ${esc(`${voice.durationSeconds}s`)}` : ''}</span><audio controls preload="none" data-downloadable src="${escAttr(voice.src)}"></audio></div>`,
        )
        .join('')}</div>`
    : '';

  // Exact submit JSON: the plain submit body that will hit the provider, in a
  // collapsed <details> so the contract is auditable without dominating the card.
  // imageAssetIdN come from the scene's resolved reference slot paths; videoAssetId
  // / videoAssetId2 from the voice clip filenames.
  const jsonBlock = renderExactSubmitJson(scene, project, refs, sceneVoices);

  if (!promptBlock && !refBlock && !voiceBlock && !jsonBlock) return '';
  return `<div class="scene-contract">${promptBlock}${refBlock}${voiceBlock}${jsonBlock}</div>`;
}

/**
 * The cloned-voice references bound to a scene: for each character the scene
 * casts (in cast order), the project voice clone whose character matches
 * (case-insensitively). De-duped per character. Empty when the project carries
 * no voice clones or none match the cast — the Voice design block then omits.
 */
function sceneVoiceClones(
  scene: PreviewPortalScene,
  project: PreviewPortalProject,
): PreviewPortalVoiceClone[] {
  const clones = project.voiceClones;
  if (!clones || !clones.length) return [];
  const byCharacter = new Map<string, PreviewPortalVoiceClone>();
  for (const clone of clones) byCharacter.set(clone.character.toLowerCase(), clone);
  const out: PreviewPortalVoiceClone[] = [];
  const seen = new Set<string>();
  for (const name of scene.characters ?? []) {
    const key = name.toLowerCase();
    if (seen.has(key)) continue;
    const match = byCharacter.get(key);
    if (!match) continue;
    seen.add(key);
    out.push(match);
  }
  return out;
}

/** The submit-body voice-ref field name for the Nth voice (1 → videoAssetId,
 * 2 → videoAssetId2, …), matching the seedance-2 submit shape. */
function videoAssetIdField(index: number): string {
  return index === 0 ? 'videoAssetId' : `videoAssetId${index + 1}`;
}

/**
 * The exact-submit JSON identifier for a reference. An `Asset://` URI IS the
 * identifier (the registered avatar binding) and is kept verbatim; a local path
 * or hosted URL is reduced to its filename (the asset id the submit body carries).
 * Falls back to the whole value when unsplittable.
 */
function submitRefId(value: string): string {
  if (/^asset:\/\//i.test(value)) return value;
  const noQuery = value.split(/[?#]/)[0] ?? value;
  const segments = noQuery.split('/').filter(Boolean);
  return segments[segments.length - 1] || value;
}

/**
 * The "Exact JSON → seedance-2" block: a collapsed <details> showing the plain
 * submit body that will be sent for this scene — model, aspect_ratio, audio,
 * (duration), a text_prompt placeholder, the imageAssetId1..N from the scene's
 * resolved references, and the videoAssetId/videoAssetId2 from the voice clips.
 * Built from the same data the rest of the contract renders, so the operator can
 * audit the exact payload before spend. Empty string when there is nothing to
 * show (no references and no voices).
 */
function renderExactSubmitJson(
  scene: PreviewPortalScene,
  project: PreviewPortalProject,
  refs: PreviewPortalAsset[],
  voices: PreviewPortalVoiceClone[],
): string {
  // Image references: prefer the resolved reference-slot bindings (Asset:// URI or
  // path), else the discovered character reference thumbnails.
  const imageRefs: string[] = [];
  for (const slot of scene.referenceSlots ?? []) {
    const binding = slot.assetUri ?? slot.path;
    if (binding) imageRefs.push(binding);
  }
  if (imageRefs.length === 0) {
    for (const ref of refs) imageRefs.push(ref.path);
  }
  if (imageRefs.length === 0 && voices.length === 0) return '';
  // This block is the Seedance-2 gateway shape (imageAssetIdN / videoAssetIdN).
  // seedance-modelark sends a different body — an ordered content[] with a role
  // per item — which its transport freezes into the run contract and the run
  // card renders verbatim; showing this one for it would be a paraphrase that
  // is wrong in every field. Rule 5: the contract is the exact payload or nothing.
  if (project.routeId === 'seedance-modelark') return '';

  const body: Record<string, unknown> = {
    model: 'seedance-2',
    aspect_ratio: aspectForProject(project),
    audio: true,
    ...(typeof scene.durationSeconds === 'number' ? { duration: scene.durationSeconds } : {}),
    text_prompt: '«submit prompt above»',
  };
  imageRefs.forEach((ref, index) => {
    body[`imageAssetId${index + 1}`] = submitRefId(ref);
  });
  voices.forEach((voice, index) => {
    body[videoAssetIdField(index)] = submitRefId(voice.src);
  });
  const json = JSON.stringify(body, null, 2);
  return `<details class="json-wrap"><summary>Exact JSON → seedance-2</summary><pre>${esc(json)}</pre></details>`;
}

/**
 * One reference-slot row: role · label · ready/pending badge · binding (the
 * Asset:// URI when registered, else the local path, else the character name
 * flagged unregistered). This is the operator's pre-render identity-lock check.
 */
function renderReferenceSlot(slot: PreviewPortalReferenceSlot): string {
  const badge = `<span class="ref-status ref-${slot.status === 'ready' ? 'ready' : 'pending'}">${esc(slot.status)}</span>`;
  const bind = slot.assetUri
    ? `<span class="ref-bind">${esc(slot.assetUri)}</span>`
    : slot.path
      ? `<span class="ref-bind">${esc(slot.path)}</span>`
      : slot.characterName
        ? `<span class="ref-bind ref-unbound">${esc(slot.characterName)} · unregistered</span>`
        : '';
  return `<div class="ref-slot"><span class="ref-role">${esc(slot.role)}</span><span class="ref-slot-label">${esc(slot.label)}</span>${badge}${bind}</div>`;
}

function promptRow(key: string, value: string): string {
  return `<div class="contract-row"><span class="contract-k">${esc(key)}</span><span class="contract-v">${esc(value)}</span></div>`;
}

/** Lowercase alphanumeric reduction for tolerant character-name → asset matching. */
function contractSlug(value: string): string {
  return value.toLowerCase().replace(/[^a-z0-9]+/g, '');
}