// admin-mock.jsx — Admin dashboard (browser window)

function AdminDashboard() {
  const C = window.ECJ;
  return (
    <div style={{
      width: 1500, height: 900, background: '#fbf8f2',
      fontFamily: 'Manrope, -apple-system, system-ui, sans-serif',
      display: 'grid', gridTemplateColumns: '240px 1fr', color: C.ink,
    }}>
      {/* sidebar */}
      <div style={{ background: C.ink, color: C.cream, padding: '28px 20px', display: 'flex', flexDirection: 'column' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 30 }}>
          <div style={{ width: 32, height: 32, borderRadius: '50%', background: C.saffron, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'Cormorant Garamond, serif', fontStyle: 'italic', fontWeight: 600, color: '#fff' }}>e</div>
          <div>
            <div style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 20, fontWeight: 500 }}>EatCookJoy</div>
            <div style={{ fontSize: 9, letterSpacing: 0.18, textTransform: 'uppercase', opacity: 0.5, fontWeight: 700 }}>Gulf Operator</div>
          </div>
        </div>

        <div style={{ fontSize: 9, letterSpacing: 0.2, textTransform: 'uppercase', opacity: 0.4, fontWeight: 700, marginBottom: 8 }}>Operations</div>
        {[
          { l: 'Live Dashboard', i: '◉', active: true },
          { l: 'Bookings', i: '▦', badge: '47' },
          { l: 'Chef CRM', i: '◑' },
          { l: 'Compliance', i: '⚐', alert: 3 },
          { l: 'Recipe Vault', i: '▤' },
          { l: 'Support Tickets', i: '✉', badge: '12' },
        ].map((m, i) => (
          <div key={i} style={{
            display: 'flex', alignItems: 'center', gap: 10,
            padding: '9px 12px', borderRadius: 6, marginBottom: 2,
            background: m.active ? 'rgba(217,119,87,0.18)' : 'transparent',
            color: m.active ? C.saffron : 'rgba(250,246,239,0.7)',
            fontSize: 13, fontWeight: m.active ? 700 : 500,
          }}>
            <span>{m.i}</span>
            <span style={{ flex: 1 }}>{m.l}</span>
            {m.badge && <span style={{ fontSize: 10, padding: '2px 6px', background: 'rgba(250,246,239,0.1)', borderRadius: 999, fontWeight: 700 }}>{m.badge}</span>}
            {m.alert && <span style={{ fontSize: 10, padding: '2px 6px', background: C.rose, color: '#fff', borderRadius: 999, fontWeight: 700 }}>{m.alert}</span>}
          </div>
        ))}

        <div style={{ fontSize: 9, letterSpacing: 0.2, textTransform: 'uppercase', opacity: 0.4, fontWeight: 700, marginTop: 22, marginBottom: 8 }}>Revenue</div>
        {[
          { l: 'Payments', i: '$' },
          { l: 'Payouts', i: '⇵' },
          { l: 'KPI Analytics', i: '◧' },
          { l: 'Demand Heatmap', i: '⬡' },
        ].map((m, i) => (
          <div key={i} style={{
            display: 'flex', alignItems: 'center', gap: 10,
            padding: '9px 12px', borderRadius: 6, marginBottom: 2,
            color: 'rgba(250,246,239,0.7)', fontSize: 13, fontWeight: 500,
          }}>
            <span>{m.i}</span>
            <span>{m.l}</span>
          </div>
        ))}

        <div style={{ marginTop: 'auto', padding: 12, borderRadius: 10, background: 'rgba(217,119,87,0.1)', border: '1px solid rgba(217,119,87,0.3)' }}>
          <div style={{ fontSize: 10, letterSpacing: 0.15, textTransform: 'uppercase', color: C.saffron, fontWeight: 700 }}>WAF · LIVE</div>
          <div style={{ fontSize: 11, marginTop: 4, color: 'rgba(250,246,239,0.7)' }}>0 incidents · 24h</div>
        </div>
      </div>

      {/* main */}
      <div style={{ padding: '24px 32px', overflow: 'hidden' }}>
        {/* header */}
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 22 }}>
          <div>
            <div style={{ fontSize: 11, letterSpacing: 0.2, textTransform: 'uppercase', color: C.saffron, fontWeight: 700 }}>Tuesday 12 May · 14:42 GST</div>
            <div style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 32, fontWeight: 500, marginTop: 4, letterSpacing: -0.3 }}>
              Gulf operations · <em style={{ color: C.saffronDeep, fontStyle: 'italic' }}>live</em>
            </div>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            {['🇦🇪 UAE', '🇸🇦 KSA', '🇶🇦 QA', '🇴🇲 OM', '🇧🇭 BH'].map((f, i) => (
              <div key={i} style={{ padding: '6px 12px', borderRadius: 999, background: i === 0 ? C.ink : '#fff', color: i === 0 ? '#fff' : C.ink, border: `1px solid ${i === 0 ? C.ink : C.line}`, fontSize: 12, fontWeight: 600 }}>{f}</div>
            ))}
            <div style={{ marginLeft: 12, padding: '6px 14px', borderRadius: 999, background: C.saffron, color: '#fff', fontSize: 12, fontWeight: 700 }}>+ New booking</div>
          </div>
        </div>

        {/* KPI row */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14, marginBottom: 18 }}>
          {[
            { l: 'Bookings · 24h', n: '1,284', d: '+18%', img: null, k: 'AED 412k AOV' },
            { l: 'Chef utilisation', n: '74%', d: '+6 pts', k: '847 active chefs' },
            { l: 'NPS (rolling 30d)', n: '68', d: '+4', k: 'Repeat rate 41%' },
            { l: 'Cert compliance', n: '99.2%', d: '−0.4', warn: true, k: '7 expiring · 30d' },
          ].map((k, i) => (
            <div key={i} style={{ background: '#fff', border: `1px solid ${C.line}`, borderRadius: 10, padding: 18 }}>
              <div style={{ fontSize: 10, letterSpacing: 0.18, textTransform: 'uppercase', color: C.muted, fontWeight: 700 }}>{k.l}</div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginTop: 6 }}>
                <div style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 36, fontWeight: 600, color: C.ink, lineHeight: 1 }}>{k.n}</div>
                <div style={{ fontSize: 11, fontWeight: 700, color: k.warn ? C.rose : C.halal }}>{k.d}</div>
              </div>
              <div style={{ fontSize: 11, color: C.muted, marginTop: 6 }}>{k.k}</div>
            </div>
          ))}
        </div>

        {/* main grid */}
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 14 }}>
          {/* heatmap card */}
          <div style={{ background: '#fff', border: `1px solid ${C.line}`, borderRadius: 10, padding: 20 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 14 }}>
              <div>
                <div style={{ fontSize: 10, letterSpacing: 0.18, textTransform: 'uppercase', color: C.muted, fontWeight: 700 }}>Geographic demand · last 7d</div>
                <div style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 20, fontWeight: 500, marginTop: 2 }}>Where the bookings are</div>
              </div>
              <div style={{ fontSize: 11, fontWeight: 700, color: C.saffron }}>Dubai · KSA top</div>
            </div>
            {/* heat grid */}
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(14, 1fr)', gap: 3, height: 200 }}>
              {Array.from({ length: 14 * 8 }, (_, i) => {
                const r = Math.random();
                const intensity = (Math.sin(i * 0.4) + 1) / 2 * 0.7 + r * 0.3;
                const color = intensity > 0.7 ? C.saffronDeep
                  : intensity > 0.5 ? C.saffron
                  : intensity > 0.3 ? '#e8b89a'
                  : intensity > 0.15 ? '#f3dcc8'
                  : '#f7eee0';
                return <div key={i} style={{ background: color, borderRadius: 2 }} />;
              })}
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 12, fontSize: 10, color: C.muted }}>
              <span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span><span>Sun</span>
            </div>
          </div>

          {/* recent bookings */}
          <div style={{ background: '#fff', border: `1px solid ${C.line}`, borderRadius: 10, padding: 20 }}>
            <div style={{ fontSize: 10, letterSpacing: 0.18, textTransform: 'uppercase', color: C.muted, fontWeight: 700, marginBottom: 14 }}>Live booking feed</div>
            {[
              { t: '14:41', c: 'Layla A.', chef: 'Khalid', amt: 'AED 640', city: 'Dubai', pay: 'Stripe' },
              { t: '14:39', c: 'Faisal R.', chef: 'Reem', amt: 'SAR 820', city: 'Riyadh', pay: 'Tamara' },
              { t: '14:36', c: 'Noor M.', chef: 'Hassan', amt: 'QAR 480', city: 'Doha', pay: 'Stripe' },
              { t: '14:32', c: 'Aisha B.', chef: 'Khalid', amt: 'AED 320', city: 'Abu Dhabi', pay: 'Tabby' },
              { t: '14:28', c: 'Omar K.', chef: 'Maya', amt: 'OMR 38', city: 'Muscat', pay: 'Stripe' },
              { t: '14:24', c: 'Yara H.', chef: 'Hassan', amt: 'BHD 42', city: 'Manama', pay: 'Benefit' },
            ].map((b, i) => (
              <div key={i} style={{
                display: 'grid', gridTemplateColumns: '50px 1fr auto',
                padding: '9px 0', borderBottom: i < 5 ? `1px solid ${C.line}` : 'none',
                fontSize: 12, alignItems: 'center',
              }}>
                <span style={{ color: C.muted, fontFamily: 'JetBrains Mono, monospace', fontSize: 10 }}>{b.t}</span>
                <div>
                  <div style={{ fontWeight: 700 }}>{b.c} → Chef {b.chef}</div>
                  <div style={{ fontSize: 10, color: C.muted }}>{b.city} · {b.pay}</div>
                </div>
                <span style={{ fontWeight: 700, color: C.saffronDeep, fontSize: 12 }}>{b.amt}</span>
              </div>
            ))}
          </div>

          {/* chef CRM */}
          <div style={{ gridColumn: 'span 2', background: '#fff', border: `1px solid ${C.line}`, borderRadius: 10, padding: 20 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 14 }}>
              <div>
                <div style={{ fontSize: 10, letterSpacing: 0.18, textTransform: 'uppercase', color: C.muted, fontWeight: 700 }}>Top chefs · Gulf-wide · this month</div>
                <div style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 20, fontWeight: 500, marginTop: 2 }}>Performance leaderboard</div>
              </div>
              <div style={{ display: 'flex', gap: 6, fontSize: 11 }}>
                <div style={{ padding: '4px 10px', borderRadius: 999, background: C.ink, color: '#fff', fontWeight: 700 }}>All</div>
                <div style={{ padding: '4px 10px', borderRadius: 999, color: C.muted }}>Halal</div>
                <div style={{ padding: '4px 10px', borderRadius: 999, color: C.muted }}>Premium</div>
              </div>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '40px 2fr 1fr 1fr 1fr 1fr 80px', gap: 12, fontSize: 10, letterSpacing: 0.16, textTransform: 'uppercase', color: C.muted, fontWeight: 700, paddingBottom: 8, borderBottom: `1px solid ${C.line}` }}>
              <span>#</span><span>Chef</span><span>City · Cuisine</span><span>Sessions</span><span>Earnings</span><span>NPS</span><span>Status</span>
            </div>
            {[
              { rk: 1, n: 'Khalid Al-Mansoori', c: 'Dubai · Emirati', s: 86, e: 'AED 42,180', nps: 76, st: 'Top tier', img: window.PHOTOS.chefM1 },
              { rk: 2, n: 'Reem Habibi', c: 'Riyadh · Levantine', s: 74, e: 'SAR 38,440', nps: 72, st: 'Top tier', img: window.PHOTOS.chefF1 },
              { rk: 3, n: 'Hassan Othman', c: 'Doha · Persian', s: 62, e: 'QAR 28,940', nps: 70, st: 'Verified', img: window.PHOTOS.chefM3 },
              { rk: 4, n: 'Maya Saleh', c: 'Muscat · Indian', s: 54, e: 'OMR 3,820', nps: 68, st: 'Verified', img: window.PHOTOS.chefM2 },
            ].map((c, i) => (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: '40px 2fr 1fr 1fr 1fr 1fr 80px', gap: 12, fontSize: 12, padding: '10px 0', borderBottom: i < 3 ? `1px solid ${C.line}` : 'none', alignItems: 'center' }}>
                <span style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 18, fontWeight: 600, color: C.saffronDeep, fontStyle: 'italic' }}>{c.rk}</span>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <div style={{ width: 30, height: 30, borderRadius: 15, background: `url(${c.img}) center/cover` }} />
                  <span style={{ fontWeight: 700 }}>{c.n}</span>
                </div>
                <span style={{ color: C.muted }}>{c.c}</span>
                <span>{c.s}</span>
                <span style={{ fontWeight: 700 }}>{c.e}</span>
                <span style={{ color: C.halal, fontWeight: 700 }}>{c.nps}</span>
                <span style={{ padding: '2px 8px', background: 'rgba(31,138,91,0.12)', color: C.halal, fontSize: 10, fontWeight: 700, borderRadius: 4, letterSpacing: 0.4, textAlign: 'center' }}>{c.st.toUpperCase()}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { AdminDashboard });

