import {getServerSession} from 'next-auth'
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 {options} from './api/auth/[...nextauth]/options.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.js'

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

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', {
        sort: 'numero'
      })
    )

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

    if (titres.length === 0 || articles.length === 0) {
      throw new Error('No data')
    }

    return {
      titres,
      articles
    }
  } catch {
    throw new Error('Failed to fetch data')
  }
}

export default async function Page() {
  const session = await getServerSession(options)
  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} />
        {session && (
          <Create />
        )}
        <Konstitisyon session={session} titres={titres} articles={articles} />
      </Container>
      <Footer />
    </Box>
  )
}