// @ts-nocheck
import { describe, expect, it, vi, afterEach } from 'vitest';
import { mount, unmount } from 'svelte';
import Layout from '../components/Layout.svelte';
import { session } from '../lib/session.svelte';

// Leader round2: 375 宽度下改为底部 Tab Bar（我的项目/数据集/实验记录/我的），
// 选中态青绿强调色；侧栏只在 ≥768px 显示。
// 真·渲染断言（不得跳过）：
//  - phone 模式（matchMedia max-width:767px matches:true）Tab Bar 渲染 4 个 tab
//  - 非 phone 模式（matches:false）Tab Bar 不渲染
// 匹配由 matchMedia stub 驱动，jsdom 无布局。

const USER = { id: 'u1', name: '测试用户', role: 'user', session_id: 's1' };

function mq(phones) {
  return (q) => ({ matches: /max-width:\s*767px/.test(q) ? phones : false, media: q });
}

function mountLayout(routeName, phoneMode) {
  vi.stubGlobal('matchMedia', vi.fn((q) => ({ matches: /max-width:\s*767px/.test(q) ? phoneMode : false, media: q, addEventListener: () => {}, removeEventListener: () => {} })));
  const host = document.createElement('div');
  document.body.appendChild(host);
  const inst = mount(Layout, {
    target: host,
    props: { route: { name: routeName, params: {}, query: new URLSearchParams() } }
  });
  return { host, inst };
}

afterEach(() => vi.unstubAllGlobals());

describe('Layout bottom Tab Bar (mobile navigation redo)', () => {
  it('phone mode (≤767px): renders a bottom tab bar with 4 tabs and appends nav labels', async () => {
    const { host, inst } = mountLayout('projects', true);
    await new Promise((r) => setTimeout(r, 50));
    const bar = host.querySelector('[data-testid="mobile-tabbar"]');
    expect(bar, 'bottom tab bar must really render in phone mode').toBeTruthy();
    const tabs = [...bar.querySelectorAll('[data-tab]')].map(a => a.dataset.tab);
    expect(tabs).toEqual(['projects', 'datasets', 'runs', 'account']);
    // 图标 + 文字：每个 tab 有 svg 图标与文字标签
    for (const tab of bar.querySelectorAll('[data-tab]')) {
      expect(tab.querySelector('svg'), `${tab.dataset.tab} needs an icon svg`).toBeTruthy();
      expect((tab.textContent || '').trim().length).toBeGreaterThan(0);
    }
    // 选中态标记由 aria-current 承载（青绿强调色为其样式责任）
    expect(bar.querySelector('[data-tab="projects"][aria-current="page"]')).toBeTruthy();
    unmount(inst);
    host.remove();
  });

  it('selects the tab matching the current route (runs → runs)', async () => {
    const { host, inst } = mountLayout('runs', true);
    await new Promise((r) => setTimeout(r, 50));
    const bar = host.querySelector('[data-testid="mobile-tabbar"]');
    expect(bar.querySelector('[data-tab="runs"][aria-current="page"]')).toBeTruthy();
    expect(bar.querySelector('[data-tab="projects"][aria-current="page"]')).toBeNull();
    unmount(inst);
    host.remove();
  });

  it('non-phone mode: tab bar does not render', async () => {
    const { host, inst } = mountLayout('projects', false);
    await new Promise((r) => setTimeout(r, 50));
    expect(host.querySelector('[data-testid="mobile-tabbar"]')).toBeNull();
    unmount(inst);
    host.remove();
  });
});