"use client"

import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { DropdownMenuContent, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
import { toast } from "@/components/ui/use-toast";
import { Account } from "@/lib/db";
import { DropdownMenu } from "@radix-ui/react-dropdown-menu";
import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";
import { MoreHorizontal } from "lucide-react";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { User } from "revolt-api";
import { decodeTime } from "ulid";

dayjs.extend(relativeTime);

export function UserReviewCard({ user, account }: { user?: User, account: Account }) {
  const router = useRouter();
  const [dropdownOpen, setDropdownOpen] = useState(false);

  return <Card className="flex">
    <CardHeader className="flex-1">
      {
        user
          ? <CardTitle>{user.username}#{user.discriminator}</CardTitle>
          : <CardTitle className="text-gray-500">Pending onboarding</CardTitle>
      }
      <CardDescription>{account.email} &middot; {dayjs(decodeTime(account._id)).fromNow()}</CardDescription>
    </CardHeader>
    <CardContent className="flex items-center py-0 gap-2">
      <Button className="bg-orange-400 hover:bg-orange-300">Suspend</Button>
      <Button variant="destructive">Ban</Button>
      <DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
        <DropdownMenuTrigger asChild>
          <Button variant="outline" className="px-2"><MoreHorizontal /></Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent className="flex flex-col">
          <Button
            variant="ghost"
            onClick={() => {
              setDropdownOpen(false);
              navigator.clipboard.writeText(account._id);
              toast({
                title: "Copied ID",
                description: account._id,
              });
            }}
          >
            Copy ID
          </Button>
          <Button
            variant="ghost"
            onClick={() => {
              setDropdownOpen(false);
              navigator.clipboard.writeText(account.email);
              toast({
                title: "Copied email",
                description: account.email,
              });
            }}
          >
            Copy email
          </Button>
          <Button
            variant="ghost"
            onClick={() => {
              setDropdownOpen(false);
              router.push(`/panel/inspect/account/${account._id}`);
            }}
          >
            Inspect account
          </Button>
          <Button
            variant="ghost"
            onClick={() => {
              setDropdownOpen(false);
              router.push(`/panel/inspect/user/${user?._id}`);
            }}
            disabled={!user}
          >
            Inspect user
          </Button>
          <Button
            variant="ghost"
            onClick={() => alert("todo")}
            disabled={true}
          >
            Block email provider
          </Button>
        </DropdownMenuContent>
      </DropdownMenu>
    </CardContent>
  </Card>;
}