parakasa/components/ui/image-upload.tsx

"use client"

import { useState, useRef } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Loader2, Upload, X, Image as ImageIcon } from "lucide-react"
import imageCompression from "browser-image-compression"
import { createClient } from "@/lib/supabase-browser"
import { toast } from "sonner"
import Image from "next/image"

interface ImageUploadProps {
    value?: string
    onChange: (url: string) => void
    onRemove: () => void
    disabled?: boolean
}

export function ImageUpload({ value, onChange, onRemove, disabled }: ImageUploadProps) {
    const [loading, setLoading] = useState(false)
    const fileInputRef = useRef<HTMLInputElement>(null)
    const supabase = createClient()

    const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
        const file = e.target.files?.[0]
        if (!file) return

        setLoading(true)
        try {
            // 1. Client-side Compression
            const options = {
                maxSizeMB: 1, // Max 1MB
                maxWidthOrHeight: 1920, // Max 1920px width/height
                useWebWorker: true,
                fileType: "image/webp" // Convert to WebP if possible
            }

            // Note: browser-image-compression might return Blob instead of File
            const compressedFile = await imageCompression(file, options)

            // Create a unique file name
            // folder structure: sliders/[timestamp]-[random].webp
            const fileExt = "webp" // we are forcing conversion to webp usually, or use compressedFile.type
            const fileName = `${Date.now()}-${Math.floor(Math.random() * 1000)}.${fileExt}`
            const filePath = `uploads/${fileName}`

            // 2. Upload to Supabase
            const { error: uploadError } = await supabase.storage
                .from("images")
                .upload(filePath, compressedFile)

            if (uploadError) {
                throw uploadError
            }

            // 3. Get Public URL
            const { data: { publicUrl } } = supabase.storage
                .from("images")
                .getPublicUrl(filePath)

            onChange(publicUrl)
            toast.success("Resim yüklendi ve optimize edildi.")

        } catch (error: any) {
            console.error("Upload error:", error)
            toast.error("Resim yüklenirken hata oluştu: " + error.message)
        } finally {
            setLoading(false)
            if (fileInputRef.current) {
                fileInputRef.current.value = ""
            }
        }
    }

    return (
        <div className="space-y-4 w-full">
            <Label>Görsel</Label>

            {value ? (
                <div className="relative aspect-video w-full max-w-md rounded-lg overflow-hidden border bg-slate-100 dark:bg-slate-800">
                    <Image
                        src={value}
                        alt="Upload preview"
                        fill
                        className="object-cover"
                    />
                    <Button
                        type="button"
                        onClick={onRemove}
                        variant="destructive"
                        size="icon"
                        className="absolute top-2 right-2 h-8 w-8"
                        disabled={disabled}
                    >
                        <X className="h-4 w-4" />
                    </Button>
                </div>
            ) : (
                <div
                    onClick={() => fileInputRef.current?.click()}
                    className="
                        border-2 border-dashed border-slate-300 dark:border-slate-700 
                        rounded-lg p-12 
                        flex flex-col items-center justify-center 
                        text-slate-500 dark:text-slate-400
                        hover:bg-slate-50 dark:hover:bg-slate-900/50
                        transition cursor-pointer
                        w-full max-w-md
                    "
                >
                    <input
                        type="file"
                        accept="image/*"
                        className="hidden"
                        ref={fileInputRef}
                        onChange={handleFileChange}
                        disabled={loading || disabled}
                    />

                    {loading ? (
                        <div className="flex flex-col items-center gap-2">
                            <Loader2 className="h-10 w-10 animate-spin text-primary" />
                            <p className="text-sm font-medium">Optimize ediliyor ve yükleniyor...</p>
                        </div>
                    ) : (
                        <div className="flex flex-col items-center gap-2">
                            <div className="p-4 bg-slate-100 dark:bg-slate-800 rounded-full">
                                <Upload className="h-6 w-6" />
                            </div>
                            <p className="text-sm font-medium">Resim Yükle</p>
                            <p className="text-xs text-muted-foreground text-center">
                                Tıklayın veya sürükleyin.<br />
                                (Otomatik sıkıştırma: Max 1MB, WebP)
                            </p>
                        </div>
                    )}
                </div>
            )}
        </div>
    )
}