import type { CurrentUser, SiteSettings } from '../../env';
import { AdminLayout } from './layout';

export function AdminSettingsPage(props: {
  settings: SiteSettings;
  currentUser: CurrentUser;
  csrfToken: string;
}) {
  const settings = props.settings;
  return (
    <AdminLayout title="站点设置" settings={settings} currentUser={props.currentUser} csrfToken={props.csrfToken} active="/admin/settings">
      <section class="admin-panel">
        <form class="admin-settings-form" data-admin-settings-form>
          <h2>基础</h2>
          <label><span>站点标题</span><input name="site_name" value={settings.site_name} /></label>
          <label><span>副标题</span><input name="site_description" value={settings.site_description} /></label>
          <label><span>备案号</span><input name="beian_info" value={settings.beian_info} /></label>
          <h2>外观</h2>
          <label><span>站点头像 R2 Key</span><input name="site_avatar_key" value={settings.site_avatar_key} /></label>
          <label><span>顶部图片 R2 Key</span><input name="top_image_key" value={settings.top_image_key} /></label>
          <label><span>顶部视频 R2 Key</span><input name="top_video_key" value={settings.top_video_key} /></label>
          <label><span>CDN Base URL</span><input name="cdn_base_url" value={settings.cdn_base_url} /></label>
          <h2>内容</h2>
          <label><span>开放注册</span><select name="allow_register"><option value="true" selected={settings.allow_register}>开启</option><option value="false" selected={!settings.allow_register}>关闭</option></select></label>
          <label><span>默认角色</span><select name="default_role"><option value="subscriber" selected={settings.default_role === 'subscriber'}>subscriber</option><option value="author" selected={settings.default_role === 'author'}>author</option><option value="admin" selected={settings.default_role === 'admin'}>admin</option></select></label>
          <label><span>评论模式</span><select name="comment_mode"><option value="everyone" selected={settings.comment_mode === 'everyone'}>everyone</option><option value="registered" selected={settings.comment_mode === 'registered'}>registered</option><option value="closed" selected={settings.comment_mode === 'closed'}>closed</option></select></label>
          <label><span>评论审核</span><select name="comment_review"><option value="true" selected={settings.comment_review}>开启</option><option value="false" selected={!settings.comment_review}>关闭</option></select></label>
          <h2>上传</h2>
          <label><span>图片最大 MB</span><input name="upload_max_image_mb" type="number" value={settings.upload_max_image_mb} min="1" max="100" /></label>
          <label><span>视频最大 MB</span><input name="upload_max_video_mb" type="number" value={settings.upload_max_video_mb} min="1" max="500" /></label>
          <h2>集成</h2>
          <label><span>腾讯地图 Key</span><input name="tencent_map_key" value={settings.tencent_map_key} /></label>
          <h2>自定义代码</h2>
          <label><span>自定义 CSS</span><textarea name="custom_css" rows={6}>{settings.custom_css}</textarea></label>
          <label><span>自定义 JS</span><textarea name="custom_js" rows={6}>{settings.custom_js}</textarea></label>
          <label><span>统计代码</span><textarea name="analytics_code" rows={6}>{settings.analytics_code}</textarea></label>
          <button class="primary-button" type="submit">保存设置</button>
        </form>
      </section>
    </AdminLayout>
  );
}
