// Templates empty-state for a brand-new Record.
//
// Surfaces a curated grid of starter templates ("GET STARTED WITH A TEMPLATE").
// Clicking a card opens a full-screen preview modal showing an *anonymized*
// version of the Cedar Narrows WST Project Overview dashboard — i.e. the template the
// real output was built from, with representative/sample data and a banner.
//
// The modal header carries a black "+ Add" button. Clicking it reveals a dashed
// upload zone (drop worksheets / docs / presentations) plus a secondary
// "Create empty" action:
//   • Upload  → simulate a file upload, close the modal, and trigger the same
//               agent dashboard-generation loader used elsewhere, ending on the
//               real Cedar Narrows dashboard.
//   • Create empty → insert the template (representative data) into the record
//               as an editable artifact, no AI fill.
//
// Self-contained: only depends on window globals (React, icons, ProxaP,
// EditableBlock, useOutput).

const { useState: useStateTpl, useEffect: useEffectTpl, useRef: useRefTpl } = React;

/* ===== Template catalogue (renamed for the tunnel / construction domain) ===== */
const TEMPLATE_CARDS = [
  { key: 'overview',  title: 'Project overview',          thumb: 'kpi'  },
  { key: 'safety',    title: 'Safety performance scorecard', thumb: 'area' },
  { key: 'monthly',   title: 'Monthly progress report',    thumb: 'bars' },
  { key: 'daily',     title: 'Daily field report',         thumb: 'grid' },
  { key: 'cost',      title: 'Cost & commercial summary',  thumb: 'waterfall' },
  { key: 'weekly',    title: 'Weekly status update',       thumb: 'kpi'  },
];

/* ===== Card thumbnail — a small abstract dashboard sketch =====
   Pure CSS/SVG; `variant` lightly changes the chart so the grid has rhythm. */
function TemplateThumb({ variant = 'kpi' }) {
  const sparkPts = '2,30 16,24 30,26 44,18 58,21 72,12 86,15 100,7 114,9 126,4';
  const areaPts = `${sparkPts} 126,38 2,38`;
  return (
    <div className="tpl-thumb" aria-hidden="true">
      <div className="tpl-thumb__bar tpl-thumb__bar--title"></div>
      <div className="tpl-thumb__kpis">
        <div className="tpl-thumb__kpi"><span className="tpl-thumb__num"></span><span className="tpl-thumb__cap"></span></div>
        <div className="tpl-thumb__kpi"><span className="tpl-thumb__num"></span><span className="tpl-thumb__cap"></span></div>
        <div className="tpl-thumb__kpi"><span className="tpl-thumb__num"></span><span className="tpl-thumb__cap"></span></div>
      </div>

      {(variant === 'area' || variant === 'kpi') && (
        <div className="tpl-thumb__chart">
          <svg viewBox="0 0 128 40" preserveAspectRatio="none">
            <polygon className="tpl-thumb__area" points={areaPts} />
            <polyline className="tpl-thumb__line" points={sparkPts} />
          </svg>
        </div>
      )}
      {variant === 'bars' && (
        <div className="tpl-thumb__bars">
          {[40, 64, 52, 78, 60, 88, 70].map((h, i) => (
            <span key={i} style={{ height: h + '%' }} className={i === 5 ? 'is-hi' : ''}></span>
          ))}
        </div>
      )}
      {variant === 'grid' && (
        <div className="tpl-thumb__grid">
          {Array.from({ length: 8 }).map((_, i) => <span key={i}></span>)}
        </div>
      )}
      {variant === 'waterfall' && (
        <div className="tpl-thumb__wf">
          <span style={{ height: '70%' }} className="is-pos"></span>
          <span style={{ height: '40%', marginTop: '18%' }} className="is-pos"></span>
          <span style={{ height: '34%', marginTop: '6%' }} className="is-neg"></span>
          <span style={{ height: '28%', marginTop: '12%' }} className="is-neg"></span>
          <span style={{ height: '58%' }} className="is-pos"></span>
        </div>
      )}

      <div className="tpl-thumb__rows">
        <div className="tpl-thumb__bar tpl-thumb__bar--row"></div>
        <div className="tpl-thumb__bar tpl-thumb__bar--row tpl-thumb__bar--short"></div>
      </div>
    </div>
  );
}

