'use client'

import OrganizationWorkspace from '@/components/organization/OrganizationWorkspace'
import { useSession } from 'next-auth/react'
import DepartmentShell from './DepartmentShell'
import WorkspaceViewNavigation from './WorkspaceViewNavigation'

export default function OrganizationStructureDashboard({ scope = 'brand' }: { scope?: 'brand' | 'company' }) {
  const { data: session, status } = useSession()
  const role = (session?.user as { role?: string } | undefined)?.role || ''
  const canViewOrganization = ['ADMIN', 'SYSTEM_ADMIN', 'DEPT_ADMIN'].includes(role)
  return (
    <DepartmentShell>
      <div className="min-h-[calc(100dvh-72px)] bg-[#fafafa]">
        <div className="border-b border-[#e2e8f0] bg-white px-4 py-3 sm:px-6 lg:px-8">
          <WorkspaceViewNavigation label="组织架构范围" items={[
            { label: '品牌中心', href: '/workspaces/organization/organization-structure', active: scope === 'brand' },
            { label: '全公司', href: '/workspaces/organization/organization-structure?scope=company', active: scope === 'company' },
          ]} />
        </div>
        {status === 'loading' ? <div aria-busy="true" aria-label="正在加载组织架构" className="px-5 py-10 text-sm text-[#66758b]">加载中…</div> : canViewOrganization ? <OrganizationWorkspace key={scope} embedded treeAsSecondarySidebar heading="组织架构"
          scopeRootName={scope === 'brand' ? '品牌中心' : undefined}
          description={`${scope === 'brand' ? '品牌中心' : '全公司'} · HR 花名册 · 每日 02:00 自动同步`} /> :
          <div className="px-5 py-10 text-sm text-[#66758b]"><h1 className="mb-2 text-lg font-semibold text-[#101828]">暂无组织架构查看权限</h1>请联系系统管理员。</div>}
      </div>
    </DepartmentShell>
  )
}