"use client";

import { Report } from "revolt-api";
import { Textarea } from "../ui/textarea";
import { Button } from "../ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "../ui/dropdown-menu";
import { useRef, useState } from "react";
import { useToast } from "../ui/use-toast";
import { updateReportNotes } from "@/lib/actions";

export function ReportActions({ report }: { report: Report }) {
  const { toast } = useToast();
  const [reportDraft, setDraft] = useState(report);

  return (
    <>
      <Textarea
        placeholder="Enter notes here... (save on unfocus)"
        className="!min-h-0 !h-[76px]"
        defaultValue={report.notes}
        onBlur={async (e) => {
          const notes = e.currentTarget.value;
          if (notes === reportDraft.notes ?? "") return;

          try {
            await updateReportNotes(report._id, notes);
            setDraft((report) => ({ ...report, notes }));
            toast({
              title: "Updated report notes",
            });
          } catch (err) {
            toast({
              title: "Failed to update report notes",
              description: String(err),
              variant: "destructive",
            });
          }
        }}
      />

      <div className="flex gap-2">
        {report.status === "Created" ? (
          <>
            <Button className="flex-1 bg-green-400 hover:bg-green-300">
              Resolve
            </Button>
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button className="flex-1 bg-red-400 hover:bg-red-300">
                  Reject
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent>
                <DropdownMenuItem>Custom Reason</DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuLabel>Presets</DropdownMenuLabel>
                <DropdownMenuItem>Invalid</DropdownMenuItem>
                <DropdownMenuItem>False or Spam</DropdownMenuItem>
                <DropdownMenuItem>Duplicate</DropdownMenuItem>
                <DropdownMenuItem>Not Enough Evidence</DropdownMenuItem>
                <DropdownMenuItem>Request Clarification</DropdownMenuItem>
                <DropdownMenuItem>Acknowledge Only</DropdownMenuItem>
                <DropdownMenuItem>Ignore</DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </>
        ) : (
          <>
            <Button className="flex-1">Re-open</Button>
            <Button className="flex-1">Send resolution notification</Button>
          </>
        )}
      </div>
    </>
  );
}