import type { Metadata } from 'next/types'
import configPromise from '@payload-config'
import { getPayload } from 'payload'
import React from 'react'
import type { Post, Media } from '@/payload-types'
import { FDImage } from '@/components/FDImage'
import { formatDateTime } from '@/utilities/formatDateTime'
import { Pagination } from '@/components/Pagination'
import PageClient from './page.client'

export const dynamic = 'force-dynamic'

export default async function Page() {
  const payload = await getPayload({ config: configPromise })

  const posts = await payload.find({
    collection: 'posts',
    depth: 1,
    limit: 12,
    overrideAccess: false,
    select: {
      title: true,
      slug: true,
      heroImage: true,
      meta: true,
      publishedAt: true,
    },
  })

  return (
    <div className="min-h-screen bg-white dark:bg-fd-navy">
      <PageClient />

      <div className="max-w-[1200px] mx-auto px-6 md:px-8 pt-12 md:pt-16 pb-16 md:pb-24">

        <h1 className="font-joey-heavy text-4xl md:text-5xl lg:text-[3.25rem] text-fd-navy dark:text-fd-yellow mb-10 md:mb-14">
          Nyheter!
        </h1>

        {posts.docs.length === 0 ? (
          <p className="font-joey text-fd-navy/50 dark:text-white/50 py-16">Inga inlägg hittades.</p>
        ) : (
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-12">
            {posts.docs.map((post) => {
              const p = post as Post
              const heroImage = p.heroImage as Media | undefined

              return (
                <a
                  key={p.id}
                  href={`/posts/${p.slug}`}
                  className="group flex flex-col"
                >
                  <h2 className="font-joey-bold text-fd-navy dark:text-white text-xl md:text-[1.375rem] leading-snug mb-2 group-hover:text-fd-navy/70 dark:group-hover:text-fd-yellow transition-colors line-clamp-2">
                    {p.title}
                  </h2>

                  {p.publishedAt && (
                    <p className="font-joey text-sm text-fd-navy/50 dark:text-white/50 mb-4">
                      {formatDateTime(p.publishedAt)}
                    </p>
                  )}

                  <div className="relative aspect-[4/3] rounded-[20px] overflow-hidden bg-fd-navy/5 dark:bg-white/5">
                    {heroImage?.url ? (
                      <FDImage
                        media={heroImage}
                        size="medium"
                        fill
                        className="object-cover group-hover:scale-[1.03] transition-transform duration-500"
                        sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
                        fallbackAlt={p.title}
                      />
                    ) : (
                      <div className="w-full h-full flex items-center justify-center">
                        <span className="font-joey text-fd-navy/30 dark:text-white/30 text-sm">Ingen bild</span>
                      </div>
                    )}
                  </div>
                </a>
              )
            })}
          </div>
        )}

        {posts.totalPages > 1 && posts.page && (
          <div className="mt-16">
            <Pagination page={posts.page} totalPages={posts.totalPages} />
          </div>
        )}

      </div>
    </div>
  )
}

export function generateMetadata(): Metadata {
  return {
    title: 'Nyheter | Fiber Direkt',
    description: 'Senaste nytt från Fiber Direkt',
  }
}