'use client'

import { Network } from 'lucide-react'
import { useSession } from 'next-auth/react'
import Link from 'next/link'
import OrganizationWorkspace from '@/components/organization/OrganizationWorkspace'
import DepartmentShell from './DepartmentShell'

const ORGANIZATION_ROLES = new Set(['ADMIN', 'SYSTEM_ADMIN', 'DEPT_ADMIN'])

export default function DataDefinitionsDashboard() {
  const { data: session, status } = useSession()
  const role = (session?.user as { role?: string } | undefined)?.role || ''
  const canViewOrganization = ORGANIZATION_ROLES.has(role)

  return (
    <DepartmentShell>
      <main className="flex h-[calc(100dvh-72px)] min-h-[560px] flex-col overflow-hidden bg-white lg:grid lg:grid-cols-[232px_minmax(0,1fr)]">
        <aside className="shrink-0 border-b border-[#e2e8f0] bg-[#f8fafc] px-4 py-4 lg:min-h-0 lg:overflow-y-auto lg:border-b-0 lg:border-r lg:py-6">
          <nav aria-label="数据口径二级导航">
            <Link
              href="/workspaces/governance/data-definitions"
              aria-current="page"
              className="flex min-h-[58px] min-w-0 items-center gap-3 rounded-lg bg-[#e6f4ff] px-3 py-2.5 text-left text-[#0050cb] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#5a9ce6]"
            >
              <Network className="h-4 w-4 shrink-0 text-[#1677ff]" aria-hidden="true" />
              <span className="min-w-0">
                <span className="block truncate text-sm font-bold">公司组织架构</span>
                <span className="mt-0.5 hidden truncate text-xs text-[#315f91] lg:block">组织树与人员明细</span>
              </span>
            </Link>
          </nav>
        </aside>

        <section aria-label="公司组织架构操作区" className="min-h-0 min-w-0 flex-1 overflow-y-auto bg-[#fafafa]">
          {status === 'loading' ? (
            <div className="grid min-h-full place-items-center p-6" aria-label="正在加载公司组织架构" aria-busy="true">
              <div className="h-20 w-full max-w-3xl animate-pulse rounded-xl bg-[#e8edf3]" />
            </div>
          ) : canViewOrganization ? (
            <OrganizationWorkspace embedded />
          ) : (
            <div className="grid min-h-full place-items-center p-6">
              <div className="max-w-md rounded-xl border border-[#e2e8f0] bg-white px-6 py-8 text-center">
                <h1 className="text-lg font-bold text-[#101828]">暂无组织架构查看权限</h1>
                <p className="mt-2 text-sm leading-6 text-[#66758b]">请联系系统管理员开通组织架构访问权限。</p>
              </div>
            </div>
          )}
        </section>
      </main>
    </DepartmentShell>
  )
}