import React, { useState, useEffect, useRef, Suspense } from 'react'
import axios from 'axios'
import { MoonStarsIcon, SunIcon, TuneIcon, CheckIcon, CloseIcon, SparkIcon, RefreshIcon, BuildingIcon } from './Icons'
import { useAuth, hasPermission } from '../auth'
import { useBranding } from '../branding'

/* 这两块只有系统管理账号会看，按需加载：设置本身在外壳里是静态引入的，
   跟着首屏一起下发等于给所有人多下载十几 KB。 */
const AIConfigSettings = React.lazy(() => import('./AIConfigSettings'))
const OrgBrandingSettings = React.lazy(() => import('./OrgBrandingSettings'))

/* 设置分类。带 permission 的项只对有该权限点的人显示 ——
   智能配置里有接口地址与密钥，组织品牌是系统管理动作，都不该摆在业务员眼前。
   数据导入导出已从设置里移出，做成独立页面「数据迁移」（侧栏 · 系统管理），
   因为那里要放类别勾选和逐表明细，塞进这个 1000px 的模态框里看不清。 */
const CATEGORIES = [
  { key: 'appearance', label: '外观与主题', icon: TuneIcon },
  { key: 'organization', label: '组织与品牌', icon: BuildingIcon, permission: 'branding.manage' },
  { key: 'ai-config', label: '智能配置', icon: SparkIcon, permission: 'ai.manage' },
  { key: 'system-update', label: '系统与更新', icon: RefreshIcon }
]

function Settings({ isOpen, onClose, theme, onThemeChange, reducedMotion, onReducedMotionChange }) {
  const { user } = useAuth()
  const [activeCategory, setActiveCategory] = useState('appearance')

  const visibleCategories = CATEGORIES.filter(item => !item.permission || hasPermission(user, item.permission))
  /* 打开着设置时权限被收回（换了角色），当前分类可能已经不可见，退回第一项 */
  const current = visibleCategories.some(item => item.key === activeCategory)
    ? activeCategory
    : visibleCategories[0]?.key

  const modalRef = useRef(null)
  useEffect(() => {
    if (!isOpen) return
    const previousFocus = document.activeElement
    const previousOverflow = document.body.style.overflow
    document.body.style.overflow = 'hidden'
    const modal = modalRef.current
    const focusable = () => [...modal.querySelectorAll('button, input, select, textarea, a[href], [tabindex="0"]')].filter(el => !el.disabled && el.getClientRects().length)
    modal.querySelector('.close-btn')?.focus()
    const onKeyDown = event => {
      if (event.key === 'Escape') { event.preventDefault(); onClose() }
      if (event.key === 'Tab') {
        const items = focusable()
        const first = items[0], last = items[items.length - 1]
        if (event.shiftKey && document.activeElement === first) { event.preventDefault(); last?.focus() }
        else if (!event.shiftKey && document.activeElement === last) { event.preventDefault(); first?.focus() }
      }
    }
    modal.addEventListener('keydown', onKeyDown)
    return () => {
      document.body.style.overflow = previousOverflow
      modal.removeEventListener('keydown', onKeyDown)
      previousFocus?.focus()
    }
  }, [isOpen, onClose])

  if (!isOpen) return null

  return (
    <div className="settings-overlay" onClick={onClose}>
      <div ref={modalRef} role="dialog" aria-modal="true" aria-labelledby="settings-title" className="settings-modal luxury-settings" onClick={(e) => e.stopPropagation()}>
        <aside className="settings-sidebar">
          <div className="settings-header">
            <div>
              <h2 id="settings-title">系统设置</h2>
            </div>
            <button className="close-btn" onClick={onClose} aria-label="关闭设置"><CloseIcon size={18} /></button>
          </div>
          <nav className="settings-nav" aria-label="设置分类">
            {visibleCategories.map(item => {
              const Icon = item.icon
              return (
                <button
                  key={item.key}
                  className={`settings-nav-item ${current === item.key ? 'active' : ''}`}
                  onClick={() => setActiveCategory(item.key)}
                >
                  <span className="settings-nav-icon"><Icon size={17} /></span>
                  <span>{item.label}</span>
                </button>
              )
            })}
          </nav>
          <div className="settings-sidebar-status"><TuneIcon size={15} /><span>专注业务，自在掌控<small>TRADE MANAGEMENT</small></span></div>
        </aside>

        <section className="settings-content">
          <Suspense fallback={<div className="settings-section"><p className="settings-description">正在载入…</p></div>}>
            {current === 'appearance' && <AppearanceSettings theme={theme} onThemeChange={onThemeChange} reducedMotion={reducedMotion} onReducedMotionChange={onReducedMotionChange} />}
            {current === 'organization' && <OrgBrandingSettings />}
            {current === 'ai-config' && <AIConfigSettings />}
            {current === 'system-update' && <SystemUpdateSettings />}
          </Suspense>
        </section>
      </div>
    </div>
  )
}

