// Main app — routing, tweaks, theme, command palette, drawers, notifications, live ticker.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "dark",
  "accent": "#7cffb2",
  "density": "regular",
  "font": "inter",
  "sidebar": "expanded",
  "card": "elevated",
  "showTweaks": true
}/*EDITMODE-END*/;

const ACCENT_OPTIONS = ['#7cffb2', '#5eead4', '#a78bfa', '#fb7185', '#fbbf24', '#60a5fa'];

// Login screen — shown when not connected. Endpoint defaults to same-origin so
// only a token is needed; credentials persist (localStorage) + auto-connect next time.
function LoginScreen({ onDemo }) {
  const conn = useConn();
  const [token, setToken] = React.useState(CONN.token || '');
  const [busy, setBusy] = React.useState(false);
  const endpoint = CONN.endpoint || (typeof location !== 'undefined' ? location.origin : '');

  async function submit() {
    setBusy(true);
    CONN.set({ endpoint, token: token.trim(), autoConnect: true });
    const ok = await CONN.testConnection();
    setBusy(false);
    if (ok) { REALDATA.refreshAll().catch(() => {}); }
    else { toast(CONN.lastError ? ('เชื่อมต่อไม่สำเร็จ: ' + CONN.lastError) : 'เชื่อมต่อไม่สำเร็จ — ตรวจสอบ token', 'error'); }
  }

  return (
    <div style={{
      position: 'fixed', inset: 0, zIndex: 5000,
      display: 'grid', placeItems: 'center', padding: 20,
      background: 'radial-gradient(900px 500px at 50% -10%, color-mix(in oklab, var(--accent) 12%, var(--bg)), var(--bg))',
    }}>
      <div className="card" style={{ width: '100%', maxWidth: 380, padding: 26 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 18 }}>
          <div className="brand-mark" style={{ width: 38, height: 38, fontSize: 17 }}>G</div>
          <div>
            <div style={{ fontWeight: 700, fontSize: 16 }}>เข้าสู่ระบบ Dashboard</div>
            <div className="muted" style={{ fontSize: 12 }}>Gyroscope.Ai control panel</div>
          </div>
        </div>

        <label className="muted" style={{ fontSize: 11.5, display: 'block', marginBottom: 4 }}>Endpoint</label>
        <div className="mono" style={{
          fontSize: 12, padding: '8px 10px', borderRadius: 7,
          background: 'var(--surface-2)', border: '1px solid var(--border)',
          color: 'var(--text-muted)', marginBottom: 14, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
        }}>{endpoint || '— (เปิดผ่าน URL ของบอท)'}</div>

        <label className="muted" style={{ fontSize: 11.5, display: 'block', marginBottom: 4 }}>Access token</label>
        <input
          type="password"
          autoFocus
          value={token}
          placeholder="วาง DASH_TOKEN ที่นี่"
          onChange={(e) => setToken(e.target.value)}
          onKeyDown={(e) => { if (e.key === 'Enter' && !busy) submit(); }}
          style={{
            width: '100%', padding: '9px 11px', borderRadius: 7,
            background: 'var(--surface-2)', border: '1px solid var(--border)',
            color: 'var(--text)', fontSize: 13, marginBottom: 16,
          }}
        />

        <button className="btn primary" disabled={busy} onClick={submit}
          style={{ width: '100%', justifyContent: 'center', padding: '9px 0' }}>
          {busy ? 'กำลังเชื่อมต่อ…' : 'เชื่อมต่อ'}
        </button>
        <button className="btn" onClick={onDemo}
          style={{ width: '100%', justifyContent: 'center', padding: '8px 0', marginTop: 8 }}>
          ดูตัวอย่าง (ไม่เชื่อมต่อ)
        </button>
        <div className="muted" style={{ fontSize: 11, marginTop: 14, textAlign: 'center' }}>
          เชื่อมครั้งเดียว — ครั้งต่อไปจะเข้าให้อัตโนมัติ
        </div>
      </div>
    </div>
  );
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = React.useState('overview');
  const [status, setStatus] = React.useState('online');
  const [paletteOpen, setPaletteOpen] = React.useState(false);
  const [notifOpen, setNotifOpen] = React.useState(false);
  const [helpOpen, setHelpOpen] = React.useState(false);
  const [guildOpen, setGuildOpen] = React.useState(null);
  const [cmdOpen, setCmdOpen] = React.useState(null);
  const [bannerDismissed, setBannerDismissed] = React.useState(() => localStorage.getItem('shiftbot.bannerDismissed') === '1');
  const [loginDemo, setLoginDemo] = React.useState(false);
  const conn = useConn();
  // Re-render the whole tree when real bot data arrives (it mutates the shared globals
  // that every page reads), so pages pick up the latest values.
  useRealData();

  // When the connection flips to connected, kick off an immediate real-data refresh.
  React.useEffect(() => {
    if (conn.status === 'connected') REALDATA.refreshAll().catch(() => {});
  }, [conn.status]);

  // Auto-connect on page load — ถ้าเคยเชื่อมไว้ (endpoint + auto-connect) จะเชื่อมเองทันที
  React.useEffect(() => {
    if (CONN.endpoint && CONN.autoConnect && CONN.status !== 'connected') {
      CONN.testConnection().then((ok) => { if (ok) REALDATA.refreshAll().catch(() => {}); });
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  // Apply theme + tokens to <html>
  React.useEffect(() => {
    const root = document.documentElement;
    root.setAttribute('data-theme', t.theme);
    root.setAttribute('data-density', t.density);
    root.setAttribute('data-font', t.font);
    root.setAttribute('data-card', t.card);
    root.style.setProperty('--accent', t.accent);
  }, [t]);

  // ⌘K / ctrl-K → open palette; ? → help
  React.useEffect(() => {
    const onKey = (e) => {
      const inField = ['INPUT', 'TEXTAREA'].includes(document.activeElement?.tagName);
      if ((e.metaKey || e.ctrlKey) && (e.key === 'k' || e.key === 'K')) {
        e.preventDefault();
        setPaletteOpen((x) => !x);
      }
      if (!inField && e.key === '/') {
        e.preventDefault();
        setPaletteOpen(true);
      }
      if (!inField && e.key === '?') {
        e.preventDefault();
        setHelpOpen(true);
      }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  // Real connection status overrides demo status if user connected
  const effectiveStatus = conn.status === 'connected' ? 'online'
    : conn.status === 'error' ? 'degraded'
    : status;

  // Route helpers passed to children
  const openCommandByName = (name) => {
    const c = ALL_COMMANDS.find((x) => x.name === name);
    if (c) setCmdOpen(c);
  };

  const ctx = {
    onOpenGuild: setGuildOpen,
    onOpenCommand: setCmdOpen,
    onRoute: setRoute,
  };

  const Page = {
    overview: PageOverview,
    shifts: PageShifts,
    requests: PageRequests,
    servers: PageServers,
    commands: PageCommands,
    activity: PageActivity,
    moderation: PageModeration,
    logs: PageLogs,
    errors: PageErrors,
    scheduler: PageScheduler,
    plugins: PagePlugins,
    auth: PageAuth,
    settings: PageSettings,
  }[route] || PageOverview;

  // Login gate — show when not connected (unless user chose demo). Endpoint is
  // same-origin by default so only a token is needed; persists for next visit.
  const showLogin = conn.status !== 'connected' && conn.status !== 'connecting' && !loginDemo;
  if (showLogin) {
    return (
      <div className="app" data-sidebar={t.sidebar}>
        <LoginScreen onDemo={() => setLoginDemo(true)}/>
        <ToastHost/>
      </div>
    );
  }

  return (
    <DashCtx.Provider value={ctx}>
      <div className="app" data-sidebar={t.sidebar}>
        <Sidebar route={route} onRoute={setRoute} status={effectiveStatus}/>
        <TopBar
          route={route}
          status={effectiveStatus}
          onOpenPalette={() => setPaletteOpen(true)}
          onOpenNotif={() => setNotifOpen(!notifOpen)}
        />
        <main className="main"><Page/></main>

        <ToastHost/>

        <CommandPalette
          open={paletteOpen}
          onClose={() => setPaletteOpen(false)}
          onRoute={setRoute}
          onOpenGuild={setGuildOpen}
          onOpenCommand={setCmdOpen}
        />
        <GuildDetail guild={guildOpen} onClose={() => setGuildOpen(null)}/>
        <CommandDetail cmd={cmdOpen} onClose={() => setCmdOpen(null)}/>
        <NotificationMenu open={notifOpen} onClose={() => setNotifOpen(false)}/>
        <HelpDialog open={helpOpen} onClose={() => setHelpOpen(false)}/>

        <TweaksPanel>
          <TweakSection label="Appearance"/>
          <TweakRadio label="Theme" value={t.theme} options={['dark', 'light']} onChange={(v) => setTweak('theme', v)}/>
          <TweakColor label="Accent" value={t.accent} options={ACCENT_OPTIONS} onChange={(v) => setTweak('accent', v)}/>
          <TweakRadio label="Card style" value={t.card} options={['flat', 'elevated', 'outlined']} onChange={(v) => setTweak('card', v)}/>

          <TweakSection label="Layout"/>
          <TweakRadio label="Sidebar" value={t.sidebar} options={['expanded', 'rail']} onChange={(v) => setTweak('sidebar', v)}/>
          <TweakRadio label="Density" value={t.density} options={['compact', 'regular', 'comfy']} onChange={(v) => setTweak('density', v)}/>

          <TweakSection label="Typography"/>
          <TweakRadio label="Font" value={t.font} options={['inter', 'geist', 'ibm', 'system']} onChange={(v) => setTweak('font', v)}/>

          <TweakSection label="Demo"/>
          <TweakRadio label="Bot status" value={status} options={['online', 'degraded', 'down']} onChange={setStatus}/>
          <TweakButton label="Open command palette" onClick={() => setPaletteOpen(true)}>⌘K</TweakButton>
          <TweakButton label="Show keyboard shortcuts" onClick={() => setHelpOpen(true)}>?</TweakButton>
        </TweaksPanel>
      </div>
    </DashCtx.Provider>
  );
}

const DashCtx = React.createContext({ onOpenGuild: () => {}, onOpenCommand: () => {}, onRoute: () => {} });
window.DashCtx = DashCtx;

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