const escapeHtml = (value) =>
  value
    .replaceAll('&', '&amp;')
    .replaceAll('<', '&lt;')
    .replaceAll('>', '&gt;')
    .replaceAll('"', '&quot;')
    .replaceAll("'", '&#39;');

export const SLIDE_DECK_PROGRAM = `(()=>{const root=document.querySelector('[data-sb-slide-deck="v1"]');if(!root)return;const stage=root.querySelector('[data-deck-stage]'),slides=[...root.querySelectorAll('[data-deck-slide]')],previous=root.querySelector('[data-deck-previous]'),next=root.querySelector('[data-deck-next]'),current=root.querySelector('[data-deck-current]'),bar=root.querySelector('[data-deck-progress]');if(!stage||slides.length===0||!previous||!next||!current||!bar)return;let index=0;const show=value=>{index=Math.max(0,Math.min(slides.length-1,value));slides.forEach((slide,slideIndex)=>{const active=slideIndex===index;slide.hidden=!active;slide.setAttribute('aria-hidden',String(!active));if(active)slide.removeAttribute('inert');else slide.setAttribute('inert','')});previous.disabled=index===0;next.disabled=index===slides.length-1;current.textContent=(index+1)+' / '+slides.length;bar.setAttribute('aria-valuenow',String(index+1));bar.style.setProperty('--sb-deck-progress',((index+1)/slides.length*100)+'%');const activeSlide=slides[index],pageId=activeSlide&&activeSlide.getAttribute('data-deck-slide');if(pageId&&window.SceneBoardArtifact&&window.SceneBoardArtifact.changePresentationPage)window.SceneBoardArtifact.changePresentationPage({pageId,pageIndex:index,pageCount:slides.length})};previous.addEventListener('click',()=>show(index-1));next.addEventListener('click',()=>show(index+1));root.addEventListener('keydown',event=>{if(event.key==='ArrowLeft'||event.key==='PageUp'){event.preventDefault();show(index-1)}else if(event.key==='ArrowRight'||event.key==='PageDown'||event.key===' '){event.preventDefault();show(index+1)}else if(event.key==='Home'){event.preventDefault();show(0)}else if(event.key==='End'){event.preventDefault();show(slides.length-1)}});const resize=()=>{const scale=Math.min(Math.max(1,root.clientWidth)/1920,Math.max(1,root.clientHeight)/1080);stage.style.transform='scale('+scale+')'};resize();show(0);root.focus({preventScroll:true});if(window.SceneBoardArtifact&&window.SceneBoardArtifact.requestResize)window.SceneBoardArtifact.requestResize(1920,1080);if(typeof ResizeObserver==='function')new ResizeObserver(resize).observe(root);else if(typeof requestAnimationFrame==='function')requestAnimationFrame(resize)})()`;

