import { useExperimentalV2 } from '@/clientsettings/vars/experimentalV2'
import LinkButton from '@/components/LinkButton'
import { useNavigate, type Path } from '@/router'
import { useSetPageTitle, useStaffBoundary } from '@/utils'
import useRightBar from '@/views/InstructorView/useRightNavbar'
import { Classes, Icon, type IconName } from '@blueprintjs/core'
import { css } from '@emotion/css'
import useAuthIdentity from '@inject/graphql/auth'
import Container from '@inject/shared/components/Container'

const navs: Array<{
  icon: IconName
  heading: string
  description: string
  to: Path
}> = [
  {
    icon: 'book',
    heading: 'Instructor',
    description: 'Manage and oversee exercise execution',
    to: '/instructor',
  },
  {
    icon: 'console',
    heading: 'Analyst',
    description: 'Review and analyze exercise data',
    to: '/analyst',
  },
  {
    icon: 'person',
    heading: 'Trainee',
    description: 'Practice and exercise',
    to: '/trainee',
  },
  {
    icon: 'people',
    heading: 'Users',
    description: 'Manage participant accounts and roles',
    to: '/users',
  },
  {
    icon: 'panel',
    heading: 'Exercise Panel',
    description: 'Configure and monitor active exercises',
    to: '/exercise-panel',
  },
  {
    icon: 'edit',
    heading: 'Editor',
    description: 'Create and modify exercise content',
    to: '/editor',
  },
]

const superuserNavs: typeof navs = [
  {
    description: 'Execute GraphQL queries for testing',
    icon: 'graph',
    to: '/graphiql',
    heading: 'GraphiQL Panel',
  },
  {
    description: 'Visually inspect GraphQL API',
    icon: 'satellite',
    to: '/voyager',
    heading: 'Voyager Viewer',
  },
]

const Staff = () => {
  useStaffBoundary()
  useSetPageTitle('Staff')
  const { isSuperuser } = useAuthIdentity()
  const isExperimentalV2 = useExperimentalV2()
  const nav = useNavigate()

  const navItems = [
    ...navs,
    ...(isSuperuser && isExperimentalV2 ? superuserNavs : []),
  ]
  const element = useRightBar(
    <>
      <LinkButton
        link={['/exercise-panel']}
        button={{ text: 'Exercise Panel', icon: 'panel', minimal: true }}
      />
      <LinkButton
        link={['/users']}
        button={{ text: 'Users', icon: 'people', minimal: true }}
      />
    </>
  )

  return (
    <Container>
      {element}
      <h2>Panel</h2>
      <div
        className={css`
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 0.5rem;
        `}
      >
        {navItems.map(navItem => (
          <div
            className={css`
              display: flex;
              aspect-ratio: 1/1;
              height: 100%;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              background: rgba(0, 0, 0, 0.02);
              .${Classes.DARK} & {
                background: rgba(0, 0, 0, 0.2);
              }
              padding: 0.5rem;
              border-radius: 0.5rem;

              &:hover {
                cursor: pointer;
              }
            `}
            key={navItem.to}
            onClick={() => nav(navItem.to)}
          >
            <Icon icon={navItem.icon} size={32} />
            <div style={{ textAlign: 'center' }}>
              <h4>{navItem.heading}</h4>
              <span>{navItem.description}</span>
            </div>
          </div>
        ))}
      </div>
    </Container>
  )
}

export default Staff
