import { ChannelCard } from "@/components/cards/ChannelCard";
import { JsonCard } from "@/components/cards/JsonCard";
import SafetyNotesCard from "@/components/cards/SafetyNotesCard";
import { UserCard } from "@/components/cards/UserCard";
import { NavigationToolbar } from "@/components/common/NavigationToolbar";
import { Card, CardHeader } from "@/components/ui/card";
import { fetchChannelById, fetchMessageById, fetchUserById } from "@/lib/db";
import Link from "next/link";
import { notFound } from "next/navigation";

export default async function Message({
  params,
}: {
  params: { id: string; type: string };
}) {
  const message = await fetchMessageById(params.id);
  if (!message) return notFound();

  const author = await fetchUserById(message.author);
  const channel = await fetchChannelById(message.channel);

  return (
    <div className="flex flex-col gap-2">
      <NavigationToolbar>Inspecting Message</NavigationToolbar>

      <Card>
        <CardHeader>
          <p>{message.content}</p>
        </CardHeader>
      </Card>

      <SafetyNotesCard objectId={message._id} type="message" />

      {author && (
        <Link href={`/panel/inspect/user/${author!._id}`}>
          <UserCard user={author!} subtitle="Message Author" />
        </Link>
      )}
      <Link href={`/panel/inspect/channel/${channel!._id}`}>
        <ChannelCard channel={channel!} subtitle="Channel" />
      </Link>
      <JsonCard obj={message} />
    </div>
  );
}