/* ===== Anonymized dashboard — the body of the preview modal =====
   Mirrors the structure of SectionOverview but with representative/sample data
   and bracketed placeholders for anything project-specific. Editable when
   rendered as an inserted record artifact (Create empty). */
function TplStatTile({ label, value, sub, tone }) {
  return (
    <div className={`stat-tile ${tone ? `stat-tile--${tone}` : ''}`}>
      <div className="stat-tile__label">{label}</div>
      <div className="stat-tile__value">{value}</div>
      {sub && <div className="stat-tile__sub">{sub}</div>}
    </div>
  );
}

function TplProgressBar({ value, total, label }) {
  const pct = total ? Math.round((value / total) * 100) : 0;
  return (
    <div className="pbar">
      <div className="pbar__row">
        <span className="pbar__label">{label}</span>
        <span className="pbar__count"><strong>{value}</strong> / {total} <span className="pbar__pct">· {pct}%</span></span>
      </div>
      <div className="pbar__track">
        <div className="pbar__fill" style={{ width: pct + '%' }} />
      </div>
    </div>
  );
}

function TemplateDashboard({ editable = false }) {
  // EB — conditionally wrap a block in EditableBlock (same idiom as the real
  // dashboard sections). When not editable, just render the defaults.
  const EB = ({ fields, render, className = '' }) => {
    const init = Object.fromEntries(fields.map((f) => [f.id, f.default]));
    if (!editable || typeof EditableBlock === 'undefined') return render(init);
    return (
      <EditableBlock fields={fields} initialValues={init} sources={{}} className={className}>
        {(v) => render(v)}
      </EditableBlock>
    );
  };

  const KPI_TILES = [
    { label: 'Lost-time incidents (period)', value: '0', sub: 'Goal · 0 · 0 YTD', tone: 'ok' },
    { label: 'Hours worked (period)', value: '18,500', sub: '760,000 hrs project to date' },
    { label: 'NLTI rate (period)', value: '0.00', sub: 'YTD · 12.0 · Goal 3.9', tone: 'warn' },
    { label: 'Environmental incidents', value: '1', sub: 'Period · 2 YTD · 40 PTD' },
  ];

  const WORKFRONTS = [
    { site: '[Site A]', t: '[Primary workfront]', s: 'Representative summary of the activity, crew and this period’s progress. Connect a worksheet to replace.', tag: 'On track' },
    { site: '[Site B]', t: '[Secondary workfront]', s: 'Representative summary of the activity, crew and this period’s progress. Connect a worksheet to replace.', tag: 'In progress' },
    { site: '[Off-site]', t: '[Fabrication / delivery]', s: 'Representative summary of the activity, crew and this period’s progress. Connect a worksheet to replace.', tag: 'In progress' },
  ];

  return (
    <section className="cs tpl-dash">
      {/* Header */}
      <EB
        className="editable--hero"
        fields={[
          { id: 'kicker', label: 'Kicker', kind: 'text', default: 'Live project dashboard · Template' },
          { id: 'title', label: 'Title', kind: 'text', default: '[Project name]' },
          { id: 'lede', label: 'Description', kind: 'textarea', rows: 4, default: 'Representative project overview. Synthesised from your monthly, weekly and daily reports — safety metrics, installation progress, active workfronts, manpower, and open commercial items — into a single live view. Connect your worksheets and documents to populate it with actuals.' },
          { id: 'chip1', label: 'Tag 1', kind: 'text', default: '[Partnership / JV]' },
          { id: 'chip2', label: 'Tag 2', kind: 'text', default: 'Forecast SC · [date]' },
          { id: 'chip3', label: 'Tag 3', kind: 'text', default: 'Day [n] of [n]' },
        ]}
        render={(v) => (
          <header className="cs__header">
            <div className="cs__kicker">{v.kicker}</div>
            <h2 className="cs__title">{v.title}</h2>
            <p className="cs__lede">{v.lede}</p>
            <div className="cs__chips">
              {v.chip1 && <span className="chip">{v.chip1}</span>}
              {v.chip2 && <span className="chip">{v.chip2}</span>}
              {v.chip3 && <span className="chip">{v.chip3}</span>}
            </div>
          </header>
        )}
      />

      {/* KPI strip */}
      <div className="cs__kpi-grid cs__kpi-grid--4">
        {KPI_TILES.map((k, i) => (
          <EB
            key={i}
            className="editable--tile"
            fields={[
              { id: 'label', label: 'Label', kind: 'text', default: k.label },
              { id: 'value', label: 'Value', kind: 'text', default: k.value },
              { id: 'sub', label: 'Caption', kind: 'text', default: k.sub },
            ]}
            render={(v) => <TplStatTile label={v.label} value={v.value} sub={v.sub} tone={k.tone} />}
          />
        ))}
      </div>

      {/* Status callout */}
      <EB
        fields={[
          { id: 'title', label: 'Title', kind: 'text', default: 'Where the project stands — [period]' },
          { id: 'body', label: 'Body', kind: 'textarea', rows: 4, default: 'A short representative narrative of the current status: which workfronts are active, what shipped or completed this period, and what is on the critical path. This text is pulled from your latest weekly report once connected.' },
        ]}
        render={(v) => (
          <div className="cs__callout cs__callout--muted">
            <div className="cs__callout-ico"><IconInfo size={18} /></div>
            <div className="cs__callout-body">
              <h4 className="cs__callout-title">{v.title}</h4>
              <p className="cs__p">{v.body}</p>
            </div>
          </div>
        )}
      />

      {/* Two-column: progress + manpower */}
      <div className="cs__split-2">
        <EB
          fields={[
            { id: 'title', label: 'Title', kind: 'text', default: '[Primary deliverable] — installation progress' },
            { id: 'sub', label: 'Subtitle', kind: 'text', default: 'From daily field reports' },
            { id: 'total', label: 'Total units', kind: 'text', default: '200' },
            { id: 'v1', label: 'Delivered', kind: 'text', default: '200' },
            { id: 'v2', label: 'Staged', kind: 'text', default: '200' },
            { id: 'v3', label: 'Installed', kind: 'text', default: '180' },
            { id: 'v4', label: 'Capped', kind: 'text', default: '160' },
            { id: 'v5', label: 'QC accepted', kind: 'text', default: '140' },
          ]}
          render={(v) => {
            const T = parseInt(v.total, 10) || 200;
            const n = (s) => parseInt(s, 10) || 0;
            return (
              <div className="dash-card">
                <div className="dash-card__head">
                  <div className="dash-card__title">{v.title}</div>
                  <div className="dash-card__sub">{v.sub}</div>
                </div>
                <div className="dash-card__body">
                  <TplProgressBar value={n(v.v1)} total={T} label="Delivered" />
                  <TplProgressBar value={n(v.v2)} total={T} label="Staged" />
                  <TplProgressBar value={n(v.v3)} total={T} label="Installed" />
                  <TplProgressBar value={n(v.v4)} total={T} label="Capped" />
                  <TplProgressBar value={n(v.v5)} total={T} label="QC accepted" />
                </div>
              </div>
            );
          }}
        />

        <EB
          fields={[
            { id: 'title', label: 'Title', kind: 'text', default: 'Manpower on site (period)' },
            { id: 'sub', label: 'Subtitle', kind: 'text', default: 'Indirect [n] · Staff [n] · Direct craft [n]' },
            { id: 'r1l', label: 'Row 1', kind: 'text', default: 'Laborers' },
            { id: 'r1v', label: 'Row 1 count', kind: 'text', default: '25' },
            { id: 'r2l', label: 'Row 2', kind: 'text', default: 'Operators' },
            { id: 'r2v', label: 'Row 2 count', kind: 'text', default: '4' },
            { id: 'r3l', label: 'Row 3', kind: 'text', default: 'Electricians' },
            { id: 'r3v', label: 'Row 3 count', kind: 'text', default: '2' },
            { id: 'r4l', label: 'Row 4', kind: 'text', default: 'Welders / Mechanics' },
            { id: 'r4v', label: 'Row 4 count', kind: 'text', default: '3' },
            { id: 'r5l', label: 'Row 5', kind: 'text', default: '[Subcontractor A]' },
            { id: 'r5v', label: 'Row 5 count', kind: 'text', default: '4' },
            { id: 'r6l', label: 'Row 6', kind: 'text', default: '[Subcontractor B]' },
            { id: 'r6v', label: 'Row 6 count', kind: 'text', default: '4' },
          ]}
          render={(v) => {
            const rows = [1, 2, 3, 4, 5, 6].map((i) => ({ l: v[`r${i}l`], v: parseInt(v[`r${i}v`], 10) || 0 }));
            return (
              <div className="dash-card">
                <div className="dash-card__head">
                  <div className="dash-card__title">{v.title}</div>
                  <div className="dash-card__sub">{v.sub}</div>
                </div>
                <div className="dash-card__body dash-card__body--rows">
                  {rows.map((r, i) => (
                    <div key={i} className="mp-row">
                      <span className="mp-row__label">{r.l}</span>
                      <span className="mp-row__bar"><span className="mp-row__fill" style={{ width: Math.min(100, r.v * 3) + '%' }} /></span>
                      <span className="mp-row__v">{r.v}</span>
                    </div>
                  ))}
                </div>
              </div>
            );
          }}
        />
      </div>

      {/* Active workfronts */}
      <div className="dash-card dash-card--workfronts">
        <div className="dash-card__head">
          <div className="dash-card__title">Active workfronts — this period</div>
          <div className="dash-card__sub">From your latest weekly report</div>
        </div>
        <div className="wf-grid">
          {WORKFRONTS.map((w, i) => (
            <EB
              key={i}
              className="editable--wf"
              fields={[
                { id: 'site', label: 'Site', kind: 'text', default: w.site },
                { id: 'tag', label: 'Status tag', kind: 'text', default: w.tag },
                { id: 't', label: 'Title', kind: 'text', default: w.t },
                { id: 's', label: 'Summary', kind: 'textarea', rows: 4, default: w.s },
              ]}
              render={(v) => (
                <div className="wf-card">
                  <div className="wf-card__head">
                    <span className="wf-card__site">{v.site}</span>
                    <span className={`wf-card__tag ${v.tag === 'On track' ? 'is-ok' : 'is-active'}`}>{v.tag}</span>
                  </div>
                  <div className="wf-card__t">{v.t}</div>
                  <div className="wf-card__s">{v.s}</div>
                </div>
              )}
            />
          ))}
        </div>
      </div>

      {/* Commercial + recent reports */}
      <div className="cs__split-2">
        <div className="dash-card">
          <div className="dash-card__head">
            <div className="dash-card__title">Open commercial items</div>
            <div className="dash-card__sub">Representative · connect your register</div>
          </div>
          <ul className="risk-list">
            {[
              { id: 'PCO-00X', t: '[Change description] — under review', s: 'Disputed' },
              { id: 'PCO-00Y', t: '[Change description] — negotiation', s: 'Disputed' },
              { id: 'CO-0XX', t: '[Approved change order]', s: 'Executed' },
              { id: 'CO-0YY', t: '[Approved change order]', s: 'Executed' },
            ].map((it, i) => (
              <li key={i}>
                <span className="risk-list__id">{it.id}</span>
                <span className="risk-list__t">{it.t}</span>
                <span className={`risk-list__tag risk-list__tag--${it.s === 'Executed' ? 'ok' : 'warn'}`}>{it.s}</span>
              </li>
            ))}
          </ul>
        </div>

        <div className="dash-card">
          <div className="dash-card__head">
            <div className="dash-card__title">Latest reports</div>
            <div className="dash-card__sub">Most recent across the collection</div>
          </div>
          <ul className="recent-list">
            <li>
              <span className="recent-list__pill recent-list__pill--m">Monthly</span>
              <div className="recent-list__body"><div className="recent-list__t">Monthly Report No. [n]</div><div className="recent-list__s">[Month] [Year] · Issued [date]</div></div>
            </li>
            <li>
              <span className="recent-list__pill recent-list__pill--w">Weekly</span>
              <div className="recent-list__body"><div className="recent-list__t">Weekly Report No. [n]</div><div className="recent-list__s">Week ending [date]</div></div>
            </li>
            <li>
              <span className="recent-list__pill recent-list__pill--d">Daily</span>
              <div className="recent-list__body"><div className="recent-list__t">Shift Report [n] — [site]</div><div className="recent-list__s">[date] · Day &amp; Night shift</div></div>
            </li>
            <li>
              <span className="recent-list__pill recent-list__pill--d">Daily</span>
              <div className="recent-list__body"><div className="recent-list__t">Shift Report [n] — [site]</div><div className="recent-list__s">[date] · Day shift</div></div>
            </li>
          </ul>
        </div>
      </div>
    </section>
  );
}

