/* Shared primitives for fake-app mocks inside the critique doc. */

const { useEffect, useRef, useState } = React;

/* --- Scaled frame: renders a 1280px-wide fake-app and scales to fit its box --- */
function Scaled({ width = 1280, height = 720, children }) {
  const ref = useRef(null);
  const [scale, setScale] = useState(1);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const ro = new ResizeObserver(() => {
      const w = el.clientWidth;
      setScale(w / width);
    });
    ro.observe(el);
    return () => ro.disconnect();
  }, [width]);
  return (
    <div ref={ref} style={{ position: 'relative', width: '100%', height: height * scale, overflow: 'hidden', background: 'var(--paper)' }}>
      <div style={{
        width: width, height: height,
        transform: `scale(${scale})`, transformOrigin: 'top left',
      }}>
        {children}
      </div>
    </div>
  );
}

/* --- Before/After stage --- */
function Stage({ beforeLabel = 'Current', afterLabel = 'Proposed', before, after, delta }) {
  return (
    <>
      <div className="stage">
        <div className="mock">
          <div className="mock-head">
            <div className="mock-label"><b>Before</b> · {beforeLabel}</div>
            <span className="mock-tag">as shipped</span>
          </div>
          <div className="mock-body">{before}</div>
        </div>
        <div className="mock">
          <div className="mock-head">
            <div className="mock-label after"><b>After</b> · {afterLabel}</div>
            <span className="mock-tag" style={{ background: 'var(--ember)', color: '#fff', borderColor: 'var(--ember)' }}>proposed</span>
          </div>
          <div className="mock-body">{after}</div>
        </div>
      </div>
      {delta && (
        <div className="delta">
          <div className="delta-col">
            <h5>What's wrong</h5>
            <ul>{delta.wrong.map((d, i) => <li key={i}>{d}</li>)}</ul>
          </div>
          <div className="delta-col">
            <h5>What changed</h5>
            <ul>{delta.change.map((d, i) => <li key={i}>{d}</li>)}</ul>
          </div>
        </div>
      )}
    </>
  );
}

/* --- Fake Sidebar (before = current Bootstrap) --- */
function SidebarBefore() {
  const items = [
    ['Main Menu', null],
    ['bi-house-door', 'Dashboard', true],
    ['Operations', null],
    ['bi-people', 'Customers'],
    ['bi-file-text', 'Quotes'],
    ['bi-briefcase', 'Jobs'],
    ['bi-receipt', 'Invoices'],
    ['bi-calendar-event', 'Appointments'],
    ['bi-clipboard2-check', 'Daily Board'],
    ['Inventory & Purchasing', null],
    ['bi-book', 'Product Catalog'],
    ['bi-box-seam', 'Inventory'],
    ['bi-truck', 'Vendors'],
  ];
  return (
    <aside style={{
      width: 240, height: 720, flexShrink: 0,
      background: 'linear-gradient(180deg,#1a1a2e,#16213e,#0f3460)',
      color: '#fff', display: 'flex', flexDirection: 'column',
    }}>
      <div style={{ padding: '22px 20px 18px', borderBottom: '1px solid rgba(255,255,255,0.1)', textAlign: 'center' }}>
        <div style={{
          width: 130, height: 48, margin: '0 auto 6px',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontWeight: 700, fontSize: 14, letterSpacing: '-0.01em', color: '#fff',
          background: 'rgba(255,255,255,0.06)', borderRadius: 4,
        }}>Acme Powder Co.</div>
        <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.7)' }}>Acme Powder Co.</div>
      </div>
      <div style={{ flex: 1, overflow: 'hidden', padding: '12px 0' }}>
        {items.map((it, i) => {
          if (it[1] === null) return (
            <div key={i} style={{ padding: '14px 20px 6px', fontSize: 10.5, fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.4)' }}>{it[0]}</div>
          );
          const active = it[2];
          return (
            <a key={i} style={{
              display: 'flex', alignItems: 'center', gap: 10,
              padding: '9px 20px', color: active ? '#fff' : 'rgba(255,255,255,0.78)',
              background: active ? 'rgba(255,255,255,0.07)' : 'transparent',
              borderLeft: `3px solid ${active ? '#4fc3f7' : 'transparent'}`,
              fontSize: 13, textDecoration: 'none',
            }}>
              <i className={`bi ${it[0]}`} style={{ fontSize: 15, width: 18, color: 'rgba(255,255,255,0.85)' }} />
              <span>{it[1]}</span>
            </a>
          );
        })}
      </div>
    </aside>
  );
}

