import { JsonCard } from "@/components/cards/JsonCard";
import { MessageContextCard } from "@/components/cards/MessageContextCard";
import { ReportCard } from "@/components/cards/ReportCard";
import { ServerCard } from "@/components/cards/ServerCard";
import { UserCard } from "@/components/cards/UserCard";
import { CardLink } from "@/components/common/CardLink";
import { NavigationToolbar } from "@/components/common/NavigationToolbar";
import { ReportActions } from "@/components/pages/inspector/ReportActions";
import { Separator } from "@/components/ui/separator";
import {
  fetchRelatedReportsByContent,
  fetchReportById,
  fetchSnapshotsByReport,
  fetchUserById,
} from "@/lib/db";
import Link from "next/link";
import { notFound } from "next/navigation";
import { Fragment } from "react";

export default async function Reports({ params }: { params: { id: string } }) {
  const report = await fetchReportById(params.id);
  if (!report) return notFound();

  const author = await fetchUserById(report.author_id);
  const snapshots = await fetchSnapshotsByReport(report._id);

  const relatedReports = await Promise.all(
    snapshots
      .map((snapshot) => snapshot._id)
      .map((contentId) =>
        fetchRelatedReportsByContent(contentId).then((reports) =>
          reports.filter((entry) => entry._id !== report._id)
        )
      )
  );

  return (
    <div className="flex flex-col gap-2">
      <NavigationToolbar>Viewing Report</NavigationToolbar>
      <ReportActions
        report={report}
        reference={`${report._id.substring(20, 26)}, ${
          snapshots[0]._type === "Message"
            ? "Message"
            : snapshots[0]._type === "User"
            ? `${snapshots[0].username}#${snapshots[0].discriminator}`
            : snapshots[0].name
        }, ${report.content.report_reason}${
          report.additional_context ? `, ${report.additional_context}` : ""
        }`}
      />

      <Link href={`/panel/inspect/user/${author!._id}`}>
        <UserCard user={author!} subtitle="Report Author" />
      </Link>

      {snapshots.map((snapshot, index) => (
        <Fragment key={snapshot._id}>
          <Separator className="my-2" />
          <div className="flex gap-2">
            <div className="flex-[2]">
              {relatedReports[index].length ? (
                <h2 className="text-md pb-2">&nbsp;</h2>
              ) : undefined}
              {snapshot._type === "Message" && (
                <MessageContextCard snapshot={snapshot} />
              )}
              {snapshot._type === "User" && (
                <Link href={`/panel/inspect/user/${snapshot!._id}`}>
                  <UserCard user={snapshot} subtitle="Reported User" />
                </Link>
              )}
              {snapshot._type === "Server" && (
                <Link href={`/panel/inspect/server/${snapshot!._id}`}>
                  <ServerCard server={snapshot} subtitle="Reported Server" />
                </Link>
              )}
            </div>
            {relatedReports[index].length ? (
              <div className="flex-1 min-w-0">
                <h2 className="text-md text-center pb-2">Other Reports</h2>
                {relatedReports[index].map((relatedReport) => (
                  <CardLink
                    key={relatedReport._id}
                    href={`/panel/reports/${relatedReport._id}`}
                  >
                    <ReportCard report={relatedReport} />
                  </CardLink>
                ))}
              </div>
            ) : undefined}
          </div>
        </Fragment>
      ))}

      <Separator className="my-2" />
      <JsonCard obj={snapshots} />
    </div>
  );
}