/* ===== Preview modal ===== */
const TPL_UPLOAD_FILES = [
  { name: 'AWST_Weekly Report_220.pdf', kind: 'doc' },
  { name: 'Cost-Tracker-March-2026.xlsx', kind: 'sheet' },
  { name: 'Manpower_Week_220.xlsx', kind: 'sheet' },
  { name: 'GP-Meeting-14-Deck.pptx', kind: 'slide' },
];

function TplFileIcon({ kind }) {
  if (kind === 'sheet') {
    return <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 10h18M3 15h18M9 4v16M15 4v16"/></svg>;
  }
  if (kind === 'slide') {
    return <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="4" width="18" height="13" rx="1.5"/><path d="M9 21h6M12 17v4"/></svg>;
  }
  return <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6M8 13h8M8 17h5"/></svg>;
}

function TemplatePreviewModal({ template, onClose, onGenerate, onCreateEmpty }) {
  // phase: 'preview' | 'add' (dropzone shown) | 'uploading'
  const [phase, setPhase] = useStateTpl('preview');
  const scrollRef = useRefTpl(null);

  useEffectTpl(() => {
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    return () => { document.body.style.overflow = prev; document.removeEventListener('keydown', onKey); };
  }, []);

  // Show the dashed upload zone.
  const startAdd = () => {
    setPhase('add');
    // Scroll the body up so the upload zone is in view.
    if (scrollRef.current) scrollRef.current.scrollTo({ top: 0, behavior: 'smooth' });
  };

  // Simulate a file upload, then hand off to the agent generation flow.
  const handleUpload = () => {
    if (phase === 'uploading') return;
    setPhase('uploading');
    window.setTimeout(() => {
      onGenerate();          // parent closes the modal + starts the loader
    }, 1150);
  };

  return (
    <div className="tpl-modal" role="dialog" aria-modal="true" aria-label={`${template.title} template preview`}>
      <div className="tpl-modal__scrim" onClick={onClose}></div>
      <div className="tpl-modal__panel">
        {/* Sticky header */}
        <header className="tpl-modal__head">
          <div className="tpl-modal__head-l">
            <span className="tpl-modal__mark" aria-hidden="true"><IconRecordCard size={18} /></span>
            <div className="tpl-modal__titles">
              <div className="tpl-modal__kicker">Template</div>
              <div className="tpl-modal__title">{template.title}</div>
            </div>
          </div>
          <div className="tpl-modal__head-r">
            <button type="button" className="tpl-add-btn" onClick={startAdd}>
              <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 5v14M5 12h14"/></svg>
              Add
            </button>
            <button type="button" className="iconbtn tpl-modal__close" onClick={onClose} aria-label="Close">
              <IconX size={16} />
            </button>
          </div>
        </header>

        {/* Representative-data banner */}

        {/* Body */}
        <div className="tpl-modal__body" ref={scrollRef}>
          {phase !== 'preview' && (
            <div className="tpl-drop-wrap">
              {phase === 'add' && (
                <button type="button" className="tpl-drop" onClick={handleUpload}>
                  <span className="tpl-drop__ico" aria-hidden="true">
                    <svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M12 16V4M7 9l5-5 5 5"/><path d="M5 16v2a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-2"/></svg>
                  </span>
                  <span className="tpl-drop__t">Drop your data to fill this template</span>
                  <span className="tpl-drop__s">Worksheets, documents and presentations. The agent extracts the data and populates every section.</span>
                  <span className="tpl-drop__browse">Browse files</span>
                </button>
              )}
              {phase === 'uploading' && (
                <div className="tpl-drop tpl-drop--uploading" aria-live="polite">
                  <div className="tpl-drop__title-row">
                    <ProxaP size={15} color="currentColor" />
                    <span>Uploading {TPL_UPLOAD_FILES.length} files…</span>
                  </div>
                  <ul className="tpl-drop__files">
                    {TPL_UPLOAD_FILES.map((f, i) => (
                      <li key={f.name} className="tpl-drop__file" style={{ animationDelay: `${i * 90}ms` }}>
                        <span className="tpl-drop__file-ico"><TplFileIcon kind={f.kind} /></span>
                        <span className="tpl-drop__file-name">{f.name}</span>
                        <span className="tpl-drop__file-spin" aria-hidden="true"></span>
                      </li>
                    ))}
                  </ul>
                </div>
              )}
              {phase === 'add' && (
                <div className="tpl-drop-foot">
                  <span className="tpl-drop-foot__or">or</span>
                  <button type="button" className="tpl-create-empty" onClick={() => onCreateEmpty(template)}>
                    Create empty
                  </button>
                  <span className="tpl-drop-foot__hint">Insert the template as-is and edit it yourself.</span>
                </div>
              )}
            </div>
          )}

          <div className={`tpl-modal__doc ${phase !== 'preview' ? 'is-dimmed' : ''}`}>
            <TemplateDashboard editable={false} />
          </div>
        </div>
      </div>
    </div>
  );
}

