import { useEffect, useMemo, useState, type ReactElement } from 'react';
import axios from 'axios';
import { ChevronDown, ChevronUp, 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 getSingleBotPasswordKey(botId: string) {
  return `nanobot-bot-page-password:${String(botId || '').trim()}`;
}

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);
  const [singleBotPassword, setSingleBotPassword] = useState('');
  const [singleBotPasswordError, setSingleBotPasswordError] = useState('');
  const [singleBotUnlocked, setSingleBotUnlocked] = useState(false);
  const [singleBotSubmitting, setSingleBotSubmitting] = useState(false);
  useBotsSync(forcedBotId);
  const t = pickLocale(locale, { 'zh-cn': appZhCn, en: appEn });
  const isSingleBotCompactView = compactMode && Boolean(String(forcedBotId || '').trim());
  const [headerCollapsed, setHeaderCollapsed] = useState(isSingleBotCompactView);
  const forced = String(forcedBotId || '').trim();
  const forcedBot = forced ? activeBots[forced] : undefined;
  const shouldPromptSingleBotPassword = Boolean(forced && forcedBot?.has_access_password && !singleBotUnlocked);

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

  useEffect(() => {
    setHeaderCollapsed(isSingleBotCompactView);
  }, [isSingleBotCompactView, forcedBotId]);

  useEffect(() => {
    setSingleBotUnlocked(false);
    setSingleBotPassword('');
    setSingleBotPasswordError('');
  }, [forced]);

  useEffect(() => {
    if (!forced || !forcedBot?.has_access_password || singleBotUnlocked) return;
    const stored = typeof window !== 'undefined' ? window.sessionStorage.getItem(getSingleBotPasswordKey(forced)) || '' : '';
    if (!stored) return;
    let alive = true;
    const boot = async () => {
      try {
        await axios.post(`${APP_ENDPOINTS.apiBase}/bots/${encodeURIComponent(forced)}/auth/login`, { password: stored });
        if (!alive) return;
        setSingleBotUnlocked(true);
        setSingleBotPassword('');
        setSingleBotPasswordError('');
      } catch {
        if (typeof window !== 'undefined') window.sessionStorage.removeItem(getSingleBotPasswordKey(forced));
        if (!alive) return;
        setSingleBotPasswordError(locale === 'zh' ? 'Bot 密码错误，请重新输入。' : 'Invalid bot password. Please try again.');
      }
    };
    void boot();
    return () => {
      alive = false;
    };
  }, [forced, forcedBot?.has_access_password, locale, singleBotUnlocked]);

  const unlockSingleBot = async () => {
    const entered = String(singleBotPassword || '').trim();
    if (!entered) {
      setSingleBotPasswordError(locale === 'zh' ? '请输入 Bot 密码。' : 'Enter the bot password.');
      return;
    }
    if (!forced) return;
    setSingleBotSubmitting(true);
    try {
      await axios.post(`${APP_ENDPOINTS.apiBase}/bots/${encodeURIComponent(forced)}/auth/login`, { password: entered });
      if (typeof window !== 'undefined') {
        window.sessionStorage.setItem(getSingleBotPasswordKey(forced), entered);
      }
      setSingleBotPasswordError('');
      setSingleBotUnlocked(true);
      setSingleBotPassword('');
    } catch {
      if (typeof window !== 'undefined') {
        window.sessionStorage.removeItem(getSingleBotPasswordKey(forced));
      }
      setSingleBotPasswordError(locale === 'zh' ? 'Bot 密码错误，请重试。' : 'Invalid bot password. Please try again.');
    } finally {
      setSingleBotSubmitting(false);
    }
  };

  return (
    <div className={`app-shell ${compactMode ? 'app-shell-compact' : ''}`} data-theme={theme}>
      <div className="app-frame">
        <header
          className={`app-header ${isSingleBotCompactView ? 'app-header-collapsible' : ''} ${isSingleBotCompactView && headerCollapsed ? 'is-collapsed' : ''}`}
          onClick={() => {
            if (isSingleBotCompactView && headerCollapsed) setHeaderCollapsed(false);
          }}
        >
          <div className="row-between app-header-top">
            <div className="app-title">
              <img src="/app-bot-icon.svg" alt="Nanobot" className="app-title-icon" />
              <div className="app-title-main">
                <h1>{t.title}</h1>
                {isSingleBotCompactView ? (
                  <button
                    type="button"
                    className="app-header-toggle-inline"
                    onClick={(event) => {
                      event.stopPropagation();
                      setHeaderCollapsed((v) => !v);
                    }}
                    title={headerCollapsed ? t.expandHeader : t.collapseHeader}
                    aria-label={headerCollapsed ? t.expandHeader : t.collapseHeader}
                  >
                    {headerCollapsed ? <ChevronDown size={16} /> : <ChevronUp size={16} />}
                  </button>
                ) : null}
              </div>
            </div>

            <div className="app-header-actions">
              {!headerCollapsed ? (
                <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>
              ) : null}
            </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>
      )}

      {shouldPromptSingleBotPassword ? (
        <div className="modal-mask app-modal-mask">
          <div className="app-login-card" onClick={(event) => event.stopPropagation()}>
            <img src="/app-bot-icon.svg" alt="Nanobot" className="app-login-icon" />
            <h1>{forcedBot?.name || forced}</h1>
            <p>{locale === 'zh' ? '请输入该 Bot 的访问密码后继续。' : 'Enter the bot password to continue.'}</p>
            <div className="app-login-form">
              <input
                className="input"
                type="password"
                value={singleBotPassword}
                onChange={(event) => {
                  setSingleBotPassword(event.target.value);
                  if (singleBotPasswordError) setSingleBotPasswordError('');
                }}
                onKeyDown={(event) => {
                  if (event.key === 'Enter') void unlockSingleBot();
                }}
                placeholder={locale === 'zh' ? 'Bot 密码' : 'Bot password'}
                autoFocus
              />
              {singleBotPasswordError ? <div className="app-login-error">{singleBotPasswordError}</div> : null}
              <button className="btn btn-primary app-login-submit" onClick={() => void unlockSingleBot()} disabled={singleBotSubmitting}>
                {singleBotSubmitting ? (locale === 'zh' ? '校验中...' : 'Checking...') : (locale === 'zh' ? '进入' : 'Continue')}
              </button>
            </div>
          </div>
        </div>
      ) : null}
    </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);
  const bypassPanelGate = Boolean(String(urlView.forcedBotId || '').trim());

  useEffect(() => {
    if (bypassPanelGate) {
      setRequired(false);
      setAuthenticated(true);
      setChecking(false);
      return;
    }
    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;
    };
  }, [bypassPanelGate, 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;