import { Check, ImageOff } from 'lucide-react';
import { cn } from '@/lib/utils';
import type { BrandingBackgroundImage } from '@/types';

/**
 * The photographs already uploaded for the company profile, as a picker.
 *
 * The library belongs to the company profile, not to one screen: the sign-in
 * page and the holding page choose from the same files, so a client uploads a
 * photograph once and can wear it in either place. Selecting a thumbnail only
 * changes the setting that points at the file — nothing is copied or uploaded.
 */
export function BrandingBackgroundGallery({
    title,
    description,
    images,
    selectedPath,
    onSelect,
    onClear,
    clearLabel = 'No photograph',
    emptyMessage,
    divided = true,
}: {
    title: string;
    description: string;
    images: BrandingBackgroundImage[];
    selectedPath: string | null;
    onSelect: (path: string) => void;
    onClear?: () => void;
    clearLabel?: string;
    emptyMessage: string;
    /** A rule above the picker when it follows another block in the card. */
    divided?: boolean;
}) {
    return (
        <div
            className={cn(
                divided && 'mt-6 border-t border-hairline pt-5',
            )}
        >
            <div className="flex flex-wrap items-baseline justify-between gap-2">
                <div>
                    <h3 className="text-sm font-semibold">{title}</h3>
                    <p className="mt-0.5 text-xs text-muted-foreground">
                        {description}
                    </p>
                </div>
                <span className="text-xs text-muted-foreground">
                    {images.length} {images.length === 1 ? 'image' : 'images'}
                </span>
            </div>

            {images.length === 0 ? (
                <p className="mt-3 rounded-lg border border-dashed border-hairline bg-muted/30 px-3 py-4 text-xs text-muted-foreground">
                    {emptyMessage}
                </p>
            ) : (
                <div className="mt-3 grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
                    {onClear ? (
                        <button
                            type="button"
                            onClick={onClear}
                            disabled={selectedPath === null}
                            aria-pressed={selectedPath === null}
                            aria-label={
                                selectedPath === null
                                    ? `${clearLabel} is in use`
                                    : `Use ${clearLabel.toLowerCase()}`
                            }
                            className={cn(
                                'group relative aspect-[16/10] overflow-hidden rounded-lg text-left ring-1 ring-hairline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
                                selectedPath === null
                                    ? 'cursor-default ring-2 ring-primary'
                                    : 'hover:ring-primary/60',
                            )}
                        >
                            <span className="absolute inset-0 flex flex-col items-center justify-center gap-1.5 bg-muted/40 text-muted-foreground">
                                <ImageOff className="size-5" aria-hidden />
                                <span className="text-[11px] font-medium">
                                    {clearLabel}
                                </span>
                            </span>
                            {selectedPath === null ? (
                                <span className="absolute top-2 right-2 flex size-5 items-center justify-center rounded-full bg-primary text-primary-foreground">
                                    <Check className="size-3" />
                                </span>
                            ) : null}
                        </button>
                    ) : null}

                    {images.map((image) => {
                        const inUse = image.path === selectedPath;

                        return (
                            <button
                                key={image.path}
                                type="button"
                                onClick={() => onSelect(image.path)}
                                disabled={inUse}
                                aria-pressed={inUse}
                                aria-label={
                                    inUse
                                        ? `Background uploaded ${image.uploaded_label} is in use`
                                        : `Use the background uploaded ${image.uploaded_label}`
                                }
                                className={cn(
                                    'group relative aspect-[16/10] overflow-hidden rounded-lg text-left ring-1 ring-hairline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
                                    inUse
                                        ? 'cursor-default ring-2 ring-primary'
                                        : 'hover:ring-primary/60',
                                )}
                            >
                                <img
                                    src={image.url}
                                    alt=""
                                    className="absolute inset-0 size-full object-cover transition duration-300 group-hover:scale-[1.03]"
                                />
                                <span className="absolute inset-0 bg-gradient-to-t from-black/85 via-black/15 to-transparent" />
                                <span className="absolute inset-x-0 bottom-0 flex items-end justify-between gap-2 p-2 text-[11px] font-medium text-white">
                                    <span>
                                        {inUse
                                            ? 'In use'
                                            : 'Use this background'}
                                    </span>
                                    <span className="text-white/60">
                                        {image.uploaded_label}
                                    </span>
                                </span>
                                {inUse ? (
                                    <span className="absolute top-2 right-2 flex size-5 items-center justify-center rounded-full bg-primary text-primary-foreground">
                                        <Check className="size-3" />
                                    </span>
                                ) : null}
                            </button>
                        );
                    })}
                </div>
            )}
        </div>
    );
}