import type { ReactNode } from "react";
import { IconButton, Tooltip } from "../../ui/primitives";
import { Wordmark } from "../../ui/brand";
import { Monitor, Moon, Sun } from "lucide-react";
import { useAppStore, type ThemeMode } from "../../store";
import { t } from "../../i18n";
import s from "./AuthShell.module.css";

export interface AuthShellProps
{
    title: ReactNode;
    subtitle?: ReactNode;
    children: ReactNode;
    footer?: ReactNode;
    /** 卡内品牌字标。默认不渲染——顶栏已有 logo，卡内再放会一屏两 logo；
     *  需要时显式传入一个节点即可。 */
    cardBrand?: ReactNode | null;
    /** 隐藏顶栏 logo。过渡型认证屏（OAuth 回调 / 首次设置）用：它们会 SPA
     *  跳转到主界面，跳转帧里顶栏 logo 会与主界面 header 的 logo 重叠成“两个
     *  logo”，隐藏即可消除。登录页是整页跳 IdP、无此重叠，保留 logo。 */
    hideBrand?: boolean;
}

// 全屏外壳：登录、首次设置、OAuth 回调共用。带轻量品牌 + 主题切换，
// 让用户在登录前也能调主题。
export function AuthShell(props: AuthShellProps)
{
    const { title, subtitle, children, footer, cardBrand, hideBrand } = props;
    const theme = useAppStore((s) => s.theme);
    const setTheme = useAppStore((s) => s.setTheme);
    const next: ThemeMode = theme === "system" ? "light" : theme === "light" ? "dark" : "system";
    const icon = theme === "light" ? <Sun size={16} />
               : theme === "dark"  ? <Moon size={16} />
               : <Monitor size={16} />;

    // 默认不在卡内重复 logo（顶栏已有），避免一屏两 logo；需要时显式传入。
    const brandNode = cardBrand === undefined ? null : cardBrand;

    return (
        <div className={s.shell}>
            <div className={s.topbar}>
                {/* 空 span 占位保持 space-between，主题切换仍靠右。 */}
                {hideBrand ? <span /> : <span className={s.brand}><Wordmark /></span>}
                <Tooltip label={t("nav.themeToggle")}>
                    <IconButton aria-label={t("nav.themeToggle")} size="sm" onClick={() => setTheme(next)}>
                        {icon}
                    </IconButton>
                </Tooltip>
            </div>

            <div className={s.center}>
                <div className={s.card}>
                    {brandNode && <div className={s.cardBrand}>{brandNode}</div>}
                    <div className={s.hero}>
                        <h1 className={s.title}>{title}</h1>
                        {subtitle && <p className={s.subtitle} data-jz-level="paragraph">{subtitle}</p>}
                    </div>
                    <div className={s.body}>
                        {children}
                    </div>
                </div>
            </div>

            {footer && <div className={s.footer}>{footer}</div>}
        </div>
    );
}

// 公共 footer 链接组件:登录页用,setup / oauth 不一定要。
export function AuthFooterLinks(props: { items: { label: string; href: string }[] })
{
    const { items } = props;
    return (
        <div className={s.footerLinks}>
            {items.map((it, i) => (
                <span key={it.href} style={{ display: "inline-flex", gap: "var(--space-3)", alignItems: "center" }}>
                    {i > 0 && <span className={s.sep}>·</span>}
                    <a href={it.href} target="_blank" rel="noreferrer noopener">{it.label}</a>
                </span>
            ))}
        </div>
    );
}