import { headers as getHeaders } from 'next/headers.js'
import { getPayload, PaginatedDocs } from 'payload'
import React from 'react'
import { fileURLToPath } from 'url'

import config from '@/payload.config'
import BookList from '@/components/BookList'
import { Book } from '@/payload-types'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { TextShimmer } from '@/components/ui/text-shimmer'

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 fileURL = `vscode://file/${fileURLToPath(import.meta.url)}`

  const initBrowseBooks = (await payload.find({
    collection: 'books',
    depth: 10,
    limit: 25,
    overrideAccess: false,
    select: {
      title: true,
      authors: true,
      publication: true,
      lcc: true,
      genre: true,
      isbn: true,
      copies: true,
    },
  })) as PaginatedDocs<Book>

  return (
    <div className="home">
      <div className="py-24 sm:py-32">
        <div className="mx-auto max-w-7xl px-6 lg:px-8">
          <div className="mx-auto max-w-2xl lg:mx-0">
            <p className="text-base/7 font-semibold text-indigo-600">Get the help you need</p>

            <h2 className="mt-2 text-5xl font-semibold tracking-tight text-foreground  sm:text-7xl">
              <TextShimmer
                duration={1.2}
                className="[--base-color:var(--color-indigo-600)] [--base-gradient-color:var(--color-blue-200)] dark:[--base-color:var(--color-blue-700)] dark:[--base-gradient-color:var(--color-blue-400)]"
              >
                Welcome
              </TextShimmer>
              {user && <small>{`user.firstName`}</small>}
            </h2>
            <p className="mt-8 text-lg font-medium text-pretty text-muted-foreground sm:text-xl/8">
              Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat
              commodo. Elit sunt amet fugiat veniam occaecat fugiat.
            </p>
          </div>
        </div>
      </div>

      <Tabs defaultValue="feed" className="p-4">
        <TabsList className="grid w-full grid-cols-3">
          <TabsTrigger value="feed">Your Feed</TabsTrigger>
          <TabsTrigger value="browse">Browse</TabsTrigger>
          <TabsTrigger value="search">Search</TabsTrigger>
        </TabsList>

        <TabsContent value="feed">
          {initBrowseBooks && <BookList books={initBrowseBooks} />}
        </TabsContent>

        <TabsContent value="browse">
          {initBrowseBooks && <BookList books={initBrowseBooks} />}
        </TabsContent>

        <TabsContent value="search">Search</TabsContent>
      </Tabs>

      <div className="footer">
        <p>Update this page by editing</p>
        <a className="codeLink" href={fileURL}>
          <code>app/(frontend)/page.tsx</code>
        </a>
      </div>
    </div>
  )
}