const SLIDE_DECK_CSS = `.sb-deck-shell{position:relative;box-sizing:border-box;width:100vw;height:100vh;min-width:1px;min-height:1px;overflow:hidden;background:#07131d;color:#f8fafc;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.sb-deck-shell *{box-sizing:border-box}.sb-deck-stage{position:absolute;top:50%;left:50%;width:1920px;height:1080px;margin:-540px 0 0 -960px;overflow:hidden;transform:scale(.5);transform-origin:center;background:radial-gradient(circle at 85% 12%,#1b756f55,transparent 30%),linear-gradient(145deg,#07131d 0%,#0b1d27 58%,#102e36 100%)}.sb-deck-stage:before,.sb-deck-stage:after{position:absolute;border-radius:999px;content:"";pointer-events:none}.sb-deck-stage:before{right:-180px;top:-270px;width:700px;height:700px;border:1px solid #58e0c233;box-shadow:0 0 0 80px #58e0c20a,0 0 0 160px #58e0c208}.sb-deck-stage:after{left:-160px;bottom:-260px;width:620px;height:620px;background:radial-gradient(circle,#34d39924,transparent 68%)}.sb-deck-top{position:absolute;z-index:5;top:48px;left:76px;right:76px;display:flex;justify-content:space-between;color:#a7f3d0;font-size:20px;font-weight:750;letter-spacing:.08em;text-transform:uppercase}.sb-deck-page{color:#d9faf1;font-variant-numeric:tabular-nums}.sb-deck-slides{position:absolute;z-index:2;inset:0}.sb-slide{position:absolute;inset:0;padding:132px 110px 150px;display:flex;flex-direction:column;justify-content:center}.sb-slide[hidden]{display:none}.sb-slide-eyebrow{margin:0 0 24px;color:#5eead4;font-size:24px;font-weight:850;letter-spacing:.12em;text-transform:uppercase}.sb-slide h1{max-width:1540px;margin:0;color:#fff;font-size:64px;line-height:1.08;letter-spacing:-.045em;text-wrap:balance}.sb-slide-subtitle{max-width:1420px;margin:28px 0 0;color:#cbd5e1;font-size:28px;line-height:1.45;text-wrap:balance}.sb-deck-grid{display:grid;gap:24px;margin-top:54px}.sb-deck-card{position:relative;min-width:0;border:1px solid #7dd3c72e;border-radius:28px;background:linear-gradient(145deg,#ffffff12,#ffffff08);padding:30px 32px;box-shadow:0 18px 54px #0004}.sb-deck-card h2{margin:0;color:#f8fafc;font-size:30px;line-height:1.2;letter-spacing:-.025em}.sb-deck-card p{margin:15px 0 0;color:#cbd5e1;font-size:21px;line-height:1.42}.sb-deck-badges{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}.sb-deck-badge{padding:10px 18px;border:1px solid #5eead4aa;border-radius:999px;background:#0f766e42;color:#ccfbf1;font-size:20px;font-weight:800}.sb-cover{justify-content:flex-start;padding-top:185px}.sb-cover h1{max-width:1450px;font-size:82px}.sb-cover .sb-slide-subtitle{max-width:1280px;font-size:32px}.sb-cover .sb-deck-grid{grid-template-columns:repeat(3,1fr);margin-top:64px}.sb-cover .sb-deck-card{border-top:4px solid #5eead4}.sb-problem .sb-deck-grid{grid-template-columns:repeat(2,1fr)}.sb-problem .sb-deck-card:before{display:grid;place-items:center;width:42px;height:42px;margin-bottom:20px;border-radius:13px;background:#fb718522;color:#fda4af;font-size:24px;font-weight:900;content:"!"}.sb-process .sb-deck-grid{grid-template-columns:repeat(3,1fr);counter-reset:step}.sb-process .sb-deck-card{padding-top:78px;counter-increment:step}.sb-process .sb-deck-card:before{position:absolute;top:24px;left:30px;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#5eead4;color:#063b3b;font-size:20px;font-weight:900;content:counter(step)}.sb-process .sb-deck-card:not(:last-child):after{position:absolute;z-index:4;top:43px;right:-25px;width:48px;height:2px;background:linear-gradient(90deg,#5eead4,#5eead422);content:""}.sb-business-model .sb-deck-grid{grid-template-columns:repeat(2,1fr);max-width:1520px}.sb-offer-feature{display:flex;gap:12px;margin-top:14px;color:#dbeafe;font-size:20px}.sb-offer-feature:before{color:#5eead4;font-weight:900;content:"✓"}.sb-offer-price{display:block;margin:20px 0 8px;color:#5eead4;font-size:48px;font-weight:900;letter-spacing:-.04em}.sb-metrics .sb-deck-grid,.sb-evidence .sb-deck-grid{grid-template-columns:repeat(3,1fr)}.sb-metric-value{display:block;margin-bottom:18px;color:#5eead4;font-size:58px;font-weight:900;line-height:1;letter-spacing:-.05em}.sb-evidence .sb-deck-card{border-left:5px solid #fbbf24}.sb-timeline .sb-deck-grid{position:relative;grid-template-columns:repeat(4,1fr);gap:20px}.sb-timeline .sb-deck-grid:before{position:absolute;top:36px;left:5%;right:5%;height:3px;background:linear-gradient(90deg,#5eead4,#60a5fa,#fbbf24);content:""}.sb-timeline .sb-deck-card{padding-top:82px;background:#0b1e29e8}.sb-timeline .sb-deck-card:before{position:absolute;z-index:1;top:24px;left:30px;width:24px;height:24px;border:7px solid #07131d;border-radius:50%;background:#5eead4;box-shadow:0 0 0 3px #5eead4;content:""}.sb-timeline time{color:#fbbf24;font-size:19px;font-weight:850}.sb-closing{align-items:flex-start}.sb-closing h1{max-width:1500px;font-size:74px}.sb-closing .sb-deck-grid{grid-template-columns:repeat(3,1fr);width:100%}.sb-closing-line{max-width:1500px;margin:46px 0 0;padding-left:26px;border-left:6px solid #5eead4;color:#a7f3d0;font-size:34px;font-weight:800;line-height:1.35}.sb-deck-controls{position:absolute;z-index:8;right:76px;bottom:48px;display:flex;gap:14px}.sb-deck-button{display:grid;place-items:center;width:60px;height:52px;border:1px solid #94a3b85c;border-radius:16px;background:#ffffff10;color:#f8fafc;font-size:28px;font-weight:800;cursor:pointer}.sb-deck-button:hover:not(:disabled){border-color:#5eead4;background:#5eead422}.sb-deck-button:focus-visible,.sb-deck-shell:focus-visible{outline:4px solid #fbbf24;outline-offset:4px}.sb-deck-button:disabled{cursor:not-allowed;opacity:.32}.sb-deck-progress{position:absolute;z-index:8;right:230px;bottom:70px;width:360px;height:5px;overflow:hidden;border-radius:99px;background:#ffffff1f}.sb-deck-progress:after{display:block;width:var(--sb-deck-progress,0%);height:100%;border-radius:inherit;background:linear-gradient(90deg,#5eead4,#60a5fa);transition:width 260ms ease;content:""}.sb-deck-help{position:absolute;z-index:8;left:76px;bottom:56px;color:#94a3b8;font-size:18px}.sb-deck-shell[data-motion="subtle"] .sb-slide:not([hidden]),.sb-deck-shell[data-motion="staged"] .sb-slide:not([hidden]),.sb-deck-shell[data-motion="focus"] .sb-slide:not([hidden]){animation:sb-deck-enter 340ms ease-out}.sb-deck-shell[data-motion="focus"] .sb-slide:not([hidden]){animation-duration:560ms}@keyframes sb-deck-enter{from{opacity:.4;transform:translateY(18px)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){.sb-deck-shell *{scroll-behavior:auto!important;animation:none!important;transition:none!important}}`;