/* ===== Templates empty state ===== */
function EmptyVariantTemplates({ onOpenAgentChat }) {
  const ctx = (typeof useOutput === 'function') ? useOutput() : null;
  const [active, setActive] = useStateTpl(null); // selected template card

  const handleGenerate = () => {
    setActive(null);
    if (ctx && ctx.onTemplateGenerate) ctx.onTemplateGenerate();
  };
  const handleCreateEmpty = (tpl) => {
    setActive(null);
    if (ctx && ctx.onTemplateCreateEmpty) ctx.onTemplateCreateEmpty(tpl);
  };
  const handleAgent = (e) => {
    if (e) e.preventDefault();
    if (onOpenAgentChat) onOpenAgentChat();
  };

  return (
    <section className="rec-empty rec-empty--templates" aria-label="New record — get started with a template">
      <div className="rec-empty__inner rec-empty__inner--wide">
        <div className="rec-empty__getstart">Get started with a template</div>

        <div className="tpl-grid" role="list">
          {TEMPLATE_CARDS.map((tpl) => (
            <button
              key={tpl.key}
              type="button"
              role="listitem"
              className="tpl-card"
              onClick={() => setActive(tpl)}>
              <span className="tpl-card__preview"><TemplateThumb variant={tpl.thumb} /></span>
              <span className="tpl-card__title">{tpl.title}</span>
            </button>
          ))}
        </div>

        <button
          type="button"
          className="tpl-explore"
          onClick={(e) => e.preventDefault()}>
          Explore more
        </button>

        <div className="tpl-or"><span>or</span></div>

        <button type="button" className="rec-empty__card rec-empty__card--ai tpl-agent-card" onClick={handleAgent}>
          <span className="rec-empty__card-ico" aria-hidden="true"><ProxaP size={18} color="currentColor" /></span>
          <span className="rec-empty__card-body">
            <span className="rec-empty__card-title">Create custom with Agent</span>
            <span className="rec-empty__card-desc">Upload your spreadsheet, doc or ppt and create a mobile-friendly artifact based on them.</span>
          </span>
          <span className="rec-empty__card-arrow" aria-hidden="true">
            <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M3.33 8h9.34M12.67 8 8 3.33M12.67 8 8 12.67"/></svg>
          </span>
        </button>
      </div>

      {active && (
        <TemplatePreviewModal
          template={active}
          onClose={() => setActive(null)}
          onGenerate={handleGenerate}
          onCreateEmpty={handleCreateEmpty} />
      )}
    </section>
  );
}

Object.assign(window, { EmptyVariantTemplates, TemplateDashboard, TEMPLATE_CARDS, TemplateThumb });