"use client";

import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";
import { MapPin, Link as LinkIcon, Calendar, BadgeCheck, Check, Share2 } from "lucide-react";

import { cn } from "@/lib/utils";
import { Card, CardContent, CardHeader } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { UserAvatar } from "./user-avatar";

const userProfileVariants = cva("overflow-hidden transition-all", {
  variants: {
    variant: {
      default: "",
      compact: "flex flex-row items-start space-x-4",
      full: "max-w-3xl w-full mx-auto",
    },
  },
  defaultVariants: {
    variant: "default",
  },
});

export interface UserStats {
  followers: string | number;
  following: string | number;
  posts: string | number;
}

export interface UserProfileProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof userProfileVariants> {
  name: string;
  username: string;
  bio?: string;
  avatar?: string;
  stats?: UserStats;
  location?: string;
  website?: string;
  joinDate?: string;
  verified?: boolean;
  bannerGradient?: string;
  /** URL to copy when the share button is clicked. Defaults to the current page URL. */
  profileUrl?: string;
  /** Override the default "copy link to clipboard" behavior entirely. */
  onShare?: () => void;
}

/**
 * UserProfile — a full profile header with stats and actions.
 *
 * The share button copies `profileUrl` (defaulting to the current page URL);
 * pass `onShare` to replace that with your own share sheet.
 *
 * @example
 * <UserProfile
 *   variant="full"
 *   name="John Doe"
 *   username="johndoe"
 *   avatar="/john.jpg"
 *   verified
 *   stats={{ followers: "1.2K", following: 340, posts: 89 }}
 *   profileUrl="https://example.com/u/johndoe"
 * />
 */
