import * as React from "react";
import { cn } from "@/lib/utils";

interface FileUploadProps {
  accept?: string;
  onFileSelected: (file: File) => void;
  hint?: string;
  disabled?: boolean;
}

/** Drag-and-drop + click-to-browse file picker, used for question imports. */
export function FileUpload({ accept, onFileSelected, hint, disabled }: FileUploadProps) {
  const [dragOver, setDragOver] = React.useState(false);
  const [fileName, setFileName] = React.useState<string | null>(null);
  const inputRef = React.useRef<HTMLInputElement>(null);

  function handleFiles(files: FileList | null) {
    const file = files?.[0];
    if (!file) return;
    setFileName(file.name);
    onFileSelected(file);
  }

  return (
    <div
      onDragOver={(e) => {
        e.preventDefault();
        setDragOver(true);
      }}
      onDragLeave={() => setDragOver(false)}
      onDrop={(e) => {
        e.preventDefault();
        setDragOver(false);
        handleFiles(e.dataTransfer.files);
      }}
      onClick={() => !disabled && inputRef.current?.click()}
      className={cn(
        "cursor-pointer rounded-lg border-2 border-dashed p-8 text-center transition-colors",
        dragOver ? "border-(--color-accent) bg-(--color-accent)/5" : "border-(--color-border)",
        disabled && "cursor-not-allowed opacity-50"
      )}
    >
      <input
        ref={inputRef}
        type="file"
        accept={accept}
        className="hidden"
        disabled={disabled}
        onChange={(e) => handleFiles(e.target.files)}
      />
      <p className="text-sm font-medium text-(--color-ink)">
        {fileName ?? "Drag a file here, or click to browse"}
      </p>
      {hint && <p className="mt-1 text-xs text-(--color-ink-faint)">{hint}</p>}
    </div>
  );
}