/* eslint-disable */
// Autom8 — animated dashboard showcase (Screen Studio style)
// Replicates ui_kits/dashboard exactly (same classes), driven by the timeline.
// Exposes window.Scene for DashboardDemo.html.

const { useTime, interpolate, Easing, clamp } = window;
const E = Easing.easeInOutCubic;

// ---- Screen geometry inside the 1600x900 canvas (1:1 dashboard, crisp) ----
const SX = 160, SY = 50, SW = 1280, SH = 800;

// ---- Metric model: 7d (a) <-> 30d (b), recount blends between them ----
const METRICS = [
  { label: 'Booked Consults', a: 14,  b: 61,   accent: '#FAF8F5', dA: '+27%', dB: '+44%', fmt: n => String(Math.round(n)) },
  { label: 'Qualified Leads', a: 38,  b: 156,  accent: '#C9A84C', dA: '+12%', dB: '+62%', fmt: n => String(Math.round(n)) },
  { label: 'Reach',           a: 284, b: 1240, accent: '#FAF8F5', dA: '+41%', dB: '+88%', fmt: n => n >= 1000 ? (n/1000).toFixed(1)+'M' : Math.round(n)+'K' },
  { label: 'Reviews Captured',a: 22,  b: 89,   accent: '#FAF8F5', dA: '+5%',  dB: '+19%', fmt: n => String(Math.round(n)) },
];

const BASE_FEED = [
  { t: '2 min ago',  txt: 'Iris qualified lead — Marcus Reyes (plumbing emergency)', tag: 'Conversion' },
  { t: '14 min ago', txt: 'Reel published to Instagram — "How we found the leak"',    tag: 'Attention' },
  { t: '38 min ago', txt: 'Follow-up sequence triggered — 4 prospects',               tag: 'Conversion' },
  { t: '1 hr ago',   txt: 'Review request sent — job #2841',                          tag: 'Pipeline' },
  { t: '2 hr ago',   txt: 'TikTok scheduled for 6:00 PM ET',                          tag: 'Attention' },
  { t: '3 hr ago',   txt: 'New booking via Iris chat — water heater consult',         tag: 'Conversion' },
];
const NEW_EVENT = { txt: 'Iris qualified lead — Dana Cole (water heater install)', tag: 'Conversion' };

const NAV = [
  { sec: 'Engine',    items: ['Overview', 'Attention', 'Conversion'] },
  { sec: 'Pipelines', items: ['Leads', 'Follow-up', 'Reviews'] },
  { sec: 'Content',   items: ['Calendar', 'Library', 'Drafts'] },
];

// ---- timeline-derived state helpers --------------------------------------
function periodBlend(t) {            // 0 = 7d, 1 = 30d  (up at 5.5, back by 23.6)
  if (t < 5.5) return 0;
  if (t < 6.1) return Easing.easeOutCubic((t - 5.5) / 0.6);
  if (t < 23)  return 1;
  if (t < 23.6) return 1 - Easing.easeOutCubic((t - 23) / 0.6);
  return 0;
}
function newRowP(t) {                 // slide-in at 14.5, gone by 23.4
  if (t < 14.5 || t >= 23.4) return 0;
  if (t < 15.1) return Easing.easeOutCubic((t - 14.5) / 0.6);
  if (t < 23)   return 1;
  return 1 - Easing.easeOutCubic((t - 23) / 0.4);
}
const navActiveAt = t => (t >= 19 && t < 23) ? 'Conversion' : 'Overview';

// cursor path (dashboard coords)
const CT = [0,   4.0, 5.5, 8.0, 8.7, 13.0, 13.7, 14.5, 18.2, 19.0, 22.0, 25.0];
const CX = [700, 700, 977, 870, 645, 600,  560,  560,  250,  60,   480,  700];
const CY = [650, 600, 47,  170, 300, 360,  455,  455,  240,  185,  430,  650];
const cursorX = interpolate(CT, CX, E);
const cursorY = interpolate(CT, CY, E);

