import { Bucket } from "@/lib/server/buckets";
import React from "react";


type BucketCardProps = {
    bucket: Bucket;

    icon?: string | null;

    isExpanded: boolean;
    toggleExpanded: (bucketId: number) => void;

    isMenuOpen: boolean;
    setMenuOpenId: React.Dispatch<React.SetStateAction<number | null>>;

    setConfirmDeleteId: (bucketId: number) => void;
    openEdit: (bucketId: number) => void;

    limit: number;

    usageLabel: string;
    renderUsageBar: (bucket: Bucket) => React.ReactNode;
};

export function BucketCard({
    bucket,
    icon,
    isExpanded,
    toggleExpanded,
    isMenuOpen,
    setMenuOpenId,
    setConfirmDeleteId,
    openEdit,
    limit,
    usageLabel,
    renderUsageBar,
}: BucketCardProps) {
    return (
        <div
            className="w-full max-w-[360px] rounded-lg border border-accent-weak bg-panel px-3 py-3 transition hover:border-accent"
            onClick={() => toggleExpanded(bucket.id)}
        >
            <div className="flex items-start justify-between gap-3">
                <div className="flex min-w-0 items-start gap-3">
                    <div className="flex h-11 w-11 items-center justify-center rounded-full border border-accent-weak bg-surface text-lg">
                        {icon || "🚫"}
                    </div>

                    <div className="min-w-0">
                        <div className="text-sm font-semibold truncate">{bucket.name}</div>
                        {bucket.description ? (
                            <div className={`text-xs text-soft ${isExpanded ? "" : "truncate"}`}>
                                {bucket.description}
                            </div>
                        ) : null}
                    </div>
                </div>

                <div className="relative" data-bucket-menu>
                    <button
                        type="button"
                        className="rounded-lg btn-outline-accent px-2 py-1 text-xs"
                        onClick={(event) => {
                            event.stopPropagation();
                            setMenuOpenId((prev) => (prev === bucket.id ? null : bucket.id));
                        }}
                        aria-label="Bucket actions"
                        data-bucket-menu-button
                    >
                        ⋯
                    </button>

                    {isMenuOpen ? (
                        <div className="absolute right-0 mt-2 w-40 rounded-lg border border-accent-weak bg-panel p-1 text-xs shadow-lg">
                            <button
                                type="button"
                                className="w-full rounded-md px-2 py-1 text-left hover:bg-accent-soft"
                                onClick={(event) => {
                                    event.stopPropagation();
                                    openEdit(bucket.id);
                                }}
                            >
                                Edit
                            </button>

                            <button
                                type="button"
                                className="w-full rounded-md px-2 py-1 text-left text-red-200 hover:bg-red-500/10"
                                onClick={(event) => {
                                    event.stopPropagation();
                                    setConfirmDeleteId(bucket.id);
                                }}
                            >
                                Delete
                            </button>
                        </div>
                    ) : null}
                </div>
            </div>

            {limit > 0 ? (
                <>
                    {renderUsageBar(bucket)}
                    {isExpanded ? (
                        <div className="mt-2 space-y-2 text-xs text-soft">
                            <div>{usageLabel}</div>
                            <div className="flex flex-wrap gap-2">
                                {bucket.tags?.length ? (
                                    bucket.tags.map((tag) => (
                                        <span
                                            key={tag}
                                            className="rounded-full border border-accent-weak bg-accent-soft px-2 py-0.5 text-[11px]"
                                        >
                                            #{tag}
                                        </span>
                                    ))
                                ) : (
                                    <span className="text-[11px] text-soft">No tags</span>
                                )}
                            </div>
                        </div>
                    ) : null}
                </>
            ) : isExpanded ? (
                <div className="mt-2 flex flex-wrap gap-2 text-xs text-soft">
                    {bucket.tags?.length ? (
                        bucket.tags.map((tag) => (
                            <span
                                key={tag}
                                className="rounded-full border border-accent-weak bg-accent-soft px-2 py-0.5 text-[11px]"
                            >
                                #{tag}
                            </span>
                        ))
                    ) : (
                        <span className="text-[11px] text-soft">No tags</span>
                    )}
                </div>
            ) : null}
        </div>
    );
}

export default React.memo(BucketCard, (prev, next) => (
    prev.bucket === next.bucket
    && prev.icon === next.icon
    && prev.isExpanded === next.isExpanded
    && prev.isMenuOpen === next.isMenuOpen
    && prev.limit === next.limit
    && prev.usageLabel === next.usageLabel
));