"use client";

import * as React from "react";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Loader2 } from "lucide-react";

interface FileUploadAreaProps {
  onFileSelected?: (file: File) => void;
  isLoading?: boolean;
  className?: string;
}

const FileUploadArea = React.forwardRef<HTMLDivElement, FileUploadAreaProps>(
  ({ onFileSelected, isLoading = false, className }, ref) => {
    const [isDragging, setIsDragging] = React.useState(false);
    const fileInputRef = React.useRef<HTMLInputElement>(null);

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

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

    const handleDrop = (e: React.DragEvent) => {
      e.preventDefault();
      setIsDragging(false);

      const files = Array.from(e.dataTransfer.files);
      if (files.length > 0 && onFileSelected) {
        onFileSelected(files[0]);
      }
    };

    const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
      const files = Array.from(e.target.files || []);
      if (files.length > 0 && onFileSelected) {
        onFileSelected(files[0]);
      }
    };

    const handleClick = () => {
      if (!isLoading) {
        fileInputRef.current?.click();
      }
    };

    return (
      <div
        ref={ref}
        className={cn(
          "relative flex min-h-[150px] w-full cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed border-border bg-background p-6 text-center transition-colors hover:bg-muted/50",
          isDragging && "border-primary bg-primary/5",
          isLoading && "cursor-not-allowed opacity-50",
          className,
        )}
        onDragOver={handleDragOver}
        onDragLeave={handleDragLeave}
        onDrop={handleDrop}
        onClick={handleClick}
      >
        <input
          ref={fileInputRef}
          type="file"
          onChange={handleFileSelect}
          className="hidden"
          disabled={isLoading}
        />

        <div className="flex flex-col items-center gap-4">
          {isLoading && (
            <div className="rounded-full bg-muted p-4">
              <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
            </div>
          )}

          <div className="space-y-2">
            <h3 className="text-lg font-medium text-foreground">
              {isLoading
                ? "Processing file..."
                : "Drop files here or click to upload"}
            </h3>
            <p className="text-sm text-muted-foreground">
              {isLoading
                ? "Please wait while your file is being processed"
                : ""}
            </p>
          </div>

          {!isLoading && <Button size="sm">+ Upload</Button>}
        </div>
      </div>
    );
  },
);

FileUploadArea.displayName = "FileUploadArea";

export { FileUploadArea };