#!/usr/bin/env tsx
// The Archilyzer Media YouTube channel's assets, rendered from lib/brandMedia.ts.
//
//   pnpm --filter yt-dlp-transcript-common exec tsx bin/brand-media.ts [--out <dir>]
//   pnpm --filter yt-dlp-transcript-common exec tsx bin/brand-media.ts --video-kit
//
// Without --video-kit it writes, into --out (default ~/reports/archilyzer-media/brand/),
// each PNG beside the SVG it was rasterised from:
//
//   avatar-800.png            the channel picture: mark M2, maskable (YouTube crops a circle)
//   watermark-150.png         the Studio video watermark: mark M2, `any` (transparent corners)
//   banner-2560x1440.png      the channel banner, the approved canvas design
//   banner-safe-1546x423.png  the part of the banner every device shows
//   lockup.svg                the lockup on its own (no PNG: it is a source)
//   INDEX.html                the operator's handoff: previews, sizes, the Studio upload steps
//
// PNGs go through lib/brandIcons.ts renderSvgPng (next/og: satori + resvg), the same
// path the site icons take, so nothing here needs a system rasteriser or a font.
//
// --video-kit instead writes umtool/report-to-video/brands/archilyzer-media.json, the
// palette, mark and lockup the report-to-video preset draws with (its scripts are plain
// .mjs and cannot import this TypeScript). brandMedia.test.ts fails when it is stale.

import { mkdir, writeFile } from "node:fs/promises";
import os from "node:os";
import path from "node:path";
import { fileURLToPath } from "node:url";
import { renderSvgPng } from "../lib/brandIcons";
import {
  MEDIA_BANNER,
  MEDIA_PALETTE,
  mediaBannerSvg,
  mediaLockupGeometry,
  mediaLockupSvg,
  mediaMarkSvg,
  mediaVideoKit,
} from "../lib/brandMedia";
import { PROJECT_URL } from "../lib/project";
import { runIfEntryPoint } from "./_cli";
import { parseFlags } from "./_parseFlags";

const REPO = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "../..");
export const VIDEO_KIT_PATH = path.join(REPO, "umtool/report-to-video/brands/archilyzer-media.json");
export const DEFAULT_OUT = path.join(os.homedir(), "reports/archilyzer-media/brand");

// The kit as the file holds it: two-space JSON and a trailing newline.
export function videoKitJson(): string {
  return JSON.stringify(mediaVideoKit(), null, 2) + "\n";
}

export type MediaAsset = {
  png: string;
  svg: string;
  width: number;
  height: number;
  title: string;
  studio: string;
  note: string;
  render: () => string;
};

const S = MEDIA_BANNER.safe;

export const MEDIA_ASSETS: ReadonlyArray<MediaAsset> = [
  {
    png: "avatar-800.png",
    svg: "avatar.svg",
    width: 800,
    height: 800,
    title: "Channel picture",
    studio: "Picture",
    note: "Mark M2 · Signal, maskable: the lines sit inside the circle YouTube crops to.",
    render: () => mediaMarkSvg("maskable"),
  },
  {
    png: "watermark-150.png",
    svg: "watermark.svg",
    width: 150,
    height: 150,
    title: "Video watermark",
    studio: "Video watermark",
    note: "Mark M2 · Signal, rounded square; the corners are transparent.",
    render: () => mediaMarkSvg("any"),
  },
  {
    png: "banner-2560x1440.png",
    svg: "banner.svg",
    width: MEDIA_BANNER.width,
    height: MEDIA_BANNER.height,
    title: "Banner image",
    studio: "Banner image",
    note: "The whole banner: a TV shows all of it, a desktop the full-width strip through the middle.",
    render: () => mediaBannerSvg(),
  },
  {
    png: "banner-safe-1546x423.png",
    svg: "banner-safe.svg",
    width: S.width,
    height: S.height,
    title: "Banner, safe area",
    studio: "(not uploaded)",
    note: "What every device shows, phones included. A preview of the crop, not a separate upload.",
    render: () => mediaBannerSvg({ view: S }),
  },
];

