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 { Separator } from "@/components/ui/separator";
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="">
      {/* <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>
      </div> */}
      <div className="flex w-full flex-col gap-4 xl:flex-row">
        <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>
        <Separator
          orientation="vertical"
          className="sticky top-0 hidden h-screen -translate-y-4 xl:block"
        />
        <div
          className={
            "top-4 h-max w-full max-w-xl space-y-4 xl:sticky xl:max-w-sm"
          }
        >
          <div className="relative min-h-96 w-full space-y-4 overflow-hidden rounded-md border bg-background p-4">
            <p className="text-center text-muted-foreground">
              Kommentare bald verfügbar
            </p>
          </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>
      </div>
    </div>
  );
}

export default Page;
