import { router } from '@inertiajs/react';
import { useEffect, useState  } from 'react';
import type {ChangeEvent} from 'react';
import InputError from '@/components/input-error';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import type { BrandingLogoField } from '@/types/branding';

type LogoUploadFieldProps = {
    name: BrandingLogoField;
    label: string;
    hint: string;
    accept: string;
    currentUrl: string | null;
    removeUrl?: string;
    error?: string;
    onPreviewChange?: (previewUrl: string | null) => void;
};

export default function LogoUploadField({
    name,
    label,
    hint,
    accept,
    currentUrl,
    removeUrl,
    error,
    onPreviewChange,
}: LogoUploadFieldProps) {
    const [localPreviewUrl, setLocalPreviewUrl] = useState<string | null>(null);
    const shownUrl = localPreviewUrl ?? currentUrl;

    useEffect(() => {
        return () => {
            if (localPreviewUrl) {
                URL.revokeObjectURL(localPreviewUrl);
            }
        };
    }, [localPreviewUrl]);

    const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
        const file = event.target.files?.[0] ?? null;
        const nextPreviewUrl = file ? URL.createObjectURL(file) : null;

        setLocalPreviewUrl(nextPreviewUrl);
        onPreviewChange?.(nextPreviewUrl);
    };

    return (
        <div className="grid gap-2">
            <Label htmlFor={name}>{label}</Label>

            <div className="flex items-center gap-4">
                <div className="flex size-20 shrink-0 items-center justify-center overflow-hidden rounded-md border border-dashed bg-muted/40">
                    {shownUrl ? (
                        <img
                            src={shownUrl}
                            alt={label}
                            className="max-h-16 max-w-16 object-contain"
                        />
                    ) : (
                        <span className="px-2 text-center text-xs text-muted-foreground">
                            No file
                        </span>
                    )}
                </div>

                <div className="grid flex-1 gap-2">
                    <Input
                        id={name}
                        name={name}
                        type="file"
                        accept={accept}
                        onChange={handleFileChange}
                    />

                    <div className="flex items-center justify-between gap-2">
                        <p className="text-xs text-muted-foreground">{hint}</p>

                        {removeUrl && currentUrl && !localPreviewUrl && (
                            <Button
                                type="button"
                                variant="ghost"
                                size="sm"
                                onClick={() =>
                                    router.delete(removeUrl, {
                                        preserveScroll: true,
                                    })
                                }
                            >
                                Remove
                            </Button>
                        )}
                    </div>
                </div>
            </div>

            <InputError message={error} />
        </div>
    );
}