"use client";

import type { VariantProps } from "class-variance-authority";
import { ImageIcon } from "lucide-react";
import type React from "react";
import { useImperativeHandle, useRef } from "react";
import { Button, type buttonVariants } from "@/components/ui/button";
import { IMAGE_ACCEPT } from "@/lib/constants";

interface ImagePickerProps extends VariantProps<typeof buttonVariants> {
	/** Called with ALL selected files (array of 1..N). */
	onFilesSelect?: (files: File[]) => void;
	className?: string;
	children?: React.ReactNode;
	disabled?: boolean;
	/** Allow selecting multiple images at once (native OS picker multi-select). */
	multiple?: boolean;
	/** Expose an imperative trigger so parents can open the file dialog via ref */
	triggerRef?: React.Ref<{ open: () => void }>;
}

export function ImagePicker({
	onFilesSelect,
	className,
	children,
	variant = "ghost",
	size = "icon",
	disabled = false,
	multiple = false,
	triggerRef,
}: ImagePickerProps) {
	const fileInputRef = useRef<HTMLInputElement>(null);

	// Expose `.open()` to parent through triggerRef
	useImperativeHandle(triggerRef, () => ({
		open() {
			fileInputRef.current?.click();
		},
	}));

	const handleButtonClick = () => {
		fileInputRef.current?.click();
	};

	const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
		const fileList = event.target.files;
		if (fileList && fileList.length > 0 && onFilesSelect) {
			onFilesSelect(Array.from(fileList));
		}
		// Reset so the same file(s) can be re-selected
		if (fileInputRef.current) {
			fileInputRef.current.value = "";
		}
	};

	return (
		<>
			<input
				ref={fileInputRef}
				type="file"
				name="image-upload"
				accept={IMAGE_ACCEPT}
				multiple={multiple}
				onChange={handleFileChange}
				className="hidden"
			/>
			<Button
				onClick={handleButtonClick}
				variant={variant}
				size={size}
				className={className}
				disabled={disabled}
				aria-label="Attach image"
			>
				{children || <ImageIcon className="h-4 w-4" />}
			</Button>
		</>
	);
}