import React, { CSSProperties } from "react";
import { Loader2, Pencil, LucideRefreshCw } from "lucide-react";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils/cn";

export type ProfilePreviewProps = {
    className?: string;
    size?: number | string;
    withoutLabel?: boolean;
    loading?: boolean;
    name?: string;
    jobInfo?: string | null;
    avatar?: null | {
        alt?: null | string;
        url: string;
    };
    onEdit?: () => void;
    onReplace?: () => void;
};

export const ProfilePreview: React.FC<ProfilePreviewProps> = (props) => {
    const {
        className,
        size = 92 as number | string,
        withoutLabel,
        loading,
        avatar,
        name,
        jobInfo,
        onEdit,
        onReplace
    } = props;

    return (
        <div className={cn("relative inline-flex flex-col items-center gap-2", className)}>
            <div className="relative group">
                <Avatar
                  style={{
                    "--ap-size": typeof size === "number" ? `${size}px` : size
                  } as CSSProperties}
                  className="size-24 border-2 border-muted w-[var(--ap-size)] h-[var(--ap-size)]">
                    <AvatarImage
                      alt={avatar?.alt || name}
                      src={avatar?.url || undefined} />

                    <AvatarFallback className="text-xl">
                        {name ? name.charAt(0).toUpperCase() : "?"}
                    </AvatarFallback>
                </Avatar>

                {loading && (
                    <div className="absolute inset-0 flex items-center justify-center bg-background/50 rounded-full">
                        <Loader2 className="size-8 animate-spin text-primary" />
                    </div>
                )}

                <div className="absolute top-0 bottom-0 right-0 flex items-center justify-center opacity-40 group-hover:opacity-100 transition-opacity bg-black/20 rounded-full">
                    <div className="flex flex-col gap-1">
                        {onReplace && (
                            <Button
                              type="button"
                              size="icon"
                              variant="secondary"
                              className="size-8 rounded-full"
                              onClick={(e) => {
                                e.stopPropagation();
                                onReplace();
                              }}>
                                <LucideRefreshCw className="size-4" />
                            </Button>
                        )}

                        {onEdit && (
                            <Button
                              type="button"
                              size="icon"
                              variant="secondary"
                              className="size-8 rounded-full"
                              onClick={(e) => {
                                e.stopPropagation();
                                onEdit();
                              }}>
                                <Pencil className="size-4" />
                            </Button>
                        )}
                    </div>
                </div>
            </div>

            {!withoutLabel && (
                <div className="text-center max-w-full">
                    <div
                      className="text-sm font-medium leading-none line-clamp-1 mb-1 min-w-1 max-w-full"
                      title={name}>
                        {name}
                    </div>

                    <div
                      className="text-xs text-muted-foreground line-clamp-1 min-w-1 max-w-full"
                      title={jobInfo || ""}>
                        {jobInfo}
                    </div>
                </div>
            )}
        </div>
    );
};