"use client";

import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";
import { Check, Copy, Github, Linkedin, Mail, Twitter } from "lucide-react";

import { cn } from "@/lib/utils";
import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card";
import { Button } from "@/components/ui/button";

const profileCardVariants = cva("overflow-hidden transition-all group", {
  variants: {
    variant: {
      default: "text-center",
      compact: "text-left",
      horizontal: "flex flex-row items-center",
      detailed: "text-left",
    },
  },
  defaultVariants: {
    variant: "default",
  },
});

export interface SocialLink {
  platform: "twitter" | "github" | "linkedin" | "mail";
  url: string;
}

export interface ProfileCardProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof profileCardVariants> {
  name: string;
  role?: string;
  bio?: string;
  avatar?: string;
  email?: string;
  socialLinks?: SocialLink[];
  coverImage?: string;
  status?: "available" | "busy" | "away";
  /** Short skill/tag pills, e.g. ["TypeScript", "React", "Node"]. */
  skills?: string[];
}

/**
 * ProfileCard — a person tile for team pages and directories.
 *
 * Passing `email` renders it as a click-to-copy button.
 *
 * @example
 * <ProfileCard
 *   name="Jane Doe"
 *   role="Senior Developer"
 *   avatar="/jane.jpg"
 *   email="jane@example.com"
 *   status="available"
 *   skills={["TypeScript", "React"]}
 *   socialLinks={[{ platform: "github", url: "https://github.com/jane" }]}
 * />
 */
