/**
 * E2E — Page de navigation & onglet Accueil (#158).
 *
 * Couvre :
 *   - clic sur la racine d'un vault -> page de navigation (onglet dédié)
 *   - icône des répertoires à la couleur de l'arbre de la sidebar
 *   - menu contextuel des répertoires et des fichiers identique à la sidebar
 *   - clic sur le titre -> onglet Accueil (icône Maison) épinglé en tête de barre
 */

import { test, expect } from '@playwright/test';

async function boot(page) {
  await page.goto('/');
  await page.waitForFunction(() => window.__OBSIGATE_BOOTED === true, { timeout: 20000 });
  await page.waitForSelector('#dashboard-home, #search-input', { timeout: 15000 });
}

const menuItems = (page) =>
  page.$$eval('#context-menu .context-menu-item', (els) => els.map((e) => e.textContent.trim()))
    .catch(() => []);

test.describe('Page de navigation (#158)', () => {
  test.beforeEach(async ({ page }) => {
    await boot(page);
  });

  test("clic sur la racine d'un vault ouvre la page de navigation", async ({ page }) => {
    const vault = await page.locator('.vault-item').first().getAttribute('data-vault');
    await page.locator('.vault-item').first().click();

    await page.waitForSelector('#vault-home .vault-home-breadcrumb', { timeout: 15000 });
    await expect(page.locator(`#tab-list .tab-item[data-tab-id="nav::${vault}"]`)).toHaveCount(1);
    // Le fil d'Ariane est à la racine du vault
    await expect(page.locator('#vault-home .vault-home-breadcrumb-item')).toHaveCount(1);
  });

  test("répertoires de la vue : icône à la couleur de la sidebar + menu contextuel", async ({ page }) => {
    await page.locator('.vault-item').first().click();
    await page.waitForSelector('#vault-home .vault-home-dirs .vault-home-recent-item', { timeout: 15000 });

    // Couleur identique à l'icône de l'arbre (.tree-item .icon -> var(--accent))
    const colors = await page.evaluate(() => {
      const cs = (el) => (el ? getComputedStyle(el).color : null);
      return {
        nav: cs(document.querySelector('#vault-home .vault-home-dirs .vault-home-recent-item svg')),
        side: cs(document.querySelector('.tree-item[data-type="directory"] svg')),
      };
    });
    expect(colors.nav).toBe(colors.side);
    expect(colors.nav).toBeTruthy();

    // Menu contextuel : page de navigation vs sidebar
    await page.locator('#vault-home .vault-home-dirs .vault-home-recent-item').first().click({ button: 'right' });
    await page.waitForSelector('#context-menu', { timeout: 5000 });
    const navMenu = await menuItems(page);
    expect(navMenu.length).toBeGreaterThan(0);
    await page.keyboard.press('Escape');

    await page.locator('.tree-item[data-type="directory"]').first().click({ button: 'right' });
    await page.waitForSelector('#context-menu', { timeout: 5000 });
    const sideMenu = await menuItems(page);
    await page.keyboard.press('Escape');
    expect(navMenu).toEqual(sideMenu);
  });

  test('fichiers de la vue : menu contextuel identique à la sidebar', async ({ page }) => {
    await page.locator('.vault-item').first().click();
    await page.waitForSelector('#vault-home .search-result-item', { timeout: 15000 });

    await page.locator('#vault-home .search-result-item').first().click({ button: 'right' });
    await page.waitForSelector('#context-menu', { timeout: 5000 });
    const navMenu = await menuItems(page);
    expect(navMenu.length).toBeGreaterThan(0);
    await page.keyboard.press('Escape');

    await page.locator('.tree-item[data-type="file"]').first().click({ button: 'right' });
    await page.waitForSelector('#context-menu', { timeout: 5000 });
    const sideMenu = await menuItems(page);
    await page.keyboard.press('Escape');
    expect(navMenu).toEqual(sideMenu);
  });

  test('titre -> onglet Accueil (Maison) épinglé en tête de barre', async ({ page }) => {
    // Un fichier ouvert pour vérifier que l'onglet Accueil passe devant
    await page.locator('.vault-item').first().click();
    await page.waitForSelector('.tree-item[data-type="file"]', { timeout: 15000 });
    await page.locator('.tree-item[data-type="file"]').first().dblclick();
    await page.waitForTimeout(500);

    await page.locator('#header-logo').click();
    await page.waitForSelector('#dashboard-home', { timeout: 10000 });

    const ids = await page.$$eval('#tab-list .tab-item', (els) => els.map((e) => e.dataset.tabId));
    expect(ids[0]).toBe('home');
    expect(ids.length).toBeGreaterThan(1);
    await expect(page.locator('#tab-list .tab-item.active')).toHaveAttribute('data-tab-id', 'home');
    // Icône Maison + libellé traduit
    const iconClass = await page.locator('#tab-list .tab-item').first().locator('.tab-icon').getAttribute('class');
    expect(iconClass).toContain('home');
    const label = (await page.locator('#tab-list .tab-item').first().locator('.tab-name').textContent()) || '';
    expect(['Accueil', 'Home']).toContain(label.trim());
    // La page d'accueil est affichée (avec sa section Raccourcis & Astuces)
    await expect(page.locator('#dashboard-home #quick-help')).toHaveCount(1);
  });
});