/**
 * Admin 后台 - 系统配置管理页面(报刊风)
 *
 * 功能:
 * - 管理员密钥(X-API-Key):存本机浏览器,自动附带到采集/回测/结算等受保护接口
 * - 显示当前 .env 配置(脱敏;后端暂无配置端点,为静态说明)
 * - 配置修改指南
 */

import { useEffect, useState, useCallback } from 'react'
import { fetchSystemConfig } from '../dal'
import { getAdminKey, setAdminKey } from '../api'
import { Card, CardBody, CardHeader, Badge, SectionHeader, Alert, Spinner, SkeletonBlock } from '../components'

export default function ConfigPage() {
  const [config, setConfig] = useState<any[]>([])
  const [loading, setLoading] = useState(true)

  // 管理员密钥
  const [adminKey, setAdminKeyInput] = useState('')
  const [keySaved, setKeySaved] = useState(false)
  const [keyExists, setKeyExists] = useState(false)

  const loadConfig = useCallback(async () => {
    setLoading(true)
    try {
      const data = await fetchSystemConfig()
      setConfig(data)
    } catch {
      setConfig([])
    } finally {
      setLoading(false)
    }
  }, [])

  useEffect(() => {
    loadConfig()
    const stored = getAdminKey()
    setKeyExists(stored !== '')
  }, [loadConfig])

  function handleSaveKey(e: React.FormEvent) {
    e.preventDefault()
    setAdminKey(adminKey.trim())
    setKeyExists(adminKey.trim() !== '')
    setKeySaved(true)
    setAdminKeyInput('')
    setTimeout(() => setKeySaved(false), 3000)
  }

  function handleClearKey() {
    setAdminKey('')
    setAdminKeyInput('')
    setKeyExists(false)
  }

  return (
    <div className="space-y-6">
      <SectionHeader
        title="系统配置"
        description="管理员密钥管理与系统参数查看。敏感配置一律通过服务器 .env 文件管理。"
      />

      {/* 管理员密钥 */}
      <Card>
        <CardHeader
          title="管理员密钥 (X-API-Key)"
          description="后端设置 ADMIN_API_KEY 后,采集 / 回测 / 结算等接口需要此密钥"
        />
        <CardBody>
          <form onSubmit={handleSaveKey} className="space-y-4">
            <div className="flex flex-col gap-3 sm:flex-row">
              <input
                type="password"
                value={adminKey}
                onChange={e => setAdminKeyInput(e.target.value)}
                placeholder={keyExists ? '••••••••(已保存,输入新值可更换)' : '粘贴 ADMIN_API_KEY'}
                autoComplete="off"
                className="field flex-1"
              />
              <div className="flex gap-2">
                <button type="submit" disabled={!adminKey.trim()} className="btn btn-solid">
                  保存
                </button>
                <button
                  type="button"
                  onClick={handleClearKey}
                  disabled={!keyExists}
                  className="btn btn-sm"
                >
                  清除
                </button>
              </div>
            </div>

            {keySaved && <Alert kind="ok" title="密钥已保存,后续请求将自动附带" />}
            {keyExists && !keySaved && (
              <p className="text-2xs text-ink-500">
                当前状态:<Badge status="success">已保存密钥</Badge>
                <span className="ml-2">密钥仅保存在本机浏览器,不会上传到任何第三方。</span>
              </p>
            )}
            <p className="border-l-2 border-ink-300 pl-3 text-2xs leading-relaxed text-ink-500">
              密钥与服务器 .env 中 ADMIN_API_KEY 一致即可。留空时后端默认不鉴权(本地开发模式)。
              遇到 401 错误通常就是缺这个密钥。
            </p>
          </form>
        </CardBody>
      </Card>

      {/* 快速导航 */}
      <div className="grid gap-4 sm:grid-cols-2">
        <a
          href="/admin/data-sources"
          className="group flex items-center justify-between border border-ink-300 p-4 transition-colors hover:border-ink-900 hover:bg-paper-100"
        >
          <div>
            <div className="font-serif text-sm font-bold text-ink-900">数据源配置</div>
            <div className="mt-0.5 text-2xs text-ink-500">管理采集源 API Key</div>
          </div>
          <span className="text-ink-300 transition-colors group-hover:text-press" aria-hidden="true">→</span>
        </a>
        <a
          href="/admin/llm-config"
          className="group flex items-center justify-between border border-ink-300 p-4 transition-colors hover:border-ink-900 hover:bg-paper-100"
        >
          <div>
            <div className="font-serif text-sm font-bold text-ink-900">LLM 配置</div>
            <div className="mt-0.5 text-2xs text-ink-500">管理模型连接与统计</div>
          </div>
          <span className="text-ink-300 transition-colors group-hover:text-press" aria-hidden="true">→</span>
        </a>
      </div>

      {/* 配置列表 */}
      <Card>
        <CardHeader
          title="当前配置"
          description="脱敏展示,实际值在服务器 .env 文件中"
          action={
            <button onClick={loadConfig} disabled={loading} className="btn btn-sm">
              {loading ? (<><Spinner /> 加载中</>) : '刷新'}
            </button>
          }
        />
        <CardBody className="px-0 sm:px-0">
          {loading ? (
            <div className="space-y-3 px-4 sm:px-5">
              {[1, 2, 3, 4, 5].map(i => (
                <SkeletonBlock key={i} className="h-9 w-full" />
              ))}
            </div>
          ) : config.length > 0 ? (
            <div>
              {config.map(item => (
                <div
                  key={item.key}
                  className="flex flex-col gap-1 border-b border-ink-200 px-4 py-2.5 last:border-b-0 sm:grid sm:grid-cols-[minmax(0,2fr)_minmax(0,3fr)_minmax(0,2fr)] sm:items-baseline sm:gap-4 sm:px-5"
                >
                  <div className="flex items-center gap-2">
                    <span className="font-mono text-xs text-ink-800">{item.key}</span>
                    {item.is_sensitive && <Badge status="warning">敏感</Badge>}
                  </div>
                  <div className="break-all font-mono text-2xs text-ink-500">{item.value_masked}</div>
                  <div className="text-2xs text-ink-400">{item.description}</div>
                </div>
              ))}
            </div>
          ) : (
            <p className="py-8 text-center text-xs text-ink-400">无法加载配置信息</p>
          )}
        </CardBody>
      </Card>

      {/* 修改指南 */}
      <Card>
        <CardHeader title="修改配置指南" />
        <CardBody className="space-y-5">
          <div>
            <h4 className="mb-2 font-serif text-sm font-bold text-ink-900">通过 SSH 修改 .env</h4>
            <pre className="overflow-x-auto border border-ink-200 bg-paper-100 p-3 font-mono text-2xs leading-relaxed text-ink-700">
{`# 连接到部署主机
ssh user@your-server-ip

# 进入项目目录
cd /vol2/1000/Docker/Profeto

# 编辑 .env 文件
nano .env

# 修改后重启后端服务
docker compose restart api

# 查看日志确认生效
docker compose logs -f api`}
            </pre>
          </div>

          <div>
            <h4 className="mb-2 font-serif text-sm font-bold text-ink-900">常用配置项说明</h4>
            <div className="space-y-2">
              {[
                ['LLM_API_KEY', 'LLM 服务商的 API 密钥,用于调用大模型'],
                ['LLM_MODEL', '使用的模型名称,如 gpt-4o、claude-3-5-sonnet'],
                ['LLM_BASE_URL', 'API 基础地址,支持兼容 OpenAI 协议的服务商'],
                ['ADMIN_API_KEY', '管理后台写接口的鉴权密钥,配置后需在本页保存到浏览器'],
                ['BZZOIRO_KEY', 'Bzzoiro 数据源 API 密钥'],
                ['DATABASE_URL', 'PostgreSQL 数据库连接字符串'],
              ].map(([key, desc]) => (
                <div key={key} className="flex items-start gap-2.5">
                  <code className="flex-shrink-0 border border-ink-200 bg-paper-100 px-1.5 py-0.5 font-mono text-2xs text-ink-800">
                    {key}
                  </code>
                  <span className="text-xs leading-relaxed text-ink-600">{desc}</span>
                </div>
              ))}
            </div>
          </div>
        </CardBody>
      </Card>
    </div>
  )
}