export function ProfileCard({
  className,
  variant,
  name,
  role,
  bio,
  avatar,
  email,
  socialLinks,
  coverImage,
  status,
  skills,
  ...props
}: ProfileCardProps) {
  const isHorizontal = variant === "horizontal";
  const isCompact = variant === "compact";
  const isDetailed = variant === "detailed";
  const [emailCopied, setEmailCopied] = React.useState(false);

  const handleCopyEmail = async (e: React.MouseEvent) => {
    e.stopPropagation();
    if (!email) return;
    try {
      await navigator.clipboard.writeText(email);
    } catch {
      // Clipboard API unavailable — fail silently, the email is still visible to copy manually.
    }
    setEmailCopied(true);
    window.setTimeout(() => setEmailCopied(false), 1500);
  };

  const renderSocialIcon = (platform: string) => {
    switch (platform) {
      case "twitter":
        return <Twitter className="h-4 w-4" />;
      case "github":
        return <Github className="h-4 w-4" />;
      case "linkedin":
        return <Linkedin className="h-4 w-4" />;
      case "mail":
        return <Mail className="h-4 w-4" />;
      default:
        return null;
    }
  };

  const getSocialHoverClass = (platform: string) => {
    switch (platform) {
      case "twitter":
        return "hover:text-sky-500 hover:border-sky-500";
      case "github":
        return "hover:text-foreground hover:border-foreground";
      case "linkedin":
        return "hover:text-blue-600 hover:border-blue-600";
      case "mail":
        return "hover:text-rose-500 hover:border-rose-500";
      default:
        return "";
    }
  };

  const getStatusColor = (status?: string) => {
    switch (status) {
      case "available":
        return "bg-emerald-500";
      case "busy":
        return "bg-rose-500";
      case "away":
        return "bg-amber-500";
      default:
        return null;
    }
  };

  const getInitials = (name: string) => {
    return name
      .split(" ")
      .map((n) => n[0])
      .join("")
      .substring(0, 2)
      .toUpperCase();
  };

  const statusColor = getStatusColor(status);

  return (
    <Card className={cn(profileCardVariants({ variant }), className)} {...props}>
      {isDetailed && (
        <div className="relative h-32 w-full overflow-hidden">
          {coverImage ? (
            <>
              <img src={coverImage} alt="Cover" className="h-full w-full object-cover blur-sm scale-105" />
              <div className="absolute inset-0 bg-black/20" />
            </>
          ) : (
            <div className="h-full w-full bg-gradient-to-r from-muted to-muted/50" />
          )}
        </div>
      )}
      
      <CardHeader
        className={cn(
          "pb-2",
          isHorizontal ? "w-auto pr-0" : "",
          isCompact ? "flex-row items-center gap-4 space-y-0" : "",
          isDetailed ? "-mt-16 pt-0" : ""
        )}
      >
        <div
          className={cn(
            "relative mx-auto overflow-visible rounded-full border-2 border-background bg-muted group-hover:ring-2 group-hover:ring-primary/40 transition-all z-10",
            isHorizontal ? "h-20 w-20 mx-0" : isCompact ? "h-12 w-12 mx-0" : isDetailed ? "h-28 w-28 mx-0 mb-4" : "h-24 w-24 mb-4"
          )}
        >
          {avatar ? (
            <img src={avatar} alt={name} className="h-full w-full object-cover rounded-full" />
          ) : (
            <div className="flex h-full w-full items-center justify-center rounded-full text-xl font-semibold text-muted-foreground">
              {getInitials(name)}
            </div>
          )}
          {statusColor && (
            <span
              className={cn(
                "absolute bottom-0 right-0 block rounded-full ring-2 ring-background",
                statusColor,
                isCompact ? "h-3 w-3" : "h-4 w-4"
              )}
            />
          )}
        </div>
        <div className={cn(isCompact || isDetailed ? "flex-1" : "")}>
          <h3 className={cn("font-semibold leading-none tracking-tight", isDetailed ? "text-xl mt-2" : "text-lg")}>{name}</h3>
          {role && <p className="text-sm text-muted-foreground mt-1">{role}</p>}
          {email && !isCompact && (
            <button
              onClick={handleCopyEmail}
              className={cn(
                "mt-1.5 inline-flex items-center gap-1.5 text-xs text-muted-foreground transition-colors hover:text-foreground",
                variant === "default" && "mx-auto"
              )}
              title="Copy email address"
            >
              {emailCopied ? (
                <>
                  <Check className="h-3 w-3 text-emerald-500" />
                  Copied!
                </>
              ) : (
                <>
                  <Copy className="h-3 w-3" />
                  {email}
                </>
              )}
            </button>
          )}
        </div>
      </CardHeader>

      <div className={cn("flex-1", isHorizontal ? "flex flex-col justify-center py-6 pr-6" : "")}>
        {!isCompact && bio && (
          <CardContent className={cn("text-sm text-muted-foreground", isHorizontal ? "p-0 px-4" : isDetailed ? "pt-2 pb-6" : "")}>
            {bio}
          </CardContent>
        )}

        {!isCompact && skills && skills.length > 0 && (
          <div
            className={cn(
              "flex flex-wrap gap-1.5",
              isHorizontal ? "px-4" : "px-6",
              bio ? "mt-0 pb-4" : "pb-4",
              variant === "default" && "justify-center"
            )}
          >
            {skills.map((skill) => (
              <span
                key={skill}
                className="rounded-full border bg-muted/50 px-2.5 py-0.5 text-xs font-medium text-muted-foreground"
              >
                {skill}
              </span>
            ))}
          </div>
        )}

        <CardFooter
          className={cn(
            "flex gap-2 pt-0",
            variant === "default" ? "justify-center" : "justify-start",
            isHorizontal ? "p-0 px-4 mt-4" : isDetailed ? "flex-col pb-6" : "pb-6"
          )}
        >
          {socialLinks?.length ? (
            <div className={cn("flex gap-2", isDetailed ? "w-full mb-4" : "w-full")}>
              {socialLinks.map((link, index) => (
                <Button 
                  key={index} 
                  variant="outline" 
                  size="icon" 
                  className={cn("h-8 w-8 rounded-full transition-colors", getSocialHoverClass(link.platform))} 
                  asChild
                >
                  <a href={link.url} target="_blank" rel="noopener noreferrer">
                    <span className="sr-only">{link.platform}</span>
                    {renderSocialIcon(link.platform)}
                  </a>
                </Button>
              ))}
              {(email || role) && !isHorizontal && !isDetailed && (
                <Button variant="default" size="sm" className="ml-auto">
                  Connect
                </Button>
              )}
            </div>
          ) : (
            !isDetailed && (
              <Button variant="default" size={isCompact ? "sm" : "default"} className="w-full">
                View Profile
              </Button>
            )
          )}
          
          {isDetailed && (email || role) && (
            <Button variant="default" className="w-full">
              Contact
            </Button>
          )}
        </CardFooter>
      </div>
    </Card>
  );
}
Profile Card

Jane Doe

Jane Doe
