import { expect, fixture, html, waitUntil } from '@open-wc/testing';
import '../nile-app-shell/nile-app-shell';
import '../nile-side-bar/nile-side-bar';
import './nile-side-bar-header';
import '../nile-side-bar-footer/nile-side-bar-footer';
import type { NileAppShell } from '../nile-app-shell/nile-app-shell';
import type { NileSideBarHeader } from './nile-side-bar-header';
import type { NileSideBarFooter } from '../nile-side-bar-footer/nile-side-bar-footer';

const TRANSPARENT = 'rgba(0, 0, 0, 0)';
const SURFACE = 'rgb(1, 2, 3)';

/**
 * nile-app-shell owns the nav track's surface, so it forces the slotted
 * sidebar's own background off:
 *
 *   ::slotted([slot='side-nav']) {
 *     background: var(--nile-app-shell-side-nav-bg, transparent) !important;
 *   }
 *
 * That reaches the `nile-side-bar` only. The header and footer live one level
 * deeper — they are light-DOM children of the sidebar, slotted into ITS shadow
 * root — so the shell cannot see them, and their own surface color survives.
 * These tests pin that boundary down, because it is the whole reason
 * `background="transparent"` exists.
 */
async function shellWithSidebar(headerBg?: string, footerBg?: string) {
  const el = await fixture<NileAppShell>(html`
    <nile-app-shell style="width: 1400px; height: 600px; --nile-colors-neutral-100: ${SURFACE};">
      <nile-side-bar slot="side-nav">
        <nile-side-bar-header slot="header" background="${headerBg ?? 'default'}">
          <span slot="logo">Logo</span>
        </nile-side-bar-header>
        <nile-side-bar-footer slot="footer" background="${footerBg ?? 'default'}">
          <span>Help</span>
        </nile-side-bar-footer>
      </nile-side-bar>
      <span slot="top-bar">Title</span>
      <p>page</p>
    </nile-app-shell>
  `);
  await waitUntil(() => el.hasAttribute('has-side-nav'));

  const sidebar = el.querySelector('nile-side-bar') as HTMLElement;
  const header = el.querySelector('nile-side-bar-header') as NileSideBarHeader;
  const footer = el.querySelector('nile-side-bar-footer') as NileSideBarFooter;
  await header.updateComplete;
  await footer.updateComplete;
  return { el, sidebar, header, footer };
}

const bg = (el: HTMLElement) => getComputedStyle(el).backgroundColor;

describe('side-bar header/footer inside nile-app-shell', () => {
  it('1. the shell strips the sidebar\'s own background', async () => {
    const { sidebar } = await shellWithSidebar();
    expect(bg(sidebar)).to.equal(TRANSPARENT);
  });

  it('2. without the new property the header/footer keep painting a surface, which is the seam', async () => {
    const { header, footer } = await shellWithSidebar();
    expect(bg(header)).to.equal(SURFACE);
    expect(bg(footer)).to.equal(SURFACE);
  });

  it('3. background="transparent" closes the seam — nav track is one flat surface', async () => {
    const { sidebar, header, footer } = await shellWithSidebar('transparent', 'transparent');
    expect(bg(sidebar)).to.equal(TRANSPARENT);
    expect(bg(header)).to.equal(TRANSPARENT);
    expect(bg(footer)).to.equal(TRANSPARENT);
  });

  it('4. the shell\'s !important rule does not override the header/footer either way', async () => {
    const { header, footer } = await shellWithSidebar('default', 'transparent');
    expect(bg(header)).to.equal(SURFACE);
    expect(bg(footer)).to.equal(TRANSPARENT);
  });
});