import { expect } from "e2e";
import { test, WEB } from "./t3.ts";

test("Prompt Stash stays above a multiline draft with a bottom terminal", WEB, async ({t3, app, screen, browser}) => {
  await browser.setViewport({width:1366,height:768});
  const project = await t3.project("prompt-stash-demo");
  await t3.thread({project,title:"Prompt Stash layout",messages:["Ready"]});
  await t3.open();
  await screen.getByRole("button", "Prompt Stash layout, Done, prompt-stash-demo").tap();
  await screen.getByRole("textbox").fill("Draft line 1");
  await browser.evaluate(String.raw`async () => {
    const {usePromptStashStore} = await import('/src/promptStashStore.ts');
    const {useComposerDraftStore} = await import('/src/composerDraftStore.ts');
    const {useTerminalUiStateStore} = await import('/src/terminalUiStateStore.ts');
    const parts = location.pathname.split('/').filter(Boolean);
    const ref = {environmentId: parts[0],threadId: decodeURIComponent(parts[1])};
    for(let i=0;i<20;i++) usePromptStashStore.getState().stashEntry({id:'entry-'+i,createdAt:'2026-10-01T00:00:00.000Z',prompt:'Saved prompt '+i+': investigate the UI layout',attachments:[],droppedImageNames:[]});
    useComposerDraftStore.getState().setPrompt(ref,Array.from({length:10},(_,i)=>'Draft line '+(i+1)+': preserve these instructions while choosing a stashed prompt.').join('\n'));
    useTerminalUiStateStore.getState().setTerminalHeight(ref,320);
    useTerminalUiStateStore.getState().setTerminalOpen(ref,true);
  }`);
  await screen.getByRole('button','Stashed prompts: 20. Open stash.').tap();
  await app.screenshot('stash-1366x768');
  const geometry = await browser.evaluate(() => {
    const layer = document.querySelector('[data-composer-drawer-layer]')!.getBoundingClientRect();
    const stash = document.querySelector('[data-composer-stash-drawer]')!.getBoundingClientRect();
    const editor = document.querySelector('[data-testid="composer-editor"]')!.getBoundingClientRect();
    const terminal = document.querySelector('[data-thread-terminal-drawer]')!.getBoundingClientRect();
    const hit = document.elementFromPoint((editor.left+editor.right)/2,editor.top+24);
    return {spill:stash.bottom-layer.bottom,editorCovered:Math.max(0,Math.min(stash.bottom,editor.bottom)-Math.max(stash.top,editor.top)),pointerHitsStash:!!hit?.closest('[data-composer-stash-drawer]'),terminalHeight:terminal.height};
  });
  console.log('LAYOUT',JSON.stringify(geometry));
  await browser.evaluate(() => {
    const scroll = document.querySelector('[data-composer-stash-drawer] [data-slot="scroll-area-viewport"]')!;
    scroll.scrollTop = scroll.scrollHeight;
  });
  await app.screenshot('stash-scrolled-1366x768');
  await screen.getByRole('button','Restore stashed prompt: Saved prompt 0: investigate the UI layout').tap();
  await app.screenshot('restored-1366x768');
  const restored = await browser.evaluate(() => document.querySelector('[data-testid="composer-editor"]')!.textContent ?? '');
  console.log('RESTORED', restored);
  await browser.setViewport({width:1920,height:1080});
  await screen.getByRole('button','Stashed prompts: 19. Open stash.').tap();
  await app.screenshot('stash-1920x1080');
  const desktopSpill = await browser.evaluate(() => document.querySelector('[data-composer-stash-drawer]')!.getBoundingClientRect().bottom - document.querySelector('[data-composer-drawer-layer]')!.getBoundingClientRect().bottom);
  console.log('DESKTOP_SPILL',desktopSpill);
  expect(geometry.spill).toBeLessThanOrEqual(1);
  expect(geometry.editorCovered).toBeLessThanOrEqual(5);
  expect(geometry.pointerHitsStash).toBe(false);
});