function AppearanceSettings({ theme, onThemeChange, reducedMotion, onReducedMotionChange }) {
  return (
    <div className="settings-section">
      <h3>外观与主题</h3>
      <p className="settings-description">选择适合工作环境的显示模式，设置会自动保存在本机。</p>

      <div className="theme-selector" role="group" aria-label="界面主题">
        <button className={`theme-option ${theme === 'dark' ? 'active' : ''}`} aria-pressed={theme === 'dark'} onClick={() => onThemeChange('dark')}>
          <span className="theme-preview theme-preview-dark" aria-hidden="true"><span className="mini-sidebar"><i /><i /><i /></span><span className="mini-workspace"><MoonStarsIcon size={18} /><span className="mini-stats"><i /><i /><i /></span><span className="mini-table"><i /><i /><i /></span></span></span>
          <span><strong>夜间控制台</strong><small>深色 · 低光环境</small></span>
          <span className="theme-check" aria-hidden="true">{theme === 'dark' && <CheckIcon size={14} />}</span>
        </button>
        <button className={`theme-option ${theme === 'light' ? 'active' : ''}`} aria-pressed={theme === 'light'} onClick={() => onThemeChange('light')}>
          <span className="theme-preview theme-preview-light" aria-hidden="true"><span className="mini-sidebar"><i /><i /><i /></span><span className="mini-workspace"><SunIcon size={18} /><span className="mini-stats"><i /><i /><i /></span><span className="mini-table"><i /><i /><i /></span></span></span>
          <span><strong>日间工作台</strong><small>淡色 · 明亮环境</small></span>
          <span className="theme-check" aria-hidden="true">{theme === 'light' && <CheckIcon size={14} />}</span>
        </button>
      </div>

      <div className="settings-group">
        <h4>显示偏好</h4>
        <div className="setting-info"><span><strong>清晰优先</strong><small>两种主题均保留高对比度文字与明确的状态标识。</small></span><span className="preference-badge">默认启用</span></div>
        <label className="setting-toggle"><span><strong>减少动效</strong><small>适用于需要稳定画面的工作环境</small></span><input type="checkbox" aria-label="减少动效" checked={reducedMotion} onChange={e => onReducedMotionChange(e.target.checked)} /><i aria-hidden="true" /></label>
      </div>
      <p className="appearance-note"><CheckIcon size={14} /> 即时生效 · 自动记住您的主题与动效偏好</p>
    </div>
  )
}

/* 数据导入导出已移出设置：见 pages/DataTransfer.jsx（侧栏 · 系统管理 · 数据迁移） */

/* 智能配置已拆到 ./AIConfigSettings（多模型接入 + 用途分配）与 ./OrgBrandingSettings（组织与品牌） */

