import React, { useEffect, useState } from "react";

type ImageUploaderProps = {
  inputRef?: React.RefObject<HTMLInputElement | null>;
  accept?: string;
  onFileChange?: (file: File | null) => void;
  style?: React.CSSProperties;
  file?: File | null;
  lang?: string;
};

const ImageUploader = ({
  inputRef,
  accept = "*/*",
  onFileChange,
  style,
  file = null,
  lang = "ar",
}: ImageUploaderProps) => {
  const [localFile, setLocalFile] = useState<File | null>(null);
  const [previewUrl, setPreviewUrl] = useState("");
  const safeLang = typeof lang === "string" ? lang : "ar";
  const currentFile = file || localFile;
  const isImage = Boolean(currentFile?.type?.startsWith("image/"));
  const isPdf = currentFile?.type === "application/pdf";

  useEffect(() => {
    if (!currentFile || (!isImage && !isPdf)) {
      setPreviewUrl("");
      return undefined;
    }

    const objectUrl = URL.createObjectURL(currentFile);
    setPreviewUrl(objectUrl);
    return () => URL.revokeObjectURL(objectUrl);
  }, [currentFile, isImage, isPdf]);

  const headerText =
    safeLang === "ar" ? "معاينة الملف المرفوع" : "Uploaded file preview";
  const imageAlt = safeLang === "ar" ? "معاينة الإيصال" : "Receipt preview";
  const pdfTitle = safeLang === "ar" ? "معاينة ملف PDF" : "PDF preview";
  const fallbackText =
    safeLang === "ar"
      ? "تم إرفاق الملف. لا تتوفر معاينة مباشرة لهذا النوع."
      : "File attached. Preview is not available for this file type.";
  const uploadLabel =
    safeLang === "ar"
      ? " ارفق صورة الحوالة او ملف pdf"
      : "Attach transfer receipt or pdf";

  return React.createElement(
    "div",
    null,
    React.createElement(
      "label",
      {
        style: {
          width: "100%",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          gap: "10px",
          padding: "12px 14px",
          borderRadius: "12px",
          border: "1px solid #dbeafe",
          background: "#f8fbff",
          color: "#1e293b",
          cursor: "pointer",
          fontSize: "0.92rem",
          fontWeight: 600,
          userSelect: "none",
          ...style,
        },
      },
      React.createElement("input", {
        ref: inputRef,
        type: "file",
        accept,
        onChange: (e: React.ChangeEvent<HTMLInputElement>) => {
          const nextFile = e.target.files?.[0] || null;
          setLocalFile(nextFile);
          onFileChange?.(nextFile);
        },
        style: { display: "none" },
      }),
      React.createElement(
        "svg",
        {
          width: "20",
          height: "20",
          viewBox: "0 0 24 24",
          fill: "none",
          stroke: "currentColor",
          strokeWidth: "2",
          strokeLinecap: "round",
          strokeLinejoin: "round",
          "aria-hidden": "true",
        },
        React.createElement("path", {
          d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4",
        }),
        React.createElement("polyline", { points: "17 8 12 3 7 8" }),
        React.createElement("line", { x1: "12", y1: "3", x2: "12", y2: "15" }),
      ),
      React.createElement("span", null, uploadLabel),
    ),
    currentFile
      ? React.createElement(
          "div",
          {
            style: {
              marginTop: "10px",
              borderRadius: "12px",
              border: "1px solid #dbeafe",
              background: "#f8fbff",
              padding: "12px",
            },
          },
          React.createElement(
            "p",
            {
              style: {
                margin: 0,
                marginBottom: "8px",
                fontSize: "0.9rem",
                color: "#1e293b",
                fontWeight: 500,
              },
            },
            headerText,
          ),
          previewUrl && isImage
            ? React.createElement("img", {
                src: previewUrl,
                alt: imageAlt,
                style: {
                  width: "100%",
                  maxHeight: "220px",
                  objectFit: "contain",
                  borderRadius: "10px",
                  border: "1px solid #e2e8f0",
                  background: "#fff",
                },
              })
            : previewUrl && isPdf
              ? React.createElement("iframe", {
                  src: previewUrl,
                  title: pdfTitle,
                  style: {
                    width: "100%",
                    height: "320px",
                    borderRadius: "10px",
                    border: "1px solid #e2e8f0",
                    background: "#fff",
                  },
                })
            : React.createElement(
                "div",
                {
                  style: {
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                    minHeight: "90px",
                    borderRadius: "10px",
                    border: "1px dashed #cbd5e1",
                    background: "#fff",
                    color: "#475569",
                    fontSize: "0.9rem",
                    padding: "10px",
                    textAlign: "center",
                  },
                },
                fallbackText,
              ),
        )
      : null,
  );
};

export default ImageUploader;