"use client";
import { useCallback, useState } from "react";
import { useDropzone } from "react-dropzone";
import { motion, AnimatePresence } from "framer-motion";
import { Upload, ImageIcon, X, Sparkles, ScanLine } from "lucide-react";

interface DropZoneProps {
  onImageSelected: (file: File) => void;
  isAnalyzing: boolean;
  previewUrl: string | null;
  onClear: () => void;
}

export default function DropZone({ onImageSelected, isAnalyzing, previewUrl, onClear }: DropZoneProps) {
  const [isDragActive, setIsDragActive] = useState(false);

  const onDrop = useCallback((acceptedFiles: File[]) => {
    const file = acceptedFiles[0];
    if (file) onImageSelected(file);
    setIsDragActive(false);
  }, [onImageSelected]);

  const { getRootProps, getInputProps, isDragReject } = useDropzone({
    onDrop,
    onDragEnter: () => setIsDragActive(true),
    onDragLeave: () => setIsDragActive(false),
    accept: { "image/jpeg": [".jpg", ".jpeg"], "image/png": [".png"], "image/webp": [".webp"] },
    maxFiles: 1,
    maxSize: 10 * 1024 * 1024,
    disabled: isAnalyzing,
  });

  return (
    <div className="relative w-full">
      <AnimatePresence mode="wait">
        {previewUrl ? (
          <motion.div
            key="preview"
            initial={{ opacity: 0, scale: 0.96 }}
            animate={{ opacity: 1, scale: 1 }}
            exit={{ opacity: 0, scale: 0.96 }}
            transition={{ duration: 0.4, ease: [0.22, 1, 0.36, 1] }}
            className="relative rounded-phi-lg overflow-hidden"
            style={{ aspectRatio: "16/9" }}
          >
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img src={previewUrl} alt="Portfolio screenshot" className="w-full h-full object-contain" style={{ background: "#071020" }} />

            {/* Scanning overlay */}
            <AnimatePresence>
              {isAnalyzing && (
                <motion.div
                  initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}
                  className="absolute inset-0 flex flex-col items-center justify-center"
                  style={{ background: "rgba(7, 16, 32, 0.82)" }}
                >
                  <motion.div
                    className="absolute left-0 right-0 h-0.5"
                    style={{ background: "linear-gradient(90deg, transparent, #1D6FEB, transparent)" }}
                    animate={{ top: ["0%", "100%"] }}
                    transition={{ duration: 1.8, repeat: Infinity, ease: "linear" }}
                  />
                  <motion.div animate={{ rotate: 360 }} transition={{ duration: 1.5, repeat: Infinity, ease: "linear" }} className="mb-4">
                    <ScanLine size={40} style={{ color: "#1D6FEB" }} />
                  </motion.div>
                  <p className="font-display font-semibold text-phi-lg gradient-text">AI Analyzing…</p>
                  <p className="text-phi-sm font-data mt-1" style={{ color: "#7A9ABF" }}>Llama-4-Scout-17B Vision</p>
                  <div className="flex gap-2 mt-4">
                    {[0, 1, 2].map((i) => (
                      <motion.div key={i} className="w-2 h-2 rounded-full" style={{ background: "#1D6FEB" }}
                        animate={{ scale: [1, 1.5, 1], opacity: [0.4, 1, 0.4] }}
                        transition={{ duration: 0.8, repeat: Infinity, delay: i * 0.25 }} />
                    ))}
                  </div>
                </motion.div>
              )}
            </AnimatePresence>

            {!isAnalyzing && (
              <motion.button
                initial={{ opacity: 0, scale: 0.8 }} animate={{ opacity: 1, scale: 1 }}
                whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}
                onClick={onClear}
                className="absolute top-3 right-3 w-8 h-8 rounded-full glass flex items-center justify-center transition-colors"
                style={{ color: "#7A9ABF" }}
              >
                <X size={14} />
              </motion.button>
            )}
          </motion.div>
        ) : (
          <motion.div
            key="dropzone"
            initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}
            transition={{ duration: 0.3 }}
            {...getRootProps()}
            className="relative cursor-pointer rounded-phi-lg transition-all duration-300 select-none flex flex-col items-center justify-center gap-4 p-10"
            style={{
              aspectRatio: "16/9",
              border: isDragActive ? "2px dashed rgba(29, 111, 235, 0.8)" : "2px dashed rgba(29, 111, 235, 0.25)",
              background: isDragActive ? "rgba(29, 111, 235, 0.06)" : "rgba(17, 38, 84, 0.3)",
            }}
          >
            <input {...getInputProps()} />

            <motion.div
              className="relative"
              animate={isDragActive ? { scale: 1.15, rotate: 5 } : { scale: 1, rotate: 0 }}
              transition={{ type: "spring", stiffness: 300 }}
            >
              <motion.div
                className="absolute inset-0 rounded-full"
                style={{ border: "1px solid rgba(29, 111, 235, 0.3)", transform: "scale(2.2)" }}
                animate={{ rotate: 360 }}
                transition={{ duration: 12, repeat: Infinity, ease: "linear" }}
              />
              <motion.div
                className="absolute inset-0 rounded-full"
                style={{ border: "1px solid rgba(245, 200, 66, 0.18)", transform: "scale(1.6)" }}
                animate={{ rotate: -360 }}
                transition={{ duration: 8, repeat: Infinity, ease: "linear" }}
              />
              <div className="relative w-16 h-16 rounded-full flex items-center justify-center" style={{ background: "rgba(29, 111, 235, 0.15)" }}>
                {isDragActive
                  ? <motion.div initial={{ scale: 0 }} animate={{ scale: 1 }} transition={{ type: "spring", stiffness: 400 }}>
                      <Sparkles size={28} style={{ color: "#1D6FEB" }} />
                    </motion.div>
                  : <ImageIcon size={28} style={{ color: "#4A90F5" }} />
                }
              </div>
            </motion.div>

            <div className="text-center mt-4">
              <p className="font-display font-semibold text-phi-lg" style={{ color: "#EEF5FF" }}>
                {isDragActive ? "Drop to analyze" : "Drop your portfolio screenshot"}
              </p>
              <p className="text-phi-sm mt-1" style={{ color: "#7A9ABF" }}>
                Drag & drop or{" "}
                <span style={{ color: "#4A90F5" }} className="underline underline-offset-2">browse files</span>
              </p>
              <p className="text-phi-xs mt-3 font-data" style={{ color: "#7A9ABF" }}>JPG · PNG · WebP · Max 10MB</p>
            </div>

            <div className="absolute bottom-4 flex items-center gap-2 text-phi-xs font-data" style={{ color: "rgba(29, 111, 235, 0.6)" }}>
              <Upload size={11} />
              <span>Powered by Llama-4-Scout-17B via Groq</span>
            </div>
          </motion.div>
        )}
      </AnimatePresence>

      <AnimatePresence>
        {isDragReject && (
          <motion.p
            initial={{ opacity: 0, y: -4 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0 }}
            className="text-phi-xs font-data text-center mt-2"
            style={{ color: "#F03E3E" }}
          >
            Invalid file type. Please use JPG, PNG, or WebP.
          </motion.p>
        )}
      </AnimatePresence>
    </div>
  );
}