"use client";

import React, { useEffect, useState, useRef, useCallback } from "react";
import { UploadCloud, FileText, Sparkles, Shield, Scan } from "lucide-react";
import { useI18n } from "@/lib/i18n/context";
import { MAX_UPLOAD_MB } from "@/lib/limits";

export interface GlobalDropzoneOverlayProps {
  onFilesDropped: (files: File[]) => void;
  disabled?: boolean;
}

export function GlobalDropzoneOverlay({
  onFilesDropped,
  disabled = false,
}: GlobalDropzoneOverlayProps) {
  const { language } = useI18n();
  const isDe = language === "de";
  const [isDragActive, setIsDragActive] = useState(false);
  const dragCounterRef = useRef(0);

  const handleDragEnter = useCallback(
    (e: DragEvent) => {
      if (disabled) return;
      e.preventDefault();

      // Only trigger for actual file drags
      if (e.dataTransfer?.types && Array.from(e.dataTransfer.types).includes("Files")) {
        dragCounterRef.current += 1;
        if (dragCounterRef.current === 1) {
          setIsDragActive(true);
        }
      }
    },
    [disabled]
  );

  const handleDragOver = useCallback(
    (e: DragEvent) => {
      if (disabled) return;
      e.preventDefault();
      if (e.dataTransfer) {
        e.dataTransfer.dropEffect = "copy";
      }
    },
    [disabled]
  );

  const handleDragLeave = useCallback(
    (e: DragEvent) => {
      if (disabled) return;
      e.preventDefault();
      dragCounterRef.current -= 1;
      if (dragCounterRef.current <= 0) {
        dragCounterRef.current = 0;
        setIsDragActive(false);
      }
    },
    [disabled]
  );

  const handleDrop = useCallback(
    (e: DragEvent) => {
      if (disabled) return;
      e.preventDefault();
      e.stopPropagation();

      dragCounterRef.current = 0;
      setIsDragActive(false);

      if (e.dataTransfer?.files && e.dataTransfer.files.length > 0) {
        const filesArray = Array.from(e.dataTransfer.files);
        onFilesDropped(filesArray);
      }
    },
    [disabled, onFilesDropped]
  );

  useEffect(() => {
    window.addEventListener("dragenter", handleDragEnter);
    window.addEventListener("dragover", handleDragOver);
    window.addEventListener("dragleave", handleDragLeave);
    window.addEventListener("drop", handleDrop);

    return () => {
      window.removeEventListener("dragenter", handleDragEnter);
      window.removeEventListener("dragover", handleDragOver);
      window.removeEventListener("dragleave", handleDragLeave);
      window.removeEventListener("drop", handleDrop);
    };
  }, [handleDragEnter, handleDragOver, handleDragLeave, handleDrop]);

  if (!isDragActive) return null;

  return (
    <div
      data-testid="global-dropzone-overlay"
      className="fixed inset-0 z-[100] flex items-center justify-center bg-black/75 backdrop-blur-sm pointer-events-auto animate-fade-in select-none font-sans"
    >
      {/* High-visibility Zenith Silver Frame */}
      <div className="relative max-w-2xl w-full mx-6 p-8 sm:p-12 border-2 border-dashed border-white bg-[#0A0D12]/90 text-white text-center shadow-2xl overflow-hidden">
        {/* Sharp Corner Accents */}
        <div className="absolute top-0 left-0 w-3.5 h-3.5 border-t-2 border-l-2 border-emerald-400"></div>
        <div className="absolute top-0 right-0 w-3.5 h-3.5 border-t-2 border-r-2 border-emerald-400"></div>
        <div className="absolute bottom-0 left-0 w-3.5 h-3.5 border-b-2 border-l-2 border-emerald-400"></div>
        <div className="absolute bottom-0 right-0 w-3.5 h-3.5 border-b-2 border-r-2 border-emerald-400"></div>

        {/* Animated Laser Scanline Glow */}
        <div className="animate-scanline !bg-emerald-400 shadow-[0_0_15px_#34d399]"></div>

        {/* Top Status Pill */}
        <div className="inline-flex items-center gap-2 bg-white/10 border border-white/20 px-3 py-1 mb-6 font-mono text-[11px] uppercase tracking-caps text-emerald-400">
          <Scan className="w-3.5 h-3.5 text-emerald-400 animate-pulse" />
          <span>{isDe ? "Bereit zum Hochladen" : "Ready to upload"}</span>
        </div>

        {/* Center Icon */}
        <div className="w-16 h-16 sm:w-20 sm:h-20 mx-auto mb-5 bg-white text-black flex items-center justify-center shadow-lg transform transition-transform">
          <UploadCloud className="w-8 h-8 sm:w-10 sm:h-10 text-black" />
        </div>

        {/* Headline */}
        <h2 className="font-display text-2xl sm:text-4xl font-bold tracking-tight text-white mb-2">
          {isDe ? "Belege hier ablegen" : "Drop Receipts Here"}
        </h2>

        <p className="text-sm sm:text-base text-slate-300 max-w-md mx-auto mb-6">
          {isDe
            ? "Lassen Sie die Dateien los, um die automatische Stapel-Verarbeitung & KI-Extraktion zu starten."
            : "Release files to begin automatic batch processing and AI vision extraction."}
        </p>

        {/* Accepted Formats Chips */}
        <div className="flex flex-wrap items-center justify-center gap-2 pt-2 border-t border-white/15">
          <span className="font-mono text-[10px] sm:text-[11px] bg-white/10 border border-white/20 px-2.5 py-1 text-slate-200 uppercase tracking-wider">
            {isDe ? "PDF (Mehrseitig)" : "PDF (Multi-page)"}
          </span>
          <span className="font-mono text-[10px] sm:text-[11px] bg-white/10 border border-white/20 px-2.5 py-1 text-slate-200 uppercase tracking-wider">
            PNG • JPG • WEBP • HEIC
          </span>
          <span className="font-mono text-[10px] sm:text-[11px] bg-white/10 border border-white/20 px-2.5 py-1 text-slate-200 uppercase tracking-wider">
            {isDe ? `Max ${MAX_UPLOAD_MB} MB / Datei` : `Max ${MAX_UPLOAD_MB} MB / file`}
          </span>
        </div>
      </div>
    </div>
  );
}
