import { headers as getHeaders } from 'next/headers.js'
import Image from 'next/image'
import { getPayload } from 'payload'
import React from 'react'

import config from '@/src/payload.config'
import { RichText } from '@payloadcms/richtext-lexical/react'
import Link from 'next/link'
import { ItemCardGrid } from '@payloadcms/ui'
import { HOMEPAGE_QUERY, PROJECT_QUERY } from '@/utilities/queries'

export default async function HomePage() {
  const headers = await getHeaders()
  const payloadConfig = await config
  const payload = await getPayload({ config: payloadConfig })
  const { user } = await payload.auth({ headers })

  const homePage = HOMEPAGE_QUERY

  const projects = PROJECT_QUERY

  const page = homePage.docs?.[0]

  return (
    <div className="home">
      <div className="content">
        {page && (
          <div>
            <h1 className='text-4xl font-bold'>{page.title}</h1>
            <div>
              {page.richText && (
                <RichText data={page.richText}/>
              )}
            </div>
          </div>
        )}
        <picture>
          <source srcSet="https://raw.githubusercontent.com/payloadcms/payload/main/packages/ui/src/assets/payload-favicon.svg" />
          <Image
            alt="Payload Logo"
            height={65}
            src="https://raw.githubusercontent.com/payloadcms/payload/main/packages/ui/src/assets/payload-favicon.svg"
            width={65}
          />
        </picture>
        {!user && <h1>Welcome to your new project.</h1>}
        {user && <h1>Welcome back, {user.name}</h1>}
        <div className="links">
          <a
            className="admin"
            href={payloadConfig.routes.admin}
            rel="noopener noreferrer"
            target="_blank"
          >
            Go to admin panel
          </a>
          <a
            className="docs"
            href="https://payloadcms.com/docs"
            rel="noopener noreferrer"
            target="_blank"
          >
            Documentation
          </a>
        </div>
      </div>
      <div className="footer">
        <p>Update this page by editing</p>
        <code>app/(frontend)/page.tsx</code>
      </div>
      <div>
        {projects.docs.length > 0 && (
          <div className='space-y-4'>
            {projects.docs
              .filter((item) => item.featuredProject)
              .map((item) => (
                  <article
                    key={item.id}
                    className="border-2 border-white rounded col-span-full" // full width styling
                  >
                    <Link className="no-decoration" href={`/${item.slug}`}>
                      <h3 className="text-lg font-bold">{item.title}</h3>
                      <p>{item.description}</p>
                    </Link>
                  </article>
              ))
            }
            <div className='grid grid-cols-1 md:grid-cols-2 gap-4'>
              {projects.docs
                .filter((item) => !item.featuredProject)
                .map((item) => (
                  <article key={item.id} className="border-2 border-white rounded">
                    <Link className="no-decoration" href={`/projects/${item.slug}`}>
                      <h3 className="text-lg font-bold">{item.title}</h3>
                      <p>{item.description}</p>
                    </Link>
                  </article>
                ))
              }
            </div>
          </div>
        )}
      </div>
    </div>
  )
}