import { User } from "revolt-api";
import { Card, CardDescription, CardHeader, CardTitle } from "../ui/card";
import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
import { Badge } from "../ui/badge";
import { AUTUMN_URL } from "@/lib/constants";
import Link from "next/link";
import { ExternalLinkIcon } from "lucide-react";

export function UserCard({ user, subtitle, withLink }: { user: User; subtitle: string, withLink?: boolean }) {
  const gradientColour = user.flags == 1
    ? 'rgba(251, 146, 60, 0.6)'
    : user.flags == 4
    ? 'rgba(239, 68, 68, 0.6)'
    : 'transparent';
  const gradient =  `linear-gradient(to right, white, rgba(255,0,0,0)), repeating-linear-gradient(225deg, transparent, transparent 32px, ${gradientColour} 32px, ${gradientColour} 64px)`;

  return (
    <Card
      className="bg-no-repeat bg-right text-left"
      style={{
        backgroundImage: user.profile?.background
          ? `${gradient}, url('${AUTUMN_URL}/backgrounds/${user.profile.background._id}')`
          : gradient,
        backgroundSize: "75%",
      }}
    >
      <CardHeader>
        <CardTitle className="overflow-hidden overflow-ellipsis whitespace-nowrap flex items-center gap-1">
          <Avatar>
            <AvatarImage src={`${AUTUMN_URL}/avatars/${user.avatar?._id}`} />
            <AvatarFallback className="overflow-hidden overflow-ellipsis whitespace-nowrap">
              {(user.display_name ?? user.username)
                .split(" ")
                .slice(0, 2)
                .map((x) => String.fromCodePoint(x.codePointAt(0) ?? 32) ?? "")
                .join("")}
            </AvatarFallback>
          </Avatar>
          {user.bot && <Badge className="align-middle">Bot</Badge>}{" "}
          {user.flags == 1 && <Badge className="align-middle bg-orange-400">Suspended</Badge>}{" "}
          {user.flags == 4 && <Badge className="align-middle bg-red-700">Banned</Badge>}{" "}
          <div className="flex gap-2">
            {user.username}#{user.discriminator} {user.display_name}
            {
              withLink
                ? <Link href={`/panel/inspect/user/${user._id}`}>
                  <ExternalLinkIcon className="text-gray-500 hover:text-gray-700 transition-all" />
                </Link>
                : <></>
            }
            </div>
        </CardTitle>
        <CardDescription>{subtitle}</CardDescription>
      </CardHeader>
    </Card>
  );
}