import { ReportCard } from "@/components/cards/ReportCard";
import { CardLink } from "@/components/common/CardLink";
import { Input } from "@/components/ui/input";
import { fetchOpenReports } 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: [],
  };
  const keyOrder = ["Urgent", "All"];

  const countsByAuthor: Record<string, number> = {};
  for (const report of reports) {
    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);
      }
    }
  }

  return (
    <div className="flex flex-col gap-8">
      {/*<Input placeholder="Search for reports..." disabled />*/}
      {reports.length ? (
        keyOrder.map((key) => {
          return (
            <div key={key} className="flex flex-col gap-2">
              <h1 className="text-2xl">{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>
        </>
      )}
    </div>
  );
}
