// Pieces shared by the case pages and the places people open cases from.
import Link from "next/link";
import { ActionForm, SubmitButton } from "@/components/forms";
import { Tag } from "@/components/status";
import { Input } from "@/components/ui/input";
import { report } from "@/app/console/cases/actions";

export const caseKinds: Record<string, string> = {
  report: "Report",
  "rating-review": "Rating review",
  "removal-request": "Removal request",
  "catalog-deletion": "Catalog deletion",
  appeal: "Appeal",
};

/** What resolving each kind of case does (its button). */
export const resolveLabel: Record<string, string> = {
  report: "Resolve",
  "rating-review": "Lower to general",
  "removal-request": "Remove the product",
  "catalog-deletion": "Delete the catalog",
  appeal: "Uphold the appeal",
};

export function CaseStatus({ status }: { status: string }) {
  if (status === "open") return <Tag tone="strong">Open</Tag>;
  if (status === "resolved") return <Tag>Resolved</Tag>;
  return <Tag>Declined</Tag>;
}

const tagLinks: Record<string, (id: string) => string> = {
  catalog: (id) => `/catalogs/${id}`,
  product: (id) => `/products/${id}`,
};

/** What a case is about, linked. */
export function CaseAbout({ tags, names }: { tags: Record<string, string | undefined>; names: Record<string, string> }) {
  const parts = Object.entries(tags).filter((e): e is [string, string] => !!e[1]);
  if (parts.length === 0) return <span className="text-muted-foreground">nothing</span>;
  return (
    <span className="space-x-2">
      {parts.map(([kind, id]) => {
        const href = tagLinks[kind]?.(id);
        return (
          <span key={kind}>
            <span className="text-muted-foreground">{kind} </span>
            {href ? (
              <Link href={href} className="underline-offset-4 hover:underline">
                {names[id] ?? id}
              </Link>
            ) : (
              (names[id] ?? id)
            )}
          </span>
        );
      })}
    </span>
  );
}

/** "Report": a reason, sent to moderators (and the hosting catalogs' teams, for products). */
export function ReportForm({ about, id, label = "Report" }: { about: "product" | "catalog" | "room" | "person"; id: string; label?: string }) {
  return (
    <details className="text-sm">
      <summary className="cursor-pointer text-muted-foreground hover:text-foreground">{label}</summary>
      <ActionForm action={report} fields={{ about, id }} className="mt-2">
        <div className="flex max-w-xl flex-wrap gap-2">
          <Input name="reason" required maxLength={2000} placeholder="What's wrong?" aria-label="What's wrong" className="min-w-60 flex-1" />
          <SubmitButton variant="outline" pendingLabel="Sending…">
            Send report
          </SubmitButton>
        </div>
      </ActionForm>
    </details>
  );
}