import { Bookmark, Briefcase, Star } from "lucide-react";

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

interface UserData {
  name: string;
  role: string;
  avatar?: string;
  coverImage?: string;
  isOnline?: boolean;
  skills?: string[];
  rating?: number;
  projects?: number;
  hourlyRate?: number;
}

interface UserProfile14Props {
  user?: UserData;
  className?: string;
}

const UserProfile14 = ({
  user = {
    name: "امیر رضایی",
    role: "توسعه‌دهنده فول‌استک",
    avatar:
      "/block-media/shadcnblocks/block/avatar/avatar1.jpg",
    coverImage:
      "/block-media/shadcnblocks/block/photos/pawel-czerwinski-O4fAgtXLRwI-unsplash.jpg",
    isOnline: true,
    skills: ["React", "TypeScript", "Node.js", "PostgreSQL"],
    rating: 4.8,
    projects: 127,
    hourlyRate: 95,
  },
  className,
}: UserProfile14Props) => {
  const initials = user.name
    .split(" ")
    .map((n) => n[0])
    .join("");

  const extraSkills =
    user.skills && user.skills.length > 3 ? user.skills.length - 3 : 0;
  const displayedSkills = user.skills?.slice(0, 3) || [];

  return (
    <div
      dir="rtl"
      lang="fa"
      className={cn(
        "relative w-full max-w-sm overflow-hidden rounded-2xl",
        className,
      )}
    >
      <img
        src={user.coverImage}
        alt=""
        className="absolute inset-0 size-full object-cover"
      />

      <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/50 to-black/20" />

      <div className="relative flex flex-col p-5 text-white">
        <div className="flex items-start justify-between">
          <div className="relative">
            <Avatar className="size-20 border-2 border-white/30 shadow-lg">
              <AvatarImage
                src={user.avatar}
                alt={user.name}
                className="object-cover"
              />
              <AvatarFallback className="bg-white/20 text-xl font-semibold text-white">
                {initials}
              </AvatarFallback>
            </Avatar>
            {user.isOnline && (
              <span className="absolute end-1 bottom-1 size-4 rounded-full border-2 border-black/50 bg-emerald-500" />
            )}
          </div>
          <Button
            variant="ghost"
            size="icon"
            className="size-9 rounded-full border border-white/30 text-white hover:bg-white/10 hover:text-white"
            aria-label="ذخیره"
          >
            <Bookmark className="size-4" />
          </Button>
        </div>

        <div className="mt-4">
          <h3 className="text-xl font-semibold">{user.name}</h3>
          <p className="text-sm text-white/70">{user.role}</p>
        </div>

        <div className="mt-4 flex flex-wrap gap-2">
          {displayedSkills.map((skill) => (
            <Badge
              key={skill}
              variant="outline"
              className="rounded-full border-white/30 bg-white/10 text-white hover:bg-white/20"
            >
              {skill}
            </Badge>
          ))}
          {extraSkills > 0 && (
            <Badge
              variant="outline"
              className="rounded-full border-white/30 bg-white/10 text-white"
            >
              +{extraSkills.toLocaleString("fa-IR")}
            </Badge>
          )}
        </div>

        <div className="mt-6 flex items-center justify-between">
          <div className="flex items-center gap-1.5">
            <Star className="size-4 fill-amber-400 text-amber-400" />
            <span className="font-semibold">
              {user.rating?.toLocaleString("fa-IR", {
                minimumFractionDigits: 1,
                maximumFractionDigits: 1,
              })}
            </span>
            <span className="text-sm text-white/60">امتیاز</span>
          </div>
          <div className="flex items-center gap-1.5">
            <Briefcase className="size-4 text-white/60" />
            <span className="font-semibold">
              {user.projects?.toLocaleString("fa-IR")}
            </span>
            <span className="text-sm text-white/60">پروژه</span>
          </div>
          <div>
            <span className="font-semibold" dir="rtl">
              ${user.hourlyRate?.toLocaleString("fa-IR")}/ساعت
            </span>
            <span className="block text-xs text-white/60">نرخ</span>
          </div>
        </div>

        <Button
          className="mt-6 w-full rounded-full bg-white text-black hover:bg-white/90"
          size="lg"
        >
          استخدام من
        </Button>
      </div>
    </div>
  );
};

export { UserProfile14 };