/**
 * slides/16-dashboard-ui.js
 * ----------------------------------------------------------------------------
 * Slide 16 -- Dashboard UI: TanStack Start + Vite
 * UI structure + how it talks to backend.
 */
'use strict';

const { helpers, layouts } = require('../../design-system');

function buildDashboardUI(pres, theme) {
  const slide = pres.addSlide();
  helpers.slideBase(slide, pres, theme);
  helpers.addHeader(slide, pres, theme, {
    eyebrow: 'STAGE 4',
    sectionNumber: 4,
    title: 'Dashboard UI',
  });

  helpers.addCodeBlock(slide, pres, theme, {
    x: 0.5, y: layouts.CONTENT_TOP, w: 5.7, h: 3.5,
    language: 'bash',
    code: [
      '# apps/open-swe-ui/',
      '# TanStack Start + Vite + React 19',
      '',
      'src/routes/',
      '  __root.tsx',
      '  index.tsx           # thread list',
      '  thread.$id.tsx      # chat',
      '  settings.tsx',
      'src/components/',
      '  ChatMessage.tsx',
      '  DiffViewer.tsx',
      'src/lib/',
      '  client.ts           # OpenSWEClient',
    ].join('\n'),
    filePath: 'apps/open-swe-ui/tree.sh',
    startLine: 1,
  });

  helpers.addCallout(slide, pres, theme, {
    x: 6.4, y: layouts.CONTENT_TOP, w: 3.1, h: 1.5,
    kind: 'info',
    title: 'Только UI',
    text:
      'Dashboard -- presentation ' +
      'layer. Агентская логика в ' +
      'Python backend. UI через ' +
      'REST + SSE.',
  });

  helpers.addCallout(slide, pres, theme, {
    x: 6.4, y: 2.85, w: 3.1, h: 2.0,
    kind: 'success',
    title: 'Features',
    text:
      '* GitHub OAuth login\n' +
      '* thread list + filters\n' +
      '* chat with streaming\n' +
      '* diff viewer для PR\n' +
      '* per-user settings',
  });

  helpers.addPageNumber(slide, pres, theme, 16);
  helpers.addSourceLine(slide, pres, theme, {
    source: 'research/per-tech/openswe.md: 270-287',
  });
  return slide;
}

module.exports = { buildDashboardUI };