dashboard-nanobot/frontend/src/App.tsx

import { useEffect, useMemo, useState, type ReactElement } from 'react';
import axios from 'axios';
import { MoonStar, SunMedium, X } from 'lucide-react';
import { useAppStore } from './store/appStore';
import { useBotsSync } from './hooks/useBotsSync';
import { APP_ENDPOINTS } from './config/env';
import { ImageFactoryModule } from './modules/images/ImageFactoryModule';
import { BotWizardModule } from './modules/onboarding/BotWizardModule';
import { BotDashboardModule } from './modules/dashboard/BotDashboardModule';
import { pickLocale } from './i18n';
import { appZhCn } from './i18n/app.zh-cn';
import { appEn } from './i18n/app.en';
import { LucentIconButton } from './components/lucent/LucentIconButton';
import { LucentTooltip } from './components/lucent/LucentTooltip';
import { clearPanelAccessPassword, getPanelAccessPassword, setPanelAccessPassword } from './utils/panelAccess';
import './App.css';

function AuthenticatedApp({
  forcedBotId,
  compactMode,
}: {
  forcedBotId?: string;
  compactMode: boolean;
}) {
  const { theme, setTheme, locale, setLocale, activeBots } = useAppStore();
  const [showImageFactory, setShowImageFactory] = useState(false);
  const [showCreateWizard, setShowCreateWizard] = useState(false);
  useBotsSync();
  const t = pickLocale(locale, { 'zh-cn': appZhCn, en: appEn });

  useEffect(() => {
    const forced = String(forcedBotId || '').trim();
    if (!forced) {
      document.title = t.title;
      return;
    }
    const bot = activeBots[forced];
    const botName = String(bot?.name || '').trim();
    document.title = botName ? `${t.title} - ${botName}` : `${t.title} - ${forced}`;
  }, [activeBots, t.title, forcedBotId]);

  return (
    <div className={`app-shell ${compactMode ? 'app-shell-compact' : ''}`} data-theme={theme}>
      <div className="app-frame">
        <header className="app-header">
          <div className="row-between app-header-top">
            <div className="app-title">
              <img src="/app-bot-icon.svg" alt="Nanobot" className="app-title-icon" />
              <div>
                <h1>{t.title}</h1>
              </div>
            </div>

            <div className="global-switches">
              <div className="switch-compact">
                <LucentTooltip content={t.dark}>
                  <button
                    className={`switch-btn ${theme === 'dark' ? 'active' : ''}`}
                    onClick={() => setTheme('dark')}
                    aria-label={t.dark}
                  >
                    <MoonStar size={14} />
                  </button>
                </LucentTooltip>
                <LucentTooltip content={t.light}>
                  <button
                    className={`switch-btn ${theme === 'light' ? 'active' : ''}`}
                    onClick={() => setTheme('light')}
                    aria-label={t.light}
                  >
                    <SunMedium size={14} />
                  </button>
                </LucentTooltip>
              </div>

              <div className="switch-compact">
                <LucentTooltip content={t.zh}>
                  <button
                    className={`switch-btn switch-btn-lang ${locale === 'zh' ? 'active' : ''}`}
                    onClick={() => setLocale('zh')}
                    aria-label={t.zh}
                  >
                    <span>ZH</span>
                  </button>
                </LucentTooltip>
                <LucentTooltip content={t.en}>
                  <button
                    className={`switch-btn switch-btn-lang ${locale === 'en' ? 'active' : ''}`}
                    onClick={() => setLocale('en')}
                    aria-label={t.en}
                  >
                    <span>EN</span>
                  </button>
                </LucentTooltip>
              </div>
            </div>
          </div>
        </header>

        <main className="main-stage">
          <BotDashboardModule
            onOpenCreateWizard={() => setShowCreateWizard(true)}
            onOpenImageFactory={() => setShowImageFactory(true)}
            forcedBotId={forcedBotId || undefined}
            compactMode={compactMode}
          />
        </main>
      </div>

      {!compactMode && showImageFactory && (
        <div className="modal-mask app-modal-mask" onClick={() => setShowImageFactory(false)}>
          <div className="modal-card app-modal-card" onClick={(e) => e.stopPropagation()}>
            <div className="modal-title-row modal-title-with-close">
              <div className="modal-title-main">
                <h3>{t.nav.images.title}</h3>
              </div>
              <div className="modal-title-actions">
                <LucentIconButton className="btn btn-secondary btn-sm icon-btn" onClick={() => setShowImageFactory(false)} tooltip={t.close} aria-label={t.close}>
                  <X size={14} />
                </LucentIconButton>
              </div>
            </div>
            <div className="app-modal-body">
              <ImageFactoryModule />
            </div>
          </div>
        </div>
      )}

      {!compactMode && showCreateWizard && (
        <div className="modal-mask app-modal-mask" onClick={() => setShowCreateWizard(false)}>
          <div className="modal-card app-modal-card" onClick={(e) => e.stopPropagation()}>
            <div className="modal-title-row modal-title-with-close">
              <div className="modal-title-main">
                <h3>{t.nav.onboarding.title}</h3>
              </div>
              <div className="modal-title-actions">
                <LucentIconButton className="btn btn-secondary btn-sm icon-btn" onClick={() => setShowCreateWizard(false)} tooltip={t.close} aria-label={t.close}>
                  <X size={14} />
                </LucentIconButton>
              </div>
            </div>
            <div className="app-modal-body">
              <BotWizardModule
                onCreated={() => {
                  setShowCreateWizard(false);
                }}
                onGoDashboard={() => setShowCreateWizard(false)}
              />
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

function PanelLoginGate({
  children,
}: {
  children: (props: { forcedBotId?: string; compactMode: boolean }) => ReactElement;
}) {
  const { theme, locale } = useAppStore();
  const t = pickLocale(locale, { 'zh-cn': appZhCn, en: appEn });
  const urlView = useMemo(() => {
    const params = new URLSearchParams(window.location.search);
    const pathMatch = window.location.pathname.match(/^\/bot\/([^/?#]+)/i);
    let forcedBotIdFromPath = '';
    if (pathMatch?.[1]) {
      try {
        forcedBotIdFromPath = decodeURIComponent(pathMatch[1]).trim();
      } catch {
        forcedBotIdFromPath = String(pathMatch[1]).trim();
      }
    }
    const forcedBotIdFromQuery =
      (params.get('botId') || params.get('bot_id') || params.get('id') || '').trim();
    const forcedBotId = forcedBotIdFromPath || forcedBotIdFromQuery;
    const compactRaw = (params.get('compact') || params.get('h5') || params.get('mobile') || '').trim().toLowerCase();
    const compactByFlag = ['1', 'true', 'yes', 'on'].includes(compactRaw);
    const compactMode = compactByFlag || forcedBotId.length > 0;
    return { forcedBotId, compactMode };
  }, []);

  const [checking, setChecking] = useState(true);
  const [required, setRequired] = useState(false);
  const [authenticated, setAuthenticated] = useState(false);
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');
  const [submitting, setSubmitting] = useState(false);

  useEffect(() => {
    let alive = true;
    const boot = async () => {
      try {
        const status = await axios.get<{ enabled: boolean }>(`${APP_ENDPOINTS.apiBase}/panel/auth/status`);
        if (!alive) return;
        const enabled = Boolean(status.data?.enabled);
        if (!enabled) {
          setRequired(false);
          setAuthenticated(true);
          setChecking(false);
          return;
        }
        setRequired(true);
        const stored = getPanelAccessPassword();
        if (!stored) {
          setChecking(false);
          return;
        }
        try {
          await axios.post(`${APP_ENDPOINTS.apiBase}/panel/auth/login`, { password: stored });
          if (!alive) return;
          setAuthenticated(true);
        } catch {
          clearPanelAccessPassword();
          if (!alive) return;
          setError(locale === 'zh' ? '面板访问密码错误，请重新输入。' : 'Invalid panel access password. Please try again.');
        } finally {
          if (alive) setChecking(false);
        }
      } catch {
        if (!alive) return;
        setRequired(false);
        setAuthenticated(true);
        setChecking(false);
      }
    };
    void boot();
    return () => {
      alive = false;
    };
  }, [locale]);

  const onSubmit = async () => {
    const next = String(password || '').trim();
    if (!next) {
      setError(locale === 'zh' ? '请输入面板访问密码。' : 'Enter the panel access password.');
      return;
    }
    setSubmitting(true);
    setError('');
    try {
      await axios.post(`${APP_ENDPOINTS.apiBase}/panel/auth/login`, { password: next });
      setPanelAccessPassword(next);
      setAuthenticated(true);
    } catch {
      clearPanelAccessPassword();
      setError(locale === 'zh' ? '面板访问密码错误。' : 'Invalid panel access password.');
    } finally {
      setSubmitting(false);
    }
  };

  if (checking) {
    return (
      <div className="app-shell" data-theme={theme}>
        <div className="app-login-shell">
          <div className="app-login-card">
            <img src="/app-bot-icon.svg" alt="Nanobot" className="app-login-icon" />
            <h1>{t.title}</h1>
            <p>{locale === 'zh' ? '正在校验面板访问权限...' : 'Checking panel access...'}</p>
          </div>
        </div>
      </div>
    );
  }

  if (required && !authenticated) {
    return (
      <div className="app-shell" data-theme={theme}>
        <div className="app-login-shell">
          <div className="app-login-card">
            <img src="/app-bot-icon.svg" alt="Nanobot" className="app-login-icon" />
            <h1>{t.title}</h1>
            <p>{locale === 'zh' ? '请输入面板访问密码后继续。' : 'Enter the panel access password to continue.'}</p>
            <div className="app-login-form">
              <input
                className="input"
                type="password"
                value={password}
                onChange={(event) => setPassword(event.target.value)}
                onKeyDown={(event) => {
                  if (event.key === 'Enter') void onSubmit();
                }}
                placeholder={locale === 'zh' ? '面板访问密码' : 'Panel access password'}
              />
              {error ? <div className="app-login-error">{error}</div> : null}
              <button className="btn btn-primary app-login-submit" onClick={() => void onSubmit()} disabled={submitting}>
                {submitting ? (locale === 'zh' ? '登录中...' : 'Signing in...') : (locale === 'zh' ? '登录' : 'Sign In')}
              </button>
            </div>
          </div>
        </div>
      </div>
    );
  }

  return children(urlView);
}

function App() {
  return <PanelLoginGate>{(urlView) => <AuthenticatedApp {...urlView} />}</PanelLoginGate>;
}

export default App;