// camera focus (dashboard coords) + zoom
const MT = [0,   4.0,  5.2, 7.8, 8.6, 12.8, 13.6, 17.8, 18.6, 21.8, 23.2, 25];
const MFX= [640, 640,  900, 900, 645, 645,  560,  560,  230,  210,  640,  640];
const MFY= [400, 400,  80,  80,  300, 300,  470,  470,  300,  280,  400,  400];
const MZ = [1.0, 1.05, 1.4, 1.42,1.95,2.0,  1.7,  1.72, 1.5,  1.52, 1.05, 1.0];
const camFX = interpolate(MT, MFX, E);
const camFY = interpolate(MT, MFY, E);
const camZ  = interpolate(MT, MZ,  E);

const CLICKS = [5.5, 14.5, 19.0];
const CAPTIONS = [
  { s: 0.6,  e: 3.6,  txt: 'Your command center' },
  { s: 4.6,  e: 7.6,  txt: 'Switch the timeframe' },
  { s: 8.8,  e: 12.6, txt: 'See what actually converts' },
  { s: 13.8, e: 17.6, txt: 'AI qualifies leads — live' },
  { s: 18.8, e: 21.8, txt: 'One click between views' },
];

// ---- Dashboard (controlled clone, same classes as ui_kits/dashboard) -----
function DemoDashboard({ blend, period, nav, rowP }) {
  return (
    React.createElement('div', { className: 'dash' },
      // Sidebar
      React.createElement('aside', { className: 'dash-side' },
        React.createElement('div', { className: 'dash-brand' },
          React.createElement('span', { className: 'dash-wordmark' }, 'AUTOM', React.createElement('span', { className: 'b8' }, '8'))
        ),
        React.createElement('nav', { className: 'dash-nav' },
          NAV.map(s => React.createElement('div', { key: s.sec, className: 'nav-section' },
            React.createElement('div', { className: 'nav-section-h' }, s.sec),
            s.items.map(i => React.createElement('a', { key: i, className: 'dash-link' + (nav === i ? ' active' : '') }, i))
          ))
        ),
        React.createElement('div', { className: 'dash-account' },
          React.createElement('div', { className: 'acct-dot' }, 'SH'),
          React.createElement('div', { className: 'acct-meta' },
            React.createElement('div', { className: 'acct-name' }, 'Sherwood Plumbing'),
            React.createElement('div', { className: 'acct-plan' }, 'Content + Systems')
          )
        )
      ),
      // Main
      React.createElement('main', { className: 'dash-main' },
        React.createElement('header', { className: 'dash-top' },
          React.createElement('div', { className: 'dash-search' },
            React.createElement('span', { className: 'srch-icon' }, '⌕'),
            React.createElement('input', { placeholder: 'Search leads, content, sequences…', readOnly: true }),
            React.createElement('span', { className: 'kbd' }, '⌘K')
          ),
          React.createElement('div', { className: 'dash-period' },
            ['7d','30d','QTD','YTD'].map(p => React.createElement('button', {
              key: p, className: 'seg' + (p === period ? ' active' : '') }, p))
          ),
          React.createElement('button', { className: 'btn-primary small' }, '+ New Sequence')
        ),
        React.createElement('div', { className: 'dash-greet' },
          React.createElement('div', { className: 'eyebrow' }, 'Sherwood Plumbing · Week 14'),
          React.createElement('h1', null, 'Good morning, Mark.'),
          React.createElement('div', { className: 'greet-sub' }, 'Iris qualified 12 leads overnight. 4 booked consults are on your calendar.')
        ),
        React.createElement('div', { className: 'metrics-grid' },
          METRICS.map((m, i) => {
            const val = m.a + (m.b - m.a) * blend;
            const label = m.label === 'Reach' ? `Reach (${period === 'QTD' || period === 'YTD' ? period : period})` : m.label;
            const delta = blend > 0.5 ? m.dB : m.dA;
            return React.createElement('div', { key: i, className: 'metric' },
              React.createElement('div', { className: 'metric-label' }, label),
              React.createElement('div', { className: 'metric-value', style: { color: m.accent } }, m.fmt(val)),
              React.createElement('div', { className: 'metric-delta pos' }, '↑ ' + delta + ' vs prev. period')
            );
          })
        ),
        React.createElement('div', { className: 'dash-two-col' },
          // Activity
          React.createElement('div', { className: 'card-block' },
            React.createElement('div', { className: 'block-h' },
              React.createElement('h3', null, 'Activity'),
              React.createElement('span', { className: 'live-feed' }, React.createElement('span', { className: 'dot' }), 'LIVE')
            ),
            React.createElement('ul', { className: 'feed-list' },
              rowP > 0 && React.createElement('li', { key: 'new', style: {
                  height: 49 * rowP, paddingTop: 12 * rowP, paddingBottom: 12 * rowP,
                  opacity: clamp(rowP * 1.4, 0, 1), overflow: 'hidden',
                  transform: `translateY(${(1 - rowP) * -6}px)`,
                } },
                React.createElement('div', { className: 'feed-time', style: { color: '#C9A84C' } }, 'just now'),
                React.createElement('div', { className: 'feed-txt' }, NEW_EVENT.txt),
                React.createElement('span', { className: 'tag tag-sky' }, NEW_EVENT.tag)
              ),
              BASE_FEED.map((e, i) => React.createElement('li', { key: i },
                React.createElement('div', { className: 'feed-time' }, e.t),
                React.createElement('div', { className: 'feed-txt' }, e.txt),
                React.createElement('span', { className: 'tag ' + (e.tag === 'Attention' ? 'tag-gold' : e.tag === 'Conversion' ? 'tag-sky' : 'tag-neutral') }, e.tag)
              ))
            )
          ),
          // System status
          React.createElement('div', { className: 'card-block' },
            React.createElement('div', { className: 'block-h' },
              React.createElement('h3', null, 'System status'),
              React.createElement('span', { className: 'mono-mini' }, 'All within SLA')
            ),
            React.createElement('ul', { className: 'status-list' },
              [['Iris (AI assistant)','operational'],['Lead-capture pipeline','operational'],['Follow-up sequencer','operational'],['Review generation','degraded'],['Multi-channel publish','operational']].map((sv, i) =>
                React.createElement('li', { key: i },
                  React.createElement('span', { className: 'status-dot ' + sv[1] }),
                  React.createElement('span', { className: 'status-name' }, sv[0]),
                  React.createElement('span', { className: 'status-state' }, sv[1])
                ))
            )
          )
        )
      )
    )
  );
}

