import { useExperimentalV2 } from '@/clientsettings/vars/experimentalV2'
import LinkButton from '@/components/LinkButton'
import { 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 buttonClass = 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;
  }
`

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 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}
      <h1>Gateway</h1>
      <div
        className={css`
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 0.5rem;
        `}
      >
        {navItems.map(navItem => (
          <LinkButton
            key={navItem.to}
            link={[navItem.to]}
            className={buttonClass}
            button={{
              children: (
                <div>
                  <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
