import React, { useState } from "react";
import { Button } from "@/components/ui/button";
import {
    Dialog,
    DialogContent,
    DialogHeader,
    DialogTitle,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { FileUp, X } from "lucide-react";

interface UploadDocProps {
    isOpen: boolean;
    onClose: () => void;
    onUpload: (file: File) => void;
}

const UploadDoc = ({ isOpen, onClose, onUpload }: UploadDocProps) => {
    const [selectedFile, setSelectedFile] = useState<File | null>(null);
    const [dragActive, setDragActive] = useState<boolean>(false);

    const handleDrag = (e: React.DragEvent) => {
        e.preventDefault();
        e.stopPropagation();
        if (e.type === "dragenter" || e.type === "dragover") {
            setDragActive(true);
        } else if (e.type === "dragleave") {
            setDragActive(false);
        }
    };

    const handleDrop = (e: React.DragEvent) => {
        e.preventDefault();
        e.stopPropagation();
        setDragActive(false);

        const file = e.dataTransfer.files[0];
        if (file && file.type === "application/pdf") {
            setSelectedFile(file);
        } else {
            alert("Hanya file PDF yang diperbolehkan");
        }
    };

    const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const file = e.target.files?.[0];
        if (file && file.type === "application/pdf") {
            setSelectedFile(file);
        } else {
            alert("Hanya file PDF yang diperbolehkan");
        }
    };

    const handleUpload = () => {
        if (selectedFile) {
            onUpload(selectedFile);
            onClose();
        }
    };

    return (
        <Dialog open={isOpen} onOpenChange={onClose}>
            <DialogContent className="sm:max-w-md">
                <DialogHeader>
                    <DialogTitle>Lampiran *</DialogTitle>
                    <div className="flex flex-row items-center">
                        <div className="h-8 w-[3px] bg-gray-300 mr-2" />
                        <small>
                            Silahkan unggah dokumen Anda dengan drag & drop
                            semua berkas atau klik pada kotak ini. Ukuran file
                            tidak boleh melebihi 20 MB.
                        </small>
                    </div>
                </DialogHeader>
                <div
                    className={`mt-4 p-6 border-2 border-dashed rounded-lg text-center ${
                        dragActive
                            ? "border-teal-500 bg-teal-50"
                            : "border-gray-300"
                    }`}
                    onDragEnter={handleDrag}
                    onDragLeave={handleDrag}
                    onDragOver={handleDrag}
                    onDrop={handleDrop}
                >
                    <FileUp className="mx-auto h-12 w-12 text-gray-400" />
                    <div className="mt-4">
                        <p className="text-sm text-gray-600">
                            Drag and drop file PDF di sini atau
                        </p>
                        <label className="mt-2 cursor-pointer">
                            <Input
                                type="file"
                                accept=".pdf"
                                className="hidden"
                                onChange={handleFileChange}
                            />
                            <span className="text-teal-600 hover:text-teal-500">
                                Pilih file
                            </span>
                        </label>
                    </div>
                    {selectedFile && (
                        <div className="mt-4 p-2 bg-gray-50 rounded flex items-center justify-between">
                            <span className="text-sm text-gray-600">
                                {selectedFile.name}
                            </span>
                            <Button
                                variant="ghost"
                                size="sm"
                                onClick={() => setSelectedFile(null)}
                            >
                                <X className="h-4 w-4" />
                            </Button>
                        </div>
                    )}
                </div>
                <div className="mt-4 flex justify-end gap-3">
                    <Button variant="outline" onClick={onClose}>
                        Batal
                    </Button>
                    <Button
                        onClick={handleUpload}
                        disabled={!selectedFile}
                        className="bg-teal-600 hover:bg-teal-700"
                    >
                        Unggah
                    </Button>
                </div>
            </DialogContent>
        </Dialog>
    );
};

export default UploadDoc;
