"use client";

import { useCallback, useState } from "react";
import { Can } from "@/components/staff-context";
import { toast } from "sonner";
import { api, AdminError, type AdminReport, type ReportType } from "@/lib/api";
import { usePagedList } from "@/lib/use-paged-list";
import { ListShell, EmptyRow } from "@/components/list-shell";
import { Table, THead, TR, TH, TD } from "@/components/ui/table";
import { Button } from "@/components/ui/button";
import { Modal } from "@/components/ui/modal";
import { RichTextarea } from "@/components/ui/rich-textarea";
import { RichText } from "@/lib/rich-text";
import { useConfirm } from "@/components/confirm";
import { cn, fmtDate } from "@/lib/utils";
import { Clamp } from "@/components/ui/clamp";

const TYPES: { key: ReportType; label: string }[] = [
  { key: "post", label: "Posts" },
  { key: "comment", label: "Comments" },
  { key: "user", label: "Accounts" },
];

export default function ReportsPage() {
  const [type, setType] = useState<ReportType>("post");
  const [q, setQ] = useState("");
  const fetcher = useCallback(
    (limit: number, offset: number) => api.reports(type, q, limit, offset),
    [type, q],
  );
  const list = usePagedList<AdminReport>(fetcher, [type, q]);
  const confirm = useConfirm();
  const [resolveTarget, setResolveTarget] = useState<AdminReport | null>(null);

  async function run(action: Promise<unknown>, successMsg: string) {
    try {
      await action;
      toast.success(successMsg);
      list.refresh();
    } catch (err) {
      toast.error(err instanceof AdminError ? err.message : "Action failed.");
    }
  }

  // The moderation button when the target is still live. Destructive actions
  // confirm first. (When the target is already removed we show "Undo" instead.)
  function modButton(r: AdminReport) {
    if (r.type === "post") {
      return (
        <>
          <Button
            size="sm"
            variant="outline"
            onClick={() => run(api.hidePost(r.target_id), "Post hidden.")}
          >
            Hide
          </Button>
          <Button
            size="sm"
            variant="destructive"
            onClick={async () => {
              if (
                await confirm({
                  title: "Delete this post?",
                  message:
                    "It will be removed from the app. You can undo this.",
                  confirmLabel: "Delete post",
                  destructive: true,
                })
              ) {
                run(api.deletePost(r.target_id), "Post deleted.");
              }
            }}
          >
            Delete
          </Button>
        </>
      );
    }
    if (r.type === "comment") {
      return (
        <Button
          size="sm"
          variant="destructive"
          onClick={async () => {
            if (
              await confirm({
                title: "Delete this comment?",
                message:
                  "It will be removed from the thread. You can undo this.",
                confirmLabel: "Delete comment",
                destructive: true,
              })
            ) {
              run(api.deleteComment(r.target_id), "Comment deleted.");
            }
          }}
        >
          Delete
        </Button>
      );
    }
    return (
      <Button
        size="sm"
        variant="destructive"
        onClick={async () => {
          if (
            await confirm({
              title: "Suspend this account?",
              message:
                "They'll be signed out and unable to log in. You can undo this.",
              confirmLabel: "Suspend account",
              destructive: true,
            })
          ) {
            run(api.banUser(r.target_id), "Account suspended.");
          }
        }}
      >
        Ban
      </Button>
    );
  }

  // Shown when the reported content is currently removed (deleted / banned) —
  // reverts the soft-deletion or ban.
  function undoButton(r: AdminReport) {
    return (
      <Button
        size="sm"
        variant="outline"
        onClick={() => {
          if (r.type === "post")
            run(api.restorePost(r.target_id), "Post restored.");
          else if (r.type === "comment")
            run(api.restoreComment(r.target_id), "Comment restored.");
          else run(api.unbanUser(r.target_id), "Account restored.");
        }}
      >
        {r.type === "user" ? "Undo ban" : "Undo delete"}
      </Button>
    );
  }

  const targetLabel =
    type === "user"
      ? "Reported account"
      : type === "comment"
        ? "Comment"
        : "Post";

  return (
    <ListShell
      title="Reports"
      total={list.total}
      searchPlaceholder="Search content or reporter…"
      onQueryChange={setQ}
      list={list}
      toolbar={
        <div className="flex gap-1 rounded-lg border border-border bg-card p-1">
          {TYPES.map((t) => (
            <button
              key={t.key}
              onClick={() => setType(t.key)}
              className={cn(
                "rounded-md px-3 py-1.5 text-sm transition-colors",
                type === t.key
                  ? "bg-accent text-accent-foreground font-medium"
                  : "text-muted-foreground hover:text-foreground",
              )}
            >
              {t.label}
            </button>
          ))}
        </div>
      }
    >
      <Table>
        <THead>
          <TR>
            <TH>{targetLabel}</TH>
            <TH>Reason</TH>
            <TH>Reporter</TH>
            <TH>Reported</TH>
            <TH className="text-right">Actions</TH>
          </TR>
        </THead>
        <tbody>
          {list.items.length === 0 && !list.loading ? (
            <EmptyRow cols={5} label="No reports." />
          ) : (
            list.items.map((r) => {
              const resolved = !!r.resolved_at;
              return (
                <TR key={r.id} className={resolved ? "opacity-70" : ""}>
                  <TD className="max-w-xs align-top">
                    {type === "user" ? (
                      <Clamp className="font-medium">
                        {r.target_text ? `@${r.target_text}` : "—"}
                      </Clamp>
                    ) : (
                      <>
                        <Clamp lines={2}>{r.target_text || "—"}</Clamp>
                        {r.target_author_handle ? (
                          <Clamp className="mt-0.5 text-xs text-muted-foreground">
                            {`by @${r.target_author_handle}`}
                          </Clamp>
                        ) : null}
                      </>
                    )}
                    {r.target_removed ? (
                      <div className="mt-1 text-[10px] font-medium uppercase tracking-wide text-destructive">
                        {r.type === "user" ? "Suspended" : "Removed"}
                      </div>
                    ) : null}
                  </TD>
                  <TD className="max-w-xs align-top">
                    <div className="text-xs uppercase tracking-wide text-muted-foreground">
                      {r.category}
                    </div>
                    {r.reason ? (
                      <Clamp lines={2} className="mt-0.5">
                        {r.reason}
                      </Clamp>
                    ) : null}
                  </TD>
                  <TD className="max-w-[12rem] align-top text-xs text-muted-foreground">
                    <Clamp>
                      {r.reporter_handle ? `@${r.reporter_handle}` : "—"}
                    </Clamp>
                  </TD>
                  <TD className="whitespace-nowrap align-top">
                    {fmtDate(r.created_at)}
                  </TD>
                  <TD className="align-top text-right">
                    {resolved ? (
                      <div className="flex flex-col items-end gap-1.5">
                        <span className="text-xs font-medium text-primary">
                          ✓ Resolved
                        </span>
                        {r.resolution_note ? (
                          <p className="max-w-[220px] text-right text-xs text-muted-foreground">
                            <RichText text={r.resolution_note} />
                          </p>
                        ) : null}
                        {r.target_removed ? undoButton(r) : null}
                      </div>
                    ) : (
                      <div className="flex flex-wrap justify-end gap-2">
                        {r.target_removed ? undoButton(r) : modButton(r)}
                        <Can perm="reports:resolve">
                          <Button
                            size="sm"
                            variant="ghost"
                            onClick={() => setResolveTarget(r)}
                          >
                            Resolve
                          </Button>
                        </Can>
                      </div>
                    )}
                  </TD>
                </TR>
              );
            })
          )}
        </tbody>
      </Table>

      <ResolveModal
        report={resolveTarget}
        onClose={() => setResolveTarget(null)}
        onDone={() => {
          setResolveTarget(null);
          list.refresh();
        }}
      />
    </ListShell>
  );
}