// Mount all React mockups now that every component is on window
function mountECJMocks() {
  const m1 = document.getElementById('mount-client-row');
  if (m1 && !m1.dataset.mounted) {
    m1.dataset.mounted = '1';
    ReactDOM.createRoot(m1).render(
      <>
        <ClientHome />
        <ClientChefProfile />
        <ClientMealPlan />
      </>
    );
  }
  const m2 = document.getElementById('mount-chef-row');
  if (m2 && !m2.dataset.mounted) {
    m2.dataset.mounted = '1';
    ReactDOM.createRoot(m2).render(
      <>
        <ChefToday />
        <ChefCompliance />
      </>
    );
  }
  const m3 = document.getElementById('mount-admin');
  if (m3 && !m3.dataset.mounted) {
    m3.dataset.mounted = '1';
    ReactDOM.createRoot(m3).render(
      <ChromeWindow
        tabs={[{ title: 'EatCookJoy · Gulf Admin' }, { title: 'Looker · KPIs' }]}
        activeIndex={0}
        url="admin.eatcookjoy.com/dashboard"
        width={1500}
        height={900}
      >
        <AdminDashboard />
      </ChromeWindow>
    );
  }
}

// Both run-paths: document ready OR script-already-late
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', mountECJMocks);
} else {
  mountECJMocks();
}