"use client";

import { useRef, useState } from "react";
import { Input } from "@/components/ui/input";
import { Upload } from "lucide-react";
import { cn } from "@/lib/utils";
import { Card, CardContent } from "./ui/card";

interface ImageUploadAreaProps {
  onFilesSelected: (files: FileList | null) => void;
}

export function ImageUploadArea({ onFilesSelected }: ImageUploadAreaProps) {
  const [isDraggingOver, setIsDraggingOver] = useState(false);
  const fileInputRef = useRef<HTMLInputElement>(null);

  const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    onFilesSelected(e.target.files);
    if (e.target) e.target.value = "";
  };

  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    setIsDraggingOver(true);
  };

  const handleDragLeave = (e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    setIsDraggingOver(false);
  };

  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    setIsDraggingOver(false);
    onFilesSelected(e.dataTransfer.files);
  };

  return (
    <Card>
      <CardContent className="pt-6">
        <div className="space-y-4">
          <h3 className="text-lg font-medium">Bilder hochladen</h3>
          <div
            className={cn(
              "w-full h-48 rounded-lg border-2 border-dashed flex items-center justify-center relative transition-colors cursor-pointer hover:border-primary/60",
              isDraggingOver ? "border-primary bg-accent" : "border-input"
            )}
            onDragOver={handleDragOver}
            onDragLeave={handleDragLeave}
            onDrop={handleDrop}
            onClick={() => fileInputRef.current?.click()}
          >
            <div className="flex flex-col items-center justify-center text-center text-muted-foreground">
              <Upload className="w-8 h-8 mb-2" />
              <p className="font-semibold">Klicken oder per Drag & Drop hochladen</p>
              <p className="text-xs text-muted-foreground mt-1">PNG, JPG, WEBP werden unterstützt</p>
            </div>
            <Input type="file" ref={fileInputRef} onChange={handleImageChange} className="hidden" accept="image/*" multiple />
          </div>
        </div>
      </CardContent>
    </Card>
  );
}