function ResolveModal({
  report,
  onClose,
  onDone,
}: {
  report: AdminReport | null;
  onClose: () => void;
  onDone: () => void;
}) {
  const [note, setNote] = useState("");
  const [busy, setBusy] = useState(false);

  async function submit() {
    if (!report || note.trim() === "") return;
    setBusy(true);
    try {
      await api.resolveReport(report.type, report.id, note.trim());
      toast.success("Report resolved.");
      setNote("");
      onDone();
    } catch (err) {
      toast.error(
        err instanceof AdminError ? err.message : "Could not resolve.",
      );
    } finally {
      setBusy(false);
    }
  }

  return (
    <Modal open={!!report} onClose={onClose} title="Resolve report">
      <div className="space-y-4">
        <label className="block space-y-1.5">
          <span className="text-sm font-medium">Resolution note</span>
          <RichTextarea
            value={note}
            onValueChange={setNote}
            rows={4}
            maxLength={2000}
            placeholder="What did you do / decide? (shown in the reports table)"
          />
        </label>
        <div className="flex justify-end gap-2">
          <Button variant="ghost" onClick={onClose}>
            Cancel
          </Button>
          <Button onClick={submit} disabled={busy || note.trim() === ""}>
            {busy ? "Resolving…" : "Resolve report"}
          </Button>
        </div>
      </div>
    </Modal>
  );
}