import { DefaultTemplate } from '@payloadcms/ui/templates/Default'
import LinkImport from 'next/link.js'
import { redirect } from 'next/navigation.js'
import React from 'react'

import type { AdminViewProps } from '../../../../../packages/payload/types.js'

const Link = (LinkImport.default || LinkImport) as unknown as typeof LinkImport.default

import { Button } from '@payloadcms/ui/elements/Button'
import { SetStepNav } from '@payloadcms/ui/elements/StepNav'

import { customViewPath } from '../../../shared.js'
import './index.scss'
const baseClass = 'custom-default-view'

export const CustomDefaultView: React.FC<AdminViewProps> = ({ initPageResult }) => {
  const {
    permissions,
    req: {
      i18n,
      payload: {
        config,
        config: {
          routes: { admin: adminRoute },
        },
      },
      user,
    },
  } = initPageResult

  // If an unauthorized user tries to navigate straight to this page,
  // Boot 'em out
  if (!user || (user && !permissions?.canAccessAdmin)) {
    return redirect(`${adminRoute}/unauthorized`)
  }

  return (
    <DefaultTemplate config={config} i18n={i18n} permissions={permissions} user={user}>
      <SetStepNav
        nav={[
          {
            label: 'Custom Admin View with Default Template',
          },
        ]}
      />
      <div
        className={`${baseClass}__content`}
        style={{
          paddingLeft: 'var(--gutter-h)',
          paddingRight: 'var(--gutter-h)',
        }}
      >
        <h1>Custom Admin View</h1>
        <p>
          Here is a custom admin view that was added in the Payload config. It uses the Default
          Template, so the sidebar is rendered.
        </p>
        <div className="custom-view__controls">
          <Button Link={Link} buttonStyle="secondary" el="link" to={`${adminRoute}`}>
            Go to Dashboard
          </Button>
          &nbsp; &nbsp; &nbsp;
          <Button
            Link={Link}
            buttonStyle="secondary"
            el="link"
            to={`${adminRoute}/${customViewPath}`}
          >
            Go to Custom View
          </Button>
        </div>
      </div>
    </DefaultTemplate>
  )
}