/* --- Fake Sidebar (after) --- */
function SidebarAfter() {
  const sections = [
    { title: 'Today',
      items: [
        { icon: 'bi-house-door', label: 'Overview', active: true, badge: null },
        { icon: 'bi-clipboard2-check', label: 'Daily board', badge: '12' },
        { icon: 'bi-fire', label: 'Oven schedule' },
      ]
    },
    { title: 'Pipeline',
      items: [
        { icon: 'bi-people', label: 'Customers' },
        { icon: 'bi-file-text', label: 'Quotes', badge: '3' },
        { icon: 'bi-briefcase', label: 'Jobs', badge: '47' },
        { icon: 'bi-receipt', label: 'Invoices' },
        { icon: 'bi-calendar-event', label: 'Appointments' },
      ]
    },
    { title: 'Stock',
      items: [
        { icon: 'bi-book', label: 'Catalog' },
        { icon: 'bi-box-seam', label: 'Inventory' },
        { icon: 'bi-truck', label: 'Vendors' },
      ]
    },
  ];
  return (
    <aside style={{
      width: 240, height: 720, flexShrink: 0,
      background: 'var(--ink)', color: 'var(--paper)',
      display: 'flex', flexDirection: 'column',
      borderRight: '1px solid rgba(255,255,255,0.06)',
    }}>
      {/* brand */}
      <div style={{ padding: '20px 18px 18px', display: 'flex', alignItems: 'center', gap: 10, borderBottom: '1px solid rgba(255,255,255,0.06)' }}>
        <div style={{
          width: 28, height: 28, borderRadius: 6,
          background: 'var(--ember)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: '#fff', fontWeight: 700, fontSize: 14, fontFamily: 'IBM Plex Mono',
        }}>◆</div>
        <div style={{ lineHeight: 1.1 }}>
          <div style={{ fontWeight: 600, fontSize: 13, letterSpacing: '-0.005em' }}>Acme Powder</div>
          <div style={{ fontSize: 10.5, color: 'rgba(255,255,255,0.45)', fontFamily: 'IBM Plex Mono', letterSpacing: '0.04em', textTransform: 'uppercase', marginTop: 2 }}>Coatings · PCL</div>
        </div>
      </div>

      {/* search */}
      <div style={{ padding: '12px 12px 6px' }}>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 8,
          padding: '7px 10px',
          background: 'rgba(255,255,255,0.04)',
          border: '1px solid rgba(255,255,255,0.06)',
          borderRadius: 6,
          fontSize: 12, color: 'rgba(255,255,255,0.45)',
        }}>
          <i className="bi bi-search" style={{ fontSize: 12 }} />
          <span style={{ flex: 1 }}>Jump to…</span>
          <span style={{ fontFamily: 'IBM Plex Mono', fontSize: 10, padding: '1px 5px', border: '1px solid rgba(255,255,255,0.1)', borderRadius: 3 }}>⌘K</span>
        </div>
      </div>

      <div style={{ flex: 1, overflow: 'hidden', padding: '6px 0 12px' }}>
        {sections.map((sec, si) => (
          <div key={si} style={{ marginTop: si === 0 ? 6 : 14 }}>
            <div style={{
              padding: '4px 18px',
              fontFamily: 'IBM Plex Mono',
              fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase',
              color: 'rgba(255,255,255,0.35)',
            }}>{sec.title}</div>
            {sec.items.map((it, i) => (
              <a key={i} style={{
                display: 'flex', alignItems: 'center', gap: 10,
                padding: '6px 18px', margin: '1px 8px',
                color: it.active ? 'var(--paper)' : 'rgba(255,255,255,0.72)',
                background: it.active ? 'rgba(255,255,255,0.06)' : 'transparent',
                borderRadius: 5,
                fontSize: 13, fontWeight: it.active ? 500 : 400,
                textDecoration: 'none', position: 'relative',
              }}>
                {it.active && <span style={{ position: 'absolute', left: -8, top: 6, bottom: 6, width: 2, background: 'var(--ember)', borderRadius: 2 }} />}
                <i className={`bi ${it.icon}`} style={{ fontSize: 14, width: 16, color: it.active ? 'var(--ember)' : 'rgba(255,255,255,0.55)' }} />
                <span style={{ flex: 1 }}>{it.label}</span>
                {it.badge && (
                  <span style={{
                    fontFamily: 'IBM Plex Mono', fontSize: 10,
                    padding: '1px 6px', borderRadius: 99,
                    background: 'rgba(255,255,255,0.08)', color: 'rgba(255,255,255,0.7)',
                  }}>{it.badge}</span>
                )}
              </a>
            ))}
          </div>
        ))}
      </div>
    </aside>
  );
}