// The lockup at the head of INDEX.html (and lockup.svg), wordmark px.
const INDEX_LOCKUP_PX = 64;

// YouTube's own limits, checked before anything is written.
export const BANNER_MAX_BYTES = 6 * 1024 * 1024;

function esc(s: string): string {
  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
}

function kb(n: number): string {
  return n >= 1024 * 1024 ? `${(n / 1024 / 1024).toFixed(2)} MB` : `${(n / 1024).toFixed(1)} KB`;
}

export function indexHtml(rows: ReadonlyArray<MediaAsset & { bytes: number }>, generatedAt: string): string {
  const P = MEDIA_PALETTE;
  const bannerBytes = rows.find((r) => r.png.startsWith("banner-2560"))?.bytes ?? 0;
  const lockup = mediaLockupGeometry(INDEX_LOCKUP_PX);
  const card = (r: MediaAsset & { bytes: number }) => {
    const round = r.png.startsWith("avatar");
    return `<figure class="asset${r.width > 1000 ? " wide" : ""}">
  <div class="stage${round ? " round" : ""}"><img src="${esc(r.png)}" alt="${esc(r.title)}" width="${r.width}" height="${r.height}"></div>
  <figcaption>
    <strong>${esc(r.title)}</strong>
    <span class="meta">${esc(r.png)} · ${r.width} × ${r.height} · ${kb(r.bytes)} · source <a href="${esc(r.svg)}">${esc(r.svg)}</a></span>
    <span>${esc(r.note)}</span>
  </figcaption>
</figure>`;
  };
  return `<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Archilyzer Media assets</title>
<style>
:root { --bg: ${P.ground}; --fg: ${P.fg}; --muted: ${P.muted}; --line: #2a343c; --accent: ${P.lit}; --amber: ${P.amber}; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.5 "IBM Plex Sans", system-ui, sans-serif; }
main { max-width: 1120px; margin: 0 auto; padding: 40px 16px 64px; }
h1 { font: 700 28px/1.2 Archivo, system-ui, sans-serif; font-stretch: 118%; margin: 24px 0 4px; }
h2 { font-size: 18px; margin: 40px 0 12px; }
p, li { color: var(--muted); max-width: 70ch; }
strong, b { color: var(--fg); }
a { color: var(--accent); }
code { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.9em; color: var(--fg); }
.lockup { display: block; max-width: 100%; height: auto; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.asset { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.asset.wide { grid-column: 1 / -1; }
.stage { background: #0f0f0f; border: 1px solid var(--line); border-radius: 10px; padding: 16px; display: flex; align-items: center; justify-content: center; }
.stage img { display: block; max-width: 100%; height: auto; }
.stage.round img { border-radius: 50%; max-width: 200px; }
figcaption { display: flex; flex-direction: column; gap: 2px; color: var(--muted); font-size: 14px; }
.meta { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px; overflow-wrap: anywhere; }
ol li { margin: 6px 0; }
</style>
</head>
<body>
<main>
<img class="lockup" src="lockup.svg" alt="Archilyzer Media" width="${Math.round(lockup.blockWidth)}" height="${Math.round(lockup.blockHeight + lockup.inkTop)}">
<h1>Archilyzer Media: channel assets</h1>
<p>Generated ${esc(generatedAt)} by <code>common/bin/brand-media.ts</code> from <code>common/lib/brandMedia.ts</code>
(mark M2 · Signal, lockup "flush · caps matched"). Re-run it to regenerate; never edit these files by hand.</p>

<h2>Upload in YouTube Studio</h2>
<ol>
<li>Open <a href="https://studio.youtube.com">YouTube Studio</a> signed in as the channel, then <b>Customization</b> → <b>Profile</b> (formerly <i>Branding</i>). The picture, the banner and the watermark are all on that page (<a href="https://support.google.com/youtube/answer/10456525">YouTube Help: Manage your channel branding</a>).</li>
<li><b>Picture</b> → <b>Change</b> (<b>Upload</b> if the channel has none yet) → <code>avatar-800.png</code>. Keep the crop at the whole square; YouTube shows it as a circle.</li>
<li><b>Banner image</b> → <b>Change</b> (or <b>Upload</b>) → <code>banner-2560x1440.png</code> (${kb(bannerBytes)}; YouTube takes up to 6 MB). Leave the crop at the default: the device preview should show the lockup centred, as in the safe-area picture below.</li>
<li><b>Video watermark</b> → <b>Change</b> (or <b>Upload</b>) → <code>watermark-150.png</code>. Display time: <i>Entire video</i>.</li>
<li><b>Publish</b> (top right). Changes can take a few minutes to show on the channel page.</li>
</ol>

<h2>Assets</h2>
<div class="grid">
${rows.map(card).join("\n")}
</div>

<h2>In the videos</h2>
<p>The report-to-video preset <code>render.brand: "archilyzer-media"</code> in a umtool manifest draws the title card,
the mark in the clip header, the end card (right half clear for YouTube's end-screen elements) and the thumbnail
in the same palette. See <code>umtool/report-to-video/README.md</code>, "The Archilyzer Media preset". The site is
<a href="${esc(PROJECT_URL)}">${esc(PROJECT_URL.replace(/^https?:\/\//, ""))}</a>.</p>
</main>
</body>
</html>
`;
}