export function UserProfile({
  className,
  variant,
  name,
  username,
  bio,
  avatar,
  stats,
  location,
  website,
  joinDate,
  verified = false,
  bannerGradient = "from-primary/40 to-primary/10",
  profileUrl,
  onShare,
  ...props
}: UserProfileProps) {
  const isCompact = variant === "compact";
  const isFull = variant === "full";
  const [isBioExpanded, setIsBioExpanded] = React.useState(false);
  const [linkCopied, setLinkCopied] = React.useState(false);

  const showReadMore = bio && bio.length > 120;
  const displayBio = showReadMore && !isBioExpanded ? bio.slice(0, 120) + "..." : bio;

  const handleShare = async () => {
    if (onShare) {
      onShare();
      return;
    }
    const url = profileUrl ?? (typeof window !== "undefined" ? window.location.href : "");
    try {
      await navigator.clipboard.writeText(url);
    } catch {
      // Clipboard API unavailable in this environment — nothing more we can do silently.
    }
    setLinkCopied(true);
    window.setTimeout(() => setLinkCopied(false), 1500);
  };

  const ShareButton = ({ className: btnClassName }: { className?: string }) => (
    <Button
      variant="outline"
      size="icon"
      onClick={handleShare}
      className={btnClassName}
      title="Copy profile link"
    >
      {linkCopied ? <Check className="h-4 w-4 text-emerald-500" /> : <Share2 className="h-4 w-4" />}
      <span className="sr-only">Copy profile link</span>
    </Button>
  );

  if (isCompact) {
    return (
      <Card className={cn("p-4", userProfileVariants({ variant }), className)} {...props}>
        <div className="hover:ring-2 hover:ring-primary/50 transition-all rounded-full p-0.5">
          <UserAvatar src={avatar} name={name} size="lg" className="h-16 w-16" />
        </div>
        <div className="flex-1 space-y-2">
          <div className="flex items-center justify-between">
            <div>
              <h3 className="font-semibold text-lg flex items-center gap-1">
                {name}
                {verified && <BadgeCheck className="h-4 w-4 text-blue-500" />}
              </h3>
              <p className="text-sm text-muted-foreground">@{username}</p>
            </div>
            <div className="flex items-center gap-2">
              <ShareButton className="h-8 w-8 shrink-0" />
              <Button size="sm">Follow</Button>
            </div>
          </div>
          {bio && (
            <div>
              <p className="text-sm inline">{displayBio}</p>
              {showReadMore && (
                <button
                  onClick={() => setIsBioExpanded(!isBioExpanded)}
                  className="text-sm text-primary hover:underline ml-1 font-medium"
                >
                  {isBioExpanded ? "Show less" : "Read more"}
                </button>
              )}
            </div>
          )}
        </div>
      </Card>
    );
  }

  return (
    <Card className={cn(userProfileVariants({ variant }), className)} {...props}>
      {isFull && (
        <div className={cn("h-32 w-full bg-gradient-to-r", bannerGradient)} />
      )}
      <CardHeader className={cn(isFull ? "-mt-16 pt-0" : "text-center")}>
        <div className={cn("flex", isFull ? "justify-between items-end mb-4" : "flex-col items-center")}>
          <div className={cn("hover:ring-2 hover:ring-primary/50 transition-all rounded-full bg-background", !isFull && "mb-4")}>
            <UserAvatar 
              src={avatar} 
              name={name} 
              size="lg" 
              className={cn("h-24 w-24 ring-4 ring-background", isFull && "ring-background")} 
            />
          </div>
          <div className={cn("flex gap-2", isFull ? "pb-2" : "mt-4 w-full justify-center")}>
            <Button className={cn(!isFull && "w-1/2")}>Follow</Button>
            <Button variant="outline" className={cn(!isFull && "w-1/2")}>Message</Button>
            <ShareButton className="shrink-0" />
          </div>
        </div>
        
        <div className={cn(isFull ? "text-left" : "text-center")}>
          <h2 className="text-2xl font-bold flex items-center gap-1.5 justify-start">
            {name}
            {verified && <BadgeCheck className="h-5 w-5 text-blue-500" />}
          </h2>
          <p className="text-muted-foreground">@{username}</p>
        </div>
      </CardHeader>

      <CardContent className={cn("space-y-6", isFull ? "pt-0" : "")}>
        {bio && (
          <div className={cn("text-sm", !isFull && "text-center")}>
            <p className="inline">{displayBio}</p>
            {showReadMore && (
              <button
                onClick={() => setIsBioExpanded(!isBioExpanded)}
                className="text-primary hover:underline ml-1 font-medium"
              >
                {isBioExpanded ? "Show less" : "Read more"}
              </button>
            )}
          </div>
        )}

        {isFull && (location || website || joinDate) && (
          <div className="flex flex-wrap gap-4 text-sm text-muted-foreground">
            {location && (
              <div className="flex items-center gap-1">
                <MapPin className="h-4 w-4" />
                <span>{location}</span>
              </div>
            )}
            {website && (
              <div className="flex items-center gap-1">
                <LinkIcon className="h-4 w-4" />
                <a href={`https://${website}`} className="hover:underline text-primary">
                  {website}
                </a>
              </div>
            )}
            {joinDate && (
              <div className="flex items-center gap-1">
                <Calendar className="h-4 w-4" />
                <span>Joined {joinDate}</span>
              </div>
            )}
          </div>
        )}

        {stats && (
          <div className={cn("flex border-t pt-6", isFull ? "gap-6" : "justify-around")}>
            <div className={cn("flex p-2 rounded-lg hover:bg-muted hover:scale-105 transition-all cursor-default", isFull ? "gap-1.5" : "flex-col items-center")}>
              <span className="font-bold">{stats.posts}</span>
              <span className="text-sm text-muted-foreground">Posts</span>
            </div>
            <div className={cn("flex p-2 rounded-lg hover:bg-muted hover:scale-105 transition-all cursor-default", isFull ? "gap-1.5" : "flex-col items-center")}>
              <span className="font-bold">{stats.followers}</span>
              <span className="text-sm text-muted-foreground">Followers</span>
            </div>
            <div className={cn("flex p-2 rounded-lg hover:bg-muted hover:scale-105 transition-all cursor-default", isFull ? "gap-1.5" : "flex-col items-center")}>
              <span className="font-bold">{stats.following}</span>
              <span className="text-sm text-muted-foreground">Following</span>
            </div>
          </div>
        )}
      </CardContent>
    </Card>
  );
}
User Profile

John Doe

John Doe
