import {createDirectus, rest, readItems} from '@directus/sdk'
import Container from '@mui/material/Container'
import Box from '@mui/material/Box'
import Typography from '@mui/material/Typography'
import AdminPanelSettingsIcon from '@mui/icons-material/AdminPanelSettings'
import {auth} from '../auth.js'
import Konstitisyon from '@/components/konstitisyon/index.js'
import Footer from '@/components/footer.js'
import Sign from '@/components/session/sign.js'
import Create from '@/components/konstitisyon/create/index.js'

const apiUrl = process.env.DIRECTUS_API_URL
const appTitle = process.env.APP_TITLE

const navButton = {
  title: 'Tableau de bord',
  path: '/dashboard',
  color: 'success',
  icon: <AdminPanelSettingsIcon fontSize='large' />
}

async function getData() {
  if (!apiUrl) {
    throw new Error('DIRECTUS_API_URL is required')
  }

  const client = createDirectus(apiUrl).with(rest())

  try {
    const titres = await client.request(
      readItems('titres', {
        filter: {
          status: {
            _eq: 'published'
          }
        },
        sort: 'numero'
      })
    )

    const articles = await client.request(
      readItems('articles', {
        filter: {
          status: {
            _eq: 'published'
          }
        },
        sort: 'numero'
      })
    )

    return {
      titres,
      articles
    }
  } catch (error) {
    throw new Error(error.cause)
  }
}

export default async function Page() {
  const session = await auth()
  const {titres, articles} = await getData()

  return (
    <Box sx={{
      display: 'flex',
      flexDirection: 'column',
      minHeight: '100vh',
    }}
    >
      <Container maxWidth='sm'>
        <Typography mt={1} component='h1' textAlign='center' variant='h4'>{appTitle.toUpperCase()}</Typography>
        <Sign session={session} navButton={navButton} />
        {session && (
          <Create session={session} titres={titres} />
        )}
        <Konstitisyon session={session} titres={titres} articles={articles} />
      </Container>
      <Footer />
    </Box>
  )
}