/* ---------------------------------------------------------------------------
   系统与更新
   显示本机版本与运行环境，并从 GitHub 仓库检查是否有新版本。
   版本号以顶层 package.json 为准；远端取 Release（优先）或 tag。
--------------------------------------------------------------------------- */
function SystemUpdateSettings() {
  const { user } = useAuth()
  const isAdmin = user?.role === 'admin'
  const [job, setJob] = useState(null)
  const [updatePassword, setUpdatePassword] = useState('')
  const [starting, setStarting] = useState(false)
  const [connectionLost, setConnectionLost] = useState(false)
  const brand = useBranding()
  const [info, setInfo] = useState(null)
  const [repo, setRepo] = useState('')
  const [loadingInfo, setLoadingInfo] = useState(true)
  const [checking, setChecking] = useState(false)
  const [result, setResult] = useState(null)
  const [error, setError] = useState('')
  const [showNotes, setShowNotes] = useState(false)

  useEffect(() => {
    let alive = true
    axios
      .get('/api/system/info')
      .then(({ data }) => {
        if (!alive) return
        setInfo(data)
        setRepo(data.repo || '')
      })
      .catch((e) => {
        if (alive) setError(e?.response?.data?.error || e.message)
      })
      .finally(() => {
        if (alive) setLoadingInfo(false)
      })
    return () => {
      alive = false
    }
  }, [])

  const check = async () => {
    setChecking(true)
    setError('')
    setResult(null)
    setShowNotes(false)
    try {
      const { data } = await axios.get('/api/system/check-update', { params: { repo, force: 1 } })
      setResult(data)
      if (!data.ok) setError(data.error || '检查更新失败')
    } catch (e) {
      setError(e?.response?.data?.error || e.message)
    } finally {
      setChecking(false)
    }
  }

  const updating = starting || (job && !['idle', 'completed', 'failed'].includes(job.state))
  useEffect(() => {
    if (!isAdmin) return
    let alive = true
    let timer
    const poll = async () => {
      try {
        const { data } = await axios.get('/api/system/update/status', { timeout: 8000 })
        if (alive) { setJob(data); setConnectionLost(false) }
      } catch {
        if (alive) setConnectionLost(true)
      } finally {
        if (alive) timer = setTimeout(poll, 2500)
      }
    }
    poll()
    return () => { alive = false; clearTimeout(timer) }
  }, [isAdmin])

  const install = async event => {
    event.preventDefault()
    setStarting(true)
    setError('')
    try {
      const { data } = await axios.post('/api/system/update', { current_password: updatePassword }, { timeout: 60000 })
      setJob(current => ({ ...current, ...data }))
      setUpdatePassword('')
    } catch (e) {
      setError(e?.response?.data?.error || '未能确认更新任务状态，请查看下方进度后再试')
    } finally { setStarting(false) }
  }

  const fmtTime = (value) => {
    if (!value) return ''
    try {
      return new Date(value).toLocaleString('zh-CN', { hour12: false })
    } catch {
      return String(value)
    }
  }

  return (
    <div className="settings-section">
      <h3>系统与更新</h3>
      <p className="settings-description">查看当前版本；系统管理员可在此安装更新。</p>

      <div className="settings-group">
        <h4>当前版本</h4>
        <div className="setting-info">
          <span>
            <strong>{info ? `${brand.name} v${info.version}` : '正在读取版本…'}</strong>
            <small>{info ? `运行环境 Node ${info.node} · ${info.platform} ${info.arch}` : '读取本机信息中'}</small>
          </span>
          <span className="preference-badge">正式版</span>
        </div>
        {info?.startedAt && <p className="help-text">服务启动于 {fmtTime(info.startedAt)}</p>}
      </div>

      <div className="settings-group">
        <h4>更新源</h4>
        <div className="form-group">
          <label>GitHub 仓库</label>
          <input
            type="text"
            className="form-input"
            value={repo}
            placeholder="owner/repo"
            onChange={(e) => setRepo(e.target.value)}
            disabled
          />
        </div>
        <p className="help-text">更新源由服务器配置，网页安装使用此仓库的最新正式发布版本或版本标签。</p>
      </div>

      <div className="settings-group">
        <h4>检查更新</h4>
        <div className="settings-actions">
          <button className="btn btn-primary" onClick={check} disabled={checking || loadingInfo || updating}>
            {checking ? '检查中…' : '检查更新'}
          </button>
        </div>
        {!checking && result && (
          <p className="help-text">
            上次检查：{fmtTime(result.checkedAt)}
            {result.cached ? '（结果来自缓存）' : ''}
          </p>
        )}

        {checking && (
          <div className="update-status is-checking">
            <span className="spinner" />
            <span>正在连接 GitHub，请稍候…</span>
          </div>
        )}

        {!checking && error && (
          <div className="update-status is-error">
            <CloseIcon size={15} />
            <span>{error}</span>
          </div>
        )}

        {!checking && !error && result?.ok && result.hasUpdate && (
          <>
            <div className="update-status is-new">
              <SparkIcon size={15} />
              <span>
                发现新版本 <b>v{result.latest}</b>，当前 v{result.current}
              </span>
            </div>
            {result.publishedAt && <p className="help-text">发布于 {fmtTime(result.publishedAt)}</p>}
            {(result.url || result.notes) && (
              <div className="update-links">
                {result.url && (
                  <a className="btn-link" href={result.url} target="_blank" rel="noreferrer">
                    在 GitHub 上查看
                  </a>
                )}
                {result.notes && (
                  <button className="btn-link" onClick={() => setShowNotes((v) => !v)}>
                    {showNotes ? '收起更新说明' : '查看更新说明'}
                  </button>
                )}
              </div>
            )}
            {showNotes && result.notes && <pre className="update-notes">{result.notes}</pre>}
          </>
        )}

        {!checking && !error && result?.ok && !result.hasUpdate && (
          <>
            <div className="update-status is-ok">
              <CheckIcon size={15} />
              <span>已是最新版本（v{result.current}）</span>
            </div>
            {result.note && <p className="help-text">{result.note}</p>}
          </>
        )}
      </div>
      {isAdmin && (
        <div className="settings-group">
          <h4>安装更新</h4>
          <p className="help-text">系统先构建新版本并备份数据库，再切换应用和重启。重启时页面可能短暂断开，进度会自动恢复。</p>
          {job?.capability && !job.capability.supported && <p className="help-text">{job.capability.reason}</p>}
          {result?.hasUpdate && job?.capability?.supported && !updating && !(job?.state === 'completed' && job?.version === result.latest) && (
            <form onSubmit={install}>
              <div className="form-group">
                <label htmlFor="update-current-password">管理员当前密码</label>
                <input id="update-current-password" className="form-input" type="password" autoComplete="current-password"
                  required value={updatePassword} onChange={event => setUpdatePassword(event.target.value)} />
              </div>
              <button type="submit" className="btn btn-primary" disabled={starting || !updatePassword}>
                {starting ? '正在创建任务…' : `安装 v${result.latest}`}
              </button>
            </form>
          )}
          {job && job.state !== 'idle' && (
            <div role="status" className={`update-status ${job.state === 'failed' ? 'is-error' : job.state === 'completed' ? 'is-ok' : 'is-checking'}`}>
              {updating && <span className="spinner" />}<span>{job.message}</span>
            </div>
          )}
          {connectionLost && <p role="status" className="help-text">暂时无法连接服务，正在自动重试…</p>}
          {job?.state === 'completed' && <button className="btn btn-primary" onClick={() => window.location.reload()}>刷新使用新版本</button>}
          {job?.log && <details><summary>更新日志</summary><pre className="update-notes">{job.log}</pre></details>}
        </div>
      )}
    </div>
  )
}

export default Settings