"use client";

import React, { useCallback, useState } from "react";
import { UploadCloudIcon, XIcon, Loader2Icon } from "lucide-react";
import { cn } from "@/lib/utils";

interface FileUploaderProps {
  onUploadSuccess: (url: string) => void;
  defaultImage?: string | null;
  className?: string;
  label?: string;
}

export function FileUploader({ onUploadSuccess, defaultImage, className, label = "آپلود تصویر" }: FileUploaderProps) {
  const [isDragging, setIsDragging] = useState(false);
  const [isUploading, setIsUploading] = useState(false);
  const [preview, setPreview] = useState<string | null>(defaultImage || null);
  const [error, setError] = useState<string | null>(null);

  const handleUpload = async (file: File) => {
    if (!file.type.startsWith("image/")) {
      setError("لطفا فقط فایل تصویری آپلود کنید.");
      return;
    }
    setError(null);
    setIsUploading(true);

    try {
      const formData = new FormData();
      formData.append("file", file);

      const res = await fetch("/api/upload", {
        method: "POST",
        body: formData,
      });

      if (!res.ok) throw new Error("Upload failed");

      const data = await res.json();
      if (data.success) {
        setPreview(data.url);
        onUploadSuccess(data.url);
      } else {
        throw new Error(data.error || "Upload failed");
      }
    } catch (err: any) {
      console.error(err);
      setError("خطا در آپلود فایل.");
    } finally {
      setIsUploading(false);
    }
  };

  const onDragOver = useCallback((e: React.DragEvent) => {
    e.preventDefault();
    setIsDragging(true);
  }, []);

  const onDragLeave = useCallback((e: React.DragEvent) => {
    e.preventDefault();
    setIsDragging(false);
  }, []);

  const onDrop = useCallback((e: React.DragEvent) => {
    e.preventDefault();
    setIsDragging(false);
    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
      handleUpload(e.dataTransfer.files[0]);
    }
  }, []);

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files.length > 0) {
      handleUpload(e.target.files[0]);
    }
  };

  return (
    <div className={cn("flex flex-col gap-2", className)}>
      <span className="text-sm font-bold text-slate-700 dark:text-slate-300">{label}</span>
      <label
        onDragOver={onDragOver}
        onDragLeave={onDragLeave}
        onDrop={onDrop}
        className={cn(
          "relative flex flex-col items-center justify-center w-full h-40 border-2 border-dashed rounded-2xl cursor-pointer transition-all duration-200 overflow-hidden",
          isDragging ? "border-primary bg-primary/5 shadow-inner" : "border-slate-300 dark:border-slate-700 hover:border-primary/50 hover:bg-slate-50 dark:hover:bg-slate-800/50",
          error && "border-red-500 bg-red-50/50 dark:bg-red-950/20"
        )}
      >
        <input type="file" className="hidden" accept="image/*" onChange={handleFileChange} disabled={isUploading} />
        
        {isUploading ? (
          <div className="flex flex-col items-center gap-3 text-primary animate-pulse z-10 relative">
            <Loader2Icon className="w-10 h-10 animate-spin" />
            <span className="font-bold text-sm">در حال پردازش و آپلود...</span>
          </div>
        ) : preview ? (
          <div className="relative w-full h-full group">
            <img src={preview} alt="Preview" className="w-full h-full object-contain p-2" />
            <div className="absolute inset-0 bg-slate-900/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center backdrop-blur-sm">
               <span className="text-white font-bold flex items-center gap-2 drop-shadow-md"><UploadCloudIcon className="w-5 h-5"/> ویرایش تصویر</span>
            </div>
            <button 
               type="button"
               onClick={(e) => { e.preventDefault(); setPreview(null); onUploadSuccess(""); }}
               className="absolute top-3 right-3 bg-red-500/90 backdrop-blur text-white p-1.5 rounded-full hover:bg-red-600 hover:scale-105 active:scale-95 transition-all shadow-lg border border-white/20"
            >
               <XIcon className="w-4 h-4" />
            </button>
          </div>
        ) : (
          <div className="flex flex-col items-center gap-3 text-slate-500 dark:text-slate-400 p-6 text-center z-10 relative">
            <div className={cn("p-4 bg-slate-100 dark:bg-slate-800 rounded-full transition-transform duration-300", isDragging && "scale-110 bg-primary/10 text-primary")}>
               <UploadCloudIcon className="w-8 h-8" />
            </div>
            <div className="space-y-1 mt-1">
              <p className="font-bold text-sm leading-relaxed text-slate-700 dark:text-slate-300">
                <span className="text-primary hover:underline underline-offset-4 pointer-events-none">برای آپلود کلیک کنید</span> یا فایل را بکشید
              </p>
              <p className="text-xs opacity-60">فرمت‌های PNG, JPG یا WEBP</p>
            </div>
          </div>
        )}
      </label>
      {error && <p className="text-[11px] font-black tracking-wider text-red-500 mt-1">{error}</p>}
    </div>
  );
}