/** 应用框架:100vh 布局(侧栏 + 顶栏页面标题 + 内容区滚动),会话守卫 + 主题切换 + 头像下拉(设置/退出) */
import { useEffect, useState } from "react";
import { Outlet, useLocation, useNavigate } from "react-router-dom";
import { Avatar, Button, Dropdown, Layout, Menu } from "antd";
import {
  DashboardOutlined,
  MailOutlined,
  CloudServerOutlined,
  GlobalOutlined,
  UserOutlined,
  LogoutOutlined,
  SettingOutlined,
} from "@ant-design/icons";
import { health, logout, me } from "./api.ts";
import { SettingsModal } from "./components/SettingsModal.tsx";
import { useTheme } from "./theme-context.ts";

const { Sider, Header, Content } = Layout;

/** # 成员变量: 侧栏菜单项 **/
const MENU_ITEMS = [
  { key: "/", icon: <DashboardOutlined />, label: "概览" },
  { key: "/accounts", icon: <CloudServerOutlined />, label: "账号 Accounts" },
  { key: "/domains", icon: <GlobalOutlined />, label: "域名 Domains" },
  { key: "/mailboxes", icon: <MailOutlined />, label: "邮箱 Mailboxes" },
  { key: "/inboxs", icon: <MailOutlined />, label: "收件箱 Inboxs" },
];

/** # 成员变量: 路由 -> 页面标题/副标题 **/
const PAGE_META: Record<string, { title: string; subtitle: string }> = {
  "/": { title: "概览", subtitle: "账号、域名与邮件总览" },
  "/accounts": { title: "账号", subtitle: "通过 Cloudflare OAuth 接入的 Cloudflare 账号(Email Worker 直连)" },
  "/domains": { title: "域名", subtitle: "OAuth 自动同步的收件域名与 Email Workers" },
  "/mailboxes": { title: "邮箱", subtitle: "收件地址、保留策略与邮箱级 Webhook" },
  "/inboxs": { title: "收件箱", subtitle: "已接收邮件(默认保留 1 天),支持按域名筛选" },
};

/** # 成员变量: 主题切换按钮的太阳/月亮 SVG 图标 **/
const SunIcon = (
  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
    <circle cx="12" cy="12" r="4" />
    <path d="M12 2v2m0 16v2M4.9 4.9l1.4 1.4m11.4 11.4 1.4 1.4M2 12h2m16 0h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4" />
  </svg>
);
const MoonIcon = (
  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z" />
  </svg>
);

/** # 函数
 * 应用框架组件:未登录跳 /login;顶栏展示页面标题 + 主题切换 + 头像下拉;侧栏品牌带版本号
 */
export function App() {
  const navigate = useNavigate();
  const location = useLocation();
  const { dark, toggle } = useTheme();
  const [ready, setReady] = useState(false);
  const [username, setUsername] = useState("");
  const [version, setVersion] = useState("");
  const [settingsOpen, setSettingsOpen] = useState(false);

  useEffect(() => {
    void (async () => {
      try {
        const [healthInfo, meInfo] = await Promise.all([health(), me()]);
        setVersion(healthInfo.version);
        setUsername(meInfo.user.username);
        setReady(true);
      } catch {
        navigate("/login", { replace: true });
      }
    })();
  }, [navigate]);

  if (!ready) return null;
  const meta = PAGE_META[location.pathname] ?? { title: "WmailHub", subtitle: "" };

  return (
    <>
      <Layout className="app-layout">
        <Sider width={228} className="app-sider" theme={dark ? "dark" : "light"}>
          <div className="brand">
            <img src="/logo.svg" alt="WmailHub" />
            <span className="name">WmailHub</span>
            {/* 版本号小一号、居上对齐(来源 package.json) */}
            {version && <span className="brand-version">v{version}</span>}
          </div>
          <Menu
            mode="inline"
            selectedKeys={[location.pathname]}
            items={MENU_ITEMS}
            onClick={({ key }) => navigate(key)}
            style={{ borderInlineEnd: "none" }}
          />
        </Sider>
        <Layout>
          <Header className="app-header">
            <div className="header-meta">
              <div className="title">{meta.title}</div>
              <div className="subtitle">{meta.subtitle}</div>
            </div>
            <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
              {/* 主题切换:亮↔暗,位于头像左侧 */}
              <Button
                type="text"
                aria-label="切换主题"
                title={dark ? "切换到亮色模式" : "切换到暗色模式"}
                icon={dark ? SunIcon : MoonIcon}
                onClick={toggle}
              />
              {/* 设置入口收进头像下拉 */}
              <div>
                <Dropdown
                  menu={{
                    items: [
                      {
                        key: "settings",
                        icon: <SettingOutlined />,
                        label: "设置",
                        onClick: () => setSettingsOpen(true),
                      },
                      {
                        type: "divider" as const,
                      },
                      {
                        key: "logout",
                        icon: <LogoutOutlined />,
                        label: "退出登录",
                        onClick: async () => {
                          await logout().catch(() => undefined);
                          window.location.href = "/login";
                        },
                      },
                    ],
                  }}
                >
                  <div style={{ display: "flex", alignItems: "center", gap: 8, cursor: "pointer" }}>
                    <Avatar size={30} icon={<UserOutlined />} />
                    <span>{username}</span>
                  </div>
                </Dropdown>
              </div>
            </div>
          </Header>
          <Content className="app-content">
            <Outlet />
          </Content>
        </Layout>
      </Layout>
      <SettingsModal open={settingsOpen} onClose={() => setSettingsOpen(false)} />
    </>
  );
}