import assert from 'node:assert/strict';
import { svelte } from '@sveltejs/vite-plugin-svelte';
import test from 'node:test';
import { createServer } from 'vite';

test('components render root, browse, upload, delete, resume, notice, and error states', async () => {
  const server = await createServer({
    appType: 'custom',
    configFile: false,
    plugins: [svelte()],
    server: { hmr: false, middlewareMode: true }
  });
  try {
    const { render } = await server.ssrLoadModule('svelte/server');
    const WorkspaceHeader = await component(server, 'WorkspaceHeader');
    const workspace = render(WorkspaceHeader, {
      props: { root: 'shared', busy: false, onselect: async () => {} }
    }).body;
    assert.match(workspace, /Shared files/);
    assert.match(workspace, /Shared root/);
    assert.match(workspace, /Personal/);

    const UploadPanel = await component(server, 'UploadPanel');
    assert.match(
      render(UploadPanel, {
        props: { busy: false, onfile: async () => {} }
      }).body,
      /Drop a file here/
    );

    const ObjectBrowser = await component(server, 'ObjectBrowser');
    const browser = render(ObjectBrowser, {
      props: {
        root: 'shared',
        entries: [
          { name: 'folder', is_prefix: true, size: null, path: 'folder' }
        ],
        continuation: 'next',
        partial: true,
        busy: false,
        query: 'fold',
        onquery: () => {},
        onbrowse: async () => {},
        onopen: async () => {},
        ondelete: async () => {}
      }
    }).body;
    assert.match(browser, /Search this root/);
    assert.match(browser, /Partial search results/);
    assert.match(browser, /folder\//);
    assert.match(browser, /Delete/);
    assert.match(browser, /Clear/);

    const ResumeDelete = await component(server, 'ResumeDelete');
    assert.match(
      render(ResumeDelete, {
        props: {
          pending: { root: 'personal', prefix: 'tree', items: [] },
          busy: false,
          onresume: async () => {}
        }
      }).body,
      /Resume deletion/
    );

    const Feedback = await component(server, 'Feedback');
    const feedback = render(Feedback, {
      props: {
        notice: 'Uploaded file.txt',
        error: 'Delete is pending',
        uploadPending: true,
        uploadFollowup: 'replay',
        deletePending: true,
        deleteFollowup: 'restart',
        onuploadretry: async () => {},
        ondeleteretry: async () => {}
      }
    }).body;
    assert.match(feedback, /Uploaded file\.txt/);
    assert.match(feedback, /Retry same upload/);
    assert.match(feedback, /Start new delete operation/);
  } finally {
    await server.close();
  }
});

async function component(server, name) {
  const loaded = await server.ssrLoadModule(`/src/components/${name}.svelte`);
  return loaded.default;
}