// ---- Cursor (canvas-space, constant size) --------------------------------
function Cursor({ x, y, pressed }) {
  return React.createElement('div', {
    style: { position: 'absolute', left: x, top: y, width: 28, height: 28,
      transform: `translate(-3px,-2px) scale(${pressed ? 0.82 : 1})`,
      transformOrigin: '3px 2px', transition: 'transform 90ms ease-out',
      filter: 'drop-shadow(0 3px 6px rgba(0,0,0,0.55))', pointerEvents: 'none', zIndex: 30 },
  },
    React.createElement('svg', { width: 28, height: 28, viewBox: '0 0 24 24', fill: 'none' },
      React.createElement('path', { d: 'M5 3l14 8.5-6 1.2 3.2 6.1-2.7 1.4L10.4 14 5 18V3z', fill: '#fff', stroke: '#0B0B0C', strokeWidth: 1, strokeLinejoin: 'round' })
    )
  );
}

function Ripple({ x, y, p }) {
  const r = 6 + p * 30, o = (1 - p) * 0.55;
  return React.createElement('div', { style: {
    position: 'absolute', left: x, top: y, width: r * 2, height: r * 2, marginLeft: -r, marginTop: -r,
    borderRadius: '999px', border: '2px solid #C9A84C', opacity: o, pointerEvents: 'none', zIndex: 29 } });
}

