import ThemeToggle from '@/components/ThemeToggle'

interface Props {
  displayName: string
  isAdmin: boolean
  backLabel?: string
}

export default function HeaderUI({ displayName, isAdmin, backLabel }: Props) {
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50, height: 56,
      background: 'var(--bg-card)', borderBottom: '1px solid var(--border)',
    }}>
      <div className="header-inner" style={{ height: '100%', padding: '0 clamp(16px, 3vw, 48px)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        {/* 左侧 */}
        {backLabel ? (
          <a href="/" style={{ display: 'flex', alignItems: 'center', gap: 8, textDecoration: 'none', color: 'var(--text-secondary)', fontSize: 15 }}>
            <span>&larr;</span>
            <div style={{ width: 26, height: 26, background: '#2563eb', borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, color: '#fff' }}>&#9678;</div>
            <span style={{ fontWeight: 700, color: 'var(--text)' }}>{backLabel}</span>
          </a>
        ) : (
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 18, fontWeight: 700, color: 'var(--text)' }}>
            <div style={{ width: 30, height: 30, background: '#2563eb', borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14, color: '#fff' }}>&#9678;</div>
            OA 统一门户
          </div>
        )}

        {/* 右侧 */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          {isAdmin && (
            <a href="/admin/create-user" style={{ fontSize: 13, color: 'var(--text-secondary)', textDecoration: 'none', marginRight: 8 }}>用户管理</a>
          )}
          <ThemeToggle />
          <div style={{ width: 1, height: 24, background: 'var(--border)', margin: '0 4px' }}></div>
          <a href="/profile" style={{
            display: 'flex', alignItems: 'center', gap: 7, padding: '4px 14px 4px 4px',
            border: '1px solid var(--border)', borderRadius: 20, textDecoration: 'none', background: 'var(--bg-card)',
          }}>
            <span style={{ width: 26, height: 26, borderRadius: '50%', background: '#2563eb', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, color: '#fff', fontWeight: 600 }}>{displayName.charAt(0).toUpperCase()}</span>
            <span style={{ fontSize: 13, color: 'var(--text)' }}>{displayName}</span>
          </a>
          <form action="/api/auth/logout" method="POST" style={{ display: 'inline' }}>
            <button type="submit" className="lo" title="退出登录" style={{
              width: 36, height: 36, borderRadius: 8, border: '1px solid var(--border)',
              background: 'var(--bg-card)', cursor: 'pointer', display: 'flex',
              alignItems: 'center', justifyContent: 'center', color: 'var(--text-secondary)',
              transition: 'all 0.15s',
            }}>
              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
                <polyline points="16 17 21 12 16 7"/>
                <line x1="21" y1="12" x2="9" y2="12"/>
              </svg>
            </button>
          </form>
        </div>
      </div>
    </header>
  )
}