import { useRef, useState, type DragEvent } from "react";
import { cn } from "../lib/cn";
import { ImagePlusIcon, SpinnerIcon } from "./icons";

interface DropzoneProps {
  onFile: (file: File) => void;
  loading?: boolean;
  error?: string | null;
}

export function Dropzone({ onFile, loading = false, error }: DropzoneProps) {
  const inputRef = useRef<HTMLInputElement>(null);
  const [dragging, setDragging] = useState(false);

  function handleFiles(files: FileList | null) {
    const file = files?.[0];
    if (file) onFile(file);
  }

  function onDrop(e: DragEvent<HTMLDivElement>) {
    e.preventDefault();
    setDragging(false);
    handleFiles(e.dataTransfer.files);
  }

  return (
    <div className="flex h-full w-full items-center justify-center p-6">
      <div
        role="button"
        tabIndex={0}
        onClick={() => inputRef.current?.click()}
        onKeyDown={(e) => (e.key === "Enter" || e.key === " ") && inputRef.current?.click()}
        onDragOver={(e) => {
          e.preventDefault();
          setDragging(true);
        }}
        onDragLeave={() => setDragging(false)}
        onDrop={onDrop}
        className={cn(
          "group relative flex w-full max-w-xl cursor-pointer flex-col items-center justify-center gap-4",
          "rounded-2xl border-2 border-dashed px-8 py-16 text-center transition-transform",
          dragging
            ? "border-accent-500 bg-accent-500/10"
            : "border-zinc-700 bg-zinc-900/60 hover:border-zinc-600 hover:bg-zinc-900",
        )}
      >
        <div
          className={cn(
            "flex size-16 items-center justify-center rounded-2xl bg-zinc-800 text-zinc-400 transition-transform",
            "group-hover:text-accent-400",
            dragging && "text-accent-400",
          )}
        >
          {loading ? <SpinnerIcon className="size-7 animate-spin" /> : <ImagePlusIcon className="size-7" />}
        </div>

        <div className="space-y-1">
          <p className="text-base font-semibold text-zinc-100">
            {loading ? "Loading image…" : dragging ? "Drop to load" : "Drop an image here"}
          </p>
          <p className="text-sm text-zinc-400">or click to browse · paste from your clipboard</p>
        </div>

        <p className="text-xs text-zinc-500">JPEG · PNG · WebP · AVIF · GIF · BMP · SVG</p>

        {error && (
          <p className="max-w-sm rounded-lg border border-red-500/20 bg-red-500/10 px-3 py-2 text-sm text-red-400">
            {error}
          </p>
        )}

        <input
          ref={inputRef}
          type="file"
          accept="image/*"
          className="hidden"
          onChange={(e) => {
            handleFiles(e.target.files);
            e.target.value = "";
          }}
        />
      </div>
    </div>
  );
}