// admin-main.jsx — App root + Tweaks panel
const { useState: useStateM, useEffect: useEffectM } = React;
const Icon = window.Icon;

// ── Live data banner ─────────────────────────────────────────
function DataBanner({ loading, live }) {
  if (!loading && live) return null; // nothing to show once live data is in
  return (
    <div style={{
      position: 'fixed', bottom: 64, left: '50%', transform: 'translateX(-50%)',
      background: loading ? '#1A2B3B' : '#10B981',
      color: '#fff', fontSize: 12, fontWeight: 700,
      padding: '6px 16px', borderRadius: 20,
      boxShadow: '0 4px 16px rgba(0,0,0,0.15)',
      zIndex: 200, display: 'flex', alignItems: 'center', gap: 6,
      transition: 'opacity 0.3s',
    }}>
      {loading
        ? <><Icon name="Loader" size={12} color="#fff" /> Loading live data…</>
        : <><Icon name="CheckCircle" size={12} color="#fff" /> Mock data (DB fetch failed)</>
      }
    </div>
  );
}

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "compactMode": false,
  "darkMode": false,
  "showApiCosts": true
}/*EDITMODE-END*/;

function TweaksPanel({ tweaks, setTweak, onClose }) {
  return (
    <div style={{
      position:'fixed', bottom:80, right:20, width:220,
      background:'#fff', border:'1px solid #E5E7EB', borderRadius:14,
      boxShadow:'0 8px 32px rgba(0,0,0,0.12)', zIndex:100, overflow:'hidden',
      animation:'fadeUp 0.18s ease-out',
    }}>
      <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', padding:'12px 16px', borderBottom:'1px solid #F3F4F6' }}>
        <span style={{ fontSize:12, fontWeight:800, color:'#1A2B3B' }}>Tweaks</span>
        <button onClick={onClose} style={{ border:'none', background:'none', cursor:'pointer', color:'#9CA3AF', padding:2, display:'flex' }}><Icon name="X" size={14} color="#9CA3AF"/></button>
      </div>
      <div style={{ padding:'10px 16px', display:'flex', flexDirection:'column', gap:12 }}>
        {[
          { key:'compactMode',  label:'Compact Mode',      desc:'Tighter spacing' },
          { key:'showApiCosts', label:'Show API Costs',    desc:'Cost column in tables' },
          { key:'darkMode',     label:'Dark Mode',         desc:'Invert the palette' },
        ].map(({ key, label, desc }) => (
          <div key={key} style={{ display:'flex', alignItems:'center', justifyContent:'space-between', gap:10 }}>
            <div>
              <div style={{ fontSize:12, fontWeight:600, color:'#1A2B3B' }}>{label}</div>
              <div style={{ fontSize:10, color:'#9CA3AF' }}>{desc}</div>
            </div>
            <Toggle on={tweaks[key]} onClick={() => setTweak(key, !tweaks[key])}/>
          </div>
        ))}
      </div>
    </div>
  );
}

