import LayoutWrapper from '@/app/components/layouts/LayoutWrapper'
import React from 'react'
import Link from 'next/link';
import { SignedOut } from '@clerk/nextjs';
import { Info } from 'lucide-react';
import Form from '../../../../components/comments/Form';
import { prisma } from "../../../../../db";
import Comment from '../../../../components/comments/Comment';
import { Post } from '@/lib/interface';
import { notFound } from 'next/navigation';
import { client } from '@/lib/sanity';
import NavButton from '@/app/components/misc/NavButton';


async function getEntries() {
  const data = await prisma.comments.findMany({
    take: 50,
    orderBy: {
      created_at: "desc",
    },
  });

  return data;
}

async function getData(slug: string) {
  const query = `*[_type == "post" && slug.current == "${slug}"][0]`;

  const data = await client.fetch(query);

  return data;
}

const CommentPage = async ({
  params,
}: {
  params: { blogId: string };
}) => {

  const data = (await getData(params.blogId)) as Post;
  if (!data) return notFound()

  async function getFilteredComments() {
    const entries = await getEntries();
    const filteredComments = entries.filter(res => res.blogName === params.blogId);
    return filteredComments;
  }

  const comments = await getFilteredComments()

  return (
    <LayoutWrapper className='pt-24'>
      <div className='items-center flex flex-col mx-auto max-w-4xl'>
        <div className='z-10 w-full'>
          <div className='items-center flex w-full mx-auto text-center p-2"' />
          <h3 className='text-3xl text-white mt-10 font-bold text-center'>Comments</h3>
          <SignedOut>
            <p className=' mt-2 text-sm flex italic items-center justify-center text-gray-500'><Info className='mr-1 text-red-600' size={20} /> <Link className='underline font-bold flex mr-0.5' href={'/sign-in'}>Sign in</Link> to comment</p>
          </SignedOut>
        </div>
        <p className='bg-gradient-to-r from-purple-400 to-lime-200 text-transparent bg-clip-text font-semibold mt-2 mb-4'>{data.title}</p>
        <NavButton />
        <div className='w-[90%]'>
        <Form />
          <div className="flex flex-col space-y-2 pb-20 h-full w-[85%] items-center justify-center mx-auto">
            {
            comments.length > 0 && comments.map((entry) => (
              <div key={entry.id} className="text-sm w-full break-words backdrop-blur-md p-1  mt-3 bg-gray-600/20 border-b border-1 rounded-md">
                <Comment profileImg={entry.profileImg} id={entry.id} message={entry.message} date={entry.created_at} username={entry.username} userId={entry.userId} />
              </div>
            ))}
            {comments.length === 0 && (
              <h2 className='font-bold text-white text-xl mt-6 text-center mx-auto max-w-xl flex'>Be the first to comment!</h2>
            )}
          </div>
        </div>
      </div>
    </LayoutWrapper>
  )
}

export default CommentPage