import React from "react";
import { notFound } from "next/navigation";
import { auth } from "@/server/auth";
import { api } from "@/trpc/server";
import { hasPermission, Role } from "@/lib/validation/permissions";
import { appRoutes } from "@/config";

import Link from "next/link";
import RenderContent from "@/components/editor/render-content";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Edit, MoreVertical } from "lucide-react";
import CommentSection from "@/components/comment/comment-section";
import { SocketProvider } from "@/components/socket-context";

async function Page({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const article = await api.article.get({
    slug: slug,
    with: { category: true },
  });
  if (!article) return notFound();
  const session = await auth();
  const isEditor = session?.user
    ? hasPermission(session.user.role, Role.EDITOR)
    : false;
  return (
    <SocketProvider>
      <div className="w-full max-w-reader px-12">
        {isEditor && (
          <div className="flex w-full items-center">
            <Badge
              className="size-max"
              variant={article.published ? "outline" : "destructive"}
            >
              {article.published ? "Veröffentlicht" : "Draft"}
            </Badge>

            <div className="flex w-full justify-end gap-2">
              <Button asChild variant={"outline"}>
                <Link href={appRoutes.editArticle(article.slug)}>
                  <Edit className="size-4" />
                  <span>Bearbeiten</span>
                </Link>
              </Button>
              <Button size={"icon"} variant={"outline"}>
                <MoreVertical className="size-4" />
              </Button>
            </div>
          </div>
        )}
        <div className="flex w-full flex-col gap-4">
          <div className="w-full space-y-4">
            <h1 className="text-4xl font-bold">{article.title}</h1>
            <div className="w-full">
              {article.content && <RenderContent content={article.content} />}
            </div>
          </div>
          <CommentSection articleId={article.id} />
        </div>

        <div className="flex h-64 items-center justify-center">empty</div>
      </div>
    </SocketProvider>
  );
}

export default Page;