export const renderSlideDeck = (recipe) => {
  const h = escapeHtml;
  const card = (label, detail, extra = '') =>
    `<article class="sb-deck-card">${extra}<h2>${h(label)}</h2><p>${h(detail)}</p></article>`;
  const renderSlide = (slide, index) => {
    const titleId = `sb-slide-title-${index + 1}`;
    let body;
    if (slide.type === 'cover')
      body = `<div class="sb-deck-badges">${slide.badges.map((badge) => `<span class="sb-deck-badge">${h(badge)}</span>`).join('')}</div><div class="sb-deck-grid">${slide.highlights.map((item) => card(item.label, item.detail)).join('')}</div>`;
    else if (slide.type === 'problem')
      body = `<div class="sb-deck-grid">${slide.items.map((item) => card(item.label, item.detail)).join('')}</div>`;
    else if (slide.type === 'process')
      body = `<div class="sb-deck-grid">${slide.steps.map((item) => card(item.label, item.detail)).join('')}</div>`;
    else if (slide.type === 'business-model')
      body = `<div class="sb-deck-grid">${slide.offers.map((offer) => `<article class="sb-deck-card"><h2>${h(offer.label)}</h2><strong class="sb-offer-price">${h(offer.price)}</strong><p>${h(offer.detail)}</p>${offer.features.map((feature) => `<div class="sb-offer-feature">${h(feature)}</div>`).join('')}</article>`).join('')}</div>`;
    else if (slide.type === 'metrics' || slide.type === 'evidence')
      body = `<div class="sb-deck-grid">${slide.metrics.map((metric) => card(metric.label, metric.detail, `<strong class="sb-metric-value">${h(metric.value)}</strong>`)).join('')}</div>`;
    else if (slide.type === 'timeline')
      body = `<div class="sb-deck-grid">${slide.events.map((event) => card(event.label, event.detail, `<time>${h(event.date)}</time>`)).join('')}</div>`;
    else
      body = `<div class="sb-deck-grid">${slide.actions.map((item) => card(item.label, item.detail)).join('')}</div><p class="sb-closing-line">${h(slide.closingLine)}</p>`;
    return `<article class="sb-slide sb-${h(slide.type)}" data-deck-slide="${h(slide.key)}" role="group" aria-roledescription="slide" aria-labelledby="${titleId}"${index === 0 ? ' aria-hidden="false"' : ' hidden aria-hidden="true" inert'}>${slide.eyebrow === null ? '' : `<p class="sb-slide-eyebrow">${h(slide.eyebrow)}</p>`}<h1 id="${titleId}">${h(slide.title)}</h1>${slide.subtitle === null ? '' : `<p class="sb-slide-subtitle">${h(slide.subtitle)}</p>`}${body}</article>`;
  };
  return {
    artifactId: null,
    html: `<main class="sb-deck-shell" data-sb-slide-deck="v1" data-motion="${h(recipe.motion)}" aria-label="${h(recipe.content.deckLabel)}" tabindex="0"><div class="sb-deck-stage" data-deck-stage><header class="sb-deck-top"><span>${h(recipe.content.deckLabel)}</span><span class="sb-deck-page" data-deck-current aria-live="polite">1 / ${recipe.content.slides.length}</span></header><section class="sb-deck-slides" aria-label="${h(recipe.content.deckLabel)} slides">${recipe.content.slides.map(renderSlide).join('')}</section><div class="sb-deck-progress" data-deck-progress role="progressbar" aria-label="Slide progress" aria-valuemin="1" aria-valuemax="${recipe.content.slides.length}" aria-valuenow="1"></div><p class="sb-deck-help">← → 키 또는 버튼으로 이동</p><nav class="sb-deck-controls" aria-label="Slide navigation"><button class="sb-deck-button" type="button" data-deck-previous aria-label="Previous slide" disabled>←</button><button class="sb-deck-button" type="button" data-deck-next aria-label="Next slide">→</button></nav></div></main>`,
    css: SLIDE_DECK_CSS,
    javascript: SLIDE_DECK_PROGRAM,
    requestedCapabilities: [],
  };
};
