import React from "react";
import { FileUploader } from "@/components/ui/FileUploader";
import { resolveFileUrl } from "@/components/datatable/liststock/columns";

interface DocumentUploadProps {
  setSelectedFile: (file: File | null) => void;
  existingFileUrl?: string;
}

const DocumentUpload: React.FC<DocumentUploadProps> = ({ setSelectedFile, existingFileUrl }) => {
  const resolvedExistingUrl = existingFileUrl
    ? resolveFileUrl({ r_link: existingFileUrl })
    : "";

  return (
    <div className="group sm:col-span-2 lg:col-span-4 transition-all duration-200 hover:shadow-md hover:shadow-[#428B4D]/10">
      <div className="relative p-6 rounded-lg bg-gradient-to-br from-slate-50/80 to-white border-2 border-dashed border-slate-200 hover:border-[#428B4D]/50 transition-all duration-300 hover:shadow-md hover:shadow-[#428B4D]/10">
        {resolvedExistingUrl ? (
          <div className="mb-4">
            <a
              href={resolvedExistingUrl}
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center rounded-lg border border-[#428B4D]/40 bg-white px-3 py-1.5 text-xs font-semibold text-[#428B4D] transition hover:border-[#428B4D] hover:bg-[#428B4D] hover:text-white"
            >
              View Current Document
            </a>
          </div>
        ) : null}
        <FileUploader
          label="Upload Document"
          onFileChange={setSelectedFile}
          maxSizeMB={1}
          allowedTypes={["application/pdf", "image/png", "image/jpg", "image/jpeg"]}
        />
      </div>
    </div>
  );
};

export default DocumentUpload;