import BreadNavigator from "@/components/bread-navigator";
import RenderContent from "@/components/editor/render-content";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { appRoutes } from "@/config";
import { hasPermission, Role } from "@/lib/validation/permissions";
import { auth } from "@/server/auth";
import { api } from "@/trpc/server";
import { Edit, Edit2Icon, Edit3, MoreVertical, Trash } from "lucide-react";
import Link from "next/link";
import { notFound } from "next/navigation";
import React from "react";

async function Page({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const article = await api.article.get({ slug: slug });
  if (!article) return notFound();
  const session = await auth();
  const isEditor = session?.user
    ? hasPermission(session.user.role, Role.EDITOR)
    : false;
  return (
    <div className="space-y-2">
      <div className="flex w-full items-center justify-between">
        <div className="flex w-full items-center gap-4">
          <BreadNavigator
            className="w-full"
            links={[
              ...(article?.category
                ? [
                    {
                      label: article.category.name!,
                      href: appRoutes.category(article.category.slug),
                    },
                  ]
                : []),
              { label: "Artikel", href: appRoutes.allArticles },
              { label: article.title!, href: appRoutes.article(article.slug) },
            ]}
          />
        </div>
        {isEditor && (
          <div className="flex w-full items-center justify-end space-x-2">
            <Badge
              className="size-max"
              variant={article.published ? "outline" : "destructive"}
            >
              {article.published ? "Veröffentlicht" : "Draft"}
            </Badge>

            <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>
      <h1 className="text-4xl font-bold">{article.title}</h1>
      {article.content && <RenderContent content={article.content} />}
    </div>
  );
}

export default Page;
