import { useState, useRef } from "react";
import Cropper from "react-cropper";
import "cropperjs/dist/cropper.css"; // <--- This line requires 'npm install cropperjs'
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/Components/ui/dialog";
import { Button } from "@/Components/ui/button";
import { Loader2, ZoomIn, ZoomOut, RotateCw } from "lucide-react";

export default function ImageCropperDialog({ 
    open, 
    setOpen, 
    imageSrc, 
    onCropComplete, 
    aspectRatio = 1, 
    title = "Crop Image"
}) {
    const cropperRef = useRef(null);
    const [loading, setLoading] = useState(false);

    const handleCrop = () => {
        setLoading(true);
        const cropper = cropperRef.current?.cropper;
        
        if (cropper) {
            cropper.getCroppedCanvas().toBlob((blob) => {
                onCropComplete(blob);
                setLoading(false);
                setOpen(false);
            }, 'image/jpeg', 0.9);
        }
    };

    return (
        <Dialog open={open} onOpenChange={setOpen}>
            <DialogContent className="sm:max-w-lg">
                <DialogHeader>
                    <DialogTitle>{title}</DialogTitle>
                </DialogHeader>
                
                <div className="mt-4">
                    <Cropper
                        src={imageSrc}
                        style={{ height: 400, width: "100%" }}
                        initialAspectRatio={aspectRatio}
                        aspectRatio={aspectRatio}
                        guides={true}
                        ref={cropperRef}
                        viewMode={1}
                        minCropBoxHeight={10}
                        minCropBoxWidth={10}
                        background={false}
                        responsive={true}
                        autoCropArea={1}
                        checkOrientation={false} 
                    />
                </div>

                <div className="flex justify-between items-center mt-4">
                    <div className="flex gap-2">
                        <Button variant="outline" size="icon" onClick={() => cropperRef.current?.cropper.rotate(90)}>
                            <RotateCw className="w-4 h-4" />
                        </Button>
                        <Button variant="outline" size="icon" onClick={() => cropperRef.current?.cropper.zoom(0.1)}>
                            <ZoomIn className="w-4 h-4" />
                        </Button>
                        <Button variant="outline" size="icon" onClick={() => cropperRef.current?.cropper.zoom(-0.1)}>
                            <ZoomOut className="w-4 h-4" />
                        </Button>
                    </div>
                    <div className="flex gap-2">
                        <Button variant="ghost" onClick={() => setOpen(false)}>Cancel</Button>
                        <Button onClick={handleCrop} disabled={loading}>
                            {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                            Save & Upload
                        </Button>
                    </div>
                </div>
            </DialogContent>
        </Dialog>
    );
}