import { ReportCard } from "@/components/cards/ReportCard";
import { CardLink } from "@/components/common/CardLink";
import { Input } from "@/components/ui/input";
import { fetchOpenReports, fetchUsersById } from "@/lib/db";
import { PizzaIcon } from "lucide-react";
import { Report } from "revolt-api";

export default async function Reports() {
  const reports = (await fetchOpenReports())
    .reverse()
    .sort((b, _) => (b.content.report_reason.includes("Illegal") ? -1 : 0));

  const byCategory: Record<string, Report[]> = {
    Urgent: [],
    All: [],
    AssignedToCase: [],
  };
  const keyOrder = ["Urgent", "All"];

  const countsByAuthor: Record<string, number> = {};
  for (const report of reports) {
    if (report.case_id) {
      byCategory.AssignedToCase.push(report);
    } else if (report.content.report_reason.includes("Illegal")) {
      byCategory.Urgent.push(report);
    } else {
      countsByAuthor[report.author_id] =
        (countsByAuthor[report.author_id] || 0) + 1;
    }
  }

  for (const report of reports) {
    if (!report.content.report_reason.includes("Illegal")) {
      if (countsByAuthor[report.author_id] > 1) {
        if (!keyOrder.includes(report.author_id)) {
          keyOrder.push(report.author_id);
          byCategory[report.author_id] = [];
        }

        byCategory[report.author_id].push(report);
      } else {
        byCategory.All.push(report);
      }
    }
  }

  const authorNames: Record<string, string> = {};
  for (const user of await fetchUsersById(Object.keys(countsByAuthor))) {
    authorNames[user._id] = user.username + "#" + user.discriminator;
  }

  return (
    <div className="flex flex-col gap-8">
      {/*<Input placeholder="Search for reports..." disabled />*/}
      {reports.length ? (
        keyOrder
          .filter((key) => byCategory[key].length)
          .map((key) => {
            return (
              <div key={key} className="flex flex-col gap-2">
                <h1 className="text-2xl">{authorNames[key] ?? key}</h1>
                {byCategory[key].map((report) => (
                  <CardLink
                    key={report._id}
                    href={`/panel/reports/${report._id}`}
                  >
                    <ReportCard report={report} />
                  </CardLink>
                ))}{" "}
              </div>
            );
          })
      ) : (
        <>
          <h2 className="mt-8 flex justify-center">
            <PizzaIcon className="text-gray-400" />
          </h2>
          <h3 className="text-xs text-center pb-2 text-gray-400">
            You&lsquo;ve caught up for now.
          </h3>
        </>
      )}
      {byCategory["AssignedToCase"].length && (
        <details>
          <summary>
            <h1 className="text-xl inline">Reports assigned to cases</h1>
          </summary>
          <div className="flex flex-col gap-2">
            {byCategory["AssignedToCase"].map((report) => (
              <CardLink key={report._id} href={`/panel/reports/${report._id}`}>
                <ReportCard report={report} />
              </CardLink>
            ))}
          </div>
        </details>
      )}
    </div>
  );
}