function LoadingScreen() {
  return (
    <div style={{ display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', height:'100vh', gap:12, background:'#F9FAFB' }}>
      <div style={{ width:32, height:32, borderRadius:8, background:'#F97316', display:'flex', alignItems:'center', justifyContent:'center' }}>
        <Icon name="Zap" size={16} color="#fff" fill="#fff" />
      </div>
      <div style={{ fontSize:13, color:'#9CA3AF', fontWeight:600 }}>Loading WiseFunnel Admin…</div>
    </div>
  );
}

function AppLoader() {
  const [ready, setReady] = useStateM(false);
  useEffectM(() => {
    const p = window.MOCK_READY;
    if (p && typeof p.then === 'function') {
      p.then(() => setReady(true));
    } else {
      setReady(true);
    }
  }, []);
  return ready ? <App /> : <LoadingScreen />;
}

function App() {
  const [page, setPage]           = useStateM('dashboard');
  const [showTweaks, setShowTweaks] = useStateM(false);
  const [tweaks, setTweaksState]  = useStateM({ ...TWEAK_DEFAULTS });
  const [dataKey, setDataKey]     = useStateM(0);   // bump to force re-render after live load
  const [dataLoading, setDataLoading] = useStateM(true);
  const [admin, setAdmin]         = useStateM(window.AdminAuth ? window.AdminAuth.get() : null);

  const setTweak = (key, val) => {
    const next = { ...tweaks, [key]: val };
    setTweaksState(next);
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: next }, '*');
  };

  // Load live Supabase data once the admin is authenticated
  useEffectM(() => {
    if (!admin) return;
    window.loadRealAdminData(() => {
      setDataKey(k => k + 1);
      setDataLoading(false);
    });
  }, [admin]);

  // Tweaks protocol
  useEffectM(() => {
    const handler = e => {
      if (e.data?.type === '__activate_edit_mode')   setShowTweaks(true);
      if (e.data?.type === '__deactivate_edit_mode') setShowTweaks(false);
    };
    window.addEventListener('message', handler);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', handler);
  }, []);

  // Apply dark mode + compact via CSS vars
  useEffectM(() => {
    const r = document.documentElement;
    if (tweaks.darkMode) {
      r.style.setProperty('--bg',      '#0D1220');
      r.style.setProperty('--surface', '#141B2D');
      r.style.setProperty('--border',  'rgba(255,255,255,0.07)');
      r.style.setProperty('--fg',      '#EEEEEE');
      r.style.setProperty('--muted',   '#9CA3AF');
      r.style.setProperty('--subtle',  '#1F2A3C');
      document.body.style.background = '#0D1220';
      document.body.style.color = '#EEEEEE';
    } else {
      r.style.setProperty('--bg',      '#F9FAFB');
      r.style.setProperty('--surface', '#FFFFFF');
      r.style.setProperty('--border',  '#E5E7EB');
      r.style.setProperty('--fg',      '#1A2B3B');
      r.style.setProperty('--muted',   '#6B7280');
      r.style.setProperty('--subtle',  '#F3F4F6');
      document.body.style.background = '#F9FAFB';
      document.body.style.color = '#1A2B3B';
    }
    document.body.dataset.compact = tweaks.compactMode ? '1' : '0';
  }, [tweaks.darkMode, tweaks.compactMode]);

  // Auth gate — without an admin session, show the login screen.
  if (!admin) {
    return <LoginScreen onSuccess={setAdmin} />;
  }

  const BlogImagePage = window.BlogImageGeneratorPage;
  const pages = {
    dashboard: <DashboardPage />,
    users:     <UsersPage />,
    features:  <FeaturesPage />,
    costs:     <CostsPage />,
    billing:   <BillingPage />,
    support:   <SupportPage />,
    newsletter: <NewsletterPage />,
    'blog-images': BlogImagePage ? <BlogImagePage /> : <DashboardPage />,
    'mission-control': window.MissionControlPage ? React.createElement(window.MissionControlPage) : <DashboardPage />,
    settings:  <SettingsPage />,
  };

  return (
    <>
      <AdminShell page={page} setPage={setPage}>
        <div key={dataKey}>
          {pages[page] || pages.dashboard}
        </div>
      </AdminShell>
      <DataBanner loading={dataLoading} live={!dataLoading} />

      {/* Tweaks toggle button */}
      <button onClick={() => { setShowTweaks(s => !s); window.parent.postMessage({ type: showTweaks ? '__edit_mode_dismissed' : '__edit_mode_available' }, '*'); }}
        style={{
          position:'fixed', bottom:20, right:20, width:36, height:36,
          borderRadius:'50%', background:'#1A2B3B', border:'none',
          display:'flex', alignItems:'center', justifyContent:'center',
          cursor:'pointer', zIndex:99, boxShadow:'0 4px 12px rgba(0,0,0,0.2)',
          transition:'transform 0.15s',
        }}
        onMouseEnter={e => e.currentTarget.style.transform='scale(1.1)'}
        onMouseLeave={e => e.currentTarget.style.transform='scale(1)'}
        title="Tweaks"
      >
        <Icon name="Settings" size={15} color="#fff"/>
      </button>

      {showTweaks && <TweaksPanel tweaks={tweaks} setTweak={setTweak} onClose={() => setShowTweaks(false)}/>}
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<AppLoader />);