export async function writeMediaAssets(outDir: string): Promise<Array<MediaAsset & { bytes: number; path: string }>> {
  await mkdir(outDir, { recursive: true });
  const rows: Array<MediaAsset & { bytes: number; path: string }> = [];
  for (const a of MEDIA_ASSETS) {
    const svg = a.render();
    const png = await renderSvgPng(svg, { width: a.width, height: a.height });
    if (a.png.startsWith("banner-2560") && png.byteLength > BANNER_MAX_BYTES) {
      throw new Error(`${a.png} is ${png.byteLength} bytes; YouTube's banner limit is ${BANNER_MAX_BYTES}`);
    }
    await writeFile(path.join(outDir, a.svg), svg, "utf8");
    await writeFile(path.join(outDir, a.png), png);
    rows.push({ ...a, bytes: png.byteLength, path: path.join(outDir, a.png) });
  }
  await writeFile(path.join(outDir, "lockup.svg"), mediaLockupSvg({ px: INDEX_LOCKUP_PX }), "utf8");
  const stamp = `${new Date().toISOString().slice(0, 16).replace("T", " ")} UTC`;
  await writeFile(path.join(outDir, "INDEX.html"), indexHtml(rows, stamp), "utf8");
  return rows;
}

export async function main(argv: string[] = process.argv.slice(2)): Promise<number> {
  const flags = parseFlags(argv);
  if (flags.help) {
    console.log("usage: brand-media.ts [--out <dir>] | --video-kit");
    return 0;
  }
  if (flags["video-kit"]) {
    await mkdir(path.dirname(VIDEO_KIT_PATH), { recursive: true });
    await writeFile(VIDEO_KIT_PATH, videoKitJson(), "utf8");
    console.log(`wrote ${path.relative(REPO, VIDEO_KIT_PATH)}`);
    return 0;
  }
  const out = path.resolve(flags.out && flags.out !== "true" ? flags.out.replace(/^~(?=\/)/, os.homedir()) : DEFAULT_OUT);
  const rows = await writeMediaAssets(out);
  for (const r of rows) console.log(`${r.path}  ${r.width}x${r.height}  ${r.bytes} B`);
  console.log(`${path.join(out, "INDEX.html")}`);
  return 0;
}

runIfEntryPoint(import.meta.url, main);