import assert from "node:assert/strict";
import fs from "node:fs/promises";
import path from "node:path";
import { fileURLToPath } from "node:url";
import { chromium } from "playwright";

const root = path.dirname(path.dirname(fileURLToPath(import.meta.url)));
const artifacts = path.join(root, "test-artifacts");
await fs.mkdir(artifacts, { recursive: true });
const browser = await chromium.launch({ headless: true,
  executablePath: process.env.YTDL_TEST_BROWSER || "C:/Program Files (x86)/Microsoft/Edge/Application/msedge.exe" });
const context = await browser.newContext({ viewport: { width: 1180, height: 860 }, reducedMotion: "reduce" });
await context.addInitScript({ path: path.join(root, "tests/ui-fixture.js") });
await context.route("**/*", async route => {
  const url = new URL(route.request().url());
  if (url.hostname === "ui.ytdl.test") {
    const name = url.pathname.slice(1).split("/").pop();
    if (!["downloader.html", "styles.css", "downloader.js", "onboarding.js", "ui-connection.js", "theme-init.js", "shared.js", "session.js"].includes(name)) return route.abort();
    const type = name.endsWith(".html") ? "text/html" : name.endsWith(".css") ? "text/css" : "application/javascript";
    return route.fulfill({ body: await fs.readFile(path.join(root, "extension", name)), contentType: type });
  }
  if (url.hostname === "www.youtube.com") return route.fulfill({ contentType: "text/html", body: `<!doctype html><html dark><head><meta charset="utf-8"><style>body{margin:0;background:#0f0f0f;color:#eee;font:14px "Segoe UI",sans-serif}main{width:780px;margin:35px}.player{height:330px;background:linear-gradient(135deg,#162c43,#0a1421);border-radius:15px;display:grid;place-items:center;color:#65849c;font-size:27px}h1{font-size:22px;margin:22px 0}#owner{display:flex;align-items:center;gap:9px}.channel{margin-right:12px}.channel b{display:block}.channel small{color:#999}#subscribe-button button{border:0;border-radius:22px;background:#eee;padding:11px 17px;color:#111;font-weight:600}.note{color:#8d98a6;margin-top:35px}.avatar{width:38px;height:38px;background:#577295;border-radius:50%}</style></head><body><main><div class="player">Deep learning · chapter 1</div><h1>But what is a neural network?</h1><ytd-watch-metadata><div id="owner"><span class="avatar"></span><span class="channel"><b>3Blue1Brown</b><small>Наглядная математика</small></span><div id="subscribe-button"><button>Подписаться</button></div></div></ytd-watch-metadata><p class="note">Тест интерфейса YouTubeDL</p></main></body></html>` });
  return route.abort();
});
const page = await context.newPage();
const errors = [];
page.on("pageerror", error => errors.push(error.message));
try {
  await page.goto("https://www.youtube.com/watch?v=aircAruvnKk");
  await page.addScriptTag({ path: path.join(root, "extension/controls.js") });
  await page.addScriptTag({ path: path.join(root, "extension/content.js") });
  await page.evaluate(() => window.addEventListener("message", event => {
    if (event.origin === "https://ui.ytdl.test" && event.data?.type === "FIXTURE_CLOSE_MENU") window.__contentMessage({ type: "CLOSE_MENU" });
  }));
  assert.equal(await page.locator("#subscribe-button + #ytdl-subscribe-download").count(), 1, "Button must be next to Subscribe");
  const siteDownload = page.locator("#ytdl-subscribe-download .download");
  assert.equal(await siteDownload.locator("svg").count(), 1, "Keep the site download icon");
  const beforeHover = await siteDownload.boundingBox();
  await siteDownload.hover();
  assert.deepEqual(await siteDownload.boundingBox(), beforeHover, "The site button must not move on hover");
  await siteDownload.click();
  assert.equal(await page.locator("#ytdl-menu").count(), 0, "Download starts directly without a choice menu");
  assert.deepEqual(await page.evaluate(() => window.__quickRequests), ["https://www.youtube.com/watch?v=aircAruvnKk"]);
  await page.locator("#ytdl-subscribe-download .settings").click();
  const frame = page.frameLocator("#ytdl-menu iframe");
  await frame.locator("#download-form").waitFor({ state: "visible" });
  assert.equal(await frame.locator("#download svg").count(), 0);
  assert.ok(!(await frame.locator("#download").textContent()).includes("↓"));
  assert.equal(await frame.locator("#helper-status").textContent(), "Помощник работает");
  assert.equal(await frame.locator('.dependency-row[data-status="installed"]').count(), 5);
  assert.equal(await frame.locator("#quality option").count(), 4);
  await frame.locator("#quality").selectOption("137");
  const actionSizes = await frame.locator('.form-actions > button').evaluateAll(buttons => buttons.map(button => ({ width: button.getBoundingClientRect().width, height: button.getBoundingClientRect().height, font: getComputedStyle(button).fontSize })));
  assert.ok(Math.abs(actionSizes[0].width - actionSizes[1].width) < 1);
  assert.equal(actionSizes[0].height, actionSizes[1].height); assert.equal(actionSizes[0].font, actionSizes[1].font);
  await frame.locator('.form-actions').screenshot({path:path.join(artifacts,'form-actions.png')});
  await frame.locator('body').evaluate(() => window.__emitJob({ id: 'old-download', title: 'Сохранённый ролик', status: 'complete', stage: 'complete', result: {path:'D:/Videos/old.mp4'}, createdAt: 1 }));
  assert.equal(await frame.locator('[data-job-id="old-download"]').count(), 0, 'Completed history moves to its own page');
  await frame.locator('#open-history').click();
  await frame.locator('body').evaluate(() => {
    if (window.__historyRequests.length !== 1) throw new Error('History button must open a new tab');
  });
  await frame.locator('body').evaluate(() => window.__emitJob({id:'active-download',title:'Текущая загрузка',status:'running',stage:'downloading',percent:12,createdAt:2}));
  assert.equal(await frame.locator('#active-jobs .job-card').isVisible(), true);
  await frame.locator('body').evaluate(() => window.__emitJob({id:'active-download',title:'Текущая загрузка',status:'complete',stage:'complete',result:{path:'D:/Videos/new.mp4'},createdAt:2}));
  assert.equal(await frame.locator('#active-jobs-section').isVisible(), false);
  assert.equal(await frame.locator('#open-history').isVisible(), true);
  await frame.locator("html[data-theme=dark]").waitFor();
  await frame.locator("body").evaluate(() => { for (const animation of document.getAnimations()) if (Number.isFinite(animation.effect.getTiming().iterations)) animation.finish(); });
  await page.screenshot({ path: path.join(artifacts, "menu-dark.png"), animations: "disabled" });
  await frame.locator(".mode-switch label").filter({ hasText: /^Аудио$/ }).click();
  assert.equal(await frame.locator("#video-options").isVisible(), false);
  assert.equal(await frame.locator("#container option").count(), 5);
  await frame.locator("#container").selectOption("mp3");
  await frame.locator("#pick-folder").click();
  await frame.locator("#pick-folder:not([disabled])").waitFor();
  assert.equal(await frame.locator("#folder").inputValue(), "D:\\Videos\\YouTube");
  await frame.locator("#download").click();
  await page.locator("#ytdl-menu").waitFor({ state: "detached" });
  const job = { id: "fixture-job", title: "But what is a neural network?", status: "running", stage: "encoding", engine: "nvenc", percent: 64, speed: "12.8x" };
  await page.evaluate(job => window.__contentMessage({ type: "JOB_PROGRESS", job }), job);
  await page.locator("#ytdl-notifications .toast").waitFor();
  assert.match(await page.locator("#ytdl-notifications .stage").textContent(), /NVENC/);
  await page.screenshot({ path: path.join(artifacts, "progress-toast.png"), animations: "disabled" });
  await page.evaluate(() => { document.documentElement.removeAttribute("dark"); document.body.style.background = "#f9fafc"; document.body.style.color = "#182234"; });
  await page.locator("#ytdl-notifications:not([dark])").waitFor();
  await page.locator("#ytdl-subscribe-download .settings").click();
  const lightFrame = page.frameLocator("#ytdl-menu iframe");
  await lightFrame.locator("#download-form").waitFor({ state: "visible" });
  assert.equal(await lightFrame.locator("html").getAttribute("data-theme"), "light");
  await page.screenshot({ path: path.join(artifacts, "menu-light.png"), animations: "disabled" });
  await page.setViewportSize({ width: 340, height: 720 });
  const box = await page.locator("#ytdl-menu").boundingBox();
  assert.ok(box.x >= 0 && box.x + box.width <= 340, "Menu must stay inside a narrow viewport");
  await lightFrame.locator("#download-form").waitFor({ state: "visible" });
  const overflow = await lightFrame.locator("html").evaluate(node => node.scrollWidth > node.clientWidth);
  assert.equal(overflow, false, "No horizontal overflow");
  await lightFrame.locator("html").evaluate(() => window.__helperOffline());
  assert.equal(await lightFrame.locator("#helper-status").textContent(), "Помощник отключён");
  assert.equal(await lightFrame.locator('.dependency-row[data-status="unknown"]').count(), 5);
  await lightFrame.locator("#helper-start").click();
  await lightFrame.locator("#download-form").waitFor({ state: "visible" });
  assert.equal(await lightFrame.locator("#helper-status").textContent(), "Помощник работает");
  await lightFrame.locator("#close").click();
  await page.locator("#ytdl-menu").waitFor({ state: "detached" });
  await page.evaluate(() => {
    const thumbnail = document.createElement("ytd-thumbnail");
    thumbnail.innerHTML = '<a id="thumbnail" href="/watch?v=jNQXAC9IVRw" style="display:block;width:260px;height:146px;background:#30506b"><img alt="Test video" style="width:100%;height:100%"></a>';
    document.querySelector("main").prepend(thumbnail);
  });
  await page.locator(".ytdl-thumbnail-download .download").click();
  assert.equal(page.url(), "https://www.youtube.com/watch?v=aircAruvnKk", "A thumbnail download must not navigate");
  assert.equal(await page.evaluate(() => window.__quickRequests.at(-1)), "https://www.youtube.com/watch?v=jNQXAC9IVRw");
  await page.locator(".ytdl-thumbnail-download .settings").click();
  await page.frameLocator("#ytdl-menu iframe").locator("#download-form").waitFor({ state: "visible" });
  assert.equal(new URL(await page.locator("#ytdl-menu iframe").getAttribute("src")).searchParams.get("url"), "https://www.youtube.com/watch?v=jNQXAC9IVRw");
  await page.frameLocator('#ytdl-menu iframe').locator('#download-form').waitFor({state:'visible'});
  await page.frameLocator('#ytdl-menu iframe').locator('#folder').press('Escape');
  await page.locator('#ytdl-menu').waitFor({state:'detached'});
  await page.evaluate(() => {
    const preview = document.createElement('ytm-shorts-lockup-view-model');
    preview.style.cssText='display:block;width:120px;height:230px;position:relative';
    preview.innerHTML = '<a href="/shorts/Mf9GCn_LsUI" style="display:block;height:200px"><yt-thumbnail-view-model><img alt="Short" style="width:120px;height:200px"></yt-thumbnail-view-model></a>';
    preview.addEventListener('mouseenter', () => {
      const replacement=document.createElement('a'); replacement.href='/shorts/Mf9GCn_LsUI'; replacement.style.cssText='display:block;height:200px';
      replacement.innerHTML='<video style="width:120px;height:200px;background:#24364c"></video>';
      preview.querySelector('a').replaceWith(replacement);
      const player=document.createElement('div'); player.className='hover-player'; player.style.cssText='position:absolute;inset:0 0 30px;z-index:30;background:#24364c'; preview.append(player);
    }, {once:true});
    document.querySelector('main').prepend(preview);
  });
  await page.locator('ytm-shorts-lockup-view-model[data-ytdl-preview]').waitFor();
  await page.locator('ytm-shorts-lockup-view-model').hover();
  await page.locator('ytm-shorts-lockup-view-model .hover-player').waitFor();
  const shortKey=await page.locator('ytm-shorts-lockup-view-model').getAttribute('data-ytdl-preview');
  const shortButtons=page.locator(`[data-ytdl-preview-for="${shortKey}"]`);
  assert.equal(await shortButtons.evaluate(node => node.parentElement === document.documentElement), true);
  await shortButtons.locator('.download').click();
  assert.equal(await page.evaluate(() => window.__quickRequests.at(-1)), 'https://www.youtube.com/watch?v=Mf9GCn_LsUI');
  await shortButtons.locator('.settings').click();
  await page.frameLocator('#ytdl-menu iframe').locator('#download-form').waitFor({state:'visible'});
  await page.frameLocator('#ytdl-menu iframe').locator('#close').click();
  await page.locator('#ytdl-menu').waitFor({state:'detached'});
  await page.evaluate(() => {
    history.pushState({}, "", "/shorts/jNQXAC9IVRw");
    document.body.innerHTML = '<ytd-shorts><ytd-reel-video-renderer is-active><div id="actions" style="position:fixed;right:20px;bottom:180px"></div></ytd-reel-video-renderer></ytd-shorts>';
    document.dispatchEvent(new Event("yt-navigate-finish"));
  });
  await page.locator("#actions #ytdl-shorts-download .download").click();
  assert.equal(await page.evaluate(() => window.__quickRequests.at(-1)), "https://www.youtube.com/watch?v=jNQXAC9IVRw");
  await page.locator("#ytdl-shorts-download .settings").click();
  await page.frameLocator("#ytdl-menu iframe").locator("#download-form").waitFor({ state: "visible" });
  await page.screenshot({ path: path.join(artifacts, "shorts-settings.png"), animations: "disabled" });
  await page.evaluate(() => window.__contentMessage({ type: 'JOB_PROGRESS', job: {
    id: 'component-complete', title: 'FFmpeg', kind: 'dependency', stage: 'complete', status: 'complete', percent: 100, result: { title: 'FFmpeg' }
  } }));
  assert.equal(await page.locator('#ytdl-notifications [data-id="component-complete"] .action').isVisible(), false);
  const components = await context.newPage();
  await components.addInitScript(() => { window.__dependencyMissing = true; });
  await components.goto('https://ui.ytdl.test/downloader.html?url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DjNQXAC9IVRw');
  if (!await components.locator('#helper-panel').evaluate(panel => panel.open)) await components.locator('#helper-panel > summary').click();
  await components.locator('.dependencies summary').click();
  await components.locator('.dependency-row[data-dependency="ffmpeg"][data-status="missing"]').waitFor();
  assert.equal(await components.locator('#download-form').isVisible(), false);
  assert.equal(await components.locator('#engine option[value="nvenc"]').isDisabled(), true);
  assert.equal(await components.locator('.dependency-row button').count(), 0);
  assert.equal(await components.locator('#helper-install').textContent(), 'Восстановить');
  assert.equal(await components.locator('#helper-install').getAttribute('href'), 'https://git.lonarpgproxy.space/OwnerLink/YouTubeDL/releases/latest');
  assert.equal(await components.locator('#helper-install').getAttribute('target'), '_blank');
  assert.equal(await components.locator('#helper-install').getAttribute('download'), null);
  // A repaired bundle reports new capabilities after the helper restarts.
  await components.evaluate(() => { window.__dependencyMissing = false; });
  await components.locator('#helper-start').click();
  await components.locator('#download-form').waitFor({state:'visible'});
  assert.equal(await components.locator('.dependency-row[data-status="installed"]').count(), 5);
  assert.equal(await components.locator('#engine option[value="nvenc"]').isDisabled(), false);
  await components.close();
  const amdPage=await context.newPage();
  await amdPage.addInitScript(() => { window.__amdOnly=true; });
  await amdPage.goto('https://ui.ytdl.test/downloader.html?url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DjNQXAC9IVRw');
  await amdPage.locator('#download-form').waitFor({state:'visible'});
  assert.equal(await amdPage.locator('#engine option[value="nvenc"]').isDisabled(),true);
  assert.equal(await amdPage.locator('#engine option[value="amf"]').isDisabled(),false);
  await amdPage.locator('.advanced summary').click();
  await amdPage.locator('#codec').selectOption('hevc'); await amdPage.locator('#engine').selectOption('amf');
  assert.match(await amdPage.locator('#processing-hint').textContent(),/AMD AMF/);
  await amdPage.locator('#codec').selectOption('vp9');
  assert.match(await amdPage.locator('#processing-hint').textContent(),/недоступен/);
  assert.equal(await amdPage.locator('#download').isDisabled(),true);
  await amdPage.locator('#codec').selectOption('hevc');
  assert.equal(await amdPage.locator('#download').isDisabled(),false);
  await amdPage.locator('#helper-panel > summary').click();
  assert.equal(await amdPage.locator('#helper-install').textContent(),'Переустановить');
  await amdPage.locator('#auto-update').uncheck();
  await amdPage.locator('#helper-update').click();
  await amdPage.locator('#active-jobs .job-stage').filter({hasText:'Скачиваю FFmpeg'}).waitFor();
  assert.equal(await amdPage.locator('#helper-update').isDisabled(),true);
  assert.equal(await amdPage.evaluate(() => window.__updateRequests.length),1);
  await amdPage.evaluate(() => window.__emitJob({id:'fixture-update',kind:'update',canCancel:false,status:'complete',stage:'complete',result:{title:'Все компоненты актуальны'}}));
  await amdPage.locator('#helper-update:not([disabled])').waitFor();
  assert.equal(await amdPage.locator('#active-jobs-section').isVisible(),false,'Completed component updates leave the active list');
  assert.match(await amdPage.locator('#update-note').textContent(),/актуальны/);
  await amdPage.close();
  const loginPage = await context.newPage();
  await loginPage.addInitScript(() => { window.__requiresLogin = true; window.__denySessionPermission = true; });
  await loginPage.goto('https://ui.ytdl.test/downloader.html?url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DjNQXAC9IVRw&theme=dark');
  await loginPage.locator('#alert:not([hidden])').waitFor();
  assert.equal(await loginPage.locator('#helper-status').textContent(), 'Помощник работает');
  assert.equal(await loginPage.locator('#video-title').textContent(), 'Не удалось получить качество');
  assert.match(await loginPage.locator('#alert').textContent(), /Использовать вход в YouTube/);
  assert.ok(!(await loginPage.locator('#alert').textContent()).includes('cookies-from-browser'));
  await loginPage.locator('#session-enable').click();
  assert.match(await loginPage.locator('#alert').textContent(), /не разрешён/);
  await loginPage.evaluate(() => { window.__denySessionPermission = false; });
  await loginPage.locator('#session-enable').click();
  await loginPage.locator('#download-form').waitFor({state:'visible'});
  assert.equal(await loginPage.locator('#session-status').textContent(), 'Вход браузера подключён');
  assert.equal(await loginPage.locator('#alert').isVisible(), false);
  await loginPage.screenshot({path:path.join(artifacts,'session-connected.png'),animations:'disabled'});
  await loginPage.locator('#session-disable').click();
  await loginPage.locator('#session-panel[data-state="disabled"]').waitFor();
  assert.equal(await loginPage.locator('#session-status').textContent(), 'Вход в YouTube не подключён');
  await loginPage.close();
  const storagePage = await context.newPage();
  await storagePage.goto('https://ui.ytdl.test/downloader.html?url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DjNQXAC9IVRw&theme=dark');
  await storagePage.locator('#download-form').waitFor({state:'visible'});
  await storagePage.locator('#folder').fill('C:\\Finished');
  await storagePage.locator('#pick-work-folder').click();
  await storagePage.waitForFunction(() => window.__fixtureStorage.preferences.workFolder === 'D:\\Videos\\YouTube');
  assert.equal(await storagePage.locator('#folder').inputValue(), 'C:\\Finished');
  await storagePage.locator('#download').click();
  await storagePage.waitForFunction(() => window.__downloadRequests.length === 1);
  const storageRequest = await storagePage.evaluate(() => window.__downloadRequests[0]);
  assert.equal(storageRequest.folder, 'C:\\Finished');
  assert.equal(storageRequest.workFolder, 'D:\\Videos\\YouTube');
  await storagePage.close();
  assert.deepEqual(errors, []);
  console.log("UI checks passed: direct download + settings, stationary buttons, thumbnails, Shorts, real-state indicators, reconnect, themes and narrow layout.");
} finally { await browser.close(); }