import type { CurrentUser, SiteSettings } from '../../env';
import { safeJson } from '../../utils/html';

const nav = [
  ['仪表盘', '/admin'],
  ['用户', '/admin/users'],
  ['内容', '/admin/posts'],
  ['评论', '/admin/comments'],
  ['友链', '/admin/links'],
  ['设置', '/admin/settings'],
  ['审计', '/admin/audit']
];

export function AdminLayout(props: {
  title: string;
  settings: SiteSettings;
  currentUser: CurrentUser;
  csrfToken: string;
  active: string;
  children: any;
}) {
  const config = {
    apiBase: '/api',
    csrfToken: props.csrfToken,
    currentUser: props.currentUser,
    currentUserIsAdmin: true
  };
  return (
    <html lang="zh-CN">
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>{props.title} - {props.settings.site_name}</title>
        <script dangerouslySetInnerHTML={{ __html: "(function(){var t=localStorage.getItem('wemoments_theme_mode');if(t==='dark')document.documentElement.classList.add('dark');})();" }} />
        <link rel="stylesheet" href="/assets/css/wemoments.css" />
        <script dangerouslySetInnerHTML={{ __html: `window.WEMOMENTS_CONFIG=${safeJson(config)};` }} />
      </head>
      <body class="admin-body">
        <div class="admin-shell">
          <aside class="admin-sidebar">
            <a class="admin-brand" href="/">{props.settings.site_name}</a>
            <nav>
              {nav.map(([label, href]) => <a class={props.active === href ? 'active' : ''} href={href}>{label}</a>)}
            </nav>
          </aside>
          <main class="admin-main">
            <header class="admin-topbar">
              <h1>{props.title}</h1>
              <div><a href="/">前台</a><span>{props.currentUser.displayName}</span></div>
            </header>
            {props.children}
          </main>
        </div>
        <script defer src="/assets/js/axios.min.js"></script>
        <script defer src="/assets/js/wemoments-admin.js"></script>
      </body>
    </html>
  );
}