/* --- Fake topbar (before) --- */
function TopbarBefore({ title = 'Dashboard' }) {
  return (
    <div style={{
      padding: '18px 28px',
      borderBottom: '1px solid #e5e7eb',
      background: '#fff',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    }}>
      <h2 style={{ margin: 0, fontSize: 22, fontWeight: 600 }}>{title}</h2>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <button style={{ width: 36, height: 36, borderRadius: '50%', border: 'none', background: '#f3f4f6', color: '#6b7280' }}>
          <i className="bi bi-bell" />
        </button>
        <button style={{ width: 36, height: 36, borderRadius: '50%', border: 'none', background: '#f3f4f6', color: '#6b7280' }}>
          <i className="bi bi-gear" />
        </button>
        <div style={{ width: 40, height: 40, borderRadius: '50%', background: 'linear-gradient(135deg,#4f46e5,#7c3aed)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 600 }}>JD</div>
      </div>
    </div>
  );
}

/* --- Fake topbar (after) --- */
function TopbarAfter({ title = 'Overview', breadcrumbs = ['Today', 'Overview'] }) {
  return (
    <div style={{
      padding: '14px 28px',
      borderBottom: '1px solid var(--rule)',
      background: 'var(--card)',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    }}>
      <div>
        <div style={{
          fontFamily: 'IBM Plex Mono', fontSize: 10, letterSpacing: '0.1em',
          textTransform: 'uppercase', color: 'var(--steel)', marginBottom: 4,
          display: 'flex', alignItems: 'center', gap: 6,
        }}>
          {breadcrumbs.map((b, i) => (
            <React.Fragment key={i}>
              {i > 0 && <span style={{ opacity: 0.5 }}>/</span>}
              <span>{b}</span>
            </React.Fragment>
          ))}
        </div>
        <h2 style={{ margin: 0, fontSize: 22, fontWeight: 600, letterSpacing: '-0.015em', color: 'var(--ink)' }}>{title}</h2>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <button style={topBtn}>
          <i className="bi bi-plus-lg" style={{ fontSize: 13 }} /> <span>New job</span>
          <span style={{ fontFamily: 'IBM Plex Mono', fontSize: 10, padding: '1px 4px', border: '1px solid rgba(255,255,255,0.2)', borderRadius: 3, marginLeft: 6 }}>N</span>
        </button>
        <button style={ghostBtn}><i className="bi bi-bell" /></button>
        <button style={ghostBtn}><i className="bi bi-gear" /></button>
        <div style={{ width: 32, height: 32, borderRadius: 6, background: 'var(--ink)', color: 'var(--paper)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 600, fontSize: 12 }}>JD</div>
      </div>
    </div>
  );
}

const topBtn = {
  display: 'flex', alignItems: 'center', gap: 6,
  padding: '7px 12px', borderRadius: 6, border: 'none',
  background: 'var(--ink)', color: 'var(--paper)',
  fontSize: 13, fontWeight: 500, cursor: 'pointer',
};
const ghostBtn = {
  width: 32, height: 32, borderRadius: 6, border: '1px solid var(--rule)',
  background: 'var(--card)', color: 'var(--slate)',
  display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
};

Object.assign(window, {
  Scaled, Stage,
  SidebarBefore, SidebarAfter,
  TopbarBefore, TopbarAfter,
});