// Slide 27: Bridge to LangGraph -- what is next in this deck
// Content slide: closing summary + teaser for Section 2.

const ds = require('./design-system');

function createSlide(pres, theme) {
  const slide = pres.addSlide();
  ds.helpers.slideBase(slide, pres, theme);

  ds.helpers.addHeader(slide, pres, theme, {
    eyebrow: 'STAGE 1: CHAINS',
    section: 'Переход',
    title: 'Дальше: LangGraph -- явный control flow',
    sectionNumber: 1,
  });

  // Lead paragraph
  slide.addText(
    'LangChain 1.0 -- это "правильный путь по умолчанию" для большинства задач. ' +
    'Когда LCEL-pipeline перестает хватать (ветвления, циклы, человеческое ' +
    'одобрение, persistence) -- под капотом работает LangGraph. В следующей секции ' +
    'разберем его как самостоятельный runtime: граф, узлы, edges, checkpointer, ' +
    'human-in-the-loop как first-class концепции.',
    {
      x: 0.5, y: 1.55, w: 9.0, h: 1.1,
      fontFace: ds.helpers.withFallback(theme.fonts.ui),
      fontSize: 14,
      color: theme.palette.text.secondary,
      align: 'left', valign: 'top', margin: 0,
    }
  );

  // Three teaser cards
  const teasers = [
    {
      title: 'Граф вместо пайплайна',
      body: 'StateGraph, узлы (nodes), ребра (edges), условные переходы. ' +
            'Полный контроль над execution.',
    },
    {
      title: 'Persistence',
      body: 'Checkpointers, thread_id, time-travel. State между turn-ами ' +
            'хранится на диске.',
    },
    {
      title: 'Human-in-the-loop',
      body: 'interrupt_before / interrupt_after узлов. Апрув через Command. ' +
            'Не нужен middleware-хак.',
    },
  ];

  const cardW = 3.0;
  const cardH = 1.9;
  const gap = 0.15;
  const startX = 0.5;
  const cardY = 2.85;

  teasers.forEach((p, i) => {
    const x = startX + i * (cardW + gap);
    slide.addShape(pres.ShapeType.roundRect, {
      x: x, y: cardY, w: cardW, h: cardH,
      fill: { color: theme.palette.bg.elevated },
      line: { color: theme.palette.border.subtle, width: 1 },
      rectRadius: 0.1,
    });
    slide.addShape(pres.ShapeType.rect, {
      x: x, y: cardY, w: cardW, h: 0.08,
      fill: { color: theme.palette.accent.secondary },
      line: { type: 'none' },
    });
    slide.addText(p.title, {
      x: x + 0.2, y: cardY + 0.2, w: cardW - 0.4, h: 0.45,
      fontFace: ds.helpers.withFallback(theme.fonts.ui),
      fontSize: 15, bold: true,
      color: theme.palette.accent.secondary,
      valign: 'middle', margin: 0,
    });
    slide.addText(p.body, {
      x: x + 0.2, y: cardY + 0.7, w: cardW - 0.4, h: cardH - 0.85,
      fontFace: ds.helpers.withFallback(theme.fonts.ui),
      fontSize: 11,
      color: theme.palette.text.secondary,
      valign: 'top', margin: 0,
    });
  });

  // Bottom hint
  slide.addText('SECTION 2: LANGGRAPH  >>>', {
    x: 0.5, y: 5.0, w: 9.0, h: 0.3,
    fontFace: ds.helpers.withFallback(theme.fonts.ui),
    fontSize: 11, bold: true,
    color: theme.palette.accent.primary,
    align: 'center', valign: 'middle',
    charSpacing: 4, margin: 0,
  });

  ds.helpers.addSourceLine(slide, pres, theme, {
    source: 'docs.langchain.com/oss/python/langgraph/overview',
  });
  ds.helpers.addPageNumber(slide, pres, theme, 27);
}

module.exports = { createSlide };