"use client";

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

interface ZipUploaderProps {
  onFileSelect: (file: File | null) => void;
  className?: string;
  label?: string;
}

export function ZipUploader({ onFileSelect, className, label = "آپلود فایل پشتیبان" }: ZipUploaderProps) {
  const [isDragging, setIsDragging] = useState(false);
  const [selectedFile, setSelectedFile] = useState<File | null>(null);
  const [error, setError] = useState<string | null>(null);

  const handleFile = (file: File) => {
    if (!file.name.endsWith(".zip") && file.type !== "application/zip" && file.type !== "application/x-zip-compressed") {
      setError("لطفاً فقط فایل با پسوند .zip آپلود کنید.");
      return;
    }
    setError(null);
    setSelectedFile(file);
    onFileSelect(file);
  };

  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) {
      handleFile(e.dataTransfer.files[0]);
    }
  }, []);

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

  const handleClear = (e: React.MouseEvent) => {
    e.preventDefault();
    setSelectedFile(null);
    setError(null);
    onFileSelect(null);
  };

  const formatSize = (bytes: number) => {
    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
    return `${(bytes / 1024 / 1024).toFixed(2)} MB`;
  };

  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-emerald-500 bg-emerald-50 dark:bg-emerald-900/20 shadow-inner"
            : selectedFile
            ? "border-emerald-400 bg-emerald-50/50 dark:bg-emerald-900/10"
            : "border-slate-300 dark:border-slate-700 hover:border-emerald-400/60 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=".zip,application/zip,application/x-zip-compressed"
          onChange={handleFileChange}
        />

        {selectedFile ? (
          <div className="flex flex-col items-center gap-3 z-10 relative text-center p-4">
            <div className="p-3 bg-emerald-100 dark:bg-emerald-900/40 rounded-full">
              <ArchiveIcon className="w-8 h-8 text-emerald-600 dark:text-emerald-400" />
            </div>
            <div className="space-y-0.5">
              <p className="font-bold text-sm text-emerald-700 dark:text-emerald-300 max-w-[220px] truncate">
                {selectedFile.name}
              </p>
              <p className="text-xs text-muted-foreground">{formatSize(selectedFile.size)}</p>
            </div>
            <button
              type="button"
              onClick={handleClear}
              className="absolute top-2 left-2 bg-red-500/90 text-white p-1 rounded-full hover:bg-red-600 transition-all shadow-sm"
            >
              <XIcon className="w-3 h-3" />
            </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-emerald-100 dark:bg-emerald-900/30 text-emerald-600"
            )}>
              <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-emerald-600 dark:text-emerald-400 hover:underline underline-offset-4 pointer-events-none">
                  برای آپلود کلیک کنید
                </span>{" "}
                یا فایل را بکشید
              </p>
              <p className="text-xs opacity-60">فقط فرمت <span className="font-bold font-mono">.zip</span> قابل قبول است</p>
            </div>
          </div>
        )}
      </label>
      {error && <p className="text-[11px] font-black tracking-wider text-red-500 mt-1">{error}</p>}
    </div>
  );
}