function Captions({ t }) {
  const c = CAPTIONS.find(c => t >= c.s - 0.3 && t <= c.e + 0.3);
  let opacity = 0;
  if (c) {
    if (t < c.s) opacity = (t - (c.s - 0.3)) / 0.3;
    else if (t > c.e) opacity = 1 - (t - c.e) / 0.3;
    else opacity = 1;
  }
  return React.createElement('div', { style: {
      position: 'absolute', left: 0, right: 0, bottom: 38, display: 'flex', justifyContent: 'center',
      opacity: clamp(opacity, 0, 1), pointerEvents: 'none', zIndex: 40 } },
    React.createElement('div', { style: {
        display: 'flex', alignItems: 'center', gap: 12, padding: '13px 26px',
        background: 'rgba(12,12,14,0.78)', backdropFilter: 'blur(8px)',
        border: '1px solid rgba(255,255,255,0.12)', borderRadius: 999,
        boxShadow: '0 10px 40px rgba(0,0,0,0.45)' } },
      React.createElement('span', { style: { width: 8, height: 8, borderRadius: 999, background: '#C9A84C', boxShadow: '0 0 10px #C9A84C' } }),
      React.createElement('span', { style: { color: '#F4F4F5', fontFamily: "'Geist', system-ui, sans-serif", fontWeight: 600, fontSize: 27, letterSpacing: '-0.01em' } }, c ? c.txt : '')
    )
  );
}

// ---- Scene ----------------------------------------------------------------
function Scene() {
  const t = useTime();

  const blend = periodBlend(t);
  const period = blend > 0.5 ? '30d' : '7d';
  const nav = navActiveAt(t);
  const rowP = newRowP(t);

  // camera transform (origin 0,0)
  const z = camZ(t);
  const pfx = SX + camFX(t), pfy = SY + camFY(t);
  const TX = 800 - z * pfx, TY = 450 - z * pfy;

  // cursor → canvas space (constant size)
  const cdx = cursorX(t), cdy = cursorY(t);
  const cux = TX + z * (SX + cdx), cuy = TY + z * (SY + cdy);

  // active click ripple + press
  let ripple = null, pressed = false;
  for (const ct of CLICKS) {
    const d = t - ct;
    if (d >= -0.12 && d <= 0.12) pressed = true;
    if (d >= 0 && d <= 0.6) ripple = { x: cux, y: cuy, p: d / 0.6 };
  }

  return React.createElement('div', { style: { position: 'absolute', inset: 0, overflow: 'hidden',
      background: 'radial-gradient(120% 120% at 50% 35%, #15151a 0%, #0a0a0c 55%, #050506 100%)' },
      'data-screen-label': 'demo ' + t.toFixed(1) + 's' },
    // camera-transformed screen
    React.createElement('div', { style: { position: 'absolute', inset: 0, transformOrigin: '0 0',
        transform: `translate(${TX}px, ${TY}px) scale(${z})`, willChange: 'transform' } },
      React.createElement('div', { className: 'demo-screen', style: {
          position: 'absolute', left: SX, top: SY, width: SW, height: SH,
          borderRadius: 16, overflow: 'hidden',
          boxShadow: '0 40px 120px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.06)',
          background: '#0B0B0C' } },
        React.createElement('div', { style: { width: SW, height: SH, overflow: 'hidden' } },
          React.createElement(DemoDashboard, { blend, period, nav, rowP })
        ),
        // subtle screen sheen
        React.createElement('div', { style: { position: 'absolute', inset: 0, pointerEvents: 'none',
          background: 'linear-gradient(120deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 22%)' } })
      )
    ),
    ripple && React.createElement(Ripple, ripple),
    React.createElement(Cursor, { x: cux, y: cuy, pressed }),
    React.createElement(Captions, { t })
  );
}

window.Scene = Scene;
window.DemoDashboard = DemoDashboard;