import { JsonCard } from "@/components/cards/JsonCard";
import SafetyNotesCard from "@/components/cards/SafetyNotesCard";
import { ServerCard } from "@/components/cards/ServerCard";
import { UserCard } from "@/components/cards/UserCard";
import { NavigationToolbar } from "@/components/common/NavigationToolbar";
import { RecentMessages } from "@/components/pages/inspector/RecentMessages";
import { ServerActions } from "@/components/pages/inspector/ServerActions";
import { Card, CardHeader } from "@/components/ui/card";
import { Separator } from "@/components/ui/separator";
import { fetchServerById, fetchUserById } from "@/lib/db";
import Link from "next/link";
import { notFound } from "next/navigation";

export default async function Server({ params }: { params: { id: string } }) {
  const server = await fetchServerById(params.id);
  if (!server) return notFound();

  const owner = await fetchUserById(server.owner);

  return (
    <div className="flex flex-col gap-2">
      <NavigationToolbar>Inspecting Server</NavigationToolbar>
      <ServerCard server={server} subtitle="Server" />
      <ServerActions server={server} />
      <SafetyNotesCard objectId={server._id} type="server" />
      {server.description && (
        <Card>
          <CardHeader>
            <p>{server.description}</p>
          </CardHeader>
        </Card>
      )}

      <Link href={`/panel/inspect/user/${owner!._id}`}>
        <UserCard user={owner!} subtitle="Server Owner" />
      </Link>

      <Separator />
      <RecentMessages query={{ channel: { $in: server.channels } }} users />

      <Separator />
      <JsonCard obj={server} />
